@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · DESIGN TOKENS
   Fichero: web/estilos/tokens.css        Tarea: F3-T01 (Fase 3 · dirección de arte)
   -----------------------------------------------------------------------------------------
   FUENTE NORMATIVA: brand-data/MARCA.md (dosier medido sobre los ficheros reales)
     §2.1 paleta por uso (HEX literales)   §2.2 contrastes WCAG calculados
     §3   tipografías y jerarquía          §6   lenguaje visual (calle vs cristal)
     §7   notas de diseño (tokens, herencia del sitio actual)
     §8.5 lo que NO existía y se define aquí: colores de estado + estilos de cristal
   -----------------------------------------------------------------------------------------
   REGLAS DE ESTE FICHERO
   1. Los HEX de §2.1 se copian LITERALES: no se redondean y no se inventan colores nuevos.
      Las únicas incorporaciones son las autorizadas por §8: estados (éxito/aviso) y cristal.
   2. Sobre negro se escribe en blanco o mostaza. El granate NUNCA es color de texto sobre
      negro (§2.2: #890D37 = 2,18:1 y #AD153E = 2,95:1 → no aptos). El granate es bloque,
      borde, fondo de CTA y adorno, no tinta.
   3. Sin CDN en runtime (máster §3): las fuentes van self-host en web/fuentes/.
   4. Todos los ratios citados en comentarios están recalculados con la fórmula de
      luminancia relativa WCAG 2.x; reproducen exactamente los de MARCA.md §2.2.
   ========================================================================================= */

:root {
  /* =====================================================================================
     1. PALETA CRUA DE MARCA — MARCA.md §2.1 (HEX literales, sin retocar)
     ===================================================================================== */

  /* --- Neutros de marca --- */
  --sp-negro: #000000;          /* Negro Santo · fondo base de todo el sitio (body) */
  --sp-negro-humo: #242322;     /* Negro humo · superficie oscura elevada (tarjetas/paneles) */
  --sp-blanco: #FFFFFF;         /* Blanco · tinta principal sobre negro (21:1 AAA) */
  --sp-blanco-hueso: #F8F8F8;   /* Blanco hueso · superficie clara opcional / modo claro */

  /* --- Granates ---
     El granate del SISTEMA es #890D37. Los otros dos granates son colores MEDIDOS dentro
     del arte (logo y pegatinas) y solo valen para reproducir ese arte: nunca como texto
     ni como color de interfaz. */
  --sp-granate: #890D37;        /* Granate Santo · PRIMARIO (fondo de CTA, bordes, footer) */
  --sp-granate-hover: #6B0B2B;  /* Granate profundo · hover / pressed */
  --sp-granate-arte: #AD153E;   /* SOLO arte del logo · nunca texto (2,95:1 sobre negro) */
  --sp-granate-pegatina: #AD163F; /* SOLO arte de pegatinas (PEG-SMASH, CLASSIC, CHICKEN) */
  --sp-granate-rotulo: #911234; /* SOLO el rótulo script «Pecados» (EXTERIOR.png) */

  /* --- Mostazas --- */
  --sp-mostaza: #E3BB29;        /* Mostaza Pecado · ACENTO (contornos, filetes, spinner) */
  --sp-mostaza-clara: #FAC12F;  /* Variante / hover de la mostaza (ex --itgreen) */

  /* --- Grises y rojos de interfaz existentes en el sitio actual --- */
  --sp-gris-humo: #626262;      /* Texto secundario · SOLO ≥24px, o ≥19px en bold (3,44:1) */
  --sp-gris-control: #ACACB7;   /* Borde de checkbox / radio */
  --sp-gris-control-2: #A2A2A2; /* Borde de control (variante) */
  --sp-rojo-error: #FF0000;     /* Error de formulario · documentado en el sitio (5,25:1 AA) */

  /* --- Rojos de ornamento del banner de delivery (NO son tokens de UI) ---
     Solo para reproducir el arte de img/home/banner_delivery.png. #FF4E4E sobre #890D37
     da 2,96:1 → prohibido como texto. */
  --sp-rojo-banner: #FF4E4E;
  --sp-rojo-banner-2: #CD3F3F;

  /* =====================================================================================
     2. ESTADOS — definidos aquí porque no existen en el material capturado (MARCA.md §8.5)

     Criterio: partimos de la paleta y solo añadimos lo imprescindible para que éxito y
     aviso sean distinguibles entre sí, del acento y del error.
       · AVISO = la propia mostaza de marca. Es el color de «ojo/cuidado» del sistema
         (la cinta de precaución de F3-T02 va en mostaza) y ya está en paleta: no inventa nada.
       · ÉXITO = verde aceituna #7CB342, desaturado y cálido para no chocar con el
         negro/granate/mostaza. Verde es la convención universal de «correcto» y el granate
         (el único color libre de la marca) es ilegible sobre negro.
     Contrastes calculados (fórmula WCAG 2.x, luminancia relativa):
       #7CB342 sobre #000000 .............. 8,38:1  → AAA  (texto de éxito sobre negro)
       #000000 sobre #7CB342 .............. 8,38:1  → AAA  (chip de éxito con texto negro)
       #FFFFFF sobre #7CB342 .............. 2,50:1  → NO apto: sobre el verde va tinta NEGRA
       #E3BB29 sobre #000000 .............. 11,41:1 → AAA  (aviso sobre negro)
       #000000 sobre #E3BB29 .............. 11,41:1 → AAA  (chip de aviso con texto negro)
       #FF0000 sobre #000000 .............. 5,25:1  → AA   (error sobre negro)
       #626262 sobre #242322 .............. 2,57:1  → NO apto para texto normal; se usa solo
         en controles DESHABILITADOS, exentos por WCAG 1.4.3 (componentes inactivos).
     ===================================================================================== */
  --sp-verde-exito: #7CB342;              /* único HEX añadido (autorizado por §8.5) */
  --estado-exito: var(--sp-verde-exito);
  --estado-exito-tinta: var(--sp-negro);  /* 8,38:1 sobre el verde */
  --estado-aviso: var(--sp-mostaza);      /* 11,41:1 sobre negro */
  --estado-aviso-tinta: var(--sp-negro);
  --estado-error: var(--sp-rojo-error);   /* 5,25:1 sobre negro */
  --estado-deshabilitado-fondo: var(--sp-negro-humo);
  --estado-deshabilitado-tinta: var(--sp-gris-humo); /* exento de contraste (WCAG 1.4.3) */
  --estado-deshabilitado-opacidad: .6;

  /* =====================================================================================
     3. ALIAS DE CONTINUIDAD — los nombres del sitio actual (corpus/web/css/utilities.css:2-15)
     Se conservan para poder portar páginas antiguas sin renombrar nada.
     ===================================================================================== */
  --body: var(--sp-negro);
  --primary: var(--sp-granate);
  --primaryhover: var(--sp-granate-hover);
  --secondary: var(--sp-mostaza);
  --white: var(--sp-blanco);
  --light: var(--sp-gris-humo);
  --dark: var(--sp-negro-humo);
  --rounded: .25rem;                                 /* valor literal del sitio actual */
  --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
  --shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);

  /* =====================================================================================
     4. TOKENS SEMÁNTICOS DE SUPERFICIE Y TINTA (aplican la regla de §2.2)
     ===================================================================================== */
  --sup-base: var(--sp-negro);            /* lienzo negro mate: la «calle» */
  --sup-elevada: var(--sp-negro-humo);
  --sup-clara: var(--sp-blanco-hueso);
  --sup-acento: var(--sp-granate);        /* bloque/fondo, NUNCA texto sobre negro */
  --sup-cristal: var(--cristal-fondo);    /* definido en §5 */

  --tinta-principal: var(--sp-blanco);    /* 21:1 sobre negro · AAA */
  --tinta-acento: var(--sp-mostaza);      /* 11,41:1 sobre negro · AAA */
  --tinta-secundaria: var(--sp-gris-humo);/* 3,44:1 → solo texto grande: ≥24px, o ≥19px bold */
  --tinta-sobre-granate: var(--sp-blanco);/* 9,65:1 sobre #890D37 · AAA (regla de CTA) */
  --tinta-sobre-mostaza: var(--sp-negro); /* 11,41:1 sobre #E3BB29 · AAA (botón mostaza) */
  --tinta-sobre-clara: var(--sp-negro);
  --tinta-arte: var(--sp-granate-arte);   /* ornamentos que reproducen el logo. No es texto */
  --tinta-deshabilitada: var(--estado-deshabilitado-tinta);

  --borde-marca: 3px solid var(--sp-granate);        /* borde grueso de tarjeta de local */
  --borde-marca-fino: 2px solid var(--sp-granate);
  --borde-acento: 2px solid var(--sp-mostaza);       /* patrón del bloque del reto */
  --borde-tenue: 1px solid rgba(255, 255, 255, .14);
  --borde-control: 1px solid var(--sp-gris-control);

  /* =====================================================================================
     5. CRISTAL (glassmorphism) — máster §3 + brief Fase 3 (MARCA.md §6.1: no había referencia)

     OBJETIVO DECLARADO: «legible a poca luz (interior del local, móvil en la mano).
     Prioriza contraste, botones grandes y carga rápida SOBRE el efecto.»

     RAZONAMIENTO DEL ALFA (peor caso posible = cristal sobre una foto BLANCA pura):
       compuesto = negro * alfa + foto * (1 - alfa); con foto blanca (255,255,255):
         alfa 0,55 → rgb(115) → blanco encima 4,74:1   (AA justo, insuficiente)
         alfa 0,62 → rgb(97)  → blanco encima 6,19:1   (AA, y AAA en texto grande)
         alfa 0,72 → rgb(71)  → blanco encima 9,29:1   (AAA)  ← base elegida
         alfa 0,82 → rgb(46)  → blanco encima ~12:1    (lectura crítica / poca luz)
       sobre foto de tono medio (128,128,128), que es el caso real de nuestras fotos:
         alfa 0,72 → rgb(36)  → blanco encima 15,52:1 y mostaza 8,43:1 (ambos AAA)
       sobre negro puro (panel de cristal sobre el fondo del sitio):
         rgba(36,35,34,.78) → blanco ~17:1 y mostaza ~9,5:1 (AAA)
     Conclusión: el cristal base es NEGRO al 72 % (no un blanco translúcido: rompería las
     reglas de tinta de §2.2 y la legibilidad a poca luz). Los colores de marca entran
     como ACENTOS INTERNOS (borde mostaza, filete granate, cifras en mostaza), nunca como
     color de párrafo sobre el cristal.
     La mostaza sobre el cristal más desfavorable da 5,05:1 (AA para texto normal, AAA en
     grande) → si se usa mostaza en texto pequeño sobre foto clara, subir a
     --cristal-fondo-fuerte (0,82).
     ===================================================================================== */
  --cristal-fondo: rgba(0, 0, 0, .72);            /* base: 9,29:1 blanco en el peor caso (AAA) */
  --cristal-fondo-fuerte: rgba(0, 0, 0, .82);     /* lectura crítica / poca luz (~12:1) */
  --cristal-fondo-suave: rgba(0, 0, 0, .55);      /* decorativo SOLO texto grande (4,74:1) */
  --cristal-fondo-humo: rgba(36, 35, 34, .78);    /* panel humo sobre negro (~17:1 blanco) */
  --cristal-fondo-granate: rgba(137, 13, 55, .78);/* acentos internos; tinta blanca 9,65:1 */
  --cristal-fondo-fallback: rgba(0, 0, 0, .9);    /* si el navegador no soporta backdrop-filter */

  --cristal-blur: 16px;
  --cristal-blur-fuerte: 24px;
  --cristal-blur-suave: 8px;
  --cristal-saturacion: 140%;
  --cristal-brillo: 115%;                         /* brightness() opcional, sutil */

  --cristal-borde: 1px solid rgba(255, 255, 255, .18);      /* borde fino semitransparente */
  --cristal-borde-acento: 1px solid rgba(227, 187, 41, .38);/* filete mostaza de marca */
  --cristal-borde-resalte: 1px solid rgba(255, 255, 255, .3);
  --cristal-reflejo: linear-gradient(140deg,
      rgba(255, 255, 255, .14) 0%,
      rgba(255, 255, 255, .05) 26%,
      rgba(255, 255, 255, 0) 46%);                /* «reflejo» superior del panel */
  --cristal-sombra: 0 1.25rem 3rem rgba(0, 0, 0, .55), 0 .25rem .75rem rgba(0, 0, 0, .35);
  --cristal-sombra-interior: inset 0 1px 0 rgba(255, 255, 255, .12);
  --cristal-radio: 1rem;
  --cristal-padding: 1.25rem;
  --cristal-tinta: var(--sp-blanco);              /* 9,29:1 mínimo garantizado sobre el cristal */
  --cristal-tinta-acento: var(--sp-mostaza);      /* 5,05:1 mínimo → texto grande o -fuerte */

  /* =====================================================================================
     6. TIPOGRAFÍA — MARCA.md §3 (self-host, sin CDN; web/fuentes/)
     Rutas relativas desde web/estilos/tokens.css → ../fuentes/
     Jerarquía real del sitio: display = Alfa Slab One · subtítulo/rótulo/CTA = Kanit Bold
     SIEMPRE en mayúsculas · texto = Josefin Sans (Light/Regular/Bold).
     El rótulo script «Pecados» NO es una fuente: es el arte EXTERIOR.png (§3.1) → nunca se
     sustituye por una fuente de script.
     ===================================================================================== */
  --fuente-display: 'Alfa Slab One', 'Bookman Old Style', Georgia, serif;
  --fuente-rotulo: 'Kanit', 'Arial Narrow', 'Oswald', sans-serif;      /* usar EN MAYÚSCULAS */
  --fuente-subtitulo: var(--fuente-rotulo);
  --fuente-cta: var(--fuente-rotulo);
  --fuente-texto: 'Josefin Sans', 'Trebuchet MS', system-ui, sans-serif;
  --fuente-sistema: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --peso-texto-light: 300;
  --peso-texto: 400;
  --peso-texto-bold: 700;
  --peso-display: 400;    /* Alfa Slab One solo tiene Regular */
  --peso-rotulo: 700;     /* Kanit solo tiene Bold: no existe Kanit Regular en el corpus */

  /* --- Escala tipográfica mobile-first (clamp: mínimo 360px → máximo 1240px) --- */
  --fs-small:   clamp(0.8125rem, 0.7869rem + 0.1136vw, 0.875rem);  /* 13px → 14px */
  --fs-p:       clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);       /* 16px → 18px */
  --fs-h6:      clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);        /* 16px → 20px */
  --fs-h5:      clamp(1.25rem, 1.122rem + 0.5682vw, 1.5625rem);    /* 20px → 25px */
  --fs-h4:      clamp(1.5rem, 1.295rem + 0.9091vw, 2rem);          /* 24px → 32px */
  --fs-h3:      clamp(1.75rem, 1.443rem + 1.364vw, 2.5rem);        /* 28px → 40px */
  --fs-h2:      clamp(2.125rem, 1.665rem + 2.045vw, 3.25rem);      /* 34px → 52px */
  --fs-h1:      clamp(2.5rem, 1.682rem + 3.636vw, 4.5rem);         /* 40px → 72px */
  --fs-display: clamp(3rem, 1.364rem + 7.273vw, 7rem);             /* 48px → 112px */
  --fs-rotulo:  clamp(0.8125rem, 0.6847rem + 0.5682vw, 1.125rem);  /* 13px → 18px (Kanit) */
  --fs-cta:     clamp(0.9375rem, 0.8864rem + 0.2273vw, 1.0625rem); /* 15px → 17px (Kanit) */
  --fs-precio:  clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);        /* 16px → 20px (Kanit) */

  /* --- Alturas de línea --- */
  --lh-display: .95;
  --lh-titular: 1.05;
  --lh-subtitulo: 1.2;
  --lh-rotulo: 1.15;
  --lh-texto: 1.65;
  --lh-compacto: 1.35;

  /* --- Tracking (Kanit va con tracking amplio, tipo rótulo de local) --- */
  --ls-display: .01em;
  --ls-titular: .02em;
  --ls-rotulo: .18em;     /* rótulos y antetítulos: aire de letra de cartel */
  --ls-cta: .1em;         /* botones */
  --ls-texto: 0;
  --ls-pequeno: .04em;

  --ancho-max-texto: 68ch; /* medida de lectura cómoda para Josefin Sans */

  /* =====================================================================================
     7. DISPOSITIVO TIPOGRÁFICO DE MARCA — titulares con RELLENO TRANSPARENTE y CONTORNO
     MOSTAZA (§6.1/§7: `-webkit-text-stroke:1.2px var(--secondary); color:transparent`).
     Es el rasgo más identificable del sistema actual: se conserva tal cual (1,2px).
     ACCESIBILIDAD: el contorno puro se reserva a titulares ≥ --fs-h2 (≥34px) sobre negro,
     donde el trazo conserva la lectura. Para texto funcional, párrafos o tamaños menores
     usar la versión plana (tinta blanca o mostaza). El contorno nunca sustituye al texto
     alternativo ni al aria-label de un control.
     ===================================================================================== */
  --contorno-color: var(--sp-mostaza);
  --contorno-fino: 1.2px;   /* valor literal del sitio actual */
  --contorno-medio: 1.8px;
  --contorno-grueso: 2.5px;
  --contorno-grosor: var(--contorno-fino);

  /* Textura de trama de burgers: opacidad real medida en el sitio (`body::before` 10 %).
     La RUTA del PNG la fija F3-T02 cuando el activo se copie a web/img/ (no se apunta a
     brand-data/ desde el CSS: brand-data/ es corpus de solo lectura y no se publica). */
  --trama-opacidad: .1;

  /* =====================================================================================
     8. ESPACIADO (escala de 4px) Y MEDIDAS DE LAYOUT
     ===================================================================================== */
  --esp-0: 0;
  --esp-1: .25rem;   /*  4px */
  --esp-2: .5rem;    /*  8px */
  --esp-3: .75rem;   /* 12px */
  --esp-4: 1rem;     /* 16px */
  --esp-5: 1.5rem;   /* 24px */
  --esp-6: 2rem;     /* 32px */
  --esp-7: 3rem;     /* 48px */
  --esp-8: 4rem;     /* 64px */
  --esp-9: 6rem;     /* 96px */
  --esp-10: 8rem;    /* 128px */
  --esp-11: 12rem;   /* 192px */
  --esp-seccion: clamp(3rem, 2rem + 5vw, 8rem);      /* aire vertical de sección */
  --esp-pagina-x: clamp(1rem, .5rem + 3vw, 3rem);    /* márgenes laterales */
  --ancho-contenedor: 1280px;
  --ancho-panel-pedido: 640px;
  --alto-tactil-min: 48px;   /* botones grandes del pedido en mesa (brief Fase 3) */

  /* =====================================================================================
     9. RADIOS (se hereda el .25rem del sitio actual + radios de tarjeta)
     ===================================================================================== */
  --radio-xs: .125rem;
  --radio-sm: var(--rounded);   /* .25rem — herencia literal del sitio actual */
  --radio-md: .5rem;
  --radio-lg: .75rem;
  --radio-xl: 1rem;
  --radio-tarjeta: .75rem;
  --radio-panel: 1.25rem;
  --radio-pill: 999px;
  --radio-circulo: 50%;

  /* =====================================================================================
     10. SOMBRAS (las tres del sitio actual + sombras propias del sistema nuevo)
     ===================================================================================== */
  --sombra-nula: none;
  --sombra-sutil: var(--shadow-sm);   /* 0 .125rem .25rem rgba(0,0,0,.075) */
  --sombra-media: var(--shadow);      /* 0 .5rem 1rem rgba(0,0,0,.15) */
  --sombra-alta: var(--shadow-lg);    /* 0 1rem 3rem rgba(0,0,0,.175) */
  --sombra-tarjeta: 0 .5rem 1.25rem rgba(0, 0, 0, .35);
  --sombra-granate: 0 .75rem 2rem rgba(137, 13, 55, .45);   /* halo del CTA primario */
  --sombra-mostaza: 0 .5rem 1.5rem rgba(227, 187, 41, .22);
  --sombra-texto: 0 .125rem .5rem rgba(0, 0, 0, .65);       /* texto sobre foto */
  --sombra-foco: 0 0 0 3px rgba(227, 187, 41, .85);         /* anillo de foco (mostaza) */
  --sombra-foco-claro: 0 0 0 3px rgba(255, 255, 255, .95); /* anillo sobre fondo granate */

  /* =====================================================================================
     11. Z-INDEX
     ===================================================================================== */
  --z-fondo: 0;
  --z-trama: 1;
  --z-contenido: 10;
  --z-decoracion: 20;
  --z-cabecera: 100;
  --z-menu: 200;
  --z-velo: 300;
  --z-panel: 400;
  --z-modal: 500;
  --z-aviso: 600;
  --z-cursor: 9999;

  /* =====================================================================================
     12. MOVIMIENTO
     ===================================================================================== */
  --dur-1: 120ms;   /* microfeedback (presión de botón) */
  --dur-2: 200ms;   /* hover / foco */
  --dur-3: 320ms;   /* apertura de panel */
  --dur-4: 520ms;   /* transición de sección */
  --dur-5: 900ms;   /* entrada de acto del scrollytelling */
  --ease-salida: cubic-bezier(.2, .7, .3, 1);
  --ease-entrada: cubic-bezier(.4, 0, .2, 1);
  --ease-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --transicion-base: var(--dur-2) var(--ease-salida);
  --transicion-rapida: var(--dur-1) var(--ease-salida);

  /* =====================================================================================
     13. FOCO VISIBLE (nunca outline:none sin sustituto)
     ===================================================================================== */
  --foco-anillo: var(--sombra-foco);
  --foco-anillo-claro: var(--sombra-foco-claro);
  --foco-offset: 2px;
}

