/* ===== §A FUENTES — Questrial en todo el sistema (28-ago, orden de Arturo/jefe) ===== */
@font-face{
  font-family:"Questrial";
  src:url(assets/fonts/questrial-latin.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ===== §B TOKENS · index.html 95-124 ===== */
/* SPARK × NEKO — el esqueleto de Neko Health con la identidad */
:root{
  --fondo:#f4f0ec;
  --panel:#fdfbf8;
  --tinta:#221713;
  --suave:#6b5f5a;
  --linea:rgba(34,23,19,.13);
  --carmin:#bd0e31;
  --carmin-activo:#97081f;
  --quieto:#eae5dd;
  --oro:#8f6d12;
  --oscuro-fondo:#221713;
  --oscuro-tinta:#f2ede8;
  --oscuro-suave:#b3a69e;

  --voz:"Questrial","Century Gothic","Futura",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--voz);   /* sin serif propia: Questrial cubre también h1/dh2/dh3 */
  --dato:var(--voz);

  /* escala de radios (Neko: 4·8·12·16·24·32·40·48·full) */
  --r-xxs:4px; --r-xs:8px; --r-s:12px; --r-m:16px;
  --r-l:24px;  --r-xl:32px; --r-2xl:40px; --r-3xl:48px; --r-full:999px;
  --r-card:var(--r-l);      /* 24 */
  --r-media:var(--r-2xl);   /* 40 */
  --r-hero:clamp(40px,9vw,106px);

  --ease:cubic-bezier(.4,0,.2,1);
  --header-h:104px;
  --sep:clamp(110px,14vw,230px); /* aire Neko: una idea por pantalla */
  /* 19-ago (fase A) · ritmo de sección: menos aire cuando el fondo cambia (el color ya separa),
     más cuando dos secciones seguidas comparten fondo. */
  --sec-pad:clamp(80px,9vw,120px);
  --sec-pad-flow:clamp(120px,12vw,180px);
}

/* ===== §C RESET · index.html 125-144 ===== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--voz);font-size:18px;line-height:1.5;
  color:var(--tinta);background:var(--fondo);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
::selection{background:var(--carmin);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--carmin);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-weight:400;text-wrap:balance}
/* Questrial no tiene itálica: sin esto <em> sale con oblicua sintética fea.
   El énfasis se resuelve con color (mismo criterio que ya usaba mom.html). */
em{font-style:normal;color:var(--carmin)}
body{font-synthesis:none}

/* anclas: respetar el header sticky — UN solo valor para todo el sitio (las páginas no lo redefinen) */
[id]{scroll-margin-top:88px}
@media(min-width:980px){[id]{scroll-margin-top:calc(var(--header-h) + 16px)}}


/* ===== §D TIPOGRAFÍA · index.html 145-161 ===== */
/* tipografía Neko-scale: serif editorial (h1–h3) + Plex Sans funcional */
.h1,.dh2,.dh3{font-family:var(--serif);font-weight:400;letter-spacing:0;font-optical-sizing:auto}
.h1{font-size:48px;line-height:1}
@media(min-width:980px){.h1{font-size:clamp(72px,7.4vw,100px);line-height:1}}
.dh2{font-size:clamp(36px,4.8vw,58px);line-height:1.1}
@media(min-width:980px){.dh2{font-size:68px;line-height:1.18}}
.dh3{font-size:32px;line-height:1.25}
@media(min-width:980px){.dh3{font-size:44px;line-height:1.18}}
.eyebrow{font-family:var(--dato);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--suave)}
@media(min-width:980px){.eyebrow{font-size:14px;letter-spacing:.05em}}
.body-lg{font-size:18px;line-height:1.5;letter-spacing:-.005em}
.mono{font-family:var(--dato);font-variant-numeric:tabular-nums}
/* labels en mayúsculas: peso 500 y tracking corto (Plex no necesita el aire del mono) */
.confianza-cinta span,.svc-card .sc-nm,.pinned .tabs button,.pinned .panel .ficha .det,.avisame,.spec .sk,.techbox .nota-h,.tcard .info .rol,.aval-card .fila .ai,.paso .pn,.reembolso .nota-r,.puerta .pt-desde,footer.site .fk,.glink{font-weight:500;letter-spacing:.07em}
.pinned .panel .ficha .precio,.spec .sv,.tier .tv{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.spec .sv,.tier .tv{font-weight:300;letter-spacing:-.01em}
b,strong{font-weight:500}

/* ===== §E LAYOUT (.xpad/.wrapmax) · index.html 162-166 ===== */

.xpad{padding-inline:1.25rem}
@media(min-width:768px){.xpad{padding-inline:2.5rem}}
@media(min-width:980px){.xpad{padding-inline:4rem}}
.wrapmax{max-width:1320px;margin-inline:auto}

/* ===== §F TEMAS · index.html 167-177 ===== */

.tema-claro{background:var(--fondo);color:var(--tinta)}
.tema-quieto{background:var(--quieto);color:var(--tinta)}
.tema-carmin{background:var(--carmin);color:#fff}
.tema-oscuro{background:var(--oscuro-fondo);color:var(--oscuro-tinta)}
.tema-oscuro .eyebrow{color:var(--oscuro-suave)}
.tema-carmin .eyebrow{color:rgba(255,255,255,.88)}
/* sobre carmín el botón se invierte: hueso con texto carmín */
.tema-carmin .pill{background:var(--fondo);color:var(--carmin)}
.tema-carmin .pill:hover{background:#fff}


/* ===== §G ETIQUETA DE SECCIÓN · index.html 294-298 ===== */
/* etiqueta de sección: [cuadro] TEXTO ─────── */
.sec-label{display:flex;align-items:center;gap:.8rem;margin-bottom:clamp(1.4rem,2.6vw,2.4rem)}
.sec-label hr{display:none} /* la línea corrida en cada sección pesaba más de lo que ordenaba */
.sec-label .sq{width:12px;height:12px;border-radius:2px;background:var(--carmin);flex:none}
.sec-label hr{flex:1;border:0;border-top:1px solid var(--linea)}

/* ===== §H ACCESIBILIDAD · index.html 943-947 + 949 ===== */
/* accesibilidad */
.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}
.skip{position:absolute;left:1rem;top:-100%;z-index:60;background:var(--tinta);color:var(--fondo);padding:.7rem 1.2rem;border-radius:var(--r-xs);font-size:15px}
.skip:focus{top:.6rem}
header.site nav a,.svc-btn{padding-block:.55rem;min-height:44px;display:inline-flex;align-items:center}
/* interruptor global de movimiento. Las anulaciones por componente
   (.rv, .rv-clip, .riel .tcard, .reveal-h .w…) NO viven aquí: comparten
   especificidad con las reglas del motor de motion y tienen que declararse
   DESPUÉS de él, es decir en la hoja de la página o en _motion-spark.css. */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ===== §I UTILIDADES DE LAYOUT (19-ago · fase A) — para que las páginas no reinventen lo mismo ===== */
/* secciones: .sec cuando cambia el fondo respecto de la anterior · .sec-flow cuando lo comparte */
.sec{padding-block:calc(var(--sec-pad) / 2)}                 /* dos .sec seguidas = --sec-pad de separación */
.sec-flow{padding-top:calc(var(--sec-pad-flow) - var(--sec-pad) / 2);padding-bottom:calc(var(--sec-pad) / 2)} /* misma superficie que la anterior: --sec-pad-flow */
.sec-ultima{padding-bottom:var(--sec-pad)}                      /* antes del footer */
/* prosa: ancho de lectura */
.maxw-texto{max-width:66ch}
.maxw-texto-corto{max-width:52ch}
/* listas a dos columnas desde 820 (contraindicaciones, checks, specs largas) */
.cols-2{display:grid;gap:.9rem 2.5rem;grid-template-columns:1fr}
@media(min-width:820px){.cols-2{grid-template-columns:1fr 1fr}}
/* figura editorial: una foto por sección, del ancho de su columna */
.figura{margin:0}
.figura img{width:100%;height:auto;object-fit:cover;border-radius:var(--r-media);display:block}
.figura.cuadro img{aspect-ratio:4/3}
.figura.alta img{aspect-ratio:4/5}
.figura.ancha img{aspect-ratio:3/2}
.figura figcaption{margin-top:.9rem;font-size:14px;color:var(--suave);max-width:44ch;line-height:1.45}
/* grilla editorial de dos columnas (texto + figura), una sola bajo 900 */
.grid2{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;gap:4rem}}
.grid2.centrado{align-items:center}

/* ===== §K · arranque suave (20-ago): secciones bajo el pliegue que el navegador no maqueta hasta acercarse.
   Solo en secciones "planas" (sin sticky/pin, sin embeds GHL): ver estrategia-arranque-suave-motion.md §2.5 */
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto var(--cv-h,1000px)}
/* --cv-h: alto estimado por sección (medido con Playwright, 20-ago); tras el primer render 'auto' recuerda el real */
@media print{.cv-auto{content-visibility:visible}}

