/* ============================================================================
   Bivel — Base y primitivas
   Las dos reglas de las que cuelga todo:
     1 · Ninguna pantalla es negra — todo se apoya en un gradiente a sangre.
     2 · Toda sección es liquid glass — nunca glass dentro de glass.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font:var(--type-body);
  font-size:clamp(15px,.42vw + 13.6px,17px);
  color:var(--text-primary);
  background-color:var(--surface-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--cream-100);color:var(--ink-deep)}

:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}

/* ---------- Salto al contenido ---------- */
.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:100;
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);
  background:var(--action-primary-bg);color:var(--action-primary-fg);
  font:var(--type-label);transition:top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus-visible{top:var(--space-4)}

/* ============================================================================
   Fondos
   ========================================================================== */

.backdrop{position:relative;background-color:var(--ink-deep);isolation:isolate}
.backdrop--brand{background-image:var(--gradient-brand)}
.backdrop--app{background-image:var(--gradient-app)}
.backdrop--warm{background-image:var(--gradient-app-warm)}
.backdrop--deep{background-image:var(--gradient-app-deep)}
.backdrop--mark{background-image:var(--gradient-brand-mark)}

/* Grano fino: 5%, mosaico de 180px. Va en todos los gradientes. */
.backdrop::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzMnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTgwJyBoZWlnaHQ9JzE4MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size:var(--grain-size) var(--grain-size);
}

/* El gradiente de página: una sola capa fija detrás de todo el documento, para
   que el scroll atraviese la luz en vez de repetirla sección a sección. */
.page-backdrop{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--ink-deep);
  background-image:var(--gradient-app);
  background-size:cover;background-repeat:no-repeat;
}
.page-backdrop::after{
  content:"";position:absolute;inset:0;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzMnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTgwJyBoZWlnaHQ9JzE4MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size:var(--grain-size) var(--grain-size);
}

/* ============================================================================
   Liquid glass
   Receta: relleno + blur saturado + borde 1px + brillo interior superior 1px.
   ========================================================================== */

.glass{
  position:relative;
  background-image:var(--glass-fill);
  backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));
  border:var(--border-width-hair) solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass);
}
.glass--sunk{
  background-image:var(--glass-fill-sunk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.glass--raised{
  background-image:var(--glass-fill-raised);
  border-color:var(--glass-border-strong);
  box-shadow:inset 0 1px 0 var(--glass-highlight),var(--shadow-raised);
}
.glass--accent{
  background-image:var(--glass-fill-accent);
  border-color:rgba(233,96,60,.34);
}

/* Nunca glass dentro de glass: los blur se suman y se vuelve leche.
   Un hijo .glass de un .glass pierde su propio blur y se queda en relleno. */
.glass .glass{
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ============================================================================
   Tipografía
   Caja normal en todo: títulos, secciones y botones. Las mayúsculas quedan
   para eyebrows y para el CTA principal.
   ========================================================================== */

.display{
  font:var(--fw-bold) clamp(32px,5.6vw,68px)/1.04 var(--font-display);
  letter-spacing:var(--ls-display);
  color:var(--cream-050);
  text-wrap:balance;
  /* Palabras como «prohibiciones» no caben enteras en un móvil estrecho. */
  overflow-wrap:break-word;hyphens:auto;
}
.h1{
  font:var(--fw-bold) clamp(28px,4.4vw,52px)/1.06 var(--font-display);
  letter-spacing:var(--ls-display);color:var(--cream-050);text-wrap:balance;
  overflow-wrap:break-word;hyphens:auto;
}
.h2{
  font:var(--fw-semibold) clamp(24px,2.6vw,34px)/1.12 var(--font-display);
  letter-spacing:var(--ls-heading);color:var(--cream-050);text-wrap:balance;
}
.h3{
  font:var(--fw-semibold) clamp(18px,1.4vw,22px)/var(--lh-normal) var(--font-display);
  letter-spacing:var(--ls-heading);color:var(--cream-050);
}
.lede{
  font:var(--fw-regular) clamp(17px,1.35vw,21px)/1.5 var(--font-body);
  color:var(--text-secondary);max-width:var(--width-prose-max);text-wrap:pretty;
}
.body{color:var(--text-secondary);text-wrap:pretty}
.caption{font:var(--type-caption);color:var(--text-muted)}
.accent{color:var(--text-accent)}
.dim{color:var(--text-muted)}

/* Eyebrow: la única mayúscula de sección. Apenas trackeada — la caja alta ya
   hace el trabajo. */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--fw-semibold) var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:var(--radius-circle);
  background:var(--red-300);flex:none;
}
.eyebrow--plain::before{display:none}

/* Números tabulares: en Bivel los números son el contenido. */
.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.metric{
  font:var(--fw-light) clamp(44px,5.4vw,76px)/var(--lh-tight) var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--cream-050);
  font-variant-numeric:tabular-nums;
}

/* ============================================================================
   Layout
   ========================================================================== */

.wrap{
  width:100%;max-width:var(--width-page-max);
  margin-inline:auto;padding-inline:var(--gutter-page);
}
.wrap--narrow{max-width:840px}
.section{position:relative;z-index:0;padding-block:var(--stack-web)}
.section > *{position:relative;z-index:1}

/* Aire por sección: la misma receta con el foco movido, pero sin cantos —
   un halo que se desvanece, nunca un gradiente que vuelve a empezar.
   La caja del halo mide justo lo que mide la elipse y se sale por arriba a
   propósito. Con inset:0 el degradado se cortaba en el canto superior de la
   sección justo donde más brilla, y esa raya recta se veía en las costuras.
   El alto va en porcentaje pero con tope: una sección de 3.000px no tiene por
   qué llevar un halo de 800, y sin tope se le comía la sección de arriba. */
.glow{--glow-alto:min(26%,340px)}
.glow::before{
  content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none;
  top:calc(var(--glow-y,0%) - var(--glow-alto));
  height:calc(var(--glow-alto) * 2);
  background:radial-gradient(36% 50% at var(--glow-x,20%) 50%,
    rgba(195,58,16,.15) 0%,rgba(195,58,16,0) 100%);
}
.glow--strong::before{
  background:
    radial-gradient(28% 31% at var(--glow-x,50%) 50%,
      rgba(255,250,235,.10) 0%,rgba(255,250,235,0) 100%),
    radial-gradient(42% 50% at var(--glow-x,50%) 50%,
      rgba(174,40,2,.42) 0%,rgba(174,40,2,0) 100%);
}
/* Centrada. El hero lo está, y con las cabeceras a la izquierda la página se
   leía descuadrada: un eje en la mitad y otro en el margen. La medida de
   lectura la pone el propio texto, no la caja. */
.section-head{
  display:grid;gap:var(--space-4);margin-bottom:clamp(40px,5vw,64px);
  justify-items:center;text-align:center;
}
.section-head .lede{max-width:62ch;margin-inline:auto}
.rule{height:1px;background:var(--divider);border:0;margin:0}

/* ============================================================================
   Acciones
   La primaria es crema. El rojo sólido queda como variante secundaria para
   zonas ya oscuras. Todo control que no sea tarjeta es una píldora.
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--size-control);padding:var(--pad-control-y) var(--space-6);
  border-radius:var(--radius-pill);
  font:var(--fw-semibold) var(--fs-label)/1 var(--font-body);
  letter-spacing:var(--ls-body);white-space:nowrap;
  transition:var(--transition-control),box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:scale(var(--press-scale))}
.btn:disabled{cursor:not-allowed;background:var(--action-disabled-bg);color:var(--action-disabled-fg);box-shadow:none}

.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg);box-shadow:var(--shadow-glow-cream)}
.btn--primary:hover{background:var(--action-primary-bg-hover)}
.btn--primary:active{background:var(--action-primary-bg-active)}

.btn--glass{
  background-image:var(--glass-fill);color:var(--action-glass-fg);
  border:var(--border-width-hair) solid var(--glass-border);
  backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--blur-glass)) saturate(var(--glass-saturate));
  box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.btn--glass:hover{background-image:var(--glass-fill-raised);border-color:var(--glass-border-strong)}

.btn--red{background:var(--action-red-bg);color:var(--action-red-fg)}
.btn--red:hover{background:var(--red-500)}

.btn--ghost{color:var(--text-secondary);padding-inline:var(--space-4)}
.btn--ghost:hover{color:var(--cream-050)}

.btn--lg{min-height:var(--size-cta);padding-inline:var(--space-8);font-size:var(--fs-body-lg)}
.btn--sm{min-height:var(--size-control-sm);padding-inline:var(--space-4);font-size:var(--fs-caption)}
.btn--block{width:100%}

/* Chip: píldora de glass. Lo seleccionado sube el glass — el rojo ya no puede
   significar «seleccionado», porque ahora significa carbohidratos. */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:var(--size-control-sm);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);
  background-image:var(--glass-fill-sunk);
  border:var(--border-width-hair) solid var(--glass-border);
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-body);
  color:var(--text-secondary);transition:var(--transition-control);
}
.chip[aria-selected="true"],.chip.is-selected{
  background-image:var(--glass-fill-raised);
  border-color:var(--glass-border-strong);
  color:var(--cream-050);
  box-shadow:inset 0 1px 0 var(--glass-highlight);
}

