/**
 * Home-specific: trayectoria, video teaser, FAQ accordion, form on dark.
 * UNLAYERED.
 */

/* ===== Manifiesto / trayectoria text content ===== */
/* Typeset 2026-06-07:
 *   · max-width 65ch para cumplir DESIGN.md (sin tope antes, líneas se
 *     estiraban más allá de 75ch en pantallas anchas → cansancio de lectura).
 *   · text-wrap: pretty para reducir orfans en bloques largos.
 *   · strong en --color-gold-ink (#a87410 → 4.61:1 sobre cream), no en
 *     --color-gold (#D99E39 → 2.36:1, FAIL AA). En .sc-section--dark se
 *     mantiene gold puro porque ahí ratio es alto.
 */
body.scc-fase0 .sc-prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(0,0,0,0.82);
  margin: 0 0 1.5rem;
  max-width: 65ch;
  text-wrap: pretty;
}
body.scc-fase0 .sc-prose p:last-child { margin-bottom: 0; }
body.scc-fase0 .sc-prose strong {
  color: var(--color-gold-ink, #a87410);
  font-weight: 500;
}
body.scc-fase0 .sc-prose em { font-style: italic; }

/* Home copy rework 2026-07-30 (R11): team_body closing highlighted quote.
 * No blockquote style existed anywhere in .sc-prose before this — canon
 * reused from the site's other quote treatments (division.css
 * .sc-division-case__quote, home.css .sc-mini-review__quote): serif italic
 * + a gold hairline on the left, same --color-gold-ink used for .sc-prose
 * strong so the accent reads as part of the same typographic family.
 *
 * jd-fix (2026-07-30): re-scoped from bare `.sc-prose blockquote` to the
 * `.sc-prose--teamquote` modifier — `.sc-prose` is shared by 9+ other
 * templates (page-landing, page-gastronomia, page-espacios, page-sobre,
 * page-bodas, page-servicio, page-particulares, page-finca, plus the
 * manifesto prose on this same page) and the bare selector was leaking
 * this treatment into any blockquote they might render. The modifier is
 * added on the team bio prose wrapper in templates/page-home.php; the
 * <blockquote> tag itself is untouched. */
body.scc-fase0 .sc-prose--teamquote blockquote {
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--color-gold, #D99E39);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-gold-ink, #a87410);
}
body.scc-fase0 .sc-prose--teamquote blockquote p {
  margin: 0;
  max-width: none;
  color: inherit;
}

body.scc-fase0 .sc-section--dark .sc-prose p {
  color: rgba(255,255,255,0.82);
  /* Light-on-dark: +0.1 line-height (DESIGN.md regla typographic).
   * Texto claro perceptualmente luce más fino, necesita más aire. */
  line-height: 1.85;
}
body.scc-fase0 .sc-section--dark .sc-prose strong {
  /* En dark sí podemos usar gold puro (alto contraste sobre #000). */
  color: var(--color-gold, #D99E39);
}

/* ─────────────────────────────────────────────────────────────────────
 * Manifiesto "La Declaración" (home-content-zone rework 2026-06-18)
 *
 * El manifiesto es el folio 00: la tesis ANTES de las divisiones 01/02.
 * Layout asimétrico dentro del --narrow: una spine dorada VERTICAL (1px,
 * gold→transparent — mismo lenguaje que la spine de divisiones pero girada)
 * con el folio serif "00" colgando arriba. La spine se dibuja scaleY(0→1)
 * desde arriba al revelar. Headline en revelado clause-by-clause; primer
 * párrafo como lede. Hairline dorado full-bleed arriba cose el corte
 * negro (divisiones) → cream para que el acento dorado persista.
 *
 * Reutiliza el sistema [data-reveal] global: .sc-manifesto__layout lleva
 * data-reveal, y los sub-elementos (spine, folio, cláusulas) reaccionan a
 * .is-revealed con sus propias transiciones/delays. NO añade JS.
 * ───────────────────────────────────────────────────────────────────── */

/* Stitch: hairline dorado full-bleed en el tope de la sección cream. */
body.scc-fase0 .sc-manifesto { position: relative; }
body.scc-fase0 .sc-manifesto__stitch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-gold, #D99E39) 18%,
    var(--color-gold, #D99E39) 82%,
    transparent 100%
  );
  pointer-events: none;
}

/* Layout asimétrico: columna de la spine + columna de contenido.
 * La spine vive en su propia pista estrecha a la izquierda del texto. */
body.scc-fase0 .sc-manifesto__layout {
  position: relative;
  display: grid;
  grid-template-columns: clamp(2.5rem, 6vw, 4.5rem) minmax(0, 1fr);
  align-items: start;
}

/* Spine vertical: 1px gold→transparent, dibujada de arriba a abajo. */
body.scc-fase0 .sc-manifesto__spine {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: stretch;
  width: 1px;
  /* Arranca bajo el folio para que el "00" cuelgue del inicio de la línea. */
  margin-top: clamp(3.25rem, 7vw, 5.25rem);
  background: linear-gradient(
    180deg,
    var(--color-gold, #D99E39) 0%,
    var(--color-gold, #D99E39) 58%,
    transparent 100%
  );
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
  will-change: transform;
}

/* Folio "00": serif dorado weight 300, mismo lenguaje que los folios de
 * divisiones (clamp 3→5rem, ls -0.02em), colgando del tope de la spine. */
body.scc-fase0 .sc-manifesto__folio {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on cream (PASS). --color-gold = 2.36:1 (FAIL). */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  user-select: none;
}

body.scc-fase0 .sc-manifesto__content {
  grid-column: 2;
  grid-row: 1;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
}

/* Headline: cada cláusula revela por separado (split en el ":"). */
body.scc-fase0 .sc-manifesto__title {
  /* La H2 hereda --lg (clamp 2.5→4rem). Aquí solo gobernamos el revelado. */
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
body.scc-fase0 .sc-manifesto__clause {
  display: block;
}

/* Énfasis dorado i18n-safe: gold-ink (AA sobre cream), NO gradient text. */
body.scc-fase0 .sc-manifesto__accent {
  color: var(--color-gold-ink, #a87410);
}

/* Lede: primer párrafo más grande; el resto a tamaño body (ritmo variado).
 * :first-of-type degrada bien si solo hay un párrafo. */
body.scc-fase0 .sc-manifesto__prose p:first-of-type {
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.88);
}

/* ── Revelado clause-by-clause + draw de la spine (opt-in con JS) ── */
html.js-reveal-ready body.scc-fase0 .sc-manifesto__clause {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  /* Cláusula 1 entra primero; cláusula 2 ~90ms después. */
  transition-delay: calc(0.18s + var(--clause-index, 0) * 0.09s);
  will-change: opacity, transform;
}
html.js-reveal-ready body.scc-fase0 .sc-manifesto__layout.is-revealed .sc-manifesto__clause {
  opacity: 1;
  transform: translateY(0);
}
html.js-reveal-ready body.scc-fase0 .sc-manifesto__layout.is-revealed .sc-manifesto__spine {
  transform: scaleY(1);
}
html.js-reveal-ready body.scc-fase0 .sc-manifesto__layout.is-revealed .sc-manifesto__folio {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: spine a altura completa, texto/folio instantáneos, sin transforms. */
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-manifesto__spine {
    transform: none !important;
    transition: none !important;
  }
  html.js-reveal-ready body.scc-fase0 .sc-manifesto__clause,
  body.scc-fase0 .sc-manifesto__folio {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Mobile: la pista de la spine se estrecha; el contenido recupera ancho. */
@media (max-width: 640px) {
  body.scc-fase0 .sc-manifesto__layout {
    grid-template-columns: clamp(1.75rem, 9vw, 2.75rem) minmax(0, 1fr);
  }
  body.scc-fase0 .sc-manifesto__content {
    padding-left: clamp(0.875rem, 4vw, 1.5rem);
  }
}

/* ===== Video teaser ===== */
body.scc-fase0 .sc-video-teaser {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
}
body.scc-fase0 .sc-video-teaser__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
body.scc-fase0 .sc-video-teaser:hover .sc-video-teaser__thumb { transform: scale(1.04); }
body.scc-fase0 .sc-video-teaser__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-gold, #D99E39);
  color: #000; /* a11y: #000 on #D99E39 = 9.4:1 (PASS AA). #fff = 2.36:1 (FAIL). */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.4s, background 0.3s, color 0.3s;
  box-shadow: 0 12px 40px rgba(217,158,57,0.4);
}
body.scc-fase0 .sc-video-teaser:hover .sc-video-teaser__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
  color: #000;
}

/* ===== FAQ accordion (used in CTA conversion section) ===== */
body.scc-fase0 .sc-faq { display: flex; flex-direction: column; }
body.scc-fase0 .sc-faq__item { border-bottom: 1px solid rgba(255,255,255,0.15); }
body.scc-fase0 .sc-faq__item:first-child { border-top: 1px solid rgba(255,255,255,0.15); }
body.scc-fase0 .sc-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 400;
  text-align: left;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
}
body.scc-fase0 .sc-faq__trigger:hover { color: var(--color-gold, #D99E39); }
body.scc-fase0 .sc-faq__icon {
  flex-shrink: 0;
  color: var(--color-gold, #D99E39);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  width: 20px;
  height: 20px;
}
body.scc-fase0 .sc-faq__trigger[aria-expanded="true"] .sc-faq__icon { transform: rotate(45deg); }
/* Polish 2026-06-07: refactor a grid-template-rows pattern.
 *
 * Antes había animación sobre propiedad de layout (altura máxima con tope fijo
 * de 360px). Problemas: el tope truncaba FAQs largas, animar layout produce
 * jank y la curva no se sentía porque la propiedad salta antes del contenido.
 *
 * Ahora: grid 1fr/0fr trick. grid-template-rows 0fr → 1fr es animable en
 * navegadores modernos (2024+ baseline) y respeta la altura real del contenido
 * sin cap fijo. min-height: 0 en el child desbloquea el shrink.
 */
body.scc-fase0 .sc-faq__content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The direct child must carry NO padding: padding on the grid child sets a
 * min height floor the 0fr track cannot collapse (a ~24px strip of answer
 * text stays visible when closed). Padding lives on the inner <p> instead. */
body.scc-fase0 .sc-faq__content > * {
  min-height: 0;
  overflow: hidden;
}
body.scc-fase0 .sc-faq__content p {
  padding: 0 0 1.5rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  max-width: 65ch;
  font-size: 0.9375rem;
  margin: 0;
}
body.scc-fase0 .sc-faq__item.is-open .sc-faq__content {
  grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-faq__content { transition: none; }
}

/* ===== Form card (CTA section) ===== */
body.scc-fase0 .sc-form-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
body.scc-fase0 .sc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  body.scc-fase0 .sc-form-row { grid-template-columns: 1fr; }
}
body.scc-fase0 .sc-form-field { display: flex; flex-direction: column; }
body.scc-fase0 .sc-form-label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent, #B99C66);
  font-weight: 500;
  margin-bottom: 0.4rem;
  display: block;
}
body.scc-fase0 .sc-form-input,
body.scc-fase0 .sc-form-select,
body.scc-fase0 .sc-form-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 0.65rem 0;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  color: #fff;
  transition: border-color 0.3s;
  border-radius: 0;
}
body.scc-fase0 .sc-form-input:focus-visible,
body.scc-fase0 .sc-form-select:focus-visible,
body.scc-fase0 .sc-form-textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--color-gold, #D99E39); /* gold on near-black dark bg = passes AA */
  box-shadow: 0 0 0 2px var(--color-gold, #D99E39); /* a11y: visible keyboard ring on dark section */
}
body.scc-fase0 .sc-form-input::placeholder,
body.scc-fase0 .sc-form-textarea::placeholder { color: rgba(255,255,255,0.4); }
body.scc-fase0 .sc-form-select option { color: #000; background: #fff; }
body.scc-fase0 .sc-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin: 1.5rem 0;
}

/* ===== Form harden (2026-06-07): status region, inline errors, sr-only ===== */
body.scc-fase0 .sc-form-status {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 4px;
  border-left: 0; /* deliberadamente sin side-stripe (absolute ban) */
  border: 1px solid transparent;
}
body.scc-fase0 .sc-form-status[data-state="error"] {
  background: rgba(180, 60, 60, 0.12);
  border-color: rgba(220, 90, 90, 0.45);
  color: #ffd9d9;
}
body.scc-fase0 .sc-form-status[data-state="sending"] {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}
body.scc-fase0 .sc-form-status[data-state="success"] {
  background: rgba(217, 158, 57, 0.12);
  border-color: rgba(217, 158, 57, 0.45);
  color: var(--color-gold, #D99E39);
}
body.scc-fase0 .sc-form-input[aria-invalid="true"],
body.scc-fase0 .sc-form-select[aria-invalid="true"],
body.scc-fase0 .sc-form-textarea[aria-invalid="true"] {
  border-bottom-color: #e07a7a;
}
body.scc-fase0 .sc-form-error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #ffb3b3;
  letter-spacing: 0.02em;
}
/* Visually hidden, accesible para screen readers. WCAG. */
body.scc-fase0 .sc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Diferenciadores operativos (re-introducido 2026-06-08)
 *
 * El cycle anterior eliminó el USP grid de 6 cards iguales (correcto: era
 * absolute ban) pero dejó al lector sin un surface scaneable de facts.
 * Este bloque NO es card-grid: cada item es rule + label-sans + serif-title
 * + body. Layout 2-col auto-fit, sin background propio por item (el cream
 * de la sección hace de container). Visualmente distinto a anika (numerales
 * gigantes), stats (números enormes) y eyebrow (tracked uppercase).
 * ───────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-diff__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem);
}
body.scc-fase0 .sc-diff__item {
  display: flex;
  flex-direction: column;
}
body.scc-fase0 .sc-diff__rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-gold-ink, #a87410);
  margin-bottom: 0.75rem;
}
body.scc-fase0 .sc-diff__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-gold-ink, #a87410);
  margin-bottom: 0.5rem;
}
body.scc-fase0 .sc-diff__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-dark, #000);
  margin: 0 0 0.875rem;
  text-wrap: balance;
}
body.scc-fase0 .sc-diff__body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(0,0,0,0.78);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Los Cuatro Pilares — Diferenciadores (home-content-zone rework, sección 2/3)
 *
 * Reemplaza el repeat(auto-fit) de 4 cards iguales (.sc-diff__grid) SOLO en
 * .sc-differentiators por un layout editorial ASIMÉTRICO. Estas clases
 * .sc-pillars__* son propias de esta sección; la sección Capacidad sigue
 * usando .sc-diff__grid intacta.
 *
 * Sistema gráfico = numerales serif dorados (mismo lenguaje que los folios de
 * divisiones y el "00" del manifiesto). El pilar 01 es el ancla: arriba-
 * izquierda, más ancho, título serif mayor, numeral grande clamp(3→5rem). Los
 * pilares 02/03/04 escalan: numeral menor clamp(2→3rem) + offsets de baseline
 * variados (ningún par alineado). El numeral nace del índice del loop en PHP.
 *
 * Motion: entra con el [data-stagger] global (80ms/item) + el numeral/regla
 * reaccionan a .is-revealed (sin JS nuevo). Hover gateado a hover:hover +
 * pointer:fine. Reduced-motion: regla a media longitud estática, sin movimiento.
 * ───────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* Pilar 01 = ancla: ocupa toda la fila superior (más ancho que 02/03/04). */
