/* ===========================================================
   ELCHE LOVE SALSA — Landing "Bailes de Boda"
   Hereda componentes de styles.css + plus55.css (clases .p55-*).
   Aquí: TEMA BODA (scoped .boda) — oro champán + blush + vino.
   =========================================================== */

/* ---------------------------------------------------------
   TEMA BODA — elegante: oro/champán + blush + vino
   --------------------------------------------------------- */
body.boda{
  --c-red:#C9A24B;--c-red-strong:#A9863A;
  --c-pink:#E8B4B8;--c-teal:#C9A24B;--c-yellow:#EBD9A8;
  --c-orange:#E8B4B8;--c-green:#C9A24B;--c-blue:#9C6B70;
  --primary:#C9A24B;--primary-strong:#A9863A;--on-primary:#241b08;
  --accent:#E8B4B8;--accent-2:#EBD9A8;--pop:#C9A24B;
  --line:rgba(230,200,150,.16);
  --btn-shadow:0 18px 40px -14px rgba(201,162,75,.5);
  --band-bg:linear-gradient(115deg,#9C6B70 0%,#C48F72 48%,#C9A24B 100%);
  --band-ink:#fff;--band-eyebrow:#F3E4C4;
  --hero-fallback:#15100a;
}
.boda .btn:hover{box-shadow:0 22px 50px -14px rgba(201,162,75,.62)}
.boda .btn{--on-primary:#241b08}
.boda .feature__ico,.boda .contact__perk .ico{background:color-mix(in srgb,var(--primary) 20%,transparent)}

/* --- Motivo de fondo: anillos entrelazados muy tenues --- */
body.boda::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%20viewBox='0%200%20340%20340'%3E%3Cg%20fill='none'%20stroke='%23C9A24B'%20stroke-width='2.4'%3E%3Cg%20transform='translate(40%2050)%20scale(1.6)'%3E%3Ccircle%20cx='16'%20cy='20'%20r='11'/%3E%3Ccircle%20cx='30'%20cy='20'%20r='11'/%3E%3C/g%3E%3Cg%20transform='translate(210%20210)%20scale(1.2)'%3E%3Ccircle%20cx='16'%20cy='20'%20r='11'/%3E%3Ccircle%20cx='30'%20cy='20'%20r='11'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:380px 380px;
}
/* Velo del hero: oscuro primero y resplandor cálido debajo.
   Antes esta regla solo tenía los dos resplandores de color, y como sustituye
   al velo general (--hero-overlay), el hero se quedaba SIN oscurecer. Medido
   sobre la foto del portón: el titular salía a 2,1:1 de contraste y los
   botones a 1,9:1, cuando lo legible empieza en 4,5:1.
   El oscuro va el primero de la lista, que es el que se pinta encima, para
   que los resplandores calienten la foto sin volver a aclarar el texto. */
body.boda .hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(22,12,8,.58) 0%,
      rgba(22,12,8,.66) 30%,
      rgba(22,12,8,.78) 62%,
      rgba(22,12,8,.93) 100%),
    radial-gradient(120% 80% at 50% 108%,rgba(201,162,75,.34),transparent 60%),
    radial-gradient(90% 60% at 85% 0%,rgba(232,180,184,.22),transparent 55%)}

