/* ============================================================================
   SPICA HOME V6 · SECTIONS, layout por sección
   ========================================================================== */

/* ---- header ----------------------------------------------------------------
   r3 (30-ago): al scrollear el nav se convierte en una pastilla flotante
   "Liquid Glass" (material Apple iOS 26): blur bajo + saturacion alta, rim
   especular Fresnel con inset shadows, tinte con profundidad y sheen superior.
   Safari-first: nada de filtros SVG en backdrop-filter (solo Chromium los
   renderiza); el vidrio vive en ::before y entra por opacity (animar
   backdrop-filter directo es caro). Arriba del todo el header se ve como
   siempre: transparente, full-width. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding: 0.5rem 0; /* el row aporta 0.45rem propios: altura total como antes */
  transition: transform 0.45s var(--ease);
  pointer-events: none; /* la pastilla no ocupa todo el ancho; el resto deja pasar clicks */
}
.site-header__row,
.site-header a { pointer-events: auto; }
/* r3 U-02: en el fondo de la pagina la pastilla se suelta (el footer trae su
   propia navegacion); vuelve al subir */
.site-header--parked { transform: translateY(-130%); }
.site-header--parked .site-header__row,
.site-header--parked a { pointer-events: none; }
/* r4 C1-C3 (Cesar): el nav NO se encoge nunca. La fila vive SIEMPRE en el
   shell clasico (88rem / gutter 5vw, el .shell de base) y el layout es una
   grilla 1fr auto 1fr: marca a la izquierda, links centrados geometricamente
   de verdad, CTA a la derecha. Al scrollear solo ENCIENDE la piel de vidrio
   (::before/::after), sin cambios de ancho, gap ni padding. */
.site-header__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 0.45rem 0;
  border-radius: var(--radius-pill);
}
/* la piel de vidrio: montada siempre, encendida solo al scrollear.
   r4 C3: el contenido no se mueve del shell; la pastilla respira sola con un
   inset negativo horizontal (menor que el gutter minimo de 1.5rem: no desborda) */
.site-header__row::before,
.site-header__row::after {
  content: "";
  position: absolute;
  inset: -0.1rem -1.1rem;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--dur-panel) var(--ease),
    background var(--dur-state) var(--ease),
    box-shadow var(--dur-state) var(--ease);
}
.site-header__row::before {
  /* vidrio: tinte de papel + blur saturado + rim especular Fresnel */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.08) 42%,
      rgba(17, 17, 16, 0.035)),
    color-mix(in srgb, var(--paper) 46%, transparent);
  -webkit-backdrop-filter: blur(13px) saturate(175%) brightness(1.04);
  backdrop-filter: blur(13px) saturate(175%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.3),
    inset -1.5px -1.5px 3px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 12px 32px rgba(17, 17, 16, 0.1),
    0 2px 8px rgba(17, 17, 16, 0.06);
}
.site-header__row::after {
  /* highlight especular que resbala desde arriba */
  background: radial-gradient(120% 90% at 50% -30%,
    rgba(255, 255, 255, 0.5), transparent 60%);
}
.site-header.is-scrolled .site-header__row::before,
.site-header.is-scrolled .site-header__row::after { opacity: 1; }

/* r3 U-01: variante OSCURA del liquid glass (el material de Apple adapta su
   tinte al contenido debajo). home.js sondea la seccion bajo el nav con
   elementFromPoint y pone .site-header--dark sobre numbers, slides dark,
   pillar--dark, door-strip, contact y footer. */
.site-header--dark .site-header__row::before {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.04) 42%,
      rgba(0, 0, 0, 0.18)),
    color-mix(in srgb, var(--ink) 54%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.1),
    inset -1.5px -1.5px 3px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.22);
}
.site-header--dark .site-header__row::after {
  background: radial-gradient(120% 90% at 50% -30%,
    rgba(255, 255, 255, 0.24), transparent 60%);
}
/* r5 C22: TODO lo que cambia con --dark transiciona suave (color del texto,
   marca y subrayado de links); nada instantaneo y nada que toque layout */
.brand__word, .brand__mark, .site-nav a { transition: color var(--dur-state) var(--ease); }
.site-header--dark .brand__word { color: var(--paper); }
.site-header--dark .brand__mark { color: var(--violet-bright); }
.site-header--dark .site-nav a { color: var(--paper); }
/* r5 C22 (Cesar): el CTA "Get started" queda NEGRO SIEMPRE (btn--primary,
   fondo ink + texto paper), tambien bajo .site-header--dark. La regla que lo
   invertia (fondo paper + texto ink) causaba el salto al cruzar secciones. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  grid-column: 1;
  justify-self: start; /* r4: sin stretch, el area clickeable es solo la marca */
}
/* r10 (1-sep, Cesar: "el logo aparece cortado"). Y lo estaba, medido con
   getBBox() en el navegador: la flor ocupa 237.48 x 269.88 unidades y el
   viewBox que venia de v4 era `360 380 285 250`, o sea 12.47 unidades menos
   por arriba y 7.41 por abajo. Se comian los petalos de arriba y de abajo, un
   7,4% del simbolo, en el header, el footer, los section-head y el bloque 08 (retirado en r14).
   El viewBox nuevo `375 359.5 254 286` es la caja real mas 8 unidades de aire
   por lado. Como la flor es MAS ALTA QUE ANCHA (0.888) y la caja vieja era mas
   ancha que alta (1.14), las piezas pasan a medirse por ALTO con el MISMO
   numero de antes: asi la flor dibujada conserva su ancho al pixel y recupera
   entera su altura. La palabra tampoco tenia aire: su caja media 889.03 x
   276.04 dentro de un viewBox de 889.01 x 276.03, o sea la A tocaba el borde
   exacto. Ahora lleva 10 unidades de margen y el alto sube un 7,2% para
   compensar, que es lo que deja el lettering del mismo tamano de siempre. */
.brand__mark { height: 2rem; width: auto; color: var(--violet); }
/* r8 C41: la palabra dejo de ser texto tipografiado con Archivo y pasa a ser
   el lettering real del logo 2026 en vector (<use href="#spica-word">). Se
   dimensiona por ALTO y el ancho lo pone la proporcion 889.01:276.03 del
   original, asi que la marca ocupa el mismo hueco que antes (114.75 contra
   114.28px a 1440). El color viaja por `color` porque los trazos van en
   currentColor: la variante oscura del nav sigue funcionando sin tocar nada. */