/* =========================================================================================
   @FONT-FACE — 5 ficheros .ttf válidos (md5 verificados contra
   brand-data/corpus/web/fonts/). font-display:swap para que el texto se lea mientras carga.
   ========================================================================================= */
@font-face {
  font-family: 'Alfa Slab One';
  src: url('../fuentes/AlfaSlabOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('../fuentes/Kanit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fuentes/JosefinSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fuentes/JosefinSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fuentes/JosefinSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================================
   CLASES PRIMITIVAS DE TOKEN — se aplican directamente sobre los tokens.
   Los componentes completos (botones con presión, sellos, pegatinas…) son F3-T02.
   ========================================================================================= */

/* --- Titular display --- */
.sp-display {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* --- Rótulo / antetítulo / CTA: Kanit SIEMPRE en mayúsculas --- */
.sp-rotulo {
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-rotulo);
  line-height: var(--lh-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
}

/* --- Dispositivo de marca: relleno transparente + contorno mostaza --- */
.sp-contorno {
  color: transparent;
  -webkit-text-stroke: var(--contorno-grosor) var(--contorno-color);
  /* deja el trazo por fuera del glifo para no cerrar los huecos de la letra */
  paint-order: stroke fill;
}
.sp-contorno--medio  { --contorno-grosor: var(--contorno-medio); }
.sp-contorno--grueso { --contorno-grosor: var(--contorno-grueso); }

/* --- Versión plana del titular (accesible, para tamaños pequeños) --- */
.sp-titular-plano {
  color: var(--tinta-acento);
  -webkit-text-stroke: 0;
}

/* --- Panel de cristal --- */
.sp-cristal {
  position: relative;
  isolation: isolate;
  background-color: var(--cristal-fondo);
  -webkit-backdrop-filter: blur(var(--cristal-blur)) saturate(var(--cristal-saturacion));
  backdrop-filter: blur(var(--cristal-blur)) saturate(var(--cristal-saturacion));
  border: var(--cristal-borde);
  border-radius: var(--cristal-radio);
  box-shadow: var(--cristal-sombra), var(--cristal-sombra-interior);
  color: var(--cristal-tinta);
}
.sp-cristal::before {                    /* reflejo superior */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cristal-reflejo);
  pointer-events: none;
  z-index: -1;
}
.sp-cristal--fuerte  { background-color: var(--cristal-fondo-fuerte); }
.sp-cristal--humo    { background-color: var(--cristal-fondo-humo); }
.sp-cristal--acento  { border: var(--cristal-borde-acento); }  /* filete mostaza de marca */

/* Sin soporte de backdrop-filter el panel se vuelve casi opaco (legibilidad > efecto) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sp-cristal { background-color: var(--cristal-fondo-fallback); }
}

/* En móvil se baja el blur: menos coste de composición, mismo contraste (el contraste
   lo garantiza el alfa del fondo, no el desenfoque) — brief Fase 3: «carga rápida». */
@media (max-width: 480px) {
  :root { --cristal-blur: 10px; --cristal-blur-fuerte: 14px; }
}

/* =========================================================================================
   PREFERS-REDUCED-MOTION — duración 0 y sin animación (no se desactiva el contraste ni
   los estados: solo el movimiento).
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
    --transicion-base: 0ms linear;
    --transicion-rapida: 0ms linear;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}