/**
 * Bodas page component styles — Smart Catering Child
 *
 * Estilos específicos del template page-bodas.php. Reutiliza al máximo
 * los tokens y componentes globales (.sc-section, .sc-eyebrow, .sc-button,
 * .sc-prose, .sc-watermark).
 *
 * Namespaced bajo body.scc-fase0 .scc-bodas-page.
 *
 * @package SmartCateringChild
 */

/* ===== Prose reutilizado (mismo patrón que sobre.css) ===== */
body.scc-fase0 .scc-bodas .sc-prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.78);
  margin: 0 0 1.5rem;
}
body.scc-fase0 .scc-bodas .sc-prose p:last-child { margin-bottom: 0; }
body.scc-fase0 .scc-bodas .sc-section--dark .sc-prose p {
  color: rgba(255, 255, 255, 0.78);
}

/* ===== 1. HERO con foto de fondo ===== */
body.scc-fase0 .sc-bodas-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Fase 5: padding tokenizado preservando el midpoint fluido (vh). 9rem no
     tiene token 1:1 → calc(lg + space-4) = 8rem + 1rem. */
  padding-top: clamp(var(--space-section-md), 12vh, calc(var(--space-section-lg) + var(--space-4)));
  padding-bottom: clamp(var(--space-section-sm), 8vh, var(--space-section-md));
  overflow: hidden;
}
body.scc-fase0 .sc-bodas-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
body.scc-fase0 .sc-bodas-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
body.scc-fase0 .sc-bodas-hero__title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: var(--fs-6xl);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 1.25rem 0 0;
  max-width: 56rem;
  /* Prevent long words (e.g. "internacionales") overflowing the viewport on
     narrow screens. Covers bodas + finca/particulares/servicio (shared hero).
     2026-07-21: hyphens auto -> manual. Client flagged mobile mid-word
     hyphenation; a display serif headline must never auto-hyphenate. */
  overflow-wrap: break-word;
  hyphens: manual;
}
@media (max-width: 480px) {
  body.scc-fase0 .sc-bodas-hero__title {
    font-size: clamp(2.375rem, 11.5vw, 3.25rem);
  }
}

/* HERO LEAD — contrast fix (WCAG AA). Covers bodas + the 3 servicio pages
 * that share .sc-bodas-hero. Without this the lead inherits the global
 * `p { color: var(--color-body) }` (#4a4a4a), which a direct rule applies
 * over the section's inherited #fff — leaving the lead near-invisible on the
 * dark hero photo. Mirrors the .scc-finca override in finca.css.
 * Forces full white + scrim and adds breathing room below the H1. */
body.scc-fase0 .sc-bodas-hero__lead {
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

/* ===== 2. INTRO blanco ===== */
body.scc-fase0 .sc-bodas-intro {
  padding-top: clamp(var(--space-section-sm), 8vh, var(--space-section-md));
  padding-bottom: clamp(var(--space-section-sm), 8vh, var(--space-section-md));
}
body.scc-fase0 .sc-bodas-intro__lead {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.85);
}

/* ===== 3. FIRMA HARRI (dark statement) ===== */
body.scc-fase0 .sc-bodas-firma {
  padding-top: clamp(var(--space-section-md), 12vh, var(--space-section-lg));
  padding-bottom: clamp(var(--space-section-md), 12vh, var(--space-section-lg));
}
body.scc-fase0 .sc-bodas-firma__inner {
  text-align: center;
}
body.scc-fase0 .sc-bodas-firma__title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
  margin: 1.5rem auto 1.5rem;
  max-width: 48rem;
}
body.scc-fase0 .sc-bodas-firma__title em {
  font-style: normal;
  color: var(--color-gold, #D99E39);
}
body.scc-fase0 .sc-bodas-firma__lead {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 42rem;
  margin: 0 auto;
}

/* ===== 4. VENTAJAS — 9 cards ===== */
body.scc-fase0 .sc-bodas-ventajas {
  padding-top: clamp(var(--space-20), 10vh, var(--space-section-lg));
  padding-bottom: clamp(var(--space-20), 10vh, var(--space-section-lg));
}
body.scc-fase0 .sc-bodas-ventajas__header {
  max-width: 40rem;
  margin-bottom: 3rem;
}
body.scc-fase0 .sc-bodas-ventajas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  body.scc-fase0 .sc-bodas-ventajas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body.scc-fase0 .sc-bodas-ventajas__grid { grid-template-columns: 1fr; }
}
body.scc-fase0 .sc-bodas-ventajas__card {
  background: #fff;
  padding: 2rem;
  border-radius: 4px;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
body.scc-fase0 .sc-bodas-ventajas__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
body.scc-fase0 .sc-bodas-ventajas__card-title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
  color: #000;
  line-height: 1.3;
}
body.scc-fase0 .sc-bodas-ventajas__card-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