body.scc-fase0 .sc-pillars__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
body.scc-fase0 .sc-pillars__item:first-child {
  grid-column: 1 / -1;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

/* Ritmo variado: 02/03/04 no comparten baseline. 03 cae un poco; 04 sube. */
body.scc-fase0 .sc-pillars__item:nth-child(3) { margin-top: clamp(1.5rem, 4vw, 3rem); }
body.scc-fase0 .sc-pillars__item:nth-child(4) { margin-top: clamp(0.25rem, 1vw, 0.75rem); }

/* Numeral: serif dorado weight 300, top-left. 02/03/04 más pequeños. */
body.scc-fase0 .sc-pillars__numeral {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on cream (PASS). --color-gold = 2.36:1 (FAIL). Dark variant overrides via .sc-pillars--on-dark below. */
  user-select: none;
  /* El numeral se eleva 2px en hover; transición suave para press/hover feel. */
  transition: transform var(--dur-normal, 280ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
/* Numeral del ancla 01: tamaño de folio (paridad con divisiones + manifiesto). */
body.scc-fase0 .sc-pillars__item:first-child .sc-pillars__numeral {
  font-size: clamp(3rem, 7vw, 5rem);
}

body.scc-fase0 .sc-pillars__text {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

/* Hairline dorada: arranca corta (36px); en hover barre hasta el ancho del
 * título vía clip-path. Por default (touch / sin hover) renderiza estática. */
body.scc-fase0 .sc-pillars__rule {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 1px;
  background: var(--color-gold-ink, #a87410);
  margin-bottom: 0.75rem;
  /* Estado estático sin hover: regla a media longitud (no oculta nada). */
  clip-path: inset(0 60% 0 0);
}
body.scc-fase0 .sc-pillars__item:first-child .sc-pillars__rule {
  max-width: 280px;
}
body.scc-fase0 .sc-pillars__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-gold-ink, #a87410);
  margin-bottom: 0.5rem;
}
body.scc-fase0 .sc-pillars__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-dark, #000);
  margin: 0 0 0.875rem;
  text-wrap: balance;
}
/* Título del ancla 01: serif mayor (jerarquía explícita). */
body.scc-fase0 .sc-pillars__item:first-child .sc-pillars__title {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
}
body.scc-fase0 .sc-pillars__body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(0,0,0,0.78);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}
/* Home copy rework 2026-07-30: bodies grew to 2-4 paragraphs (wpautop output).
 * Wrapper is now a <div> (was <p>) so these are real child paragraphs, not a
 * nested-tag repair. Same convention as .sc-step__desc p (card.css). */
body.scc-fase0 .sc-pillars__body p {
  margin: 0 0 0.75em;
  /* The global `p { color: var(--color-body) }` (#4a4a4a) overrides
   * inheritance and rendered these paragraphs illegible on the dark Proof
   * block (client feedback 2026-07-30). Inherit the wrapper's color, which
   * each ground (light/dark) already sets on .sc-pillars__body. */
  color: inherit;
}
body.scc-fase0 .sc-pillars__body p:last-child {
  margin-bottom: 0;
}
/* jd-fix (2026-07-30): closing punch-line accent for cards 01-04.
 * Every card body now ends on a highlighted line (client screenshots).
 * CSS-only, uniform :last-child treatment — reuses the gold-hairline +
 * italic-serif quote canon already established in division.css
 * (.sc-division-case__quote) and mirrored above in .sc-prose blockquote,
 * at a subtler card scale (no font-size bump, inherits sc-pillars__body). */
body.scc-fase0 .sc-pillars__body p:last-child {
  padding-left: 0.875rem;
  border-left: 1px solid var(--color-gold, #D99E39);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold-ink, #a87410);
}
/* Dark ground (Proof block): client feedback 2026-07-30 20:53 — gold reads
 * as illegible grey on the dark backdrop; closing line stays white like the
 * body text. The gold hairline + italic serif remain the accent. */
body.scc-fase0 .sc-pillars--on-dark .sc-pillars__body p:last-child {
  color: #fff;
}
body.scc-fase0 .sc-pillars__item:first-child .sc-pillars__body {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

/* ── Hover micro-interacción (solo dispositivos con hover real) ──
 * La regla barre de ~36px al ancho completo del título (clip-path inset
 * 0 100% → 0 0) en ~220ms; el numeral se eleva 2px. Sin scale, sin sombra. */
@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-pillars__rule {
    clip-path: inset(0 calc(100% - 36px) 0 0);
    transition: clip-path 220ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  }
  body.scc-fase0 .sc-pillars__item:hover .sc-pillars__rule,
  body.scc-fase0 .sc-pillars__item:focus-within .sc-pillars__rule {
    clip-path: inset(0 0 0 0);
  }
  body.scc-fase0 .sc-pillars__item:hover .sc-pillars__numeral,
  body.scc-fase0 .sc-pillars__item:focus-within .sc-pillars__numeral {
    transform: translateY(-2px);
  }
}

/* ── Entrada escalonada: numeral + regla reaccionan al .is-revealed que el
 * data-stagger global pone en cada .sc-pillars__item (sin JS nuevo).
 * El numeral 01 entra primero y un poco más lento → jerarquía en el tiempo. */
html.js-reveal-ready body.scc-fase0 .sc-pillars__item .sc-pillars__numeral {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.7s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1));
}
html.js-reveal-ready body.scc-fase0 .sc-pillars__item:first-child .sc-pillars__numeral {
  transition-duration: 1s, 1s;
}
html.js-reveal-ready body.scc-fase0 .sc-pillars__item.is-revealed .sc-pillars__numeral {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: nada de movimiento ni contenido oculto tras hover.
 * La regla queda a media longitud estática; numeral visible e inmóvil. */
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-pillars__rule {
    clip-path: inset(0 50% 0 0) !important;
    transition: none !important;
  }
  body.scc-fase0 .sc-pillars__numeral {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Responsive: la asimetría degrada a stack limpio en narrow. ──
 * Tablet (≤900px): una sola columna; el ancla pierde su span especial y todos
 * los pilares se alinean (sin offsets que rompan el ritmo en vertical). */
@media (max-width: 900px) {
  body.scc-fase0 .sc-pillars__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, 6vw, 3rem);
  }
  body.scc-fase0 .sc-pillars__item:first-child { grid-column: auto; }
  body.scc-fase0 .sc-pillars__item:nth-child(3),
  body.scc-fase0 .sc-pillars__item:nth-child(4) { margin-top: 0; }
}
/* Mobile (≤560px): el numeral se apila sobre el texto (no compite por ancho). */
@media (max-width: 560px) {
  body.scc-fase0 .sc-pillars__item,
  body.scc-fase0 .sc-pillars__item:first-child {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  body.scc-fase0 .sc-pillars__numeral,
  body.scc-fase0 .sc-pillars__text {
    grid-column: 1;
  }
  body.scc-fase0 .sc-pillars__numeral { grid-row: 1; }
  body.scc-fase0 .sc-pillars__text { grid-row: 2; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Capacidad "De 20 a 2.000" — sección WOW (home-content-zone rework, 3/3)
 *
 * El rango "20 → 2.000" se promueve a HERO numeral (serif dorado, clamp con
 * techo 6rem) y el H2 baja a lede de apoyo. El "20" se mantiene; el "2.000"
 * cuenta 0→2000 al entrar al viewport (JS [data-counter] opt-in). Una regla
 * dorada entre ambos se dibuja scaleX(0→1) izq→der EN SINCRONÍA con el conteo.
 *
 * Las 5 operaciones dejan de ser cards iguales → lista editorial con OFFSET:
 * [serial dorado] · [label serif] · [descriptor], anchos/indent variados =
 * ritmo de índice impreso. ACF-driven, sin restyle de .sc-diff__*.
 *
 * Lenguaje gráfico consistente con secciones 1-2: serif dorado weight 300,
 * --color-gold para decoración sobre fondo claro, --color-gold-ink para texto.
 *
 * Motion: count + connector via JS (1.6s power2.out @ top 85%, igual que el
 * counter existente). Lista entra con [data-stagger] global (80ms/item) DESPUÉS
 * de que el numeral se asiente. Reduced-motion / no-JS: "20 → 2.000" estático
 * con la regla pre-dibujada (scaleX 1), sin conteo. Misma composición.
 * ───────────────────────────────────────────────────────────────────── */

/* Texto solo-lectores (el numeral hero va aria-hidden). */
body.scc-fase0 .sc-cap__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Integrated header: eyebrow → numeral → title as one editorial block ── */
body.scc-fase0 .sc-cap__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Loose gap between the integrated header block and the body paragraph. */
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* The unified header block: eyebrow + H2 with embedded animated numeral.
 * No max-width cap — the title with its display numeral uses the full content column.
 * The old standalone .sc-cap__numerals block has been removed from HTML;
 * these CSS rules handle the new inline-numeral-in-title approach. */
body.scc-fase0 .sc-cap__header {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Full content width — previous 52rem cap was leaving the right half dead. */
  max-width: none;
}
body.scc-fase0 .sc-cap__eyebrow {
  display: block;
  margin-bottom: clamp(0.75rem, 2vw, 1.125rem);
}

/* ── Shared numeral style (used inline inside the H2 title) ── */
body.scc-fase0 .sc-cap__num {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(3.5rem, 9vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on cream (PASS). --color-gold = 2.36:1 (FAIL even for large text ≥3:1). */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Block inside the flex container; alignment handled by .sc-cap__inline-range
   * (inline-flex with align-items: center). */
  display: block;
}
body.scc-fase0 .sc-cap__num--to {
  /* Reserve enough width so the count-up doesn't reflow surrounding text. */
  min-width: 5ch;
}

/* ── Connector: inline variant lives inside the H2 ──
 * The connector is a sibling of the numerals inside .sc-cap__inline-range
 * which is an inline-flex container with align-items: center.
 * The rule therefore auto-centres vertically between the two numerals —
 * no vertical-align math needed on the connector itself. */
body.scc-fase0 .sc-cap__connector {
  display: block;
  width: clamp(2rem, 8vw, 6rem);
  height: 2px;
  position: relative;
  flex-shrink: 0;
}
/* Inline variant: generous width that reads as an em-dash run at display size. */
body.scc-fase0 .sc-cap__connector--inline {
  width: clamp(2.5rem, 10vw, 7rem);
  margin: 0 clamp(0.5rem, 1.5vw, 1rem);
}
body.scc-fase0 .sc-cap__connector-rule {
  position: absolute;
  inset: 0;
  background: var(--color-gold, #D99E39);
  transform-origin: left center;
  /* Default (no JS): pre-drawn full. JS resets to 0 and syncs. */
  transform: scaleX(1);
}

/* ── Title with embedded animated numeral ──
 * display: block so text-wrap: balance works. The title-prefix and
 * title-suffix are inline text; the inline-range is inline-block so
 * the numerals + connector can be vertically positioned as a unit.
 * The whole H2 is the unified editorial header — no separate numeral block. */
body.scc-fase0 .sc-cap__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-dark, #000);
  margin: 0;
  /* text-wrap: balance conflicts with the inline numeral wrapping correctly;
   * use pretty instead to handle orphans without forcing even line lengths. */
  text-wrap: pretty;
}

/* The variant that holds the inline numeral — same font, wider layout. */
body.scc-fase0 .sc-cap__title--inline-num {
  /* Allow the title to span the full content column width. */
  max-width: none;
}

/* Prefix/suffix: regular dark serif text that flows around the numeral. */
body.scc-fase0 .sc-cap__title-prefix,
body.scc-fase0 .sc-cap__title-suffix {
  color: var(--color-dark, #000);
  /* Inherit font from .sc-cap__title */
}
/* "más de"/"over" qualifier (home copy rework 2026-07-30, R7) — sits between
 * the connector and the animated "to" numeral inside .sc-cap__inline-range.
 * Regular prose size (not the large .sc-cap__num display size) so it reads
 * as a qualifier next to the numeral, same weight as the prefix/suffix. */
body.scc-fase0 .sc-cap__title-over {
  color: var(--color-dark, #000);
  margin-right: 0.3em;
}

/* The inline numeral group: from-num + connector + to-num.
 * inline-flex so it participates in text layout and the connector
 * auto-centres between the two numerals (align-items: center).
 * white-space: nowrap prevents the range from breaking mid-render. */
body.scc-fase0 .sc-cap__inline-range {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  white-space: nowrap;
  /* Optical: pull the numeral group down a hair so the tall glyphs
   * read as anchored to the same baseline as the title text. */
  position: relative;
  top: 0.04em;
}
/* Body paragraph: separated from the header block — breathes on its own. */
body.scc-fase0 .sc-cap__lede {
  max-width: 44rem;
}
/* Home copy rework 2026-07-30 (R7): capacidad_intro grew to 3 paragraphs
 * (wpautop output inside .sc-section__lead, now a <div>). Scoped to
 * .sc-cap__lede only — .sc-section__lead is reused as a single <p> elsewhere
 * on the site and must not be affected. */
body.scc-fase0 .sc-cap__lede .sc-section__lead p {
  margin: 0 0 0.75em;
}
body.scc-fase0 .sc-cap__lede .sc-section__lead p:last-child {
  margin-bottom: 0;
}

/* ── Closing band: operation types (left) + coverage & CTA (right) as one
   two-column grid that fills the full row. Before this, chips + coverage + CTA
   sat at ~48% width hugging the left edge, leaving a large void on the right
   under the full-width carousel. Asymmetric-but-filled, deliberate per brand. ── */
body.scc-fase0 .sc-cap__close {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 768px) {
  body.scc-fase0 .sc-cap__close {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }
}

/* ── Chips row: compact pill tags replacing the 01-05 numbered list ── */
body.scc-fase0 .sc-cap__chips {
  list-style: none;
  margin: 0; /* spacing now handled by .sc-cap__close grid gap */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.75rem;
  align-content: flex-start;
}
body.scc-fase0 .sc-cap__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 1.05em;
  border-radius: 9999px;
  border: 1px solid rgba(168, 116, 16, 0.35); /* --color-gold-ink at 35% */
  background: transparent;
  font-family: var(--font-sans);
  font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.72);
  cursor: default;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-cap__chip:hover {
    border-color: var(--color-gold-ink, #a87410);
    color: var(--color-gold-ink, #a87410);
    background: rgba(217, 158, 57, 0.06);
  }
}

/* ── Footer: coverage line (gold-keyed quiet inline) + CTA dorado ── */
/* Two CTAs (gold primary + outline secondary) sit side by side in their own
 * wrapper so the coverage paragraph above stays on its own line; wraps on
 * narrow screens instead of the default inline flow, which had no gap. */
body.scc-fase0 .sc-cap__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
body.scc-fase0 .sc-cap__coverage {
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
  max-width: 52ch;
  margin: 0 0 1.5rem;
  /* "key" dorada: hairline + leading dot, lectura tranquila. */
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-gold, #D99E39);
}

/* ── "Especialistas en:" (R10, home copy rework 2026-07-30) — sits after
   coverage, before the CTA row. Reuses .sc-cap__chips/.sc-cap__chip; only
   the label + wrapper spacing is new. ── */
body.scc-fase0 .sc-cap__specialists {
  margin: 0 0 1.5rem;
}
body.scc-fase0 .sc-cap__specialists-label {
  display: block;
}

/* ── Motion: entrance of the integrated header (numeral + title as one).
 * Count-up + connector are driven by JS; this handles the fade-in of the
 * whole header block so it settles before the list stagger fires. ── */
html.js-reveal-ready body.scc-fase0 .sc-cap__hero .sc-cap__header {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.8s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1));
}
html.js-reveal-ready body.scc-fase0 .sc-cap__hero .sc-cap__lede {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1)) 0.15s,
              transform 0.7s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1)) 0.15s;
}
html.js-reveal-ready body.scc-fase0 .sc-cap__hero.is-revealed .sc-cap__header,
html.js-reveal-ready body.scc-fase0 .sc-cap__hero.is-revealed .sc-cap__lede {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: static display, connector pre-drawn full, no count-up.
 * Same composition. JS respects prefers-reduced-motion and skips the counter. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal-ready body.scc-fase0 .sc-cap__hero .sc-cap__header,
  html.js-reveal-ready body.scc-fase0 .sc-cap__hero .sc-cap__lede {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.scc-fase0 .sc-cap__connector-rule {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 720px) {
  body.scc-fase0 .sc-cap__num {
    /* Lower ceiling on mobile so "2.000" doesn't overflow the sentence. */
    font-size: clamp(2.5rem, 11vw, 3.75rem);
  }
  body.scc-fase0 .sc-cap__num--to { min-width: 4.5ch; }
  body.scc-fase0 .sc-cap__connector--inline {
    width: clamp(1.5rem, 7vw, 3.5rem);
    margin: 0 clamp(0.375rem, 1vw, 0.625rem);
  }
  body.scc-fase0 .sc-cap__title {
    /* Scales down on tablet/mobile — still display register. */
    font-size: clamp(1.75rem, 6.5vw, 2.75rem);
    line-height: 1.15;
  }
}
@media (max-width: 480px) {
  body.scc-fase0 .sc-cap__num {
    /* 390px: compact numerals that don't force line-break mid-sentence awkwardly. */
    font-size: clamp(2rem, 10.5vw, 2.75rem);
  }
  body.scc-fase0 .sc-cap__num--to { min-width: 4ch; }
  body.scc-fase0 .sc-cap__connector--inline {
    width: clamp(1.25rem, 6vw, 2.5rem);
    margin: 0 clamp(0.25rem, 1vw, 0.5rem);
  }
  body.scc-fase0 .sc-cap__title {
    /* 390px: still reads as a display heading, avoids overflow. */
    font-size: clamp(1.5rem, 7.5vw, 2rem);
    letter-spacing: -0.025em;
    line-height: 1.18;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * Mini reviews (re-introducido 2026-06-08)
 *
 * 2 quotes curadas, NO el widget Trustindex completo. Pensado para la
 * audiencia bodas que necesita prueba emocional justo antes del form.
 * Visual: tipográfico, sin estrellas decorativas (la verificación va en el
 * link al pie). Grandes comillas en gold-ink como ornamento editorial.
 * Layout 2-col equal en desktop, stack en mobile.
 * ───────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-mini-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
body.scc-fase0 .sc-mini-review {
  position: relative;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2rem) 0 0 clamp(2.25rem, 4vw, 3rem);
}
body.scc-fase0 .sc-mini-review::before {
  content: "\201C"; /* curly opening quote */
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 6vw, 5rem);
  line-height: 1;
  color: var(--color-gold-ink, #a87410);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
body.scc-fase0 .sc-mini-review__quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--color-dark, #000);
  margin: 0 0 1rem;
  text-wrap: pretty;
  font-style: italic;
}
body.scc-fase0 .sc-mini-review__attr {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
body.scc-fase0 .sc-mini-review__author {
  font-weight: 500;
  color: var(--color-dark, #000);
}
body.scc-fase0 .sc-mini-review__context {
  color: rgba(0,0,0,0.62);
  font-size: 0.8125rem;
}
body.scc-fase0 .sc-mini-reviews__footer {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: 0.9375rem;
}

/* ===== WhatsApp floating button ===== */
body.scc-fase0 .sc-wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s;
  text-decoration: none;
}
body.scc-fase0 .sc-wa-float:hover { transform: scale(1.08); }
body.scc-fase0 .sc-wa-float svg { width: 26px; height: 26px; }

/* ===== Manifiesto layout helpers ===== */
body.scc-fase0 .sc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  body.scc-fase0 .sc-grid-2 { grid-template-columns: 1fr; }
}

body.scc-fase0 .sc-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 768px) {
  body.scc-fase0 .sc-grid-12 { grid-template-columns: 1fr; }
}
body.scc-fase0 .sc-col-4 { grid-column: span 4; }
body.scc-fase0 .sc-col-5 { grid-column: span 5; }
body.scc-fase0 .sc-col-7 { grid-column: span 7; }
body.scc-fase0 .sc-col-8 { grid-column: span 8; }
@media (max-width: 768px) {
  body.scc-fase0 .sc-col-4,
  body.scc-fase0 .sc-col-5,
  body.scc-fase0 .sc-col-7,
  body.scc-fase0 .sc-col-8 { grid-column: 1 / -1; }
}

/* ===== Center-tail link with gold underline ===== */
/* WCAG AA fix 2026-06-03: dorado claro fallaba (2.20:1 sobre cream).
 * --color-gold-ink (#a87410) → 4.6:1 sobre cream/white. PASS AA. */
body.scc-fase0 .sc-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gold-ink, #a87410);
  border-bottom: 1px solid rgba(217,158,57,0.4);
  padding-bottom: 0.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.25s, gap 0.3s;
  text-decoration: none;
  font-weight: 500;
}
body.scc-fase0 .sc-link-arrow:hover {
  border-color: var(--color-gold, #D99E39);
  gap: 0.75rem;
}

/* ===== Section spacer for stagger reveal items ===== */
body.scc-fase0 .sc-text-center { text-align: center; }
body.scc-fase0 .sc-mb-16 { margin-bottom: 4rem; }
body.scc-fase0 .sc-mt-12 { margin-top: 3rem; }

/* ─────────────────────────────────────────────────────────────────────
 * §8 Team figure — editorial portrait for "Un equipo con historia".
 * Framed (not full-bleed) with gold hairline accent; relief for the cream
 * plateau + face to the Harri/Kika bios. On-system, tokens only.
 * ───────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-team-figure {
  position: relative;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
body.scc-fase0 .sc-team-figure::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent 0%, var(--color-gold, #D99E39) 18%, var(--color-gold, #D99E39) 82%, transparent 100%);
}
body.scc-fase0 .sc-team-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  body.scc-fase0 .sc-team-figure:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-team-figure img { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────
 * §8b Team gallery — 2x2 event-photo grid under the team figure/body,
 * "Un equipo con historia" (client request 2026-07-15). Same cropped,
 * no-radius treatment as .sc-team-figure, without the gold hairline.
 * ───────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-team-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
body.scc-fase0 .sc-team-gallery__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
body.scc-fase0 .sc-team-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────
 * PROOF BLOCK — dark treatment for merged Pilares + Stats-dark
 * (home-funnel-restructure SLICE 1, 2026-06-23)
 *
 * Reuses .sc-stats-dark shell as the Proof container. The .sc-pillars--on-dark
 * modifier re-colors numeral / rule / label / title / body for AA contrast on
 * the near-black overlay (~#0d0805). Hover clip-path rule-wipe + numeral lift
 * + stagger reveal are preserved from the original .sc-pillars__* rules above.
 * Every selector prefixed body.scc-fase0 per CSS scoping constraint.
 * ───────────────────────────────────────────────────────────────────── */

/* Proof head: heading + credential lede */
body.scc-fase0 .sc-proof__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Credential sentence: Galvin/Michelin, one occurrence in Proof */
body.scc-fase0 .sc-proof__credential {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 46rem;
  text-wrap: pretty;
}

/* Color overrides for pillars on dark ground.
 * --color-gold passes AA on near-black (vs --color-gold-ink which is tuned for light). */
body.scc-fase0 .sc-pillars--on-dark .sc-pillars__numeral {
  color: var(--color-gold, #D99E39);
}
body.scc-fase0 .sc-pillars--on-dark .sc-pillars__rule {
  background: var(--color-gold, #D99E39);
}
body.scc-fase0 .sc-pillars--on-dark .sc-pillars__label {
  color: var(--color-gold, #D99E39);
}
body.scc-fase0 .sc-pillars--on-dark .sc-pillars__title {
  color: #fff;
}
body.scc-fase0 .sc-pillars--on-dark .sc-pillars__body {
  color: rgba(255, 255, 255, 0.82);
}

/* Facts strip: 2 numeric items (9 espacios, 3 divisiones).
 * Border-top with full border (not side-stripe — impeccable ban respected). */
body.scc-fase0 .sc-proof__facts {
  display: flex;
  gap: clamp(2rem, 6vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  list-style: none;
  flex-wrap: wrap;
}
body.scc-fase0 .sc-proof__facts li {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
body.scc-fase0 .sc-proof__fact-num {
  font-family: var(--font-serif, "Merriweather", serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold, #D99E39);
}
body.scc-fase0 .sc-proof__fact-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Mobile: facts stack to own lines for generous tap spacing */
@media (max-width: 480px) {
  body.scc-fase0 .sc-proof__facts {
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem);
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * SLICE 2: Compact Manifiesto + Process sequence + Capacity rhythm + Photo relief
 * (home-funnel-restructure SLICE 2, 2026-06-23)
 * All selectors scoped body.scc-fase0 per CSS constraint.
 * ───────────────────────────────────────────────────────────────────── */

/* ── 7.1  Compact Manifiesto ──
 * .sc-manifesto--compact tightens vertical padding and the left-column gutter.
 * The gold spine, clause reveal and __stitch hairline are PRESERVED — only
 * dead space is trimmed. No heading demotions. */
body.scc-fase0 .sc-manifesto--compact {
  --space-section-v: clamp(3rem, 6vw, 5rem);
  padding-top: var(--space-section-v);
  padding-bottom: var(--space-section-v);
}

/* Narrow the left spine column slightly to reclaim horizontal room. */
body.scc-fase0 .sc-manifesto--compact .sc-manifesto__layout {
  grid-template-columns: clamp(2rem, 4vw, 3rem) minmax(0, 1fr);
}
body.scc-fase0 .sc-manifesto--compact .sc-manifesto__content {
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
}

/* Spine margin-top adjustment now that the "00" folio is gone. */
body.scc-fase0 .sc-manifesto--compact .sc-manifesto__spine {
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

/* Tighter title bottom margin in compact mode. */
body.scc-fase0 .sc-manifesto--compact .sc-manifesto__title {
  margin-bottom: clamp(1.25rem, 3vw, 1.875rem);
}

/* ── 7.2  Process — breathing vertical sequence ──
 * .sc-steps--sequence overrides the 4-narrow-columns grid from card.css.
 * Each step becomes a 2-col row: gold numeral | title + desc.
 * Numbers EARN their place: this IS a real ordered 4-step flow. */
body.scc-fase0 .sc-steps--sequence {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.scc-fase0 .sc-steps--sequence .sc-step {
  display: grid;
  grid-template-columns: clamp(2.5rem, 5vw, 3.5rem) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}

/* Gold serif numeral — left column, weight 300, earned sequence marker. */
body.scc-fase0 .sc-steps--sequence .sc-steps__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-serif, "Merriweather", serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on cream (PASS). --color-gold = 2.36:1 (FAIL). */
  padding-top: 0.15em; /* optical alignment with title cap height */
  user-select: none;
}

/* Title and desc occupy the right column. */
body.scc-fase0 .sc-steps--sequence .sc-step__title {
  grid-column: 2;
  grid-row: 1;
  /* Override card.css size to fit the new layout — still prominent anchor. */
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  margin: 0 0 0.5rem;
}

body.scc-fase0 .sc-steps--sequence .sc-step__desc {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

/* Mobile: columns collapse, numeral stacks above title (mirrors pillars). */
@media (max-width: 480px) {
  body.scc-fase0 .sc-steps--sequence .sc-step {
    grid-template-columns: 1fr;
  }
  body.scc-fase0 .sc-steps--sequence .sc-steps__num {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }
  body.scc-fase0 .sc-steps--sequence .sc-step__title {
    grid-column: 1;
    grid-row: 2;
  }
  body.scc-fase0 .sc-steps--sequence .sc-step__desc {
    grid-column: 1;
    grid-row: 3;
  }
}

/* Reduced motion: no movement on step items (stagger handles opacity). */
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-steps--sequence .sc-step {
    transition: none;
  }
}

/* ── 8.1  Capacity carousel — CSS scroll-snap, no JS library
 * Replaces the single photo-band. ACF-overridable via capacity_gallery repeater.
 * body.scc-fase0 scoped per CSS constraint. */

body.scc-fase0 .sc-cap__carousel-wrap {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  /* Gold hairline top — full-width accent, not a side-stripe (impeccable-compliant). */
  border-top: 1px solid var(--color-gold, #D99E39);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}

body.scc-fase0 .sc-cap__carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Hide scrollbar but keep swipeable/keyboard-scrollable. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Peek: show ~95% of current slide + 5% of next for affordance. */
  gap: 0;
  cursor: grab;
}

body.scc-fase0 .sc-cap__carousel::-webkit-scrollbar {
  display: none;
}

body.scc-fase0 .sc-cap__carousel:active {
  cursor: grabbing;
}

body.scc-fase0 .sc-cap__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  overflow: hidden;
}

body.scc-fase0 .sc-cap__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
}

/* ── Carousel arrows — subtle chevron in the side gutter, outside the image.
 * Positioned absolute inside .sc-cap__carousel-wrap (position: relative,
 * overflow: visible). Arrows sit in the .sc-section__inner padding gutter
 * (clamp(1.25rem, 4vw, 2.5rem)) — never overlapping the image or the viewport.
 * Hidden on ≤768px: the track is swipeable via scroll-snap. */

body.scc-fase0 .sc-cap__carousel-wrap {
  position: relative;
  overflow: visible;
}

body.scc-fase0 .sc-cap__arrow {
  position: absolute;
  /* Vertically centred on the 16:9 image.
   * The image fills 100% wrap width at 16:9; its vertical midpoint is
   * at top: calc(50% * 9/16) = 28.125% of wrap width from the wrap top.
   * translateY(-50%) corrects for button height. */
  top: 28.125%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tap target ≥40px; visible glyph feels smaller thanks to transparent bg. */
  width: 2.75rem;
  height: 2.75rem;
  /* Subtle: no circle bg, no gold border — just the chevron glyph. */
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--color-gold, #D99E39);
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
  opacity: 0.75;
  z-index: 2;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Place arrows in the side gutter — outside the image edge.
 * translateX centres the button around the inner container edge. */
body.scc-fase0 .sc-cap__arrow--prev {
  left: 0;
  transform: translateY(-50%) translateX(-100%);
}

body.scc-fase0 .sc-cap__arrow--next {
  right: 0;
  transform: translateY(-50%) translateX(100%);
}

@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-cap__arrow:hover {
    opacity: 1;
    color: var(--color-gold, #D99E39);
  }

  body.scc-fase0 .sc-cap__arrow--prev:hover {
    transform: translateY(-50%) translateX(-100%) translateX(-3px);
  }

  body.scc-fase0 .sc-cap__arrow--next:hover {
    transform: translateY(-50%) translateX(100%) translateX(3px);
  }
}

body.scc-fase0 .sc-cap__arrow:focus-visible {
  outline: 2px solid var(--color-gold-ink, #a87410); /* a11y: gold-ink = 4.61:1 on cream (PASS). */
  outline-offset: 3px;
  opacity: 1;
}

body.scc-fase0 .sc-cap__arrow:active {
  opacity: 0.6;
}

/* Mobile ≤768px: hide arrows — track is swipeable via scroll-snap. */
@media (max-width: 768px) {
  body.scc-fase0 .sc-cap__arrow {
    display: none;
  }
}

/* Dot indicators — gold filled/outline pattern, centred below track. */
body.scc-fase0 .sc-cap__dots {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  padding-top: clamp(0.875rem, 2vw, 1.25rem);
}

body.scc-fase0 .sc-cap__dot {
  position: relative; /* anchor for ::before touch-target overlay */
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-gold, #D99E39);
  background: transparent;
  transition: background 200ms ease, transform 200ms ease;
}

/* WCAG 2.5.8: expand hit area to 24×24px without changing visual dot size */
body.scc-fase0 .sc-cap__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 1.5rem;  /* 24px */
  min-height: 1.5rem; /* 24px */
}

body.scc-fase0 .sc-cap__dot:hover,
body.scc-fase0 .sc-cap__dot:focus-visible {
  background: var(--color-gold, #D99E39);
  transform: scale(1.25);
  outline: 2px solid var(--color-gold-ink, #a87410); /* a11y: gold-ink focus ring = 4.61:1 on cream (PASS). */
  outline-offset: 2px;
}

/* Active dot — JS toggles .is-active via IntersectionObserver.
 * No :first-child fallback: it would permanently override JS state on dot 1. */
body.scc-fase0 .sc-cap__dot.is-active {
  background: var(--color-gold, #D99E39);
}

/* Reveal: reuse data-reveal pattern. */
html.js-reveal-ready body.scc-fase0 .sc-cap__carousel-wrap {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-reveal-ready body.scc-fase0 .sc-cap__carousel-wrap.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-cap__carousel {
    scroll-behavior: auto;
  }
  html.js-reveal-ready body.scc-fase0 .sc-cap__carousel-wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}