/* =============================================================================
   IMPROVEFIT · base.css
   Tokens, reset, tipografía, retícula y movimiento.

   El negro y el naranja de la marca, y dos letras elegidas para quien lee:
     · Bricolage Grotesque en los titulares: grotesca con carácter, cálida,
       que aguanta el tamaño grande sin parecer un cartel de oferta.
     · Atkinson Hyperlegible en el texto: la diseñó el Braille Institute para
       personas con baja visión. Cada letra se distingue de su vecina
       (la I de la l, la O del 0), que es justo lo que hace falta a partir de
       los cincuenta.

   Suelo de accesibilidad que no se toca:
     · Cuerpo a 19 px y nada por debajo de 16 px.
     · Todo el texto por encima de 7:1 sobre su fondo.
     · Nada que se pulse por debajo de 48 px de alto.
     · Todo el movimiento se apaga con «reducir movimiento».
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Fondos · el negro de la marca, en cuatro alturas */
  --fondo:    #0D0E10;
  --capa:     #131417;   /* secciones que se separan de la anterior */
  --carta:    #1A1C20;   /* tarjetas */
  --campo:    #22252A;   /* campos y superficies pulsables */
  --hondo:    #08090A;   /* el pie */

  --linea:    #2A2D32;
  --linea-2:  #3A3E44;

  /* El naranja de la marca · 7,4:1 sobre el fondo */
  --naranja:    #F2841E;
  --naranja-cl: #FFA95E;
  --naranja-os: #D9681A;
  --granate:    #C1272D;
  --grad:       linear-gradient(120deg, #F2841E, #D9531F);
  --grad-hondo: linear-gradient(120deg, #F2841E, #C1272D);
  --brasa:      rgba(242,132,30,.12);
  --brasa-2:    rgba(242,132,30,.22);

  /* Texto · tirando al hueso, no a gris frío */
  --texto:    #F4F1EC;   /* 17,1:1 */
  --texto-2:  #D6D1C9;   /* 12,7:1 */
  --texto-3:  #B3ADA4;   /*  7,6:1 · AAA en los cuatro fondos */
  --tinta:    #0D0E10;   /* lo que va ENCIMA del naranja · 7,4:1 */

  /* Nombres heredados que aún usa algún módulo */
  --hueso: var(--fondo); --crema: var(--carta); --hueso-2: var(--capa); --hueso-3: var(--campo);
  --borde: var(--linea); --borde-2: var(--linea-2); --gris: var(--texto-2); --gris-2: var(--texto-3);
  --naranja-t: var(--naranja); --carbon: var(--capa); --carbon-2: var(--hondo);
  --blanco: var(--carta); --nieve: var(--capa); --nieve-2: var(--campo);

  /* Tipografía */
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --cuerpo:  'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --mono:    var(--cuerpo);
  --f:       var(--cuerpo);

  /* Escala · proporción 1,25 sobre 19 px, que se lee sin gafas */
  --t-hero:  clamp(2.9rem, 1.4rem + 6.2vw, 6.4rem);
  --t-xxl:   clamp(2.5rem, 1.4rem + 4.2vw, 4.4rem);
  --t-xl:    clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  --t-lg:    clamp(1.45rem, 1.25rem + .8vw, 1.85rem);
  --t-md:    clamp(1.25rem, 1.15rem + .4vw, 1.4rem);
  --t-base:  1.1875rem;   /* 19 px */
  --t-sm:    1.125rem;    /* 18 px */
  --t-xs:    1rem;        /* 16 px */
  --t-nota:  1rem;        /* 16 px */

  /* Ritmo */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3.5rem;
  --s-9: 5rem;    --s-10: 6.5rem; --s-11: 8.5rem; --s-12: 11rem;
  --seccion: clamp(4.5rem, 9vw, 8.5rem);

  /* Retícula */
  --ancho: 1200px;
  --ancho-ancho: 1400px;
  --medida: 62ch;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --cabecera: 5rem;

  /* Forma · redondo y generoso, que invita a tocar */
  --r: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --pill: 999px;

  --sombra-1: 0 1px 0 rgba(244,241,236,.05) inset;
  --sombra-2: 0 18px 40px rgba(0,0,0,.45);
  --sombra-3: 0 30px 70px rgba(0,0,0,.6);
  --sombra-naranja: 0 12px 34px rgba(242,132,30,.28);

  /* Movimiento · entra rápido y se posa despacio */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-muelle: cubic-bezier(.34,1.4,.64,1);
  --dur: .35s;
  --dur-rapido: .18s;
  --dur-entrada: .9s;

  --z-cabecera: 60; --z-flotante: 70; --z-panel: 80; --z-modal: 90; --z-cookies: 100;

  color-scheme: dark;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; font-family: var(--cuerpo); color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:where(p, li) { text-wrap: pretty; }
strong, b { font-weight: 700; }

/* El foco se ve de lejos: anillo naranja grueso y separado */
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 4px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--naranja); color: var(--tinta); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--linea-2); border: 3px solid var(--fondo); border-radius: var(--pill); }
::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }

/* ---------- 3. Tipografía ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--texto);
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--t-xxl); font-weight: 800; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); letter-spacing: -.015em; line-height: 1.15; }
h4 { font-size: var(--t-md); letter-spacing: -.01em; line-height: 1.2; }

/* El titular grande de la portada */
.hero-titulo {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-titulo em, .hero-titulo b { font-style: normal; font-weight: inherit; color: inherit; }

/* La etiqueta de encima de un titular, cuando de verdad dice algo */
.ante {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--cuerpo);
  font-size: var(--t-sm); font-weight: 700;
  color: var(--naranja);
}
.ante--apagado { color: var(--texto-3); }

.entradilla { font-size: var(--t-md); color: var(--texto-2); max-width: 44ch; line-height: 1.6; }

.dim { color: var(--texto-3); }
.naranja { color: var(--naranja); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: fixed; top: .5rem; left: var(--gutter);
  transform: translateY(-250%);
  background: var(--naranja); color: var(--tinta);
  padding: var(--s-3) var(--s-5); border-radius: var(--pill);
  font-size: var(--t-sm); font-weight: 700;
  z-index: var(--z-cookies); transition: transform var(--dur-rapido) var(--ease);
}
.saltar:focus { transform: translateY(0); }

/* ---------- 4. Retícula -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--ancho { max-width: var(--ancho-ancho); }

.malla { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s-6); }
.c-1-6, .c-1-7, .c-1-8, .c-2-8, .c-6-13, .c-7-13, .c-8-13, .c-todo { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .malla { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .c-1-6  { grid-column: 1 / 7; }
  .c-1-7  { grid-column: 1 / 8; }
  .c-1-8  { grid-column: 1 / 9; }
  .c-2-8  { grid-column: 2 / 9; }
  .c-6-13 { grid-column: 6 / 13; }
  .c-7-13 { grid-column: 7 / 13; }
  .c-8-13 { grid-column: 8 / 13; }
  .c-todo { grid-column: 1 / -1; }
}

.seccion { padding-block: var(--seccion); position: relative; }
.seccion--corta { padding-block: calc(var(--seccion) * .6); }
/* Las secciones alternas suben un escalón de negro: se nota el cambio de tema
   sin rayas ni cajas */
.seccion--nieve, .seccion--carbon { background: var(--capa); }

.medida { max-width: var(--medida); }
.regla { height: 1px; background: var(--linea); border: 0; margin-block: var(--s-7); }

/* Cabecera de sección: titular grande y una frase debajo */
.titulo-seccion { display: grid; gap: var(--s-4); margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 48rem; }
.titulo-seccion--fila { max-width: none; }
@media (min-width: 900px) {
  .titulo-seccion--fila { grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--s-6); }
  .titulo-seccion--fila .titulo-seccion__extra { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}
/* Una raya naranja corta encima de cada titular de sección: se dibuja al
   aparecer. Es la firma de la casa, la misma en todas las páginas. */
.titulo-seccion h2::before, .titulo-seccion h1::before {
  content: ''; display: block; width: 3.5rem; height: 5px; border-radius: 3px;
  background: var(--naranja); margin-bottom: var(--s-5);
  transform-origin: left; transform: scaleX(var(--raya, 1));
  transition: transform .9s var(--ease-out) .15s;
}

/* ---------- 5. Movimiento ------------------------------------------------ */
/* Aparecer al bajar: sube y se aclara, una sola vez */
[data-revelar] {
  opacity: 0; transform: translateY(1.75rem);
  transition: opacity var(--dur-entrada) var(--ease-out), transform var(--dur-entrada) var(--ease-out);
  transition-delay: var(--retraso, 0ms);
}
[data-revelar='izq'] { transform: translateX(-2rem); }
[data-revelar='der'] { transform: translateX(2rem); }
[data-revelar='zoom'] { transform: scale(.94); }
[data-revelar].visible { opacity: 1; transform: none; }

/* Fotos que se descubren de abajo arriba, como una persiana */
/* El recorte va en la imagen de dentro y no en el marco: un marco recortado
   del todo no cuenta como visible y no llegaría a descubrirse nunca */
[data-mascara] { background: transparent; }
[data-mascara] > picture, [data-mascara] > img { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); transition-delay: var(--retraso, 0ms); }
[data-mascara] img { transform: scale(1.18); transition: transform 1.6s var(--ease-out); transition-delay: var(--retraso, 0ms); }
[data-mascara].visible > picture, [data-mascara].visible > img { clip-path: inset(0 0 0 0); }
[data-mascara].visible img { transform: scale(1); }

/* La raya de los titulares se dibuja cuando el titular entra */
.titulo-seccion[data-revelar] { --raya: 0; }
.titulo-seccion[data-revelar].visible { --raya: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1 !important; transform: none !important; }
  [data-mascara] > picture, [data-mascara] > img { clip-path: none !important; }
  [data-mascara] img { transform: none !important; }
  .titulo-seccion { --raya: 1 !important; }
}

/* ---------- 6. Utilidades ------------------------------------------------ */
/* Lo que lleva hidden se esconde siempre, aunque su clase diga display */
[hidden] { display: none !important; }
.oculto { display: none !important; }
.apilado { display: grid; gap: var(--s-4); align-content: start; }
.fila { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.max-texto { max-width: var(--medida); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }