/* ZERO · Fundamentos
   css/base.css

   Las variables de color de la paleta, el reset y la aurora: el fondo
   vivo que se pinta con tu paleta y se ve detras de toda la app.

   Salio de index.html, que tenia 5302 lineas. Es 1 de 8 pedazos y se
   carga en un orden fijo desde index.html: NO lo reacomodes ahi. */

:root{
  --bg:#0b0b0e; --card:rgba(23,23,31,.74); --card2:rgba(35,35,46,.68); --sheet:#16161d;
  --ink:#f2ede6; --ink-dim:#a49fae; --line:rgba(255,255,255,.09);
  /* Paleta ZERO oficial (scripts/lib/brand.mjs). Es la que ve quien abre la app
     por primera vez; desde Perfil › Cómo se ve se puede cambiar.
     Va también en :root, no solo en THEMES, para que no haya un parpadeo de otra
     paleta entre que pinta el CSS y corre el JS. */
  --coral:#522C33; --rose:#2E141B; --teal:#B8C7D4; --sand:#C4A94E; --violet:#3F5B6E;
  /* tinte dorado de "los 3 más comprados" (ver .best-card) */
  --best-glass:rgba(196,169,78,.14); --best-edge:rgba(196,169,78,.30);
  --t1:#C4A94E; --t2:#522C33; --t3:#B8C7D4; --t4:#2E141B; --t5:#E6E2D4; --t6:#3F5B6E;
  --good:#7fd8c9; --ok:#e8c9a0; --warn:#ff9d6b; --bad:#ff4d6d;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* NINGÚN ENLACE AZUL, NUNCA.
   -------------------------------------------------------------------
   El azul de fábrica del navegador no es de ZERO y encima se lee mal sobre el
   fondo oscuro: dentro de la ficha de un ingrediente, las fuentes científicas
   salían en un azul eléctrico que ni combinaba ni se distinguía bien.

   Se pinta en el color del texto normal, con el subrayado en el dorado de la
   marca. Así se ve que es un enlace —que es lo que tiene que verse— sin gritar
   dentro de un párrafo. Se pone aquí y no en cada pantalla porque un enlace
   nuevo en cualquier parte de la app tiene que nacer bien vestido. */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sand);
  text-underline-offset:3px;text-decoration-thickness:1px}
a:active{color:var(--sand)}
html,body{height:100%}
body{background:#050507;font-family:var(--ff-texto);color:var(--ink);
  display:flex;justify-content:center;align-items:stretch;
  /* Mata el zoom de DOBLE TOQUE. Sin esto, tocar dos veces seguidas un botón
     —que pasa solo, con prisa— agrandaba la app como si fuera una página web. */
  touch-action:manipulation}

/* EL ZOOM QUE HACE iOS AL TOCAR UN CAMPO DE TEXTO.
   -------------------------------------------------------------------
   No es un capricho del navegador ni se apaga con una propiedad: Safari
   agranda la página entera siempre que el campo que recibe el foco tenga la
   letra por debajo de 16px, para que se pueda leer. La única forma de que no
   lo haga es que la letra mida 16px o más.
   Por eso TODOS los campos de la app miden 16px, aunque el diseño pidiera 13.
   Es una restricción del teléfono, no una decisión de estilo — si algún día
   alguien lo baja "porque se ve mejor", el zoom raro vuelve. */
input,textarea,select{font-size:16px}
.serif{font-family:var(--ff-display)}

#phone{position:relative;width:100%;max-width:430px;min-height:100dvh;background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden}
@media(min-width:500px){
  body{padding:24px 0}
  #phone{min-height:calc(100vh - 48px);max-height:900px;border-radius:42px;
    border:1px solid #26262e;box-shadow:0 30px 80px rgba(0,0,0,.7)}
}

/* grain overlay */
#phone::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:60;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ===== aurora: el fondo vivo de toda la app (se pinta con tu paleta) ===== */
#aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#aurora .ab{position:absolute;border-radius:50%;filter:blur(48px);opacity:.52;will-change:transform;
  animation:lava 26s ease-in-out infinite alternate}
.ab1{width:380px;height:420px;left:-120px;top:-140px;
  background:radial-gradient(circle at 55% 45%,var(--t5),var(--t1) 45%,transparent 72%)}
.ab2{width:340px;height:360px;right:-140px;top:40px;animation-duration:34s;animation-direction:alternate-reverse;
  background:radial-gradient(circle at 45% 55%,var(--t1),var(--t2) 50%,transparent 75%)}
.ab3{width:330px;height:330px;left:-110px;top:36%;animation-duration:40s;
  background:radial-gradient(circle at 50% 50%,var(--t3),var(--t4) 55%,transparent 76%)}
.ab4{width:300px;height:320px;right:-120px;top:56%;animation-duration:30s;animation-direction:alternate-reverse;
  background:radial-gradient(circle at 50% 40%,var(--t6),color-mix(in srgb,var(--t2) 55%,#000) 58%,transparent 76%)}
.ab5{width:340px;height:340px;left:-60px;bottom:-160px;animation-duration:36s;
  background:radial-gradient(circle at 50% 50%,var(--t3),var(--t6) 55%,transparent 78%)}
@keyframes lava{0%{transform:translate(0,0) scale(1,1) rotate(0)}
 33%{transform:translate(-22px,34px) scale(1.08,1.18) rotate(4deg)}
 66%{transform:translate(16px,62px) scale(.94,1.22) rotate(-3deg)}
 100%{transform:translate(-8px,28px) scale(1.06,1.1) rotate(2deg)}}