/* =====================================================================
   Paletas Tisha · base
   Colores de marca: #C6281E rojo · #F1E4D1 crema · #E0A33C oro del logo

   RENDIMIENTO (esto es lo que importa, la mayoría entra desde el móvil):
   el fondo se PINTA UNA VEZ con radial-gradients. Ni filter:blur, ni
   backdrop-filter, ni animaciones de capas grandes. La versión anterior
   tenía 4 manchas de 62vmax desenfocadas y animadas más un backdrop-filter
   por tarjeta: 19 capas recompuestas por fotograma. Iba a tirones.
   ===================================================================== */

/* Fuentes servidas desde la propia web. Antes venian de Google: dos
   conexiones mas (DNS + cifrado) antes de pintar nada, que en 3G con un
   telefono viejo era casi un segundo de pantalla en blanco. Solo el juego
   latino (tildes y ñ incluidas); Outfit es variable, un archivo para 400-600. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fuentes/outfit.woff2) format("woff2")}
@font-face{font-family:"Yellowtail";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fuentes/yellowtail.woff2) format("woff2")}

:root{
  --rojo:#C6281E;
  --rojo-osc:#8E1C14;
  --rojo-cla:#E85A4A;
  --crema:#F1E4D1;
  --crema-cla:#FDF8F1;
  --oro:#E0A33C;
  --oro-cla:#F5C978;
  --tinta:#17100D;
  --tinta2:#6B5A51;
  --tinta3:#9A8880;

  --panel:#FFFFFF;
  --panel-borde:rgba(23,16,13,.07);
  --linea:rgba(23,16,13,.08);
  --sombra:0 1px 2px rgba(23,16,13,.04),0 8px 24px -14px rgba(23,16,13,.2);
  --sombra-alta:0 2px 6px rgba(23,16,13,.05),0 22px 50px -22px rgba(23,16,13,.3);

  --r:18px;
  --r-sm:12px;
  --r-lg:26px;
  --suave:cubic-bezier(.22,1,.36,1);
  --rapido:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
/* el lienzo es BLANCO. El color vive solo en la franja de portada. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#FFFFFF}
body{
  position:relative;                /* ancla la franja, sin crear contexto de apilado */
  margin:0;min-height:100dvh;color:var(--tinta);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------------------------------------------------------------------
   LA AURORA
   Una sola capa, pintada una vez, cortada en diagonal por abajo.
   El centro se mantiene claro a propósito (el foco blanco) para que el
   texto oscuro se lea; el color satura en las cuatro esquinas. Sin blur,
   sin animación: en el móvil esto no cuesta nada, se pinta y se olvida.
   --------------------------------------------------------------------- */
.tope{position:relative;isolation:isolate}
.aurora{
  position:absolute;left:0;right:0;
  /* baja algo mas de lo que ocupa la portada: ese sobrante es donde el color
     se disuelve en blanco, para que no haya un corte seco */
  bottom:-3.2rem;
  top:calc(-64px - env(safe-area-inset-top));
  z-index:-1;pointer-events:none;
  /* Los colores salen del local: la pared crema bajo la luz calida, la viga
     roja y el foco dorado del techo. Nada de magenta ni violeta, no son suyos.
     Borde inferior RECTO, a ras. Una sola capa, sin blur ni animacion. */
  background:
    /* PRIMERA capa = la de encima: apaga el color hacia abajo hasta blanco puro.
       Antes el degradado terminaba de golpe contra el blanco de la pagina y el
       borde se notaba como una raya. */
    linear-gradient(to bottom,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,0)   52%,
      rgba(255,255,255,.30) 70%,
      rgba(255,255,255,.72) 85%,
      #FFFFFF               97%),
    radial-gradient(44% 62% at   0%  2%, rgba(224,163,60,.90) 0%, rgba(224,163,60,0) 70%),
    radial-gradient(48% 66% at 100%  0%, rgba(198,40,30,.86)  0%, rgba(198,40,30,0)  68%),
    radial-gradient(52% 58% at  84% 100%, rgba(198,40,30,.26) 0%, rgba(198,40,30,0)  72%),
    radial-gradient(46% 52% at   6% 100%, rgba(224,163,60,.30) 0%, rgba(224,163,60,0) 74%),
    radial-gradient(40% 46% at  50% 40%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 76%),
    linear-gradient(168deg,#FFF7EC 0%,#F9EAD6 42%,#F3E2CD 74%,#EFDDC6 100%);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}

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

/* ---------- superficies ---------- */
.panel{background:var(--panel);border:1px solid var(--panel-borde);
  border-radius:var(--r);box-shadow:var(--sombra)}

/* ---------- botones ---------- */
/* touch-action:manipulation quita el zoom por doble toque SIN comerse el
   segundo toque, y el retraso de 300 ms de los navegadores viejos. */
button,a,label,summary,input,select{touch-action:manipulation}
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:999px;cursor:pointer;font-weight:500;
  padding:.78rem 1.5rem;font-size:.95rem;line-height:1.1;text-align:center;
  transition:transform .15s var(--suave),background-color .15s var(--rapido),border-color .15s var(--rapido);
}
.b:active{transform:scale(.97)}
.b:disabled{opacity:.45;cursor:default;transform:none}
.b-rojo{background:var(--rojo);color:#fff}
.b-rojo:hover{background:var(--rojo-osc)}
.b-claro{background:#fff;color:var(--tinta);border-color:var(--panel-borde);box-shadow:var(--sombra)}
.b-claro:hover{border-color:rgba(23,16,13,.18)}
/* Se usaba en todo el panel (Cancelar, Salir, Editar, flechas del calendario)
   pero NO existia: esos botones salian como texto suelto, sin forma de boton. */
.b-vidrio{background:#fff;color:var(--tinta);border-color:rgba(23,16,13,.16)}
.b-vidrio:hover{border-color:rgba(23,16,13,.3)}
.b-oscuro{background:var(--tinta);color:#fff}
.b-peligro{color:var(--rojo);border-color:rgba(198,40,30,.35)}
.b-fino{padding:.5rem 1.05rem;font-size:.86rem}
.b-mini{padding:.42rem .8rem;font-size:.8rem}
.b-lleno{width:100%}

/* ---------- iconos ---------- */
.ic{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.silueta{width:42%;height:auto;max-width:52px;color:var(--tinta);opacity:.11}

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

/* Aquí hubo un content-visibility:auto con contain-intrinsic-size 600px.
   Se quitó: las secciones de abajo miden bastante menos, así que la página
   se encogía 764px mientras bajabas y el contenido saltaba bajo el dedo.
   Son secciones pequeñas; pintarlas de una no cuesta nada. */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}