/* ===== 5. TIPOS DE BODA — accordion ===== */
body.scc-fase0 .sc-bodas-tipos {
  padding-top: clamp(var(--space-20), 10vh, var(--space-section-lg));
  padding-bottom: clamp(var(--space-20), 10vh, var(--space-section-lg));
}
body.scc-fase0 .sc-bodas-tipos__header {
  max-width: 40rem;
  margin-bottom: 3rem;
}
body.scc-fase0 .sc-bodas-tipos__list {
  display: flex;
  flex-direction: column;
}
body.scc-fase0 .sc-bodas-tipos__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.5rem 0;
}
body.scc-fase0 .sc-bodas-tipos__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  gap: 1.5rem;
}
body.scc-fase0 .sc-bodas-tipos__summary::-webkit-details-marker { display: none; }
body.scc-fase0 .sc-bodas-tipos__summary-title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 300;
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
}
body.scc-fase0 .sc-bodas-tipos__tag {
  font-family: var(--font-sans, "Overpass", sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  /* WCAG AA fix: gold-ink #a87410 = 4.61:1 on cream/white (PASS). */
  color: var(--color-gold-ink, #a87410);
  text-transform: uppercase;
}
body.scc-fase0 .sc-bodas-tipos__plus {
  font-size: 1.75rem;
  /* WCAG AA fix: gold-ink for text on cream background. */
  color: var(--color-gold-ink, #a87410);
  font-weight: 300;
  line-height: 1;
  transition: transform 240ms ease;
}
body.scc-fase0 .sc-bodas-tipos__item[open] .sc-bodas-tipos__plus {
  transform: rotate(45deg);
}
body.scc-fase0 .sc-bodas-tipos__body {
  margin-top: 1rem;
  max-width: 48rem;
}
body.scc-fase0 .sc-bodas-tipos__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.75);
  margin: 0;
}
body.scc-fase0 .sc-bodas-tipos__body strong {
  /* WCAG AA fix: gold-ink #a87410 = 4.61:1 on cream (PASS). */
  color: var(--color-gold-ink, #a87410);
  font-weight: 500;
}

/* ===== 6. ESPACIOS mosaico ===== */
body.scc-fase0 .sc-bodas-espacios {
  padding-top: clamp(var(--space-20), 10vh, var(--space-section-lg));
  padding-bottom: clamp(var(--space-20), 10vh, var(--space-section-lg));
}
body.scc-fase0 .sc-bodas-espacios__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  body.scc-fase0 .sc-bodas-espacios__header { grid-template-columns: 1fr; }
}
body.scc-fase0 .sc-bodas-espacios__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}
body.scc-fase0 .sc-bodas-espacios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  body.scc-fase0 .sc-bodas-espacios__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  body.scc-fase0 .sc-bodas-espacios__grid { grid-template-columns: 1fr; }
}
body.scc-fase0 .sc-bodas-espacios__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: #fff;
  transition: transform 320ms ease;
}
body.scc-fase0 .sc-bodas-espacios__card:hover { transform: scale(1.02); }
/* Unlinked cards (fincas with no page yet) — same card look, but not clickable. */
body.scc-fase0 .sc-bodas-espacios__card--nolink {
  cursor: default;
}
body.scc-fase0 .sc-bodas-espacios__card--nolink:hover {
  transform: none;
}
body.scc-fase0 .sc-bodas-espacios__card-img {
  position: absolute;
  inset: 0;
  /* Solid neutral fallback when no photo is available — no stripe. */
  background: rgba(0, 0, 0, 0.15);
}
/* Rework 6 fincas (2026-07): mosaic order is now
   0=La Casilla de Maera, 1=Finca Carambuco, 2=Casa de la Era,
   3=Finca Paradís, 4=Finca las Velas, 5=Finca Solvana.
   2026-07-17: Casa de la Era (--2), Finca Paradís (--3) and Finca Solvana (--5)
   now have their own pages and real card photos — swapped from the neutral
   wedding-ambience placeholders. Finca las Velas (--4) has no page yet, so it
   KEEPS its neutral ambience photo (no identifiable venue, no people). */
