/* =========================================================
   Paletas Tisha · base Aurora UI
   Colores de la marca: #C6281E (rojo), #F1E4D1 (crema), dorado del logo
   ========================================================= */
:root{
  --rojo:#C6281E;
  --rojo-osc:#8E1C14;
  --rojo-cla:#E85A4A;
  --crema:#F1E4D1;
  --crema-cla:#FDF7EE;
  --oro:#E0A33C;
  --oro-cla:#F5C978;
  --tinta:#1E1512;
  --tinta2:#6B5A51;
  --tinta3:#9A8880;

  --vidrio:rgba(255,255,255,.9);
  --vidrio-borde:rgba(255,255,255,.96);
  --linea:rgba(30,21,18,.08);
  --sombra:0 1px 2px rgba(30,21,18,.04), 0 14px 34px -18px rgba(30,21,18,.22);
  --sombra-alta:0 2px 6px rgba(30,21,18,.06), 0 26px 56px -22px rgba(30,21,18,.34);

  --r:16px;
  --r-sm:12px;
  --r-lg:22px;
  --suave:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* El atributo hidden tiene que ganar a cualquier display de mas abajo.
   Sin esto, la hoja de cobro (display:flex) se quedaba abierta tapando la pagina. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--crema-cla);
  color:var(--tinta);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- el fondo aurora ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--crema-cla)}
.aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.34;will-change:transform;
}
.aurora i:nth-child(1){width:62vmax;height:62vmax;top:-26vmax;left:-18vmax;
  background:radial-gradient(circle at 35% 35%,var(--rojo) 0%,rgba(198,40,30,0) 68%);
  animation:derivar1 26s var(--suave) infinite alternate}
.aurora i:nth-child(2){width:52vmax;height:52vmax;top:8vmax;right:-22vmax;
  background:radial-gradient(circle at 60% 40%,var(--oro) 0%,rgba(224,163,60,0) 70%);
  animation:derivar2 32s var(--suave) infinite alternate}
.aurora i:nth-child(3){width:46vmax;height:46vmax;bottom:-20vmax;left:12vmax;
  background:radial-gradient(circle at 50% 50%,var(--crema) 0%,rgba(241,228,209,0) 72%);
  opacity:.5;animation:derivar3 28s var(--suave) infinite alternate}
.aurora i:nth-child(4){width:34vmax;height:34vmax;bottom:6vmax;right:4vmax;
  background:radial-gradient(circle at 50% 50%,var(--rojo-cla) 0%,rgba(232,90,74,0) 70%);
  opacity:.2;animation:derivar1 34s var(--suave) infinite alternate-reverse}
/* velo que aclara el conjunto para que el texto siempre se lea */
.aurora::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(253,247,238,.78) 0%,rgba(253,247,238,.9) 50%,rgba(253,247,238,.97) 100%)}

@keyframes derivar1{from{transform:translate3d(0,0,0) scale(1)}   to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
@keyframes derivar2{from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(-7vmax,5vmax,0) scale(1)}}
@keyframes derivar3{from{transform:translate3d(0,0,0) scale(1)}    to{transform:translate3d(5vmax,-4vmax,0) scale(1.1)}}

/* ---------- marca ---------- */
.script{font-family:"Yellowtail",cursive;font-weight:400;line-height:1}
.tisha{font-family:"Yellowtail",cursive;color:var(--tinta);letter-spacing:.01em}
.mayus{text-transform:uppercase;letter-spacing:.3em;font-weight:500;font-size:.64rem;color:var(--tinta3)}

/* iconos de linea: heredan color y se alinean con el texto */
.ic{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.silueta{width:44%;height:auto;max-width:56px;color:var(--tinta);opacity:.13}

/* ---------- vidrio ---------- */
.vidrio{
  background:var(--vidrio);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--r);
  box-shadow:var(--sombra);
}

/* ---------- botones ---------- */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:0;border-radius:999px;cursor:pointer;font-weight:600;
  padding:.8rem 1.5rem;font-size:.95rem;
  transition:transform .18s var(--suave),box-shadow .18s var(--suave),background .18s;
}
.b:active{transform:scale(.97)}
.b-rojo{background:var(--rojo);color:#fff;box-shadow:0 10px 24px -12px var(--rojo)}
.b-rojo:hover{background:var(--rojo-osc)}
.b-tinta{background:var(--tinta);color:var(--crema-cla)}
.b-vidrio{background:var(--vidrio);border:1px solid var(--vidrio-borde);color:var(--tinta);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.b-vidrio:hover{background:#fff}
.b-fino{padding:.5rem 1rem;font-size:.85rem}
.b-peligro{color:var(--rojo);background:rgba(198,40,30,.08)}

/* ---------- utilidades ---------- */
.caja{width:min(100% - 2rem,1160px);margin-inline:auto}
.centro{text-align:center}
.nums{font-variant-numeric:tabular-nums}
.pista{font-size:.82rem;color:var(--tinta3)}

@media(prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  *{transition-duration:.01ms !important}
}