@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* =====================================================================
     1. LETRA
     ===================================================================== */
  --letra: "Schibsted Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --letra-titulos: var(--letra);                                  /* una sola familia para todo */
  --letra-mono: "Cascadia Mono", Consolas, ui-monospace, monospace; /* solo para la ventana del programa (datos técnicos plegados) */

  --peso-texto: 400;   /* leer */
  --peso-medio: 500;   /* fichas, menú, etiquetas */
  --peso-fuerte: 600;  /* títulos, botones, precio (mediana medida: 600) */

  /* =====================================================================
     2. TAMAÑOS (fluidos de 360 a 1240 px de ancho; fijos de ahí a 1440)
        celular -> escritorio, en px entre paréntesis
     ===================================================================== */
  --t-precio:    clamp(2.75rem, 2.0341rem + 3.1818vw, 4.5rem);      /* 44 -> 72 */
  --t-portada:   clamp(2.25rem, 1.7386rem + 2.2727vw, 3.5rem);      /* 36 -> 56  título de portada (H1) */
  --t-seccion:   clamp(1.75rem, 1.4432rem + 1.3636vw, 2.5rem);      /* 28 -> 40  títulos de sección (H2) */
  --t-subtitulo: clamp(1.25rem, 1.1477rem + 0.4545vw, 1.5rem);      /* 20 -> 24  títulos de tarjeta y pasos (H3) */
  --t-bajada:    clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);    /* 18 -> 20  frase debajo del título */
  --t-texto:     clamp(1.0625rem, 1.0369rem + 0.1136vw, 1.125rem);  /* 17 -> 18  texto de lectura */
  --t-caja:      var(--t-texto);                                    /* 17 -> 18  nunca menos de 16 (el iPhone agranda la pantalla) */
  --t-boton:     clamp(1rem, 0.9744rem + 0.1136vw, 1.0625rem);      /* 16 -> 17 */
  --t-chip:      1rem;                                              /* 16 */
  --t-chico:     clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);      /* 15 -> 16  ayudas, categorías, pie de bloque */
  --t-legal:     0.875rem;                                          /* 14  solo el pie legal */

  /* alto de línea */
  --al-precio: 1;
  --al-portada: 1.05;
  --al-seccion: 1.15;
  --al-subtitulo: 1.25;
  --al-bajada: 1.45;
  --al-texto: 1.5;
  --al-chico: 1.45;
  --al-control: 1.25;   /* botones, fichas, caja: una sola línea */

  /* espaciado entre letras (afinado para Schibsted Grotesk, que es ancha: se aprieta poco) */
  --tr-precio: -0.02em;
  --tr-portada: -0.015em;
  --tr-seccion: -0.01em;
  --tr-subtitulo: 0;
  --tr-texto: 0;

  /* =====================================================================
     3. ESPACIOS, ANCHOS, FORMAS, CONTROLES Y MOVIMIENTO
     ===================================================================== */
  /* escala de espacios: múltiplos de 4 px */
  --e-1: 0.25rem;  /*   4 */
  --e-2: 0.5rem;   /*   8  separación mínima entre dos cosas que se tocan */
  --e-3: 0.75rem;  /*  12  entre fichas y tarjetas */
  --e-4: 1rem;     /*  16 */
  --e-5: 1.5rem;   /*  24 */
  --e-6: 2rem;     /*  32 */
  --e-7: 3rem;     /*  48 */
  --e-8: 4rem;     /*  64 */
  --e-9: 6rem;     /*  96 */
  --e-10: 8rem;    /* 128 */
  --e-seccion: clamp(5rem, 3.7727rem + 5.4545vw, 8rem);           /* 80 -> 128  entre secciones */
  --e-portada-arriba: clamp(2rem, 0.3636rem + 7.2727vw, 6rem);    /* 32 -> 96  del menú al título */

  /* anchos */
  --ancho-max: 75rem;        /* 1200  columna de la página */
  --ancho-portada: 48rem;    /*  768  título, caja y fichas (dos tercios de la columna) */
  --ancho-texto: 60ch;       /* párrafos */
  --ancho-bajada: 40ch;      /* frase de la portada: 2 renglones como mucho */
  --margen: clamp(1rem, 0.5909rem + 1.8182vw, 2rem);              /* 16 -> 32  a los costados */
  --alto-menu: 4rem;         /*   64 */

  /* esquinas por jerarquía: cuanto más grande el objeto, más redonda */
  --r-1: 6px;       /* marcas chicas: casilla de la tilde, etiqueta "Ejemplo", fila activa de la lista */
  --r-2: 8px;       /* botones (dentro de la caja: 16 de la caja - 8 de aire) */
  --r-3: 16px;      /* caja de pedido, lista de sugerencias, tarjetas */
  --r-4: 24px;      /* bloques grandes: precio y ventana de ejemplo */
  --r-pildora: 999px; /* fichas: opción para marcar, distinta de un botón */

  /* controles y tamaño para tocar */
  --toque-min: 2.75rem;            /* 44  todo lo que se toca, también la x de las fichas */
  --alto-boton: 3rem;              /* 48  botones */
  --alto-boton-celular: 3.5rem;    /* 56  botón principal a todo el ancho en celular */
  --alto-caja: 3.5rem;             /* 56  caja de pedido en celular (sin botón adentro) */
  --alto-caja-con-boton: 4rem;     /* 64  caja con el botón adentro (desde 600 px) */
  --aire-caja: 0.5rem;             /*  8  entre el borde de la caja y el botón de adentro */
  --alto-chip: 2.5rem;             /* 40  se ve de 40; la zona para tocar llega a 44 con margen */
  --alto-fila: 2.75rem;            /* 44  fila de sugerencia en escritorio */
  --alto-fila-celular: 3rem;       /* 48  fila de sugerencia en celular */
  --icono: 1.25rem;                /* 20  íconos de línea */
  --borde-ancho: 1px;
  --borde-elegido: 2px;
  --foco-ancho: 2px;
  --foco-separacion: 2px;
  --anillo-caja: 0 0 0 4px color-mix(in srgb, var(--foco) 22%, transparent); /* extra decorativo al enfocar la caja */

  /* movimiento: solo cuando responde a algo que hizo la persona */
  --dur-1: 120ms;   /* pasar el mouse, apretar */
  --dur-2: 200ms;   /* aparecer una ficha, dibujarse la tilde, cambiar el ejemplo */
  --dur-3: 320ms;   /* abrir la lista, desplegar una pregunta */
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root {
  /* =====================================================================
     4. COLOR · Frambuesa, modo oscuro (el único)
     Mismos nombres que APP_DISENO.md; contrastes en paletas_finales.json.
     ===================================================================== */
  color-scheme: dark;
  --fondo: #0e0e12;
  --superficie: #16161c;
  --superficie-2: #1f1f27;
  --texto: #f4f3f6;
  --texto-suave: #b4b4c0;  /* ajustado desde #a9a9b5 para llegar a APCA Lc 60 */
  --borde: #6a6a77;
  --acento: #ff62b0;
  --sobre-acento: #1c0913;
  --acento-suave: #3a1b2e;
  --exito: #5fcb93;
  --aviso: #f0b84b;
  --error-suave: #ff8b6b;
  --foco: #ff62b0;
  /* --blanco-fijo: NO es una segunda paleta ni un modo claro (sigue sin haber uno). Es el único uso
     funcional que necesita blanco de verdad, sin importar el tema: el fondo del QR del acompañante de
     celular (docs/PROPUESTA_ACOMPANANTE_CELULAR.md), que necesita buen contraste para que la cámara lo
     lea bien. No se usa para nada decorativo ni de marca. */
  --blanco-fijo: #ffffff;
  /* derivados (controlados en paletas_finales.json y en este sistema) */
  --exito-fondo: #233731;
  --aviso-fondo: #3d3324;
  --error-suave-fondo: #402b2a;
  --error-fondo: var(--error-suave-fondo);  /* alias para la ventana del programa (APP_DISENO.md) */
  --divisor: #2e2e35;  /* solo decorativo: no marca controles */
  --acento-hover: #fe8cc0;
  /* usos */
  --acento-linea: var(--acento);  /* acento usado como texto, borde o ícono chico */
  --enlace: var(--acento-linea);
  --elegido-borde: var(--acento-linea);
  --elegido-fondo: var(--acento-suave);
  --tilde-marca: var(--acento);  /* solo la tilde del logo; en la interfaz se usa --acento-linea */
  --elevado-1: var(--superficie);    /* en oscuro se eleva aclarando, no con sombra */
  --elevado-2: var(--superficie-2);
  --sombra-1: none;
  --sombra-2: 0 16px 40px rgb(0 0 0 / 0.55);
}

/* =====================================================================
   5. PREFERENCIAS DE LA PERSONA
   ===================================================================== */

/* Menos movimiento: todo cambia sin animación; los ejemplos de la caja no rotan (eso lo hace el JS). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}

/* Alto contraste de Windows: colores del sistema, sin sombras, bordes visibles en todo lo que se toca.
   Lleva !important a propósito: tiene que ganarle a cualquier combinación de paleta y tema. */
@media (forced-colors: active) {
  :root {
    --foco: Highlight !important;
    --borde: CanvasText !important;
    --acento-linea: Highlight !important;
    --sombra-1: none !important;
    --sombra-2: none !important;
    --anillo-caja: none !important;
  }
}