body.scc-fase0 .sc-bodas-espacios__card--0 .sc-bodas-espacios__card-img {
  background-image: url('../../img/photos/la-casilla-3.webp');
  background-size: cover;
  background-position: center;
}
body.scc-fase0 .sc-bodas-espacios__card--1 .sc-bodas-espacios__card-img {
  background-image: url('../../img/photos/finca-carambuco-2.webp');
  background-size: cover;
  background-position: center;
}
body.scc-fase0 .sc-bodas-espacios__card--2 .sc-bodas-espacios__card-img {
  background-image: url('../../img/photos/fincas/card-casa-de-la-era.webp');
  background-size: cover;
  background-position: center;
}
body.scc-fase0 .sc-bodas-espacios__card--3 .sc-bodas-espacios__card-img {
  background-image: url('../../img/photos/fincas/card-finca-paradis.webp');
  background-size: cover;
  background-position: center;
}
body.scc-fase0 .sc-bodas-espacios__card--4 .sc-bodas-espacios__card-img {
  background-image: url('../../img/photos/services/bodas/gallery/24-ambiente-candelabros-c.webp');
  background-size: cover;
  background-position: center;
}
body.scc-fase0 .sc-bodas-espacios__card--5 .sc-bodas-espacios__card-img {
  background-image: url('../../img/photos/fincas/card-finca-solvana.webp');
  background-size: cover;
  background-position: center;
}
body.scc-fase0 .sc-bodas-espacios__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
}
body.scc-fase0 .sc-bodas-espacios__card-label {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ===== 7. ESTACIONES gastronómicas ===== */
body.scc-fase0 .sc-bodas-estaciones {
  padding-top: clamp(var(--space-20), 10vh, var(--space-section-lg));
  padding-bottom: clamp(var(--space-20), 10vh, var(--space-section-lg));
}
body.scc-fase0 .sc-bodas-estaciones__header {
  max-width: 42rem;
  margin-bottom: 3rem;
}
body.scc-fase0 .sc-bodas-estaciones__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3rem;
}
@media (max-width: 1024px) {
  body.scc-fase0 .sc-bodas-estaciones__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body.scc-fase0 .sc-bodas-estaciones__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
body.scc-fase0 .sc-bodas-estaciones__item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 1rem;
}
body.scc-fase0 .sc-bodas-estaciones__item-title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 0.5rem;
  color: #000;
}
body.scc-fase0 .sc-bodas-estaciones__item-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

/* ===== 8. DIETAS ===== */
body.scc-fase0 .sc-bodas-dietas {
  padding-top: clamp(var(--space-section-sm), 7vh, var(--space-20));
  padding-bottom: clamp(var(--space-section-sm), 7vh, var(--space-20));
}
body.scc-fase0 .sc-bodas-dietas__inner {
  text-align: center;
}
body.scc-fase0 .sc-bodas-dietas__title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  line-height: 1.3;
  color: #000;
  margin: 1rem auto 0;
  max-width: 48rem;
}

