/ reales */
/* Escala fluida (360px → 1440px). Una página usa como máximo 5 tamaños. */
--fs-small: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem); /* 15 → 16px notas, metadatos, badges */
--fs-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); /* 17 → 19px texto corrido (mínimo 17) */
--fs-lead: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem); /* 20 → 26px frase de apoyo, precios en lista */
--fs-h3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem); /* 21 → 26px títulos de tarjeta (fuente de texto) */
--fs-h2: clamp(2rem, 1.35rem + 2.9vw, 4rem); /* 32 → 64px títulos de sección (Bodoni) */
--fs-h1: clamp(2.25rem, 1.2rem + 4.9vw, 5.75rem); /* 36 → 90px título de página (Bodoni) */
--fs-display: clamp(3rem, 0.9rem + 9.4vw, 10rem); /* 48 → 160px héroe / cifra gigante (Bodoni) */
--lh-display: 0.95;
--lh-heading: 1.05;
--lh-snug: 1.25;
--lh-text: 1.6;
--track-display: -0.02em;
--track-heading: -0.012em;
--track-text: 0.005em;
--track-wide: 0.06em; /* códigos de recuperación, montos USDT */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-display: 500; /* Bodoni Moda: 500. Nunca negrita. */
--measure: 64ch; /* ancho máximo de un párrafo */
--measure-narrow: 44ch;
/* ---------- Espacio (base 4px) ---------- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 8rem; /* 128 */
--space-11: 12rem; /* 192 */
--margin: clamp(1rem, 0.6rem + 2vw, 2.5rem); /* margen lateral: 16px en 360, 40px en desktop */
--gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem); /* espacio entre columnas */
--section: clamp(5.5rem, 3rem + 10vw, 13rem); /* espacio entre secciones: 88 → 208px */
--container: 77.5rem; /* 1240px — contenido normal */
--container-wide: 100rem; /* 1600px — imágenes de cine */
--container-narrow: 42.5rem; /* 680px — formularios, lectura */
--header-h: 4rem; /* 64px — alto de la barra superior */
--tap: 2.75rem; /* 44px — objetivo táctil mínimo */
--control-h: 3rem; /* 48px — botón y campo normales */
--control-h-lg: 3.5rem; /* 56px — botón grande */
/* ---------- Formas ---------- */
--radius: 4px; /* EL radio de la marca: tarjetas, campos, imágenes, modales */
--radius-pill: 999px; /* botones, badges, switch, segmentado, progreso */
--border-w: 1px; /* solo campos y tablas */
/* ---------- Profundidad ----------
Sin sombras en reposo. Las superficies se separan por un paso de tono.
Sombra SOLO en lo que flota: modal, toast, menú desplegable. */
--shadow-float: 0 24px 64px -12px rgb(0 0 0 / 0.72), 0 2px 8px rgb(0 0 0 / 0.45);
--ring-selected: inset 0 0 0 2px var(--light-cyan); /* tarjeta/opción elegida (anillo interior) */
--ring-ghost: inset 0 0 0 1.5px rgb(237 243 251 / 0.32);
/* Halo de estrella: SOLO para puntos de luz del motivo (logo, constelaciones en SVG). Nunca en UI. */
--halo-star: drop-shadow(0 0 6px rgb(98 227 255 / 0.65)); /* taste-skill-ignore: solo puntos de luz del motivo */
/* ---------- Movimiento (cine) ---------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* entradas, salidas, revelados */
--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* cosas que viajan a la vista */
--ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* revelados largos, escala de imagen */
--ease-film: cubic-bezier(0.16, 1, 0.3, 1); /* fundido desde negro, "acercamiento" */
--t-press: 140ms; /* clic / toque */
--t-hover: 180ms; /* hover de botones y enlaces */
--t-ui: 240ms; /* menús, tabs, switch */
--t-dialog: 360ms; /* modal, hoja, toast */
--t-reveal: 900ms; /* aparición de bloques al hacer scroll */
--t-scene: 1400ms; /* fundido desde negro del héroe, enfoque de imagen */
--t-drift: 24s; /* deriva lenta de una foto (Ken Burns) */
--stagger: 80ms; /* retraso entre hermanos: calc(var(--i) * var(--stagger)) */
--reveal-distance: 28px;
--reveal-blur: 14px;
--reveal-scale: 1.06;
/* ---------- Capas ---------- */
--z-below: -1;
--z-base: 0;
--z-raised: 1;
--z-sticky: 20;
--z-header: 50;
--z-dropdown: 60;
--z-overlay: 80;
--z-modal: 90;
--z-toast: 100;
--z-grain: 110; /* el grano va encima de todo, sin capturar clics */
--z-skip: 120;
/* ---------- Grano de película ---------- */
--grain-opacity: 0.07;
--grain-size: 220px;
--grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 48em) {
:root { --header-h: 4.5rem; } /* 72px */
}