.brand__word {
  height: 1.52rem; /* r10: 1.42 x 1.0725, compensa el margen nuevo del viewBox */
  width: auto;
  display: block;
  color: var(--ink);
}
/* r4 C2: los links viven en la columna central de la grilla, centrados
   geometricamente respecto del nav completo (las columnas laterales son 1fr).
   Columnas EXPLICITAS: si el nav se oculta (<=720) el CTA no se corre al medio. */
.site-nav {
  display: flex;
  gap: 1.9rem;
  grid-column: 2;
  justify-self: center;
}
.site-header__cta { grid-column: 3; justify-self: end; }
.site-nav a {
  font-size: 0.92rem;
  font-weight: 480;
  position: relative;
}
/* r10 (Cesar, 1-sep): fuera el subrayado que se barria al hover. Ahora el
   enlace se ENCIENDE: pasa a violeta con un halo muy bajo, del mismo color.
   Sobre papel el halo casi no se ve y lo que manda es el cambio de tinta;
   sobre la variante oscura del nav el halo si aporta y evita que el violeta
   base quede apagado contra la tinta. La transicion de color ya vivia en la
   regla compartida de arriba (.brand__word, .brand__mark, .site-nav a). */
.site-nav a {
  transition:
    color var(--dur-state) var(--ease),
    text-shadow var(--dur-state) var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--violet);
  text-shadow: 0 0 14px color-mix(in srgb, var(--violet) 30%, transparent);
}
.site-header--dark .site-nav a:hover,
.site-header--dark .site-nav a:focus-visible {
  color: var(--violet-bright);
  text-shadow: 0 0 16px color-mix(in srgb, var(--violet-bright) 45%, transparent);
}
/* en tactil el :hover se queda pegado despues del toque: alli no se enciende */
@media (hover: none) {
  .site-nav a:hover { color: inherit; text-shadow: none; }
}
.site-header__cta { padding: 0.7rem 1.3rem; }

/* ---- hero ------------------------------------------------------------------ */
/* r5 C24 (Cesar): la copy del hero respeta el margen izquierdo del sitio. El
   override amplio local de r3.1 (105rem / gutter chico) se retiro: el texto y
   el cue "Scroll" arrancan en la MISMA x que la marca del nav (shell clasico
   88rem / gutter 5vw de tokens). El stage 3D es absoluto sobre el viewport y
   no depende del shell: el cluster no se mueve ni cambia de ancho. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__stage {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100svh;
  z-index: 0;
}
#hero-canvas { width: 100%; height: 100%; }
.hero__grid {
  position: relative;
  z-index: 1;
  padding: 8rem 0 6rem;
}
.hero__copy {
  max-width: 46rem;
  display: grid;
  gap: 1.15rem;
}
.hero__specialties {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.85rem);
  font-weight: 480;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 34rem;
  line-height: 1.75;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.4rem;
}
.hero__cue {
  position: absolute;
  z-index: 1;
  /* r5 C24: misma x que la marca del nav = borde izquierdo del shell centrado
     (en viewports anchos el shell topa en 88rem y su borde ya no es el gutter) */
  left: max(var(--gutter), calc((100% - var(--shell)) / 2));
  bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.hero__cue::before {
  content: "";
  width: 1px;
  height: 2.2rem;
  background: var(--ink-soft);
  animation: cue-drop 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
/* r3 H6: microcopy discreto sobre el cluster 3D (los objetos reaccionan al
   mouse y casi nadie lo descubre solo). El texto final lo confirma COMMS. */
.hero__hint {
  position: absolute;
  z-index: 1;
  right: clamp(4rem, 13vw, 15rem);
  top: 17svh;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 480;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
}
/* r8c: aqui vivia un `@media (max-width: 720px) { .hero__hint { right: 1.4rem;
   top: 40svh } }` que ya no pintaba nada: desde r6, css/responsive.css carga
   despues y su bloque `@media (max-width: 899px)` reescribe `top` y (ahora)
   `left`/`right` con la misma especificidad, asi que ganaba siempre. Se retira
   la regla muerta; verificado a 0.00px contra la version que aun la llevaba. */

/* r11 (1-sep, Cesar): en tactil el hero vuelve a ser interactivo, pero de una
   sola forma: tocar dispersa los cuerpos y gira la paleta. Nada sigue al dedo y
   no hay estela. El texto cambia por tipo de puntero para no prometer un
   arrastre que en tactil ya no existe. El escritorio con raton queda intacto. */
.hero__hint-coarse { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hero__hint-fine { display: none; }
  .hero__hint-coarse { display: inline; }
  /* apagado 600 ms despues del primer toque util (evento spica:hero-tapped que
     emite hero3d.js en el primer burst; el barrido de invitacion NO cuenta).
     Sube de especificidad para ganarle a `.js [data-reveal].is-in`, que fija
     opacity 1. No vuelve en la sesion. */
  .js .hero__hint[data-reveal][data-hero-tapped] {
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
    transition-delay: 0s;
  }
}

/* ---- numbers ---------------------------------------------------------------
   r3 R1 (30-ago): la banda deja el slate (que ya cargan "answered" y contact)
   y toma el teal profundo del sistema: verde = crecimiento/dinero, y la pagina
   gana un tercer registro de color entre el papel del hero y el papel del map.
   Acentos: teal-bright para views, ambar para leads, statement em en ambar. */
.numbers {
  background: var(--teal-deep);
  color: var(--paper);
  padding: clamp(2.6rem, 5vw, 4rem) 0;
}
/* r2 (30-ago): todo centrado de verdad. Las rayas laterales hacían que los
   items colgaran del borde izquierdo de su columna y la banda se leía chueca. */
.numbers__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.numbers__item {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}
.numbers__item::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-bright);
  margin-bottom: 0.4rem;
}
.numbers__item:last-of-type::before { background: var(--amber-bright); }
.numbers__value {
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.numbers__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.6);
  max-width: 24ch;
}
.numbers__statement {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--paper);
}
.numbers__statement em {
  font-style: normal;
  color: var(--amber-bright);
}

/* ---- section head compartido ---------------------------------------------- */
.section-head {
  display: grid;
  gap: 1.3rem;
  max-width: 52rem;
  margin-bottom: var(--rhythm-half);
}

/* ---- map (r3: solo el head; las tarjetas viven en .specialties) ------------ */
.map { padding: var(--rhythm) 0 calc(var(--rhythm) * 0.35); }
.section-head--map { margin-bottom: 0; }
.section-head__flower {
  height: 2.6rem;
  width: auto;
  color: var(--violet);
}

/* ---- pilares --------------------------------------------------------------- */
.pillar { padding: var(--rhythm) 0; }
#strategy .kicker__num { color: var(--amber-text); }
.pillar__head { margin-bottom: 0; display: grid; gap: 1.2rem; }

.pillar--dark {
  background: var(--slate);
  color: var(--paper);
  border-radius: clamp(20px, 3.4vw, 44px);
  margin-inline: clamp(0.5rem, 1.2vw, 1.2rem);
}
.pillar--dark .kicker { color: rgba(246, 245, 241, 0.65); }
.pillar--dark .kicker__num { color: var(--teal-bright); }
.pillar--dark .lead { color: rgba(246, 245, 241, 0.72); }
.pillar--dark .service__rule { border-color: var(--line-on-dark); color: rgba(246, 245, 241, 0.72); }
.pillar--dark .chip {
  background: rgba(246, 245, 241, 0.06);
  border-color: var(--line-on-dark);
  color: rgba(246, 245, 241, 0.8);
}
.pillar--dark .chip--us {
  background: rgba(86, 168, 143, 0.14);
  border-color: var(--teal-bright);
  color: var(--teal-bright);
}
.pillar--dark .scene-caption { color: rgba(246, 245, 241, 0.55); }
.pillar--dark .service__list b { color: var(--paper); }
.pillar--dark .service__list li { color: rgba(246, 245, 241, 0.75); }
.pillar--dark p { color: rgba(246, 245, 241, 0.82); }
.pillar--dark .h2, .pillar--dark .h3 { color: var(--paper); }

/* ---- bloque de servicio ---------------------------------------------------- */
.service {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: var(--rhythm-half) 0;
}
.service + .service { border-top: 1px solid var(--line); }
.pillar--dark .service + .service { border-top-color: var(--line-on-dark); }
.service--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.service--flip .service__copy { order: 2; }
.service--flip .service__media { order: 1; }

.service__copy { display: grid; gap: 1.1rem; max-width: 38rem; }
.service__copy > p { color: var(--ink-soft); }
.pillar--dark .service__copy > p { color: rgba(246, 245, 241, 0.78); }

.service__list { display: grid; gap: 0.55rem; }
.service__list li {
  padding-left: 1.15rem;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.service__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--violet);
  font-weight: 640;
}

.service__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.service__rule {
  border-left: 2px solid var(--violet);
  padding: 0.7rem 0 0.7rem 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.service__toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  gap: 0.25rem;
  width: fit-content;
}
.service__toggle-btn {
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.service__toggle-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

.service__plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  padding: 1.1rem 1.1rem 1rem;
  display: grid;
  gap: 0.2rem;
  transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.plan b {
  font-size: 2rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.plan small { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.35rem; }
.plan--star { border-color: var(--violet); background: var(--lavender-light); }
.plan--star b { color: var(--violet); }
.plan--star small { color: var(--violet-deep); }

.service__doorline {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.service__doorline span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 26ch;
}

/* ---- media/escena ---------------------------------------------------------- */
.service__media { display: grid; gap: 0.7rem; justify-items: stretch; }
.scene-caption {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- ownership / door-strip (pilar 02) ------------------------------------- */
.ownership {
  border: 1px solid var(--line-on-dark);
  border-left: 3px solid var(--teal-bright);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.9rem;
  margin-top: var(--rhythm-half);
  max-width: 56rem;
  display: grid;
  gap: 0.5rem;
}
.ownership__title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.ownership p:not(.ownership__title) { color: rgba(246, 245, 241, 0.72); font-size: 0.98rem; }

.door-strip {
  margin-top: var(--rhythm-half);
  background: linear-gradient(120deg, var(--teal-deep), var(--teal));
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.door-strip__title {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.door-strip__copy { color: rgba(255, 255, 255, 0.72); max-width: 46ch; margin-top: 0.3rem; }
/* r5 C23: el agua vuelve a los pseudos CSS; el tinte va directo en ::before/::after */
.door-strip .btn--violet { background: var(--paper); color: var(--ink); }
.door-strip .btn--violet::before,
.door-strip .btn--violet::after { background: var(--ink); }
.door-strip .btn--violet:hover { color: var(--paper); }

/* ---- estrategia (3.1) ------------------------------------------------------ */
.strategy {
  counter-reset: none;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  overflow: hidden;
}
.strategy li {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  padding: 0.95rem 1.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: background var(--dur-micro) var(--ease);
}
.strategy li:hover { background: var(--amber-light); }
.strategy li + li { border-top: 1px solid var(--line); }
.strategy li span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--amber-text);
  flex: none;
}
.strategy li b {
  color: var(--ink);
  font-weight: 570;
  flex: 0 0 clamp(9rem, 12vw, 11rem);
}

.distinction {
  margin-top: var(--rhythm-half);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 1.7rem 2rem;
  max-width: 56rem;
  display: grid;
  gap: 0.55rem;
  background: var(--paper-raised);
}
.distinction__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-text);
}
.distinction__title { font-size: 1.45rem; font-weight: 620; letter-spacing: -0.02em; }
.distinction p:last-child { color: var(--ink-soft); font-size: 0.98rem; }

/* ---- work ------------------------------------------------------------------ */
.work { padding: var(--rhythm) 0; background: var(--mist); }
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.2rem;
}
.work__card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--slate);
  aspect-ratio: 4 / 3;
}
.work__card--reel { grid-column: span 7; aspect-ratio: 16 / 9.5; }
.work__card:nth-child(2) { grid-column: span 5; }
.work__card:nth-child(3) { grid-column: span 5; }
.work__card:nth-child(4) { grid-column: span 7; aspect-ratio: 16 / 9.5; }
.work__card img, .work__card video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.work__card--crm img { object-position: center top; }
.work__card:hover img { transform: scale(1.035); }
.work__card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(transparent, rgba(17, 17, 16, 0.72));
  pointer-events: none;
}
.work__card--reel::after {
  inset: 0 0 auto 0;
  background: linear-gradient(rgba(17, 17, 16, 0.62), transparent);
}
.work__card figcaption {
  position: absolute;
  z-index: 1;
  left: 1.1rem; bottom: 1rem; right: 1.1rem;
  color: #fff;
  font-weight: 560;
  font-size: 1.02rem;
  display: grid;
  gap: 0.15rem;
  pointer-events: none;
}
.work__card--reel figcaption { top: 1rem; bottom: auto; }
.work__card figcaption span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.clients {
  margin-top: var(--rhythm-half);
  background: var(--slate);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 3.4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
}
.clients img {
  height: clamp(2.1rem, 3.4vw, 3rem);
  width: auto;
  opacity: 0.85;
  transition: opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease-out);
}
.clients li:hover img { opacity: 1; transform: translateY(-3px); }