/* ===== 9. FAQ ===== */
body.scc-fase0 .sc-bodas-faq {
  padding-top: clamp(var(--space-20), 10vh, var(--space-section-lg));
  padding-bottom: clamp(var(--space-20), 10vh, var(--space-section-lg));
}
body.scc-fase0 .sc-bodas-faq__header { margin-bottom: 3rem; }
body.scc-fase0 .sc-bodas-faq__list {
  display: flex;
  flex-direction: column;
}
body.scc-fase0 .sc-bodas-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.25rem 0;
}
body.scc-fase0 .sc-bodas-faq__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  gap: 1.5rem;
}
body.scc-fase0 .sc-bodas-faq__summary::-webkit-details-marker { display: none; }
body.scc-fase0 .sc-bodas-faq__q {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
}
body.scc-fase0 .sc-bodas-faq__plus {
  font-size: 1.5rem;
  color: var(--color-gold, #D99E39);
  font-weight: 300;
  line-height: 1;
  transition: transform 240ms ease;
}
body.scc-fase0 .sc-bodas-faq__item[open] .sc-bodas-faq__plus {
  transform: rotate(45deg);
}
body.scc-fase0 .sc-bodas-faq__a {
  margin-top: 1rem;
}
body.scc-fase0 .sc-bodas-faq__a p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
body.scc-fase0 .sc-bodas-faq__a strong {
  color: var(--color-gold, #D99E39);
  font-weight: 500;
}

/* ===== 10. CTA final ===== */
body.scc-fase0 .sc-bodas-cta {
  /* 7rem upper bound no tiene token 1:1 → calc(space-24 + space-4) = 6rem + 1rem. */
  padding-top: clamp(var(--space-20), 10vh, calc(var(--space-24) + var(--space-4)));
  padding-bottom: clamp(var(--space-20), 10vh, calc(var(--space-24) + var(--space-4)));
}
body.scc-fase0 .sc-bodas-cta__inner {
  text-align: center;
}
body.scc-fase0 .sc-bodas-cta__inner .sc-section__title {
  margin-bottom: 2rem;
}

/* ===== 11. EDITORIAL PAIR — Intro + Firma (C-b PR2, design Decision 3.A) =====
 * Additive layout wrapper reused on Intro (.sc-bodas-intro) and Firma
 * (.sc-bodas-firma); keeps their existing classes for color/padding/typography.
 * Grep-confirmed no class collision elsewhere in assets/css/ or templates/.
 */
body.scc-fase0 .sc-editorial-pair__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
body.scc-fase0 .sc-editorial-pair__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
}
body.scc-fase0 .sc-editorial-pair__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out-soft, ease-out);
}
/* Landscape sources (e.g. the team photo) render at their natural ratio —
 * forcing them into the 4/5 portrait frame crops people out of the shot. */
body.scc-fase0 .sc-editorial-pair__media--natural {
  aspect-ratio: auto;
}
body.scc-fase0 .sc-editorial-pair__media--natural img {
  height: auto;
  object-fit: unset;
}
/* Premium hover on foreground editorial photos: slow, subtle zoom matching
 * the service-gallery hover pattern. */
body.scc-fase0 .sc-editorial-pair__media:hover img,
body.scc-fase0 .sc-editorial-pair__media:focus-within img {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-editorial-pair__media img {
    transition: none;
  }
  body.scc-fase0 .sc-editorial-pair__media:hover img,
  body.scc-fase0 .sc-editorial-pair__media:focus-within img {
    transform: none;
  }
}
body.scc-fase0 .sc-editorial-pair__text {
  min-width: 0;
}

/* --reverse: explicit `order` swap on the grid children — NOT `dir:rtl`.
 * Source order in the markup is always figure (media) then text; this
 * deliberately avoids the rtl trick, which would need a text-direction
 * reset on the prose to stay readable. Explicit order needs no such reset. */
