/* landing.css — SOLO la home (index.html), secciones bajo el hero (landing v2, 2026-08-01).
   styles.css es compartido con analisis/scan/legal y no debe engordar: los componentes
   de la home viven aquí (precedente: hero-v5.css). Referencia de dirección de arte:
   referencias/qoves-landing-analisis.md · ADR 2026-08-01-landing-v2-bajo-el-hero.md.
   Paleta y funciones tipográficas: las de :root en styles.css (GUIA-MARCA §3-4). */

/* ---------- lenguaje transversal ---------- */

/* titular bicolor (patrón qoves): segunda parte apagada. Sobre hueso, mineral medio
   (4,2:1, titular grande → umbral 3:1); sobre campos oscuros lo sube .bleed-*. */
h2 .dim{color:var(--min-m)}

/* eyebrow-pill: el eyebrow mono de siempre, dentro de una pastilla hairline */
.eb{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:.55em 1.15em}

/* retícula visible: hairlines verticales a los bordes del contenedor (solo desktop)
   + hairline horizontal arriba. Es lo que hace que el texto no flote en vacío. */
@media(min-width:761px){
  .ruled{position:relative}
  .ruled::before{content:"";position:absolute;top:0;bottom:0;left:50%;
    transform:translateX(-50%);width:min(calc(100% - 2*var(--pad)),var(--maxw));
    border-left:1px solid var(--line);border-right:1px solid var(--line);pointer-events:none}
}
.ruled{border-top:1px solid var(--line)}

/* campos a sangre */
.bleed-min{background:var(--min-d)}
.bleed-ink{background:var(--ink)}
.bleed-min,.bleed-ink{color:var(--bone)}
.bleed-min h2,.bleed-ink h2{color:var(--bone)}
.bleed-min h2 .dim,.bleed-ink h2 .dim{color:var(--halo)}
.bleed-min .lead,.bleed-ink .lead{color:var(--bone-dim)}
/* mono/eyebrow sobre mineral: #9FB3BD (el de tinta) se queda corto aquí — se usa un
   paso más claro. Sobre tinta vale el patrón existente. */