/* ---- doors (r3: compacta y CENTRADA, cada puerta con su espacio; U-06) ------ */
.doors { padding: calc(var(--rhythm) * 0.7) 0; }
.doors .section-head { margin-bottom: calc(var(--rhythm-half) * 0.75); }
.doors__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  max-width: 58rem;
  margin-inline: auto;
}
.door-card { text-align: left; }
/* r4 C21: columna flex + margin-top:auto en el boton, asi los CTAs de ambas
   puertas quedan en la MISMA linea horizontal aunque el texto difiera */
.door-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 1.7rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
.door-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.door-card--violet {
  background: var(--violet-deep);
  border-color: var(--violet-deep);
  color: var(--paper);
}
.door-card.door-card--violet .h3 { color: #fff; }
.door-card.door-card--violet p { color: rgba(246, 245, 241, 0.85); }
.door-card.door-card--violet li { color: rgba(246, 245, 241, 0.88); }
.door-card.door-card--violet li::before { color: var(--violet-bright); }
.door-card.door-card--violet .door-card__tag { color: var(--violet-bright); }
.door-card__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet);
}
.door-card p { color: var(--ink-soft); font-size: 0.98rem; }
.door-card ul { display: grid; gap: 0.5rem; }
.door-card li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.door-card li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--violet-bright);
  font-weight: 640;
}
.door-card .btn { align-self: flex-start; margin-top: auto; }
/* r5 C23: el agua vuelve a los pseudos CSS; el tinte va directo en ::before/::after */
.door-card--violet .btn--primary { background: var(--paper); color: var(--ink); }
.door-card--violet .btn--primary::before,
.door-card--violet .btn--primary::after { background: var(--violet); }
/* r5 fix P2 supervision: aqui el label cruza de ink a blanco sobre violeta y
   cualquier gris intermedio empata la luminancia de una de las dos superficies;
   el flip es instantaneo a los 210ms, cuando la ola ya cubre ~85% del texto
   (ink sobre violeta aguanta 3.07:1 ese instante; nunca hay gris ilegible) */