body.scc-fase0 .sc-editorial-pair--reverse .sc-editorial-pair__media {
  order: 2;
}
body.scc-fase0 .sc-editorial-pair--reverse .sc-editorial-pair__text {
  order: 1;
}

@media (max-width: 768px) {
  body.scc-fase0 .sc-editorial-pair__inner {
    grid-template-columns: 1fr;
  }
  body.scc-fase0 .sc-editorial-pair__media {
    aspect-ratio: 4 / 3;
  }
  /* Media always first on the stacked mobile layout, regardless of --reverse. */
  body.scc-fase0 .sc-editorial-pair--reverse .sc-editorial-pair__media,
  body.scc-fase0 .sc-editorial-pair--reverse .sc-editorial-pair__text {
    order: 0;
  }
}

/* ===== 12. CLOSER BAND — bd-34, pre-CTA payoff (C-b PR2, design Decision 3.B) =====
 * Mirrors the hero pattern (full-bleed bg photo + dark overlay + centered line).
 * bg-image is decorative (the text line carries the meaning); reduced-motion
 * safe by construction — the background never animates, only the text line
 * has [data-reveal], which the global section.css rule already neutralises
 * under prefers-reduced-motion.
 */
body.scc-fase0 .sc-bodas-band {
  position: relative;
  min-height: clamp(320px, 55vh, 520px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}
body.scc-fase0 .sc-bodas-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}
body.scc-fase0 .sc-bodas-band__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
body.scc-fase0 .sc-bodas-band__line {
  font-family: var(--font-serif, "Merriweather", serif);
  font-weight: 300;
  color: #fff;
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  line-height: 1.3;
  max-width: 36rem;
  margin: 0;
}

/* ===== 13. ACCORDION CURSOR-FOLLOW HOVER REVEAL (C-b iter3, design Decision 1) =====
 * Outer `.sc-tipos-cursor` carries rAF-driven translate3d (movement only, no
 * transition) so it never fights the inner element's CSS transition, which
 * handles the opacity/scale entrance and exit. Fixed + pointer-events:none
 * makes functional conflict with the accordion click target impossible.
 * z-index 90 is deliberately below the sticky nav header (100) and the
 * mobile drawer (9999) — see assets/css/components/nav.css.
 */
