/* ═══════════════════════════════════════════════════════════════════
   DIRECCIÓN FABRICA · el sistema, portado a Cloudflare

   Roberto compró la licencia de la plantilla y prefiere trabajar en
   Cloudflare en vez de Framer. Esto es el port: mismo sistema de
   layout, ritmo y comportamiento, en HTML plano sobre Workers.

   Los valores NO son a ojo: salen de leer los estilos computados del
   sitio en vivo (ver 02_PROCESS/DAVINCI/fabrica-medidas.json).
     contenedor 1368 con márgenes de 36 sobre 1440
     ritmo de sección 120px, las densas a 200px
     display 210/210 y h2 144/132, tracking -0.06em, peso 600
     píldoras de radio 50, botón grande de 58 de alto
     escalera de radios 7 · 11 · 12 · 14 · 18 · 50

   La tipografía es Geist (la de VOLUMA), no Inter: es la voz de la casa
   y es un neogrotesco vecino, así que la escala medida se sostiene.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* claro primero, como pidió Roberto */
  --papel:#FFFFFF;
  --nieve:#F5F5F5;      /* superficie sobre papel */
  --hueso:#E9E9E9;      /* separador suave */
  --linea:#E7E7E7;
  --tinta:#0A0A0A;      /* el negro real de la plantilla, no #000 */
  --grafito:#272727;
  --gris:#6B6B6B;
  --brasa:#FF5A1F;      /* el acento de VOLUMA, único añadido de marca */

  --f:'Geist', system-ui, -apple-system, sans-serif;
  --fm:'Geist Mono', ui-monospace, Menlo, monospace;

  /* radios medidos */
  --r7:7px; --r11:11px; --r12:12px; --r14:14px; --r18:18px; --r50:50px;

  /* ritmo medido */
  --ritmo:120px; --ritmo-denso:200px;
  --margen:36px; --ancho:1368px;

  --ease:cubic-bezier(.22,.7,.2,1);
}
*{box-sizing:border-box}
html{background:var(--papel);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f);
font-size:17px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}

/* ── contenedor ─────────────────────────────────────────────────── */
.caja{max-width:var(--ancho);margin:0 auto;padding-left:var(--margen);padding-right:var(--margen)}
@media(max-width:900px){ :root{--margen:20px; --ritmo:72px; --ritmo-denso:96px} }

section{padding-top:var(--ritmo);padding-bottom:var(--ritmo)}
section.denso{padding-top:var(--ritmo-denso);padding-bottom:var(--ritmo-denso)}

/* ── tipografía: la escala medida ───────────────────────────────── */
/* El display va en 700. La plantilla mide 600, pero el wordmark de
   VOLUMA es bold y la marca manda sobre la referencia. */
.display{font-weight:700;letter-spacing:-.06em;line-height:1;
font-size:clamp(64px,14.6vw,210px);margin:0}
h2{font-weight:600;letter-spacing:-.06em;line-height:.92;
font-size:clamp(44px,10vw,144px);margin:0}
h3{font-weight:600;letter-spacing:-.06em;line-height:1;
font-size:clamp(30px,4vw,58px);margin:0}
h4{font-weight:600;letter-spacing:-.04em;line-height:1.1;
font-size:clamp(22px,2.2vw,30px);margin:0}
p{margin:0;font-weight:400}
.grande{font-size:clamp(19px,2vw,26px);line-height:1.25;letter-spacing:-.04em;font-weight:500}
/* el dato chico entre paréntesis que acompaña cada sección */
.cuenta{font-size:clamp(20px,2.6vw,37px);font-weight:600;letter-spacing:-.06em;color:var(--gris)}
.etiqueta{font-size:13px;letter-spacing:-.01em;color:var(--gris)}
/* el punto final es del sistema, pero NO gris: a este tamaño un punto
   gris se lee como un cuadrito suelto, no como puntuación */
.punto{color:inherit}
a{color:inherit;text-decoration:none}

/* ── botón píldora con etiqueta rodante ─────────────────────────
   La plantilla apila dos copias del texto: una sube y sale mientras
   la otra entra. Por eso el DOM trae el texto duplicado. */
.pill{display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--r50);font-weight:400;cursor:pointer;border:1px solid transparent;
overflow:hidden;position:relative;transition:background .3s var(--ease),color .3s var(--ease)}
.pill--g{height:58px;padding:0 30px;font-size:17px}
.pill--s{height:30px;padding:0 12px;font-size:12px}
.pill--oscuro{background:var(--tinta);color:var(--papel)}
.pill--claro{background:var(--papel);color:var(--tinta);border-color:var(--linea)}
.pill--claro:hover{background:var(--nieve)}
.pill--brasa{background:var(--brasa);color:var(--tinta)}
.rueda{display:block;position:relative;overflow:hidden;height:1.2em}
.rueda i{display:block;font-style:normal;transition:transform .42s var(--ease)}
.rueda i+i{position:absolute;left:0;top:0;transform:translateY(115%)}
.pill:hover .rueda i:first-child{transform:translateY(-115%)}
.pill:hover .rueda i+i{transform:translateY(0)}

/* ── enlace de nav: subrayado que cruza ─────────────────────────── */
.nav-enlace{position:relative;padding-bottom:3px;font-size:17px}
.nav-enlace::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:currentColor;transform:scaleX(0);transform-origin:right;
transition:transform .36s var(--ease)}
.nav-enlace:hover::after{transform:scaleX(1);transform-origin:left}

/* ── superficies ────────────────────────────────────────────────── */
.tarjeta{background:var(--nieve);border-radius:var(--r18);padding:28px}
.marco{border-radius:var(--r18);overflow:hidden}
.invertido{background:var(--tinta);color:var(--papel);border-radius:var(--r18)}
/* OJO: el punto NO entra aquí. Es puntuación y hereda el color del
   texto; en gris y a 144px se lee como un cuadrito suelto. La
   etiqueta y la cuenta sí son secundarias y van atenuadas. */
.invertido .etiqueta,.invertido .cuenta{color:#8A8A8A}
.chip{display:inline-block;font-size:13px;padding:8px 14px;border:1px solid var(--linea);
border-radius:var(--r50);transition:background .25s var(--ease),border-color .25s var(--ease)}
.chip:hover{background:var(--nieve);border-color:var(--gris)}

/* ── fila de índice ─────────────────────────────────────────────── */
.fila{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;
padding:26px 20px;border-top:1px solid var(--linea);border-radius:var(--r14);
transition:background .32s var(--ease),padding-left .32s var(--ease)}
.fila:last-of-type{border-bottom:1px solid var(--linea)}
.fila:hover{background:var(--nieve);padding-left:32px}
.fila .nombre{font-size:clamp(26px,4.6vw,60px);font-weight:600;letter-spacing:-.06em;line-height:1}
.fila .dato{font-size:14px;color:var(--gris);white-space:nowrap}

/* ── entrada al hacer scroll ────────────────────────────────────── */
.entra{opacity:0;transform:translateY(24px);
transition:opacity .8s var(--ease),transform .8s var(--ease)}
.entra.ya{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .entra{opacity:1;transform:none;transition:none}
  .rueda i{transition:none}
}

/* ── ACORDEÓN DE "+" ────────────────────────────────────────────
   El renglón cerrado es solo número, título y el botón redondo. Al
   abrir, el "+" gira 45 grados y se vuelve "−", y debajo aparece la
   descripción con sus chips. Es <details> nativo: sin JS abre igual,
   y la altura se anima con grid-template-rows, que es lo único que
   interpola bien de 0 a "lo que mida". */
.acor{border-top:1px solid var(--linea)}
.acor:last-of-type{border-bottom:1px solid var(--linea)}
.acor summary{list-style:none;cursor:pointer;display:grid;
grid-template-columns:110px 1fr auto;align-items:center;gap:32px;padding:30px 0}
.acor summary::-webkit-details-marker{display:none}
.acor .num{font-size:14px;color:var(--gris)}
.acor .tit{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.acor .mas{width:52px;height:52px;border-radius:50%;border:1px solid var(--linea);
display:grid;place-items:center;position:relative;flex:none;
transition:background .3s var(--ease),border-color .3s var(--ease)}
.acor summary:hover .mas{background:var(--nieve);border-color:var(--gris)}
/* el signo son dos barras: la vertical se desvanece al abrir, y el
   conjunto gira. Así el "+" se vuelve "−" girando, no saltando. */
.acor .mas::before,.acor .mas::after{content:"";position:absolute;
background:var(--tinta);transition:transform .42s var(--ease),opacity .42s var(--ease)}
.acor .mas::before{width:17px;height:1.5px}
.acor .mas::after{width:1.5px;height:17px}
.acor[open] .mas::before{transform:rotate(180deg)}
.acor[open] .mas::after{transform:rotate(180deg);opacity:0}
.acor .cuerpo{display:grid;grid-template-rows:0fr;
transition:grid-template-rows .46s var(--ease)}
.acor[open] .cuerpo{grid-template-rows:1fr}
.acor .cuerpo > div{overflow:hidden}
.acor .interior{display:grid;grid-template-columns:110px 1fr 1fr;gap:32px;
padding:0 0 38px}
.acor .interior p{color:var(--grafito);max-width:40ch}
.acor .chips{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
@media(max-width:900px){
  .acor summary{grid-template-columns:1fr auto;gap:16px}
  .acor .num{display:none}
  .acor .interior{grid-template-columns:1fr;gap:20px}
  .acor .mas{width:42px;height:42px}
}

/* ── DESVANECIDO INFERIOR ───────────────────────────────────────
   La franja de abajo difumina lo que pasa por debajo, como en la
   plantilla. Va fija y no recibe clics. En móvil estorba, así que
   solo existe de 900 para arriba. */
.velo-pie{position:fixed;left:0;right:0;bottom:0;height:120px;z-index:40;
pointer-events:none;display:none}
@media(min-width:901px){ .velo-pie{display:block} }
.velo-pie i{position:absolute;left:0;right:0;display:block;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}