.door-card--violet .btn--primary { transition: color 0.01s step-end 0.21s; }
.door-card--violet .btn--primary:hover { color: #fff; }

.doors__tone {
  margin-top: calc(var(--rhythm-half) * 0.7);
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---- contact ---------------------------------------------------------------- */
.contact {
  padding: var(--rhythm) 0;
  background: var(--slate);
  color: var(--paper);
}
.contact .kicker { color: rgba(246, 245, 241, 0.65); }
.contact .kicker__num { color: var(--violet-bright); }
.contact .lead { color: rgba(246, 245, 241, 0.72); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact__intro { display: grid; gap: 1.3rem; }
.contact__direct { margin: 0.8rem 0 0; display: grid; gap: 0.9rem; }
.contact__direct div { display: grid; gap: 0.15rem; }
.contact__direct dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.5);
}
.contact__direct dd { margin: 0; font-size: 1.05rem; font-weight: 520; }
.contact__direct a:hover { color: var(--violet-bright); }

.contact__form {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 1.1rem;
}
.contact__legend {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact__doors { display: grid; gap: 0.45rem; }
.contact__doors label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.contact__doors label:has(input:checked) {
  border-color: var(--violet);
  background: var(--lavender-light);
}
.contact__doors input { accent-color: var(--violet); }
.field { display: grid; gap: 0.35rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(109, 74, 203, 0.16);
}
.field textarea { resize: vertical; min-height: 6rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.contact__submit { justify-self: start; }
.contact__micro { font-size: 0.78rem; color: var(--ink-faint); }
.contact__status { font-size: 0.9rem; font-weight: 540; color: var(--go); min-height: 1.2em; }

/* ---- footer ----------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2.2rem, 5vw, 3.6rem) 0 1.6rem;
}
/* r2 QA: banda clara para los logos. Sobre tinta, Vianka/BA/QoR desaparecian
   y el crest de King Roof violaba su regla (fondo oscuro pide version blanca).
   Sobre papel todos los logos originales son legales y legibles. */
.footer__partners {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem);
  flex-wrap: wrap;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.4rem, 3vw, 2.4rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.footer__partners-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: none;
}
.footer__partners ul {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  flex-wrap: wrap;
  margin-left: auto;
}
.footer__partners img {
  /* r3 U-04: altura normalizada un paso arriba y sin velo de opacidad */
  height: clamp(1.8rem, 2.4vw, 2.3rem);
  width: auto;
  opacity: 0.95;
  transition: opacity var(--dur-state) var(--ease);
}
/* los logos muy claros (pastel) ganan cuerpo sin recolorearse */
.footer__partners img[src*="vianka-med-spa"],
.footer__partners img[src*="queen-of-the-roof"] {
  filter: contrast(1.35) saturate(1.2);
}
/* estos assets son la version blanca (venian de la franja oscura de v4):
   sobre papel se oscurecen a silueta tinta para que se lean */
.footer__partners img[src*="ba-kitchen-bath"],
.footer__partners img[src*="integrated-restoration"] {
  filter: brightness(0.3);
}
.footer__partners li:hover img { opacity: 1; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(246, 245, 241, 0.14);
}
.footer__mark { height: 2.6rem; width: auto; color: var(--violet-bright); margin-bottom: 1rem; }
.footer__brand p { color: rgba(246, 245, 241, 0.62); max-width: 30ch; }
.footer__nav, .footer__social { display: grid; gap: 0.6rem; align-content: start; }
.footer__nav a, .footer__social a {
  color: rgba(246, 245, 241, 0.72);
  font-size: 0.95rem;
  width: fit-content;
}
.footer__nav a:hover, .footer__social a:hover { color: var(--violet-bright); }
/* r8: el enlace de privacidad hereda el estilo legal pero sube de 0.4 a 0.7 de
   luz, porque a 0.4 un enlace no se distingue del texto muerto que lo rodea. */
.footer__legal-link {
  color: rgba(246, 245, 241, 0.7);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.footer__legal-link:hover { color: var(--violet-bright); }
.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* r14 QA final P1-1: 0.4 daba 3.60:1 sobre --ink (10.2px, umbral 4.5).
     A 0.55 son 5.77:1, medido; el enlace Privacy sigue a 0.7. */
  color: rgba(246, 245, 241, 0.55);
}

/* ---- responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .service, .service--flip { grid-template-columns: 1fr; gap: 2.2rem; }
  .service--flip .service__copy { order: 1; }
  .service--flip .service__media { order: 2; }
  .numbers__row { grid-template-columns: 1fr 1fr; }
  .numbers__statement { grid-column: 1 / -1; order: -1; }
  .contact__grid { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr 1fr; }
  .work__card, .work__card--reel,
  .work__card:nth-child(2), .work__card:nth-child(3), .work__card:nth-child(4) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
  .doors__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header__row { gap: 0.8rem; }
  .site-header__cta {
    margin-left: auto;
    padding: 0.55rem 0.95rem;
    font-size: 0.66rem;
  }
  .brand__mark { height: 1.7rem; width: auto; }
  .brand__word { height: 1.33rem; }
  /* en móvil el 3D vive SOLO en la franja superior: nunca pisa la copy */
  .hero__stage { height: 46svh; }
  .hero__grid { padding-top: min(50svh, 26rem); padding-bottom: 3.5rem; }
  .numbers__row { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .numbers__label { max-width: none; }
  .numbers__statement { font-size: 1.15rem; }
  .work__grid { grid-template-columns: 1fr; }
  .service__plans { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__cue { display: none; }
  .service__toggle { width: 100%; }
  .service__toggle-btn {
    flex: 1;
    padding: 0.5rem 0.4rem;
    font-size: 0.6rem;
    white-space: normal;
    text-align: center;
  }
  .door-strip { padding: 1.5rem; }
  .ownership { padding: 1.3rem 1.4rem; }
}


/* ============================================================================
   RONDA 30-AGO R2 · outcomes, before/after, steps, faq, footer show
   Superficies con color por seccion (receta ManyChat adaptada al sistema):
   un acento por vista, color en superficies grandes, grid sutil de lineas.
   ========================================================================== */

/* ---- pinned outcomes (r3) -----------------------------------------------------
   Apilado por defecto (movil, reduced-motion, ?static, sin JS). js/pinned.js
   activa el modo pantalla quieta agregando .pin--active: el stage se vuelve
   sticky de 100svh, los slides se apilan absolutos y el scroll los intercambia
   con damping k=12 (los estilos por-frame los pone JS inline). */
.pin { position: relative; }
/* r4 C6 (Cesar): el pin deja el papel y toma UNA superficie de color constante
   para todos sus slides (la regla r3.1 de fondo unico sigue viva: jamas
   superficies por slide). Decision del director tras comparar --mist,
   --teal-light y --amber-light en screenshots: gana --mist, la plata calida.
   Es la unica superficie sin lealtad de matiz: teal-light tenia de verde los
   slides violeta/ambar y amber-light calentaba de naranja los teal, mientras
   que mist deja respirar a los tres acentos por igual, se despega claramente
   del papel del head y hace saltar las tarjetas paper-raised de las demos.
   El fondo vive en el stage (el elemento sticky): pixel a pixel constante. */
.pin__stage {
  position: relative;
  background-color: var(--mist);
}
/* r4 C7: la maya de 132px ya no banha todo el stage; vive en un pseudo
   enmascarado que la revela SOLO en el sector derecho (donde viven las demos)
   con un fade horizontal suave. El lado editorial queda limpio. */
.pin__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 17, 16, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 16, 0.05) 1px, transparent 1px);
  background-size: 132px 132px;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, rgba(0, 0, 0, 0.7) 64%, #000 80%);
  mask-image: linear-gradient(90deg, transparent 42%, rgba(0, 0, 0, 0.7) 64%, #000 80%);
}
/* los slides pintan ENCIMA del pseudo de la maya tambien en modo apilado */
.pin-slide {
  position: relative;
  padding: calc(var(--rhythm) * 0.3) 0;
}
.pin-slide__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* r4 C9: dentro de cada slide la columna de texto va centrada en su propio
   div: kicker, titulo, lead, meta y las acciones como grupo. Vale igual para
   el modo pinned y el fallback apilado; la demo no cambia. */
.pin-slide__copy {
  display: grid;
  gap: 1.05rem;
  max-width: 34rem;
  justify-self: center;
  justify-items: center;
  text-align: center;
}
.pin-slide__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 480;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* r4 C6: sobre mist el ink-faint cae a 4.23:1; ink-soft rinde 6.29 (AA) */
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pin-slide .kicker { color: var(--pin-accent, var(--violet)); justify-content: center; }
.pin-slide__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
/* r13: vuelve .pin-slide__more, el enlace "How we..." de cada slide. Se
   restaura VERBATIM de backups-spica-home-v6-r7-pre/css/sections.css, lineas
   1095 a 1114, porque services.html ya existe y los siete destinos de linea
   son fijos. El color hereda --pin-accent, o sea los acentos por Specialty que
   r4 C6 dejo calculados para pasar AA sobre mist (teal 4.77, ambar 5.0,
   violeta 4.75): no se recalcula nada.
   Efecto lateral esperado y aceptado, el inverso del que midio r7 C36: con dos
   hijos, .pin-slide__actions centra la PAREJA en el eje de la columna de copy,
   asi que el boton se corre a la izquierda la mitad de (ancho del enlace mas el
   gap de 1.4rem). Lo pide el CSS aprobado; no se compensa. */
.pin-slide__more {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 520;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pin-accent, var(--violet));
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.pin-slide__more em {
  font-style: normal;
  display: inline-flex;
  width: 1em;
  height: 1em;
  transition: transform var(--dur-state) var(--ease);
}
.pin-slide__more em svg { width: 100%; height: 100%; }
.pin-slide__more:hover em { transform: translateX(4px); }

/* acentos por specialty (r3.1): sin superficies por slide, el acento vive
   SOLO en kicker, link "How we...", chip, agua del CTA y ticks del rail.
   r4 C6: sobre la mist los valores base ya no llegan a AA en texto chico
   (teal 3.9:1, amber-text 4.3:1); el acento de texto se hunde un paso con
   color-mix DENTRO de su propia familia (mismo dueno, mismo matiz) hasta
   pasar 4.5:1 medido: teal 70/30 teal-deep = 4.77, amber-text 90/10 ink =
   5.0. El violeta base pasa solo (4.75). El agua del CTA sigue en teal puro
   (el boton no es texto sobre la superficie). */
.pin-slide--sys { --pin-accent: color-mix(in srgb, var(--teal) 70%, var(--teal-deep)); }
/* r5 C23: el agua del CTA sigue en teal puro, ahora directo en los pseudos */
.pin-slide--sys .btn--primary::before,
.pin-slide--sys .btn--primary::after { background: var(--teal); }
.pin-slide--sys .chip--us {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal-deep);
}
/* el acento del slide de Strategy es la variante de contraste del ambar:
   pinta kicker y link "How we...", ambos texto mono chico (U-08) */