/* ===== §J SOCIO TECNOLÓGICO en el footer (19-ago-2026) =====
   PelviX es el partner principal: su logo sale del gris de los partners y va enlazado a pelvix.world.
   Especificidad (0,2,1) para ganarle a `.partners img{height:24px;opacity:.75}` de cada página. */
.partners a.socio{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.45rem;text-decoration:none}
.partners a.socio img{height:44px;width:auto;opacity:1;filter:none}
.partners a.socio:hover img{opacity:1;transform:translateY(-1px)}
.partners a.socio .socio-lbl{font-family:var(--dato);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--oscuro-suave);white-space:nowrap}
.partners a.socio:hover .socio-lbl{color:var(--oscuro-tinta)}
@media(max-width:560px){.partners a.socio img{height:36px}}

/* ── 3-sep-2026 · esqueleto de carga para los embeds de GHL (agenda y pago). Lo crea y lo retira assets/spark-tracking.js
   (embedSkeleton): se va con el primer mensaje del widget, o 2,5 s después del load del iframe, o a los 15 s sí o sí. ── */
.widget-frame{position:relative}
.widget-cargando{position:absolute;inset:.5rem;z-index:2;pointer-events:none;border-radius:calc(var(--radius) - 6px);background:var(--blanco);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;text-align:center;transition:opacity .35s ease}
.widget-cargando.fuera{opacity:0}
.widget-cargando .wc-barras{width:min(100%,340px);display:grid;gap:.65rem;justify-items:start}
.widget-cargando .wc-barras i{display:block;width:100%;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--linea) 0%,#f6f1ed 50%,var(--linea) 100%);background-size:200% 100%;animation:wc-brillo 1.4s linear infinite}
.widget-cargando .wc-barras i:nth-child(2){width:62%}
.widget-cargando .wc-barras i:nth-child(3){width:84%}
.widget-cargando .wc-barras i:nth-child(4){width:48%}
.widget-cargando p{margin:0;font-size:.95rem;color:var(--oscuro-suave);max-width:36ch}
.widget-cargando .wc-lento{display:none;pointer-events:auto}
.widget-cargando .wc-lento a{color:var(--carmin);text-decoration:underline;text-underline-offset:3px}
.widget-cargando.lento .wc-lento{display:block}
@keyframes wc-brillo{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.widget-cargando .wc-barras i{animation:none}}