/* --- Re-color de acentos que en plus55 venían fijos --- */
.boda .p55-recognize .p55-rec:nth-child(1) .p55-rec__q{background:linear-gradient(135deg,#C9A24B,#A9863A)}
.boda .p55-recognize .p55-rec:nth-child(2) .p55-rec__q{background:linear-gradient(135deg,#E8B4B8,#C48F94)}
.boda .p55-recognize .p55-rec:nth-child(3) .p55-rec__q{background:linear-gradient(135deg,#9C6B70,#7A4F54)}
.boda .p55-recognize .p55-rec:nth-child(4) .p55-rec__q{background:linear-gradient(135deg,#EBD9A8,#C9A24B)}
.boda .p55-recognize__after .p55-script{color:var(--accent-2)}

.boda .p55-pillars .p55-pillar:nth-child(1)::before{background:#C9A24B}
.boda .p55-pillars .p55-pillar:nth-child(1) .p55-pillar__ico{color:#C9A24B;background:color-mix(in srgb,#C9A24B 16%,transparent)}
.boda .p55-pillars .p55-pillar:nth-child(1) li svg{color:#C9A24B}
.boda .p55-pillars .p55-pillar:nth-child(2)::before{background:#E8B4B8}
.boda .p55-pillars .p55-pillar:nth-child(2) .p55-pillar__ico{color:#E8B4B8;background:color-mix(in srgb,#E8B4B8 18%,transparent)}
.boda .p55-pillars .p55-pillar:nth-child(2) li svg{color:#E8B4B8}
.boda .p55-pillars .p55-pillar:nth-child(3)::before{background:#9C6B70}
.boda .p55-pillars .p55-pillar:nth-child(3) .p55-pillar__ico{color:#C98F96;background:color-mix(in srgb,#9C6B70 24%,transparent)}
.boda .p55-pillars .p55-pillar:nth-child(3) li svg{color:#C98F96}

.boda .p55-steps .p55-step:nth-child(1) .p55-step__num{background:linear-gradient(135deg,#C9A24B,#A9863A);color:#241b08}
.boda .p55-steps .p55-step:nth-child(2) .p55-step__num{background:linear-gradient(135deg,#E8B4B8,#C48F94);color:#3a2226}
.boda .p55-steps .p55-step:nth-child(3) .p55-step__num{background:linear-gradient(135deg,#9C6B70,#7A4F54);color:#fff}
.boda .p55-classes__media .badge{background:var(--accent-2);color:#3a2c08}
.boda .p55-offer__aside::after{background:radial-gradient(circle,rgba(232,180,184,.4),transparent 60%)}
.boda .p55-offer__tag{background:var(--accent-2);color:#3a2c08}

/* títulos con un aire más editorial en boda */
.boda .title{letter-spacing:.005em}

/* ---------------------------------------------------------
   HERO propio — titular boda, elegante
   --------------------------------------------------------- */
.boda-hero__badge{display:inline-flex;align-items:center;gap:.6em;padding:.55em 1.15em;border-radius:999px;
  background:color-mix(in srgb,var(--pop) 16%,transparent);border:1px solid color-mix(in srgb,var(--pop) 45%,transparent);
  color:#fff;font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(4px);margin-bottom:22px}
.boda-hero__badge .dot{width:9px;height:9px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 4px color-mix(in srgb,var(--pop) 26%,transparent)}
.boda-hero h1 .fire{background:linear-gradient(100deg,#EBD9A8 0%,#C9A24B 55%,#E8B4B8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(201,162,75,.3))}

/* ---------------------------------------------------------
   "QUÉ INCLUYE" — servicio a medida (grid de 4)
   --------------------------------------------------------- */
.boda-incl{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,24px)}
.boda-incl__card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px);padding:clamp(28px,3.2vw,40px);box-shadow:var(--card-shadow)}
.boda-incl__num{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.14em;color:var(--primary);opacity:.8}
.boda-incl__ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin:14px 0 18px;
  color:var(--primary);background:color-mix(in srgb,var(--primary) 15%,transparent)}
.boda-incl__ico svg{width:30px;height:30px}
.boda-incl__card:nth-child(2) .boda-incl__ico{color:#E8B4B8;background:color-mix(in srgb,#E8B4B8 18%,transparent)}
.boda-incl__card:nth-child(3) .boda-incl__ico{color:#C98F96;background:color-mix(in srgb,#9C6B70 24%,transparent)}
.boda-incl__card:nth-child(4) .boda-incl__ico{color:#C9A24B;background:color-mix(in srgb,#EBD9A8 22%,transparent)}
.boda-incl__card h3{font-size:1.5rem;margin-bottom:10px;letter-spacing:.01em}
.boda-incl__card p{color:var(--ink-soft);font-size:1.04rem;line-height:1.5}

/* ---------------------------------------------------------
   BANDA DE CIFRAS
   --------------------------------------------------------- */
.boda-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);text-align:center}
.boda-fig{padding:8px}
.boda-fig b{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;
  background:linear-gradient(120deg,#fff,#F3E4C4);-webkit-background-clip:text;background-clip:text;color:transparent}
.boda-fig span{display:block;margin-top:6px;font-weight:700;font-size:.98rem;color:color-mix(in srgb,var(--band-ink) 82%,transparent)}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:860px){
  .boda-incl{grid-template-columns:1fr}
  .boda-figs{grid-template-columns:repeat(2,1fr);gap:26px 14px}
}

/* El fondo del hero asoma por encima de la pantalla para que el paralaje
   tenga recorrido: con el -12% general se perdía el 9,9% de arriba de la
   foto, que es justo donde está la cabeza de él.
   Aquí el paralaje va a 0.04 en vez de 0.12 (ver el data-parallax del HTML),
   así que con un 4% sobra: la caja se desplaza como mucho 44 px mientras el
   hero se ve, y ese 4% los cubre. El recorte de arriba baja del 10% al 3%. */
body.boda .hero__bg{inset:-4% 0 -6% 0}

/* El testimonio reutiliza el bloque de Baila +55 (mismo trabajo, mismo
   comportamiento). Lo único atado a aquella landing era el color de la nota
   de debajo, así que aquí se repite para .boda. */
.boda .p55-testi__nota{color:var(--ink-soft);font-size:.96rem}