.pin-slide--strat { --pin-accent: color-mix(in srgb, var(--amber-text) 90%, var(--ink)); }
/* r8b (31-ago) · el agua del CTA del slide 07 pasa al ambar -------------------
   P3 abierto desde r3: el 07 es Strategy, cuyo acento con dueno es el ambar,
   pero su boton se quedo con el agua violeta por defecto. Motivo real: el
   label de .btn--primary es --paper y --paper sobre --amber puro mide 2.84:1,
   o sea reprueba AA de calle. Las tres salidas, medidas (no a ojo):

     (a) borde ambar sobre papel con label --amber-text ... 5.03:1 en reposo,
         pero 1.77:1 en cuanto el agua ambar sube: obliga a voltear el label
         a mitad de animacion, que es justo el fallo P2 de r5 (1.06 a medio
         llenado). Con --amber-light de agua si cierra (4.65:1) pero el boton
         deja de leerse como CTA: el llenado casi no se ve.
     (b) relleno ambar con label en tinta ... 6.09:1 lleno, pero el reposo es
         tinta sobre tinta (1.00:1) salvo que el boton pase a outline, y en el
         cruce el label paper sobre ambar vuelve a caer a 2.84:1.
     (c) ambar mas oscuro como relleno, label --paper SIEMPRE, sin un solo
         flip. Es esta. Se oscurece DENTRO de su propia familia con color-mix,
         la misma tecnica que r4 C6 uso para los acentos de texto y que ya
         vive tres lineas mas arriba: mismo dueno, mismo matiz, ningun token
         nuevo (tokens.css no se toca) y --amber-text NO se usa como
         superficie, que es la regla firmada.

   #9d5a23 medido contra --paper = 4.89:1, por encima del 4.5 de AA para texto
   normal y por encima del agua teal aprobada de los slides 04-06 (4.53:1). Y
   como el label no cambia de color en ningun momento, el recorrido entero del
   llenado solo puede MEJORAR: cualquier cobertura parcial de la ola sobre la
   pastilla de tinta da un fondo mas oscuro (25% = 13.74, 50% = 9.91,
   75% = 6.93), asi que el peor caso de toda la animacion es el 4.89 del
   relleno completo. Reposo, hover, foco y llenado: los cuatro pasan.

   Acotado a #outcomes a proposito: el pin de Specialties reusa la clase
   .pin-slide--strat y el encargo dice slide 07 y nada mas. */
#outcomes .pin-slide--strat .btn--primary::before,
#outcomes .pin-slide--strat .btn--primary::after {
  background: color-mix(in srgb, var(--amber) 70%, var(--ink));
}

/* modo pinned (solo lo activa JS en desktop) */
.pin--active .pin__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.pin--active .pin-slide {
  position: absolute;
  /* r4 C10: el claro superior compensa nav fijo + indicador, que ahora viven arriba */
  inset: 3.4rem 0 0 0;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 0;
  transition: none; /* JS controla opacity/transform por frame */
  will-change: opacity, transform;
}
.pin--active .pin-slide.is-off { display: none; }
.pin--active .pin-slide__shell { width: min(var(--shell), 100% - var(--gutter) * 2); }

/* r4 C10 · r5 C27 (Cesar): el indicador 01 / ticks / 07 vive arriba (top
   5.5rem, debajo del nav fijo) pero ya NO centrado sobre todo el stage: queda
   sobre el EJE de la columna de texto de los slides (columna 1 de la grilla
   6/6 de .pin-slide__inner). centro_columna = 50% - (shell + gap) / 4, con el
   MISMO clamp de gap que .pin-slide__inner: si ese gap cambia, cambiar aqui
   tambien. Vale para los dos pines (outcomes y specialties). Solo en pinned. */
.pin__progress { display: none; }
.pin--active .pin__progress {
  position: absolute;
  left: calc(50% - (min(var(--shell), 100% - var(--gutter) * 2) + clamp(2rem, 5vw, 5rem)) / 4);
  top: 5.5rem; /* nav fijo termina en ~4.55rem: un respiro de ~1rem debajo */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 480;
  letter-spacing: 0.1em;
  /* r4 C6: ink-soft por AA sobre mist (ink-faint quedaba en 4.23:1) */
  color: var(--ink-soft);
  z-index: 2;
  pointer-events: none;
}
.pin__progress-ticks { display: flex; gap: 0.45rem; }
.pin__progress-ticks i {
  width: 1.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background var(--dur-state) var(--ease);
}
.pin__progress-ticks i.is-active { background: var(--violet); }
/* el rail respira el acento del tramo: 01-03 violeta, 04-06 teal, 07 ambar */
.pin__progress-ticks i:nth-child(n + 4).is-active { background: var(--teal); }
.pin__progress-ticks i:nth-child(7).is-active { background: var(--amber); }

/* ---- section head centrado ---------------------------------------------------- */
.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.kicker--center { justify-content: center; }

/* ---- before / after ------------------------------------------------------------ */
.ba { padding: var(--rhythm) 0 calc(var(--rhythm) * 0.6); }
/* r6 C31: el head flotaba con rhythm-half (79px a 1440) entre titulo y cards.
   Baja a 0.35 rhythm (55px), el mismo respiro inferior del head de referencia
   .map. Arriba queda 1 rhythm intacto: proporcion arriba:abajo ~2.9:1. */