/* ============================================================================
   Campos
   ========================================================================== */

.field{
  width:100%;min-height:var(--size-control-lg);
  background-color:transparent;
  padding:var(--pad-control-y) var(--pad-control-x);
  border-radius:var(--radius-pill);
  background-image:var(--glass-fill-sunk);
  border:var(--border-width-hair) solid var(--glass-border);
  color:var(--cream-050);font:var(--type-body);
  transition:var(--transition-control);
}
.field::placeholder{color:var(--text-disabled)}
.field:hover{border-color:var(--glass-border-strong)}
.field:focus{outline:none;border-color:var(--cream-300);background-image:var(--glass-fill)}
.field:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* El autorrelleno de Chrome pinta el campo de azul claro: se neutraliza con
   una sombra interior del color de la superficie. */
.field:-webkit-autofill,
.field:-webkit-autofill:hover,
.field:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--cream-050);
  -webkit-box-shadow:0 0 0 1000px #2a1109 inset;
  caret-color:var(--cream-050);
}

/* ============================================================================
   Iconos — Lucide, trazo 2px, currentColor
   ========================================================================== */

.icon{
  width:var(--size-icon);height:var(--size-icon);flex:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  fill:none;
}
.icon--sm{width:var(--size-icon-sm);height:var(--size-icon-sm)}
.icon--lg{width:var(--size-icon-lg);height:var(--size-icon-lg)}
/* La marca es un trazado relleno, no un icono de trazo. */
.icon--fill{fill:currentColor;stroke:none}

/* ============================================================================
   Movimiento de entrada
   Nada se oculta si no hay JS: la clase .js la pone un script en el <head>.
   ========================================================================== */

.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-screen) var(--ease-out),
             transform var(--dur-screen) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}

/* Titulares palabra a palabra: suben, entran en foco y aparecen. El bloque no
   se mueve — el movimiento lo llevan las palabras. */
.js .reveal[data-reveal="words"]{opacity:1;transform:none}
.js .rw{
  display:inline-block;
  overflow-wrap:break-word;hyphens:auto;
  opacity:0;transform:translateY(.4em);filter:blur(7px);
}
.js .reveal.is-in .rw{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 560ms var(--ease-out),
             transform 560ms var(--ease-out),
             filter 560ms var(--ease-out);
  transition-delay:calc(var(--reveal-delay,0ms) + var(--rw-i,0) * 38ms);
}

/* Grupos: los hijos entran en cascada sin escribir un retardo por hijo. */
.js .reveal-group > *{opacity:0;transform:translateY(20px)}
.js .reveal-group.is-in > *{
  opacity:1;transform:none;
  transition:opacity var(--dur-screen) var(--ease-out),
             transform var(--dur-screen) var(--ease-out);
}
.js .reveal-group.is-in > :nth-child(1){transition-delay:0ms}
.js .reveal-group.is-in > :nth-child(2){transition-delay:80ms}
.js .reveal-group.is-in > :nth-child(3){transition-delay:160ms}
.js .reveal-group.is-in > :nth-child(4){transition-delay:240ms}
.js .reveal-group.is-in > :nth-child(5){transition-delay:320ms}
.js .reveal-group.is-in > :nth-child(6){transition-delay:400ms}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.is-in,
  .js .reveal-group > *,.js .reveal-group.is-in > *{
    opacity:1;transform:none;transition:none;
  }
  .js .rw,.js .reveal.is-in .rw{opacity:1;transform:none;filter:none;transition:none}
}

/* ============================================================================
   Movimiento ligado al scroll
   Todo lo calcula un único rAF en site.js y llega aquí como variables.
   ========================================================================== */

/* Deriva suave al cruzar la pantalla. */
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
@media (prefers-reduced-motion:reduce){[data-parallax]{transform:none}}

/* Un valor que cuenta no debe descolocar la línea al cambiar de dígitos. */
[data-count]{font-variant-numeric:tabular-nums}

/* Barras y anillos se dibujan al entrar; el sistema reserva
   --ease-emphasis justo para esto. */
.macro__fill{width:0;transition:width 900ms var(--ease-emphasis)}
.js .is-in .macro__fill{width:var(--fill,0%)}
@media (prefers-reduced-motion:reduce){
  .macro__fill{transition:none;width:var(--fill,0%)}
}

[data-draw]{transition:stroke-dashoffset 1100ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){[data-draw]{transition:none}}

/* ============================================================================
   Sin backdrop-filter: los paneles caen a su relleno plano. Legible, pero
   pierde la profundidad. Se compensa opacando algo el relleno.
   ========================================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.btn--glass,.chip,.field{background-color:rgba(38,16,10,.62)}
  .glass--raised{background-color:rgba(52,22,14,.7)}
}