/* =====================================================================
   Mama Mia Joyería · «A través del MU»
   Tokens de diseño. ÚNICO archivo con valores crudos: color, tipografía,
   espacio, forma, sombra, movimiento, grano y geometría de la firma.
   rediseno.html (estilos y config de Tailwind) solo lee var(--…).
   Fuente: estudio-web/docs/direccion/mamamia.md

   Puntos de quiebre (iguales a los de Tailwind por defecto):
   tableta md = 768px · escritorio lg = 1024px · escritorio amplio xl = 1280px
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     Color
     --------------------------------------------------------------- */
  --hoja: #FFFFFF;               --hoja-rgb: 255 255 255;
  --rubor: #FBF0E8;              --rubor-rgb: 251 240 232;
  --medianoche: #0D2557;         --medianoche-rgb: 13 37 87;
  --medianoche-suave: #566689;   --medianoche-suave-rgb: 86 102 137;
  --esmeralda: #1A5D3A;          --esmeralda-rgb: 26 93 58;
  --coral: #EC5A2C;              --coral-rgb: 236 90 44;
  --coral-tinta: #B83E17;        --coral-tinta-rgb: 184 62 23;
  --linea: rgb(13 37 87 / .12);
  --foco: #0D2557;

  /* Translúcidos derivados de la paleta */
  --hoja-encabezado: rgb(255 255 255 / .92);   /* header con scroll */
  --hoja-corazon: rgb(255 255 255 / .9);       /* botón de guardar sobre la foto */
  --velo: rgb(13 37 87 / .48);                 /* detrás de bolsa, hojas y menú */
  --velo-zoom: rgb(13 37 87 / .92);            /* foto ampliada */

  /* Degradados del logo (hexes medidos del PNG) */
  --aurora: linear-gradient(115deg, #02224E 0%, #035E1B 22%, #E2C0A3 45%, #F6B77A 62%, #E6837A 80%, #F64B1D 100%);
  --aurora-calida: linear-gradient(115deg, #E2C0A3 0%, #F6B77A 50%, #E6837A 100%);

  /* Grano del logo: feTurbulence en escala de grises */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grano-tam: 160px;
  --grano-opacidad: .22;

  /* Máscaras */
  --mascara-llena: linear-gradient(#000 0 0);
  /* Perforación: rectángulo de 4000 px con tres píldoras restadas (evenodd).
     Móvil: franja 48, píldoras 72 × 28, separación 16. */
  --perforacion-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4000' height='48' viewBox='0 0 4000 48'%3E%3Cpath fill-rule='evenodd' d='M0 0h4000v48H0z M1890 10h44a14 14 0 0 1 0 28h-44a14 14 0 0 1 0-28z M1978 10h44a14 14 0 0 1 0 28h-44a14 14 0 0 1 0-28z M2066 10h44a14 14 0 0 1 0 28h-44a14 14 0 0 1 0-28z'/%3E%3C/svg%3E");

  /* ---------------------------------------------------------------
     Tipografía
     --------------------------------------------------------------- */
  --fuente-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --fuente-texto: 'Onest', ui-sans-serif, system-ui, sans-serif;

  /* Escala única */
  --t-12: 12px;  --t-14: 14px;  --t-16: 16px;  --t-20: 20px;
  --t-26: 26px;  --t-34: 34px;  --t-48: 48px;  --t-72: 72px;

  /* Roles (shorthand de font: peso tamaño/interlínea familia) · móvil */
  --tipo-h1: 800 var(--t-34)/1.05 var(--fuente-display);           --tr-h1: -0.02em;
  --tipo-h2: 700 var(--t-26)/1.1 var(--fuente-display);            --tr-h2: -0.015em;
  --tipo-h3: 700 var(--t-20)/1.15 var(--fuente-display);           --tr-h3: -0.01em;
  --tipo-titulo-20: 700 var(--t-20)/1.15 var(--fuente-display);    /* categoría, pie */
  --tipo-titulo-26: 700 var(--t-26)/1.1 var(--fuente-display);     /* nombre del aura */
  --tipo-marca: 600 var(--t-16)/1 var(--fuente-display);           /* «Mama Mia» en el header */
  --tipo-precio: 800 var(--t-20)/1 var(--fuente-display);
  --tipo-precio-ficha: 800 var(--t-34)/1 var(--fuente-display);    --tr-precio-ficha: -0.01em;
  --tipo-precio-chip: 700 var(--t-14)/1 var(--fuente-display);
  --tipo-cifra: 800 var(--t-48)/1 var(--fuente-display);           --tr-cifra: -0.02em;
  --tipo-cuerpo: 400 var(--t-16)/1.5 var(--fuente-texto);
  --tipo-nombre: 600 var(--t-14)/1.3 var(--fuente-texto);
  --tipo-secundario: 400 var(--t-14)/1.4 var(--fuente-texto);
  --tipo-etiqueta: 500 var(--t-14)/1.4 var(--fuente-texto);
  --tipo-promesa: 700 var(--t-16)/1.25 var(--fuente-display);
  --tipo-enlace: 500 var(--t-16)/1.5 var(--fuente-texto);
  --tipo-boton: 600 var(--t-16)/1 var(--fuente-texto);             --tr-boton: 0.01em;
  --tipo-micro: 500 var(--t-12)/1.3 var(--fuente-texto);           --tr-micro: 0.04em;
  --tipo-conteo: 600 var(--t-12)/1 var(--fuente-texto);
  --tipo-nota: 400 var(--t-12)/1.3 var(--fuente-texto);
  --medida: 34em;                                                  /* largo máximo de párrafo */

  /* ---------------------------------------------------------------
     Espacio
     --------------------------------------------------------------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;  --e-6: 24px;
  --e-8: 32px;  --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-32: 128px;

  --margen: var(--e-4);              /* lateral: 16 · 32 · 64 */
  --medianil: var(--e-3);            /* cuadrícula: 12 · 24 */
  --ritmo: var(--e-16);              /* entre secciones: 64 · 128 */
  --medio-ritmo: calc(var(--ritmo) / 2);
  --tam-contenido: 1280px;

  /* ---------------------------------------------------------------
     Tamaños de componente
     --------------------------------------------------------------- */
  --tam-tactil: 44px;                /* área táctil mínima: «+», corazón, chips */
  --tam-boton: 56px;                 /* botón principal, opciones del Aura */
  --tam-campo: 52px;                 /* campos de texto */
  --tam-encabezado: 56px;
  --tam-glifo-encabezado: 28px;
  --tam-punto: 18px;                 /* contador de la bolsa */
  --tam-icono-promesa: 40px;
  --tam-caja-icono: 64px;             /* caja fija para que los tres íconos alineen su texto */
  --tam-mini: 28px;                  /* miniatura del chip «Combina con» */
  --tam-miniatura: 56px;             /* galería y bolsa */
  --tam-vista: 96px;                 /* foto de la vista rápida */
  --tam-anillo-metal: 14px;
  --tam-meta-envio: 12px;
  --tam-tarjeta-categoria: 156px;
  --tam-tarjeta-fila: 172px;         /* tarjeta en fila con scroll */
  --tam-carrito: 440px;
  --tam-menu: min(85vw, 360px);
  --tam-hoja: 560px;                 /* ancho máximo de hojas inferiores y del pago */
  --tam-galeria: 560px;
  --tam-logo-pie: 160px;
  --alto-bolsa: 92vh;
  --alto-bolsa: 92dvh;

  --icono-s: 16px;  --icono-m: 20px;  --icono-l: 24px;
  --icono-trazo: 1.75;

  /* Proporciones */
  --prop-producto: 4 / 5;
  --prop-categoria: 3 / 4;
  --prop-historia: 9 / 16;
  --prop-taller: 4 / 5;
  --prop-logo: 800 / 445;
  --logo-proporcion: .55625;         /* alto / ancho del PNG (445 / 800) */

  /* ---------------------------------------------------------------
     Forma
     --------------------------------------------------------------- */
  --arco: 9999px 9999px 0 0;
  --u: 0 0 9999px 9999px;
  --pildora: 9999px;
  --radio-hoja: 28px;
  --borde: 1.5px;
  --borde-activo: 2px;
  --sombra-flotante: 0 12px 32px -12px rgb(13 37 87 / .28);
  --desenfoque: 12px;
  --foco-separacion: 3px;
  --foco-halo: 5px;
  --opacidad-inactivo: .4;

  /* ---------------------------------------------------------------
     Movimiento
     --------------------------------------------------------------- */
  --curva-salida: cubic-bezier(.2, .7, .2, 1);
  --curva-abrir: cubic-bezier(.65, 0, .35, 1);
  --dur-presion: 160ms;
  --dur-aparece: 280ms;
  --dur-hoja: 420ms;
  --dur-recorrido-aura: 2s;
  --presion: .97;

  /* ---------------------------------------------------------------
     Firma: perforación, hero y ventana del Aura
     --------------------------------------------------------------- */
  --perf-alto: 48px;

  /* Hero: el logo se abre hasta el video completo. Animación por TIEMPO al cargar (una vez por
     visita), no ligada al scroll: la versión con scroll se veía rota en celular (2026-10-15).
     Línea de tiempo: logo con degradado → (0.3–0.8 s) se ve el video dentro del glifo →
     (0.9–2.0 s) el glifo se abre hasta llenar el marco → (1.7 s) aparecen botón y controles. */
  --prop-video: 9 / 16;
  --video-alto-por-ancho: 1.7778;    /* 16 / 9: en móvil el marco no pasa de la proporción del video */
  --hero-glifo-alto-max: .46;        /* el glifo ocupa como máximo 46 % del alto del marco */
  --ancla-x: .465;                   /* centro del trazo de en medio del glifo (opaco de arriba abajo) */
  --ancla-y: .62;
  --apertura-escala: 10;
  --retraso-logo: 300ms;
  --dur-logo: 500ms;
  --retraso-apertura: 900ms;
  --dur-apertura: 1100ms;
  --retraso-acciones: 1700ms;

  /* Íconos de la promesa: alto óptico por ícono dentro de una caja de --tam-icono-promesa
     (camión 176×70, listón 125×176, tarjeta 176×112). */
  --alto-icono-envio: 28px;
  --alto-icono-garantia: 40px;
  --alto-icono-tarjeta: 30px;

  /* Zonas del degradado a las que se mueve la luz del Aura (background-size 400 %) */
  --zona-inicio: 50%;
  --zona-boreal: 0%;
  --zona-esmeralda: 13%;
  --zona-durazno: 43%;
  --zona-solar: 66%;
  --zona-coral: 100%;
}

/* Tableta */
@media (min-width: 768px) {
  :root {
    --margen: var(--e-8);
  }
}

/* Escritorio */
@media (min-width: 1024px) {
  :root {
    --margen: var(--e-16);
    --medianil: var(--e-6);
    --ritmo: var(--e-32);

    --tipo-h1: 800 var(--t-48)/1.05 var(--fuente-display);   /* 72 desde xl: a 1024 el 5/12 no cabe «Joyería» a 72 */
    --tipo-h2: 700 var(--t-48)/1.1 var(--fuente-display);
    --tipo-h3: 700 var(--t-26)/1.15 var(--fuente-display);
    --tipo-precio-ficha: 800 var(--t-48)/1 var(--fuente-display);
    --tipo-cifra: 800 var(--t-72)/1 var(--fuente-display);
    --tipo-nombre: 600 var(--t-16)/1.3 var(--fuente-texto);

    --tam-encabezado: 72px;
    --tam-glifo-encabezado: 32px;
    --tam-logo-pie: 240px;

    --prop-taller: 16 / 9;

    /* Perforación de escritorio: franja 64, píldoras 112 × 40, separación 16 */
    --perf-alto: 64px;
    --perforacion-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4000' height='64' viewBox='0 0 4000 64'%3E%3Cpath fill-rule='evenodd' d='M0 0h4000v64H0z M1836 12h72a20 20 0 0 1 0 40h-72a20 20 0 0 1 0-40z M1964 12h72a20 20 0 0 1 0 40h-72a20 20 0 0 1 0-40z M2092 12h72a20 20 0 0 1 0 40h-72a20 20 0 0 1 0-40z'/%3E%3C/svg%3E");

  }
}

/* Escritorio amplio: H1 a 72 */
@media (min-width: 1280px) {
  :root {
    --tipo-h1: 800 var(--t-72)/1.05 var(--fuente-display);
  }
}