.ba .section-head { margin-bottom: calc(var(--rhythm) * 0.35); }
.ba__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: stretch;
}
.ba__card {
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3vw, 2.6rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.ba__card--before {
  background: var(--mist);
  color: var(--ink-soft);
}
.ba__card--after {
  background: var(--teal-deep);
  color: var(--paper);
  box-shadow: 0 26px 60px rgba(30, 74, 61, 0.28);
}
.ba__card--after .h3 { color: #fff; }
.ba__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ba__card--before .ba__tag { color: var(--ink-faint); }
.ba__card--after .ba__tag { color: var(--teal-bright); }
.ba__list { display: grid; gap: 0.7rem; margin-top: 0.3rem; }
.ba__list li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 480;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
}
.ba__list li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -0.05em;
  font-size: 1rem;
  color: var(--ink-faint);
}
.ba__card--after .ba__list li::before {
  content: "✓";
  color: var(--teal-bright);
}
/* garabato que se dibuja alrededor del titulo del after */
.ba__scribble-wrap { position: relative; display: inline-block; }
.ba__scribble {
  position: absolute;
  inset: -42% -19% -44% -17%;
  width: 136%;
  height: 186%;
  overflow: visible;
  pointer-events: none;
}
.ba__scribble path {
  fill: none;
  stroke: var(--amber-bright);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.ba__card--after.is-in .ba__scribble path {
  transition: stroke-dashoffset 1s var(--ease) 0.55s;
  stroke-dashoffset: 0;
}
/* r3 U-05: bajo 480px el titular parte en dos lineas y la elipse lo abraza
   mal (muerde la linea 2); en esa banda el scribble se esconde */
@media (max-width: 480px) {
  .ba__scribble { display: none; }
}
/* r5 C30: pin con scrub. La clase .ba--pin la pone ba-pin.js SOLO en desktop
   (>=1081px, sin reduced-motion ni ?static); sin ella los wrappers .ba__pin y
   .ba__stage son divs neutros y la seccion queda apilada como siempre.
   La altura extra del pin (~260svh) la escribe el JS en .ba__pin. */
/* r6 C31: en modo pin el stage centra las cards en 100svh, asi que en la
   ENTRADA quedaban ~324px de papel muerto entre el titulo y las cards (medido
   a 1440x900). El head de referencia .map tiene el mismo hueco, pero alli lo
   ocupa la superficie mist del stage; aqui es papel vacio y se lee como aire
   sobrante. El pin sube lo justo para dejar ~100px bajo el titulo en la
   entrada, y no toca la coreografia: el scrub lee el rect del propio pin y el
   hold sigue centrando el verde en el viewport. La formula descuenta la mitad
   del sobrante vertical (23rem = alto aproximado de las cards) para que el
   hueco aguante igual en pantallas altas y bajas; el min() evita margen
   positivo en viewports cortos. */
.ba--pin .ba__pin {
  margin-top: min(0px, calc(-1 * ((100svh - 23rem) / 2 - 45px)));
}
.ba--pin .ba__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.ba--pin .ba__card {
  position: relative;
  transition: none; /* ba-pin.js escribe opacity y transform por frame */
  will-change: transform, opacity;
}
.ba--pin .ba__card--before { z-index: 1; }
/* el verde viaja POR ENCIMA del claro (referencia ManyChat 2); r6 C32: el
   claro tambien viaja, hacia el verde, y queda sepultado detras (z 1 < 2) */
.ba--pin .ba__card--after { z-index: 2; }
/* el garabato lo dibuja el scrub por frame durante la fase A/B; el trigger
   viejo del reveal .is-in queda mudo aqui para que no dispare doble */
.ba--pin .ba__card--after.is-in .ba__scribble path { transition: none; }

/* ---- three steps ----------------------------------------------------------------- */
/* r4 C18: con el orden nuevo (difference → specialties → steps → doors) el
   respiro inferior baja de 1 rhythm a 0.65 para que steps→doors respire igual
   que el resto de las costuras del tramo final */
.steps { padding: calc(var(--rhythm) * 0.6) 0 calc(var(--rhythm) * 0.65); }
/* r6 C31: aqui el aire de arriba es 0.6 rhythm (95px a 1440), no 1 rhythm,
   asi que el de abajo baja a 0.2 rhythm (32px) para la misma proporcion ~3:1
   del head de referencia .map. Antes rhythm-half (79px) dejaba el titulo
   flotando a medio camino entre la maya y sus cards. */
.steps .section-head { margin-bottom: calc(var(--rhythm) * 0.2); }
/* r4 C20: fila de CTAs centrada tras los 3 pasos (las dos puertas) */
.steps__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: calc(var(--rhythm-half) * 0.75);
}
.steps__grid {
  display: grid;
  /* r6 supervision: 1fr no baja del min-content de la tarjeta, asi que entre
     1081 y ~1300 la tercera se salia 65px del viewport y quedaba cortada
     (reproducido en el backup pre-ronda: no es de esta ronda, es un fallo
     viejo de las ventanas estrechas de escritorio). minmax(0, 1fr) deja que
     las columnas se encojan; a 1440 y 1920 calculan exactamente lo mismo. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  counter-reset: none;
}
.steps__card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-top: 4px solid var(--steps-accent, var(--violet));
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.8rem 1.6rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
/* r7 C35: los hijos de la tarjeta tienen que poder encoger SIEMPRE, a cualquier
   ancho, no solo debajo de 1081px. La tarjeta es un grid de una columna y esa
   columna se dimensiona por el min-content del hijo mas ancho, que es la escena
   mini (334.4px en los pasos 2 y 3). Cuando la tarjeta tiene menos ancho util
   que eso, la columna se queda en 334.4px y estira TODO: numero, h3, parrafo y
   escena. Asi es como de 1081 a 1356px (todo el iPad apaisado y las ventanas de
   escritorio estrechas) el titulo "Get your free plan or demo" se salia hasta
   83.6px de su tarjeta y se montaba sobre la vecina. Esta regla existia desde
   r6, pero encerrada en el @media (max-width: 1080px) de css/responsive.css,
   asi que la banda de arriba se quedaba sin ella. Aqui, en la hoja base, no
   depende de ninguna media query. A 1440 y 1920 la columna natural (359.5px y
   396.8px) ya es mayor que ese min-content: no mueve ni un pixel el escritorio
   aprobado (verificado nodo a nodo contra el backup r7-pre, delta 0.00px). */
.steps__card > * { min-width: 0; }
.steps__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.steps__card--violet { --steps-accent: var(--violet); }
.steps__card--teal { --steps-accent: var(--teal); }
.steps__card--amber { --steps-accent: var(--amber); }
.steps__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--steps-accent, var(--violet));
}
.steps__card p { color: var(--ink-soft); font-size: 0.98rem; }
/* r3 R8: la escena mini de cada paso (los .demo--step-* traen su min-height) */
.steps__card .steps__scene {
  min-height: 240px;
  margin-bottom: 0.4rem;
}

/* ---- specialties (r4 C19: presentadas como los servicios, en pantalla pinned) -
   La cabecera queda centrada sobre papel, fuera del stage; abajo un .pin de 3
   slides con el MISMO lenguaje que el de los 7 (mismo fondo mist, misma maya
   a la derecha, mismo crossfade + damping + snap de js/pinned.js, su propio
   indicador 01-03 arriba). Fallback apilado identico al pin grande. */