.sc-tipos-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  width: clamp(240px, 22vw, 320px);
}
.sc-tipos-cursor__inner {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  will-change: opacity, transform;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
.sc-tipos-cursor.is-visible .sc-tipos-cursor__inner {
  opacity: 1;
  transform: scale(1);
}
.sc-tipos-cursor__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 14. ACCORDION SUMMARY AFFORDANCE NUDGE (C-b iter3, design Decision 5b) =====
 * `.sc-bodas-tipos__*` is shared with templates/page-landing.php (bodas.css
 * is loaded there too), which does NOT load bodas-hover-reveal.js. Scoped to
 * `body.scc-bodas-page` (added only in page-bodas.php) so the nudge never
 * leaks onto the landing template.
 */
body.scc-bodas-page .sc-bodas-tipos__summary {
  transition: transform 180ms ease-out;
}
body.scc-bodas-page .sc-bodas-tipos__summary:hover {
  transform: translateX(4px);
}

/* ===== 15. EL BRINDIS — editorial pair, Act2→Act3 bridge (C-b iter3, design Decision 3) =====
 * Reuses .sc-editorial-pair--reverse; only vertical rhythm padding is new.
 */
body.scc-fase0 .sc-bodas-moment {
  padding-top: clamp(var(--space-section-md), 12vh, var(--space-section-lg));
  padding-bottom: clamp(var(--space-section-md), 12vh, var(--space-section-lg));
}
/* Type promotion (C-b iter4, design Decision 2b): from paragraph scale to
 * Merriweather STATEMENT scale, matching the closer band's voice. No eyebrow.
 * Vertical centring against the tall image is already covered by the base
 * `.sc-editorial-pair__inner { align-items: center }` rule (Section 11) —
 * no extra rule needed here. */
body.scc-fase0 .sc-bodas-moment__line {
  font-family: var(--font-serif, "Merriweather", serif);
  font-weight: 300;
  color: #fff;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.3;
  max-width: 22ch;
  margin: 0;
}

/* ===== 17. SCROLL-DRIVEN STATEMENT TEXT FILL (C-b iter4, design Decision 1) =====
 * Word-level spans progressively colour from `--fill-from` to `--fill-to` as
 * a single `--fill-progress` scalar (0→1) advances. Two drivers write the
 * SAME property (never both on one element): native `animation-timeline:
 * view()` when supported (off-main-thread), or the JS rAF fallback in
 * assets/js/scroll-text-fill.js for browsers without view() timelines.
 *
 * Fail-open (mirrors the [data-reveal] contract in section.css:90-105): the
 * color-mix rule below only applies under `.is-fill-active`, which the JS
 * module adds — so with no JS at all, words render their normal INHERITED
 * solid colour (fully legible), never dim. `initial-value: 1` is a documented
 * safe default for the custom property itself, not the activation gate.
 */
@property --fill-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.is-fill-active .sc-statement-fill__w {
  --wl: clamp(0, calc((var(--fill-progress) * (var(--wn) + var(--fill-feather)) - var(--wi)) / var(--fill-feather)), 1);
  color: color-mix(in oklab, var(--fill-to), var(--fill-from) calc((1 - var(--wl)) * 100%));
}
.is-fill-active .sc-statement-fill__w--accent {
  --fill-to: var(--color-gold, #D99E39);
}

/* Per-band ramp tokens — all 3 fill targets are on dark bands, cream-only
 * ramp (no accent) except firma, which overrides --fill-to to gold above. */
body.scc-fase0 .sc-bodas-band .sc-statement-fill,
body.scc-fase0 .sc-bodas-moment .sc-statement-fill,
body.scc-fase0 .sc-bodas-firma .sc-statement-fill {
  --fill-from: rgba(248, 247, 242, 0.22);
  --fill-to: var(--color-cream, #F8F7F2);
  --fill-feather: 2;
}

/* Driver: scroll-text-fill.js writes --fill-progress via rAF measured
 * against the real viewport. A native `animation-timeline: view()` block
 * lived here and was removed: these statements sit inside `.sc-section--wm`
 * ancestors whose `overflow: hidden` (watermark clipping) becomes the
 * nearest scroll container for view(), leaving the timeline permanently
 * inactive. The `--late` per-band start offsets (design Correction 2b)
 * are enforced by the JS driver's range table. */

@media (prefers-reduced-motion: reduce) {
  .sc-statement-fill__w {
    color: var(--fill-to) !important;
  }
}

/* Sabor a Málaga membership seal — page-gastronomia.php (client request
 * 2026-07-15, compacted same day). A slim centered credential band on the
 * cream token: small circular seal, modest display title, gold hairline,
 * narrow muted copy. Sized as a colophon between white sections, not as a
 * full editorial section. */
body.scc-fase0 .sc-sabor-malaga {
  background: var(--color-cream, #F8F7F2);
  padding: 4.5rem 0;
}
body.scc-fase0 .sc-sabor-malaga__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}
body.scc-fase0 .sc-sabor-malaga__seal {
  width: 84px;
  height: 84px;
  margin-bottom: 1.5rem;
}
body.scc-fase0 .sc-sabor-malaga__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  line-height: 1.2;
  margin: 0 0 1.25rem;
}
body.scc-fase0 .sc-sabor-malaga__rule {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--color-gold, #D99E39);
  margin-bottom: 1.25rem;
}
body.scc-fase0 .sc-sabor-malaga__inner p {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-body, #4a4a4a);
}
body.scc-fase0 .sc-sabor-malaga__inner p:last-child {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  body.scc-fase0 .sc-sabor-malaga {
    padding: 3.5rem 0;
  }
}