/* =============================================================
   PLANES DE GRADUACIÓN — Minimal Cards Grid
   Estilo basado en la sección "Trajiste tu propio look" de
   planes-quinceanera (.pfp). Limpio, editorial, 3 cards
   en grid con la central destacada.
   ============================================================= */

/* =============================================================
   HERO — efecto cinematográfico marrón (estilo home, tono cálido)
   Vignette + grain layered sobre la foto del diploma.
   ============================================================= */
.grad-hero .pp__hero-content { z-index: 3; }
.grad-hero .pp__hero-scroll  { z-index: 3; }

.grad-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.grad-hero__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: scale(1.05);
  /* foto al 60% (40% más tenue) */
  opacity: 0.60;
  filter: saturate(0.85) brightness(0.88);
}
/* Vignette cálido — más intenso, gradient vertical + radial en tonos marrones */
.grad-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    /* top: darken fuerte para contraste del header */
    linear-gradient(180deg,
      rgba(28, 16, 6, 0.62) 0%,
      rgba(34, 20, 8, 0.45) 18%,
      rgba(34, 20, 8, 0.30) 38%,
      rgba(34, 20, 8, 0.42) 60%,
      rgba(20, 12, 5, 0.82) 88%,
      rgba(12, 7, 3, 0.95) 100%
    ),
    /* radial: oscurece esquinas con más fuerza */
    radial-gradient(
      ellipse 100% 90% at 50% 45%,
      transparent 0%,
      transparent 38%,
      rgba(40, 24, 12, 0.45) 78%,
      rgba(20, 12, 5, 0.75) 100%
    ),
    /* warm wash: tono marrón cálido más presente */
    linear-gradient(180deg,
      rgba(154, 125, 82, 0.20) 0%,
      rgba(120, 90, 55, 0.14) 50%,
      rgba(60, 40, 20, 0.28) 100%
    );
  mix-blend-mode: multiply;
}
/* Film grain idéntico al home */
.grad-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
}
/* Anula el ::after gradient del .pp__hero-bg default — usamos nuestra vignette */
.grad-hero .pp__hero-bg::after { display: none; }


:root {
  --x-ink:        #1a1614;
  --x-ink-soft:   #4a3f38;
  --x-line:       rgba(26, 22, 20, 0.10);
  --x-cream:      #efe6dc;
  --x-ivory:      #fbf6ed;
  --x-white:      #ffffff;
  --x-gold:       #b89968;
  --x-gold-soft:  #d4b78a;
  --x-gold-deep:  #9a7d52;
  --x-display:    'Space Grotesk', system-ui, sans-serif;
  --x-cormo:      'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --x-mono:       'JetBrains Mono', monospace;
}

/* ─── Wrapper ─── */
.pfp {
  font-family: var(--x-display);
  color: var(--x-ink);
  background: var(--x-ivory);
  padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 56px);
  width: 100%;
}
.pfp__inner { max-width: 1380px; margin: 0 auto; }

/* ─── Header ─── */
.pfp__head { text-align: center; margin-bottom: 36px; }
.pfp__eyebrow {
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--x-gold-deep);
  display: block;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.pfp__title {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--x-ink);
}
.pfp__title em {
  font-family: var(--x-cormo);
  font-style: italic;
  font-weight: 400;
  color: var(--x-gold-deep);
}
.pfp__sub {
  margin: 0;
  font-size: 15px;
  color: var(--x-ink-soft);
  letter-spacing: 0.01em;
}

/* ─── Grid (3 columns, center slightly larger) ─── */
.pfp__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 22px;
  max-width: 1260px;
  margin: 0 auto;
  align-items: center;
}

/* ─── Card ─── */
.pfp__card {
  position: relative;
  background: var(--x-white);
  border: 1px solid var(--x-line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
}
.pfp__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -18px rgba(26, 22, 20, 0.20);
  border-color: var(--x-gold-soft);
}
.pfp__card--top {
  border: 1px solid var(--x-gold-soft);
  box-shadow: 0 14px 36px -16px rgba(184, 153, 104, 0.45);
  max-width: 420px;
  transform: translateY(-6px);
}
.pfp__card--top:hover { transform: translateY(-10px); }

.pfp__pin {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-family: var(--x-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--x-ink);
  color: var(--x-ivory);
  padding: 6px 10px;
  border-radius: 2px;
}

/* ─── Photo ─── */
.pfp__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--x-cream);
}
.pfp__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.pfp__card:hover .pfp__img { transform: scale(1.04); }

.pfp__tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--x-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--x-ivory);
  background: rgba(26, 22, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 5px 10px;
  border-radius: 2px;
}

/* ─── Body ─── */
.pfp__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pfp__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--x-line);
  padding-bottom: 8px;
}
.pfp__name {
  margin: 0;
  font-family: var(--x-cormo);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--x-ink);
  letter-spacing: -0.005em;
}
.pfp__cur {
  font-family: var(--x-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--x-ink-soft);
}

.pfp__price {
  font-family: var(--x-display);
  font-weight: 500;
  font-size: clamp(38px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--x-ink);
  margin: 4px 0 6px;
}
.pfp__card--top .pfp__price { color: var(--x-gold-deep); }

.pfp__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pfp__list li {
  position: relative;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--x-ink-soft);
  padding-left: 14px;
  letter-spacing: 0.005em;
}
.pfp__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1px;
  background: var(--x-gold);
}

/* ─── CTA ─── */
.pfp__cta {
  margin-top: 14px;
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  color: var(--x-ink);
  border: 1px solid var(--x-ink);
  padding: 12px 16px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
  text-decoration: none;
}
.pfp__cta span {
  font-family: var(--x-display);
  font-size: 14px;
  letter-spacing: 0;
  transition: transform 0.25s ease;
}
.pfp__cta:hover {
  background: var(--x-ink);
  color: var(--x-ivory);
}
.pfp__cta:hover span { transform: translateX(4px); }
.pfp__cta--solid {
  background: var(--x-ink);
  color: var(--x-ivory);
  border-color: var(--x-ink);
}
.pfp__cta--solid:hover {
  background: var(--x-gold-deep);
  border-color: var(--x-gold-deep);
}

/* ─── Add-on bar (toga y birrete) ─── */
.pfp__addon {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 18px 22px;
  border: 1px dashed var(--x-gold-soft);
  border-radius: 4px;
  background: rgba(212, 183, 138, 0.08);
  text-align: center;
  font-family: var(--x-display);
  font-size: 14.5px;
  color: var(--x-ink-soft);
  letter-spacing: 0.005em;
}
.pfp__addon strong {
  font-family: var(--x-display);
  font-weight: 600;
  color: var(--x-ink);
  letter-spacing: 0;
}
.pfp__addon em {
  font-family: var(--x-cormo);
  font-style: italic;
  font-weight: 400;
  color: var(--x-gold-deep);
}
.pfp__addon__price {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--x-ink);
  color: var(--x-ivory);
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .pfp__grid { grid-template-columns: 1fr; gap: 18px; max-width: 380px; }
  .pfp__card { max-width: 100%; }
  .pfp__photo { aspect-ratio: 3 / 4; }
}
@media (max-width: 520px) {
  .pfp__title { font-size: 30px; }
  .pfp__sub { font-size: 13.5px; }
  .pfp__addon { font-size: 13px; padding: 14px 16px; }
}