.specialties { padding: calc(var(--rhythm) * 0.55) 0 0; }
/* r6 C31: mismo seam que el head del map sobre su stage mist, 0.35 rhythm
   (55px a 1440) en lugar de rhythm-half (79px). El aire de arriba no se toca. */
.specialties .section-head { margin-bottom: calc(var(--rhythm) * 0.35); }
/* la spec-card ocupa su columna con el mismo tope que la copy del pin grande */
.pin--spec .spec-card { width: 100%; max-width: 34rem; justify-self: center; }
.pin--spec .pin-slide__media { display: grid; }
.pin--spec .pin-slide__media .demo { min-height: 460px; }
/* rail del pin de specialties: 01 violeta, 02 teal, 03 ambar (un acento por
   specialty, mismos duenos de siempre) */
.pin--spec .pin__progress-ticks i:nth-child(2).is-active { background: var(--teal); }
.pin--spec .pin__progress-ticks i:nth-child(3).is-active { background: var(--amber); }
/* r4 C19: CTA por specialty al pie de cada card (labels aprobados) */
.spec-card__cta { margin-top: 0.6rem; padding-bottom: 0.7rem; }
.spec-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.9rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease);
}
.spec-card:hover {
  transform: translateY(-5px);
  border-color: var(--spec-accent, var(--violet));
}
.spec-card--growth { --spec-accent: var(--violet); }
.spec-card--systems { --spec-accent: var(--teal); }
.spec-card--strategy { --spec-accent: var(--amber-text); } /* label y lineas: texto chico (U-08) */
.spec-card--growth:hover { box-shadow: 0 18px 50px rgba(109, 74, 203, 0.12); }
.spec-card--systems:hover { box-shadow: 0 18px 50px rgba(46, 125, 104, 0.12); }
.spec-card--strategy:hover { box-shadow: 0 18px 50px rgba(217, 122, 43, 0.12); }
.spec-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--spec-accent, var(--violet));
}
.spec-card__sub { color: var(--ink-soft); font-size: 0.95rem; flex-grow: 1; }
.spec-card__lines { border-top: 1px solid var(--line); }
.spec-card__lines li + li { border-top: 1px solid var(--line); }
/* r13: las siete lineas del catalogo vuelven a ser <a> a services.html, con su
   flecha <em> y su hover. Bloque restaurado VERBATIM de
   backups-spica-home-v6-r7-pre/css/sections.css, lineas 1436 a 1469, incluido
   el @media (hover: none) del final, que tiene que quedar DETRAS de la regla
   base y del :hover (es el sitio que le dio r6 C34; 440 lineas mas arriba nunca
   ganaba la cascada y en tactil el chevron no aparecia). No se reordena. */
.spec-card__lines a {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.85rem 0.2rem;
  font-weight: 520;
  transition: color var(--dur-micro) var(--ease), padding-left var(--dur-state) var(--ease);
}
.spec-card__lines a span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--spec-accent, var(--violet));
}
.spec-card__lines a em {
  font-style: normal;
  margin-left: auto;
  display: inline-flex;
  width: 0.85em;
  height: 0.85em;
  align-self: center;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.spec-card__lines a em svg { width: 100%; height: 100%; }
.spec-card__lines a:hover { color: var(--spec-accent, var(--violet)); padding-left: 0.55rem; }
.spec-card__lines a:hover em { opacity: 1; transform: none; }
/* touch: la afordancia de las lineas no puede depender del hover. r6 C34: este
   bloque vivia 440 lineas mas arriba, o sea ANTES de la regla base de la misma
   especificidad, asi que nunca ganaba y en tactil la flecha seguia invisible
   (medido en 9 dispositivos). Movido aqui, detras de la base y del :hover. */
@media (hover: none) {
  .spec-card__lines a em { opacity: 1; transform: none; }
}

/* ---- faq --------------------------------------------------------------------------- */
.faq { padding: 0 0 var(--rhythm); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq__grid .section-head { margin-bottom: 0; }
.faq__list { display: grid; border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.6rem 1.15rem 0.2rem;
  font-weight: 560;
  font-size: 1.05rem;
  position: relative;
  transition: color var(--dur-micro) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 12px;
  height: 12px;
  translate: 0 -50%;
  background:
    linear-gradient(var(--ink) 0 0) center / 12px 2px no-repeat,
    linear-gradient(var(--ink) 0 0) center / 2px 12px no-repeat;
  transition: transform var(--dur-state) var(--ease);
}
.faq__item[open] summary { color: var(--violet); }
.faq__item[open] summary::after {
  transform: rotate(45deg);
  background:
    linear-gradient(var(--violet) 0 0) center / 12px 2px no-repeat,
    linear-gradient(var(--violet) 0 0) center / 2px 12px no-repeat;
}
.faq__item p {
  padding: 0 2.6rem 1.3rem 0.2rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---- footer show (billboard + dolores) ----------------------------------------------- */
.footer__show {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  padding-bottom: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(246, 245, 241, 0.1);
}
.footer__billboard { min-height: 0; }
.footer__problems { display: grid; gap: 0.9rem; align-content: center; }
.footer__problems-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* r14 QA final P1-1: 0.38 daba 3.37:1 sobre --ink (texto de 9.9px, umbral
     4.5). A 0.55 el gris compuesto es rgb(143,142,140): 5.77:1, medido. */
  color: rgba(246, 245, 241, 0.55);
}
.footer__problems ul { display: grid; gap: 0.45rem; }
.footer__problems a {
  color: rgba(246, 245, 241, 0.75);
  font-size: 0.95rem;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.footer__problems a:hover { color: var(--violet-bright); border-color: var(--violet-bright); }

/* ---- responsive r2/r3 -------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .pin-slide__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  /* r4 C7: en el fallback apilado de una columna la maya moriria detras del
     texto; decision del director: se apaga y la superficie queda lisa */
  .pin__stage::before { display: none; }
  .ba__grid { grid-template-columns: 1fr; }
  .steps__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__show { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pin-slide { padding: calc(var(--rhythm) * 0.28) 0; }
  .ba__card { padding: 1.4rem 1.2rem; }
  /* r2 QA: la lista strategy (3.1) se apila; el titulo fijo de 9-11rem
     dejaba descripciones de 1-2 palabras por linea */
  .strategy li { flex-direction: column; gap: 0.3rem; align-items: flex-start; }
  .strategy li b { flex: none; }
}