/* ============================================================
   Lo que comparten la portada y las páginas de formulario.

   Existe porque antes cada hoja llevaba su propia copia de los tokens y ya
   habían divergido. Una sola fuente: si algo de aquí cambia, cambia en los
   tres sitios a la vez.

   Se carga ANTES que styles.css o pedido.css, que solo añaden lo suyo.
   ============================================================ */

:root {
  --cream: #F8F2E7;
  --cream-deep: #F3EADB;
  --ink: #27201B;
  --ink-soft: #5B4F45;
  /* Oscurecido de #8A7B6E: ahí el texto de las pistas quedaba en 3.67:1. */
  --ink-faint: #7A6B5E;
  --pink: #E4697E;
  --pink-dark: #C6485E;
  --pink-bg: #FBE9EC;
  --pink-light: #F3B4C0;
  --gold: #D9A24B;
  --card: #FFF8F0;
  --contact-bg: #2E211B;
  --footer-bg: #241A15;
  --whatsapp: #25D366;
  --line: rgba(39, 32, 27, .12);
  --line-soft: rgba(39, 32, 27, .07);
  --danger: #C0392B;
  --ok: #1E8E5A;
  --sombra-suave: 0 2px 8px rgba(39, 32, 27, .04), 0 12px 32px rgba(39, 32, 27, .05);
  --sombra-alta: 0 4px 12px rgba(39, 32, 27, .06), 0 20px 48px rgba(39, 32, 27, .09);
  --font-display: 'Abril Fatface', serif;
  --font-body: 'Quicksand', sans-serif;
  --font-script: 'Caveat', cursive;
}

/* ============ Liquid Glass ============ */
/*
  Sobre una foto el backdrop-filter sí tiene algo que refractar y el efecto se
  ve de verdad. Sobre un color plano no hay nada que desenfocar: lo que da ahí
  la lectura de cristal es el resto de la receta — relleno translúcido, filo de
  luz arriba, sombra interior abajo y el brillo diagonal de ::before.

  Sin `position` a propósito: ponerlo aquí pisaría el de cualquier elemento ya
  posicionado. El ::before necesita un ancestro posicionado, así que cada
  elemento que use .vidrio y sea estático se lo pone él.
*/
.vidrio {
  isolation: isolate;
  background: rgba(255, 255, 255, .48);
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(39, 32, 27, .07),
    0 8px 24px rgba(39, 32, 27, .10);
}
.vidrio::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(152deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, 0) 70%);
}
.vidrio--oscuro {
  background: rgba(39, 32, 27, .58);
  border-color: rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 10px 28px rgba(39, 32, 27, .34);
}
.vidrio--oscuro::before {
  background: linear-gradient(152deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .03) 48%, rgba(255, 255, 255, 0) 72%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background: rgba(255, 255, 255, .92); }
  .vidrio--oscuro { background: var(--ink); }
}

/* ============ Fondo ============ */
:root { --fondo-fuerza: .85; }

body::before {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  pointer-events: none;
  opacity: var(--fondo-fuerza);
  background:
    radial-gradient(38vmax 34vmax at 14% 10%, rgba(228, 105, 126, .13), transparent 62%),
    radial-gradient(44vmax 40vmax at 86% 24%, rgba(243, 180, 192, .16), transparent 60%),
    radial-gradient(36vmax 34vmax at 74% 80%, rgba(226, 178, 118, .13), transparent 62%),
    radial-gradient(40vmax 38vmax at 20% 88%, rgba(198, 72, 94, .09), transparent 65%);
  /* Deriva muy lenta: en 90 segundos no se ve moverse, pero el sitio nunca
     está dos veces exactamente igual. */
  animation: derivaFondo 90s ease-in-out infinite alternate;
}
@keyframes derivaFondo {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}