.bleed-min .mono{color:#DCE5EA}
.bleed-ink .mono{color:#9FB3BD}
.bleed-min .eb,.bleed-ink .eb{border-color:rgba(243,239,231,.28)}

/* acordeón compartido (zonas de #analisis y preguntas de #faq): la animación es
   grid-rows 0fr→1fr — sin medir alturas en JS */
.acc{margin-top:38px;border-top:1px solid var(--acc-line,var(--line))}
.acc-i{border-bottom:1px solid var(--acc-line,var(--line))}
.acc-h{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px 18px;align-items:baseline;
  width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:20px 0;
  color:inherit;font:inherit}
.acc-h .zn{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em}
.acc-h .zt{font-family:var(--sans);font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
.acc-h .zc{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
/* icono y cuerpo comparten duración y curva: iban a 300 ms y 450 ms, así que el `+` acababa
   de girar con el panel aún abriéndose (medido: asientan a 320 ms y 468 ms). 240 ms está
   dentro del presupuesto de un disclosure (150-250 ms) y la curva es un ease-out fuerte
   —`ease` arrancaba lento justo en el instante que se mira. */
.acc-h .zx{font-family:var(--mono);font-size:1rem;line-height:1;
  transition:transform .24s cubic-bezier(.23,1,.32,1)}
.acc-i.open .zx{transform:rotate(45deg)}
.acc-b{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .24s cubic-bezier(.23,1,.32,1)}
.acc-i.open .acc-b{grid-template-rows:1fr}
/* `grid-template-rows:0fr` recorta el panel a altura visual cero pero NO lo retira del árbol
   de accesibilidad: un lector seguía leyendo las cuatro respuestas con `aria-expanded="false"`
   puesto al lado (hallazgo 15, auditoría 21-08). `visibility` sí lo retira, y el retardo va
   solo al CERRAR, para no recortar el texto mientras el panel todavía se está abriendo. */
.acc-b>div{overflow:hidden;visibility:hidden;transition:visibility 0s .24s}
.acc-i.open .acc-b>div{visibility:visible;transition-delay:0s}

/* ---------- #analisis: campo mineral, chips + acordeón de zonas ----------
   Sobre mineral, el latón NO vale como texto pequeño (~2,9:1 medido): los contadores
   van en chip de vidrio de tinta (patrón de los rótulos del hero, que dio ≈11:1)
   y ahí el número sí puede ser latón. */
#analisis .acc{--acc-line:rgba(243,239,231,.22)}
#analisis .zn{color:#DCE5EA}
#analisis .zt,#analisis .zx{color:var(--bone)}
#analisis .zc{color:#DCE5EA;background:rgba(23,32,36,.62);border-radius:999px;padding:.5em .95em}
#analisis .zc b{color:var(--brass);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips span{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone);border:1px solid rgba(243,239,231,.3);
  border-radius:999px;padding:.55em 1.1em}
.zlist{list-style:none;padding:2px 0 24px}
.zlist li{padding:10px 0;border-top:1px dotted rgba(243,239,231,.18)}
.zlist li:first-child{border-top:0}
.zlist b{display:block;font-weight:500;font-size:.98rem;color:var(--bone)}
.zlist span{display:block;margin-top:2px;font-size:.88rem;color:#DCE5EA;max-width:60ch}
/* ---------- #analisis · las cinco zonas resumidas (B4, 2026-08-20) ----------
   Sustituyen al acordeon de 23 mediciones una a una: el ADR pide zonas, ejemplo y limites en
   la home, y el detalle en los once articulos. Reutilizan .zlist entero —color medido sobre
   mineral— y solo corrigen la pastilla del contador: `.zlist b` la hacia BLOQUE, asi que
   dentro de .zc partia «5» y «mediciones» en dos lineas y la pastilla crecia hasta ser un
   borron. Se ve en una captura y no en la sonda de contraste: los dos trozos tenian el
   contraste correcto, solo que uno debajo del otro. */
.zonas .zc{display:inline-block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;white-space:nowrap;margin-top:7px}
.zonas .zc b{display:inline}

/* 45ch, no 64: a este cuerpo 64ch medía 90 caracteres reales por línea, muy por encima del
   objetivo de 72 (nº6, auditoría 21-08 — la misma trampa de `ch` que blog.css). */
.anfoot{margin-top:30px;font-size:.92rem;color:#DCE5EA;max-width:45ch}
.anfoot b{color:var(--bone);font-weight:500}

/* retrato de ejemplo + slider foto ↔ capa de medición (F2). Los valores de .mc son la
   medición REAL del retrato (gen_analisis_retrato.py); si se cambia la foto, se regeneran. */
.angrid{margin-top:38px}
.anfig{margin:0 0 34px}
.cmp{position:relative;--split:55%;border-radius:var(--r-s);overflow:hidden;cursor:ew-resize;
  touch-action:pan-y;box-shadow:0 1px 0 rgba(243,239,231,.14) inset}
.cmp img{width:100%;height:auto;display:block}
/* la capa de MEDICIÓN se revela a la DERECHA del divisor (foto | medición, como el
   before|after de la referencia); --split = posición del divisor desde la izquierda.
   El recorte es un PAR de transforms —ventana desplazada +split, contenido
   contra-desplazado −split (ambos % de su propio ancho = ancho del comparador)— en vez
   del clip-path anterior: durante el arrastre solo trabaja el compositor y la malla SVG
   (95 KB de trazados) no se repinta en cada frame. Cierra el hallazgo del motion audit
   del 04-08: --split gobernaba `left` en dos hijos, 2,25× de coste medido. */
.cmp .ctop{position:absolute;inset:0;overflow:hidden;transform:translateX(var(--split))}
.cmp .cin{position:absolute;inset:0;transform:translateX(calc(-1*var(--split)))}
.cmp .ctop img{position:absolute;inset:0;width:100%;height:100%}
/* divisor + tirador viajan en un raíl a todo el ancho movido por transform (translateX
   en % de su propio ancho = % del comparador): mismo --split, cero layout */
.ctrack{position:absolute;inset:0;pointer-events:none;transform:translateX(var(--split))}
.cline{position:absolute;top:0;bottom:0;left:0;width:1px;margin-left:-.5px;
  background:rgba(205,176,106,.85);box-shadow:0 0 12px rgba(205,176,106,.45);pointer-events:none}
/* tirador del comparador (referencia qoves: círculo con flechas sobre el divisor).
   pointer-events:none — el gesto lo lleva el propio .cmp por Pointer Events (landing.js) */
.cgrip{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;pointer-events:none;
  background:rgba(23,32,36,.55);border:1px solid rgba(243,239,231,.9);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .15s ease-out}
.cgrip::before,.cgrip::after{content:"";width:0;height:0;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.cgrip::before{border-right:5.5px solid var(--bone)}
.cgrip::after{border-left:5.5px solid var(--bone)}
/* señalado (hover, solo puntero real: en táctil el tap dejaba el tirador crecido) < agarrado
   (.dragging, que landing.js pone al pointer-down y quita al soltar o al cancelar el
   navegador por scroll — :active ya no se dispara porque el gesto captura el puntero y
   hace preventDefault). El agarre responde al pointer-down: crece a 1.18 —un paso por
   encima del hover— y a .15s ease-out en vez de los .25s ease anteriores (crece en vez
   de comprimir y el recorrido es mayor: a 100 ms el salto parpadea, a 250 el agarre
   llegaba tarde). Mismos valores que fijó la sesión de pulsación del 04-08. */
@media (hover:hover) and (pointer:fine){
  .cmp:hover .cgrip{transform:translate(-50%,-50%) scale(1.12)}
}
/* el foco vive en el range también DURANTE el arrastre (continuidad con el teclado), y
   :has(input:focus-visible) pesa (0,3,1) contra el (0,3,0) de .dragging: sin el :not, el
   agarre se quedaba en 1.12 — lo midió _qa_comparador.py, no un ojo */
.cmp:has(input:focus-visible):not(.dragging) .cgrip{transform:translate(-50%,-50%) scale(1.12)}
.cmp.dragging .cgrip{transform:translate(-50%,-50%) scale(1.18)}
.ctag{position:absolute;top:10px;font-size:.56rem;letter-spacing:.16em;color:var(--bone);
  background:rgba(23,32,36,.62);padding:.5em .85em;border-radius:999px;pointer-events:none}
.ctag.l{left:10px}
.ctag.r{right:10px}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:ew-resize;margin:0}
/* con el gesto de puntero activo (.gest la pone landing.js al iniciar) el range cede el
   puntero y queda como control de teclado y AT; sin JS sigue siendo un range normal */
.cmp.gest input[type=range]{pointer-events:none}
/* las tres capas que se mueven solo se promocionan MIENTRAS hay gesto o asentamiento:
   will-change permanente costaría ~3 capas de GPU en reposo en una sección que
   normalmente está fuera de pantalla (la promoción se paga en la ventana muerta de la
   histéresis de 10 px, antes de que nada se mueva) */
.cmp.dragging .ctop,.cmp.dragging .cin,.cmp.dragging .ctrack,
.cmp.settling .ctop,.cmp.settling .cin,.cmp.settling .ctrack{will-change:transform}
.cmp:has(input:focus-visible){outline:2px solid var(--halo);outline-offset:3px}
.ancap{display:block;margin-top:12px;font-size:.58rem;letter-spacing:.1em;color:#DCE5EA;
  text-transform:none}
.mcrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.mc{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  background:rgba(23,32,36,.62);border-radius:var(--r-s);padding:.7em .95em;font-family:var(--mono)}
.mc span{font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#DCE5EA}
.mc b{font-size:.76rem;font-weight:500;color:var(--brass);white-space:nowrap}

/* ---------- #como: pasos + informe (mockup HTML, sin imagen) ---------- */
.hows{list-style:none;margin-top:32px}
.hows .how{display:grid;grid-template-columns:44px 1fr;gap:6px 18px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--line)}
.hows .how:first-child{border-top:0}
.hows .n{grid-column:1;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--brass-text)}
.hows b{grid-column:2;font-family:var(--sans);font-weight:500;font-size:1.18rem;letter-spacing:-.01em}
.hows span:not(.n){grid-column:2;color:var(--cap);font-size:.93rem;max-width:48ch}
/* lectura de instrumento: banda de rango habitual + tu marca (recomendación del
   research 12 §7.4.3 — banda, no nota) */
.range{margin:16px 0 6px}
/* nº10, auditoría 21-08: tracking a --track-lbl, la etiqueta versalita del sistema (era
   .12em, uno de los cuatro valores distintos que convivían al mismo cuerpo de 9,6px). */
.rlab{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:var(--track-lbl);text-transform:uppercase;color:var(--cap);
  margin-bottom:9px}
.rlab b{color:var(--brass-text);font-weight:500}
.rtrack{position:relative;height:2px;background:var(--line)}
.rband{position:absolute;top:0;bottom:0;background:rgba(130,153,165,.55)}
.rtick{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--brass-text);transform:translate(-50%,-50%)}

/* ---------- #privacidad: diagrama dispositivo ─╳─ servidor ---------- */
.pflow{margin:38px auto 0;max-width:560px}
.pnode{border:1px solid rgba(243,239,231,.2);border-radius:var(--r-m);padding:18px 20px}
.pnode .pt{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:#9FB3BD}
.pnode .pd{margin-top:6px;font-size:.95rem;color:var(--bone)}
.pnode.off{opacity:.72}
.plink{position:relative;width:1px;height:58px;margin:0 auto;
  background:repeating-linear-gradient(to bottom,rgba(205,176,106,.75) 0 4px,transparent 4px 9px)}
.plink::after{content:"✕";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:.72rem;color:var(--brass);background:var(--ink);
  border:1px solid rgba(205,176,106,.6);border-radius:999px;padding:5px 8px;line-height:1}
.veri{list-style:none;margin:32px auto 0;max-width:560px}
.veri li{position:relative;padding:11px 0 11px 28px;color:var(--bone-dim);font-size:.97rem}
.veri li::before{content:"";position:absolute;left:0;top:1em;width:10px;height:10px;
  border:1px solid var(--brass);border-radius:50%}
.veri b{color:var(--bone);font-weight:500}

/* ---------- #precio: checklist (la escalera viene de styles.css) ----------
   El ancla de categoría («~150 €, semanas, en inglés») salió en B4 con su marcado: comparaba
   servicios distintos. El `.ok` del formulario salió con el formulario. */
.plist{list-style:none;margin-top:24px;max-width:460px}
.plist li{padding:9px 0 9px 20px;position:relative;color:var(--bone-dim);font-size:.95rem;
  border-bottom:1px dotted rgba(243,239,231,.14)}
.plist li::before{content:"—";position:absolute;left:0;color:var(--brass)}
#precio .ok p.serif{color:var(--bone)}

/* ---------- #faq: nav de categorías + acordeón claro ---------- */
.fgrid{margin-top:36px}
.fnav{display:none}
.fcat{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-text);margin:36px 0 4px}
.flist>.fcat:first-child{margin-top:0}
#faq .acc{margin-top:10px}
#faq .acc-h{grid-template-columns:1fr auto;padding:16px 0}
#faq .zt{font-size:1.04rem}
#faq .zx{color:var(--cap)}
/* 45ch, no 64 (nº6, auditoría 21-08): a este cuerpo 64ch medía 96 caracteres reales. */
#faq .acc-b p{padding:0 0 18px;color:var(--body-2);font-size:.95rem;max-width:45ch}

/* El footer de tinta se movió a styles.css el 2026-08-05: lo usan la landing Y el blog,
   y tenerlo aquí dejaba el pie del blog en texto claro sobre hueso (ilegible). */

/* ---------- desktop ---------- */
@media(min-width:761px){
  .zlist li{display:grid;grid-template-columns:250px 1fr;gap:2px 24px;align-items:baseline}
  .zlist span{margin-top:0}
  .acc-h .zt{font-size:1.45rem}
}
@media(min-width:1100px){
  .angrid{display:grid;grid-template-columns:minmax(340px,430px) 1fr;gap:56px;align-items:start}
  .anfig{position:sticky;top:96px;margin-bottom:0}
}

/* Movimiento reducido = menos movimiento, no cero transiciones. Se retira el desplazamiento
   y se CONSERVAN los cambios de color/opacidad, que ayudan a entender qué ha cambiado.
   (Antes: `.icard{transition:none}` dejaba el salto de 3 px, ahora instantáneo en vez de
   retirado; y `.itab` estaba de más — solo transiciona color.) */
@media (prefers-reduced-motion: reduce){
  .acc-b,.acc-h .zx,.acc-b>div{transition:none}
  /* el tirador del comparador no crece; el feedback del arrastre es el propio divisor 1:1
     (el asentamiento del toque seco también es instantáneo: lo corta landing.js con REDUCED) */
  .cgrip{transition:none}
  .cmp:hover .cgrip,.cmp.dragging .cgrip,.cmp:has(input:focus-visible) .cgrip{
    transform:translate(-50%,-50%)}
}

/* ============ TRANSPARENCIA REDUCIDA ============
   Aquí es donde más se nota: queda texto sobre FOTOGRAFÍA en dos sitios (#analisis sobre el
   retrato y el comparador; el still de #objecion se fue con su sección en B4). Con la
   preferencia activa la foto deja de estar debajo del texto y las superficies pasan a tinta
   plena — hueso encima: 14,44:1, contra los ~7,5:1 que dan hoy los velos sobre el retrato. */
@media (prefers-reduced-transparency: reduce){
  /* chips, etiquetas y lecturas que hoy flotan sobre el retrato */
  #analisis .zc{background:var(--ink)}
  .ctag{background:var(--ink)}
  .mc{background:var(--ink)}
  /* tirador del comparador: sin desenfoque y con relleno pleno */
  .cgrip{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ============ CONTRASTE ALTO ============
   Bordes definidos donde hoy hay hairlines de .14-.22 de alfa sobre tinta, y el texto
   secundario sube de #DCE5EA (12,96:1, ya alto) sin tocarse: lo que falla no es el texto,
   son las líneas que separan. */
@media (prefers-contrast: more){
  #analisis .acc{--acc-line:rgba(243,239,231,.55)}
  .zlist li{border-top-style:solid;border-top-color:rgba(243,239,231,.45)}
  .chips span{border-color:#F3EFE7}
  .pnode{border-color:rgba(243,239,231,.5)}
  .dl-dark{background:rgba(243,239,231,.45)}
  .cgrip{background:var(--ink);border-color:#F3EFE7}
  .ctag,.mc{background:var(--ink)}
  /* estados atenuados: .72 de opacidad es justo lo que la preferencia quiere quitar */
  .pnode.off{opacity:1}
}