/* ============================================================
   LOICA — sistema de diseño
   Tokens y componentes compartidos por todas las páginas.
   Fuente de verdad: 02_marca_y_marketing/estrategia_marca.md
   ============================================================ */

/* ---------- 1. TOKENS ----------
   Dirección "serigrafía chilena": tinta plana, contorno grueso, repisa dura.
   Detalle y contrastes calculados en _direccion_visual.md. */
:root{
  /* Primitivos: rampas OKLCH ancladas en los 6 colores de marca */
  --rojo-50:#FFF4F1;  --rojo-100:#FFE5DF; --rojo-200:#FFC9BE; --rojo-300:#FEA493;
  --rojo-400:#F47662; --rojo-500:#E8442E; --rojo-600:#D13B27; --rojo-700:#AA2C1B;
  --rojo-800:#801B0E; --rojo-900:#590B03;
  --amarillo-50:#FEF6E8;  --amarillo-100:#FDEACA; --amarillo-200:#FAD391;
  --amarillo-300:#F5B52E; --amarillo-400:#D89E1E; --amarillo-500:#BA8608;
  --amarillo-700:#7E5900; --amarillo-900:#3E2A00;
  --verde-100:#E5F1EB; --verde-200:#CFE3D8; --verde-300:#B4D0C1;
  --verde-500:#74A68D; --verde-700:#2E7D5B; --verde-800:#1C523B; --verde-900:#113626;
  --rosado-100:#FFE4E7; --rosado-200:#FFC8CE; --rosado-400:#F2778C;
  --rosado-600:#B75566; --rosado-800:#712C39;
  --azul-100:#EAEDF3; --azul-200:#D6DAE4; --azul-300:#BEC3D0; --azul-400:#A1A8B9;
  --azul-600:#6D778F; --azul-700:#535E79; --azul-800:#384461; --azul-900:#1E2A4A;
  --azul-950:#141A2B; --azul-975:#0B0F1C;
  --morado-200:#DAD2FB; --morado-400:#A893E7; --morado-600:#7A4FCF; --morado-800:#4E3187;
  --lapis-200:#C7DAF1; --lapis-400:#7DA5D5; --lapis-600:#2F6FB5; --lapis-800:#1C4777;
  --naranjo-200:#F6CFAB; --naranjo-400:#E08A1E; --naranjo-600:#AB6604; --naranjo-800:#663A00;
  --arena-50:#FFFBF5;  --arena-100:#FAF3E7; --arena-200:#EDE7DE; --arena-300:#DAD3C8;
  --arena-400:#BEB6A9; --arena-500:#A29A8C; --arena-700:#645D51; --arena-900:#292621;

  /* Alias de marca (los usan páginas antiguas) */
  --rojo-loica:var(--rojo-500); --azul-cordillera:var(--azul-900);
  --crema-papel:var(--arena-100); --amarillo-micro:var(--amarillo-300);
  --verde-cerro:var(--verde-700); --rosado-atardecer:var(--rosado-400);
  --rojo-hover:var(--rojo-700);

  /* Semánticos — claro */
  --fondo:var(--arena-100);
  --fondo-elevado:var(--arena-50);
  --fondo-hundido:var(--arena-200);
  --tinta:var(--azul-900);
  --tinta-suave:var(--azul-700);
  --tinta-tenue:var(--arena-700);
  --contorno:var(--azul-900);
  --contorno-suave:var(--azul-800);
  --borde:var(--arena-300);
  --borde-fuerte:var(--arena-400);
  --acento:var(--rojo-500);
  --acento-solido:var(--rojo-600);
  --acento-hover:var(--rojo-700);
  --acento-contraste:#fff;
  --gratis:var(--verde-700);
  --gratis-fondo:var(--verde-100);
  --gratis-contraste:#fff;
  --destacado:var(--amarillo-300);
  --destacado-tinta:var(--azul-900);
  --foco:var(--amarillo-300);

  /* Tipografía */
  --fuente-marca:"Baloo 2","Nunito",system-ui,sans-serif;
  --fuente-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:17px;
  --t-lg:21px; --t-xl:27px; --t-2xl:35px; --t-3xl:46px;

  /* Espaciado */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px;
  --e-5:20px; --e-6:24px; --e-8:32px; --e-10:40px; --e-12:48px;

  /* Forma: radios grandes (cartoon = redondo) */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px;
  --r-pill:999px; --r-full:999px;

  /* Repisas: sombra dura hacia abajo, cero blur. ES el lenguaje. */
  --repisa-1:0 3px 0 var(--contorno);
  --repisa-2:0 4px 0 var(--contorno);
  --repisa-3:0 5px 0 var(--contorno);
  --repisa-4:0 6px 0 var(--contorno);
  --sombra-1:var(--repisa-1); --sombra-2:var(--repisa-2); --sombra-3:var(--repisa-4);

  /* Alto de la barra inferior. Es UN token y no un 52 escrito a mano en cada
     página porque el número se usa en seis lugares distintos (el relleno del
     body, el panel del mapa, la ficha, el calendario, la lista de descuentos)
     y basta que uno quede desfasado para que la última línea de la página
     viva debajo de la barra. `--hueco-nav` ya trae el notch sumado.
     En escritorio la barra no existe, así que el hueco es cero. */
  --alto-nav:58px;
  --hueco-nav:0px;

  /* Movimiento */
  --rapido:.12s cubic-bezier(.4,0,.2,1);
  --medio:.22s cubic-bezier(.2,0,0,1);
  --lento:.4s cubic-bezier(.2,0,0,1);
  --rebote:.34s cubic-bezier(.34,1.56,.64,1);
}

/* Modo oscuro: la tinta SE INVIERTE (contorno crema). Primera clase. */
  
:root[data-tema="oscuro"]{
  --fondo:var(--azul-950);
  --fondo-elevado:#1E2740;
  --fondo-hundido:var(--azul-975);
  --tinta:var(--arena-100);
  --tinta-suave:var(--arena-300);
  --tinta-tenue:var(--arena-400);
  --contorno:var(--arena-200);
  --contorno-suave:var(--arena-300);
  --borde:var(--azul-800);
  --borde-fuerte:var(--azul-700);
  --acento:var(--rojo-400);
  --acento-solido:var(--rojo-400);
  --acento-hover:var(--rojo-300);
  --acento-contraste:var(--azul-900);
  --gratis:var(--verde-300);
  --gratis-fondo:var(--verde-900);
  --gratis-contraste:var(--azul-900);
  --destacado:var(--amarillo-300);
  --destacado-tinta:var(--azul-900);
  --foco:var(--amarillo-300);
}

/* Colores por categoría-mascota. Tres versiones de cada familia y cada una
   tiene un solo trabajo:
     --c-X        relleno fuerte. Pin, pastilla, lomo. Siempre con contorno.
     --c-X-tinta  el mismo color oscurecido hasta pasar 4,5:1 sobre crema.
                  Es el ÚNICO que puede tocar texto.
     --c-X-suave  fondo de pastilla, con tinta azul encima.
   La regla de arriba no es adorno: el naranjo fuerte sobre crema da 2,4:1.
   Como relleno es alegre, como texto es invisible. */
:root{
  --c-fiesta:#7A3FE0;  --c-fiesta-tinta:#5B2BAF;
  --c-musica:#DE3A1E;  --c-musica-tinta:#A82B12;
  --c-cultura:#1B6FD1; --c-cultura-tinta:#1A5599;
  --c-clases:#F08800;  --c-clases-tinta:#8A5000;
  --c-libre:#0E8757;   --c-libre-tinta:#0A6141;
  --c-deporte:#0C8B9B; --c-deporte-tinta:#065C66;   /* el Chungungo */
  --c-charla:#C42B67;  --c-charla-tinta:#8F1C4A;    /* el Pingüino */
  --c-otros:#FFB61F;   --c-otros-tinta:#7E5900;     /* el rojo queda para acción y marca */
  /* El Degú. Es el único CAFÉ del sistema y esa es la gracia: las otras ocho
     familias se separan por tono, y a esta la separa el valor. Al lado del
     naranjo de clases (#F08800) no se confunde porque es mucho más oscura, y
     no se eligió un verde —que era el hueco obvio del círculo cromático— para
     no dejar dos verdes hablando de plata: el del Pudú ya dice "gratis". */
  --c-descuento:#95521C; --c-descuento-tinta:#6B3813;
  /* La Bandurria. Es el único OLIVA del sistema y el único hueco que quedaba
     libre en la rueda: los diez rellenos anteriores se apiñan en el rojo, el
     naranjo y el azul, y entre el verde del Pudú (H156, esmeralda) y el
     naranjo de clases (H34) no había nada. Este cae en H77 y no se confunde
     con ninguno. Que además sea el color del aceite de oliva y de las hierbas
     es la razón por la que se prefirió al lila, que era el otro hueco. */
  --c-comer:#5C7A1E;     --c-comer-tinta:#47600F;
  --c-fiesta-suave:var(--morado-200); --c-musica-suave:var(--rojo-200);
  --c-cultura-suave:var(--lapis-200); --c-clases-suave:var(--naranjo-200);
  --c-libre-suave:var(--verde-200);   --c-otros-suave:var(--amarillo-200);
  --c-deporte-suave:#BFE6EA;          --c-charla-suave:#F7CBDC;
  --c-descuento-suave:#F0D8BE;        --c-comer-suave:#D9E6A8;
}
/* En oscuro la tinta se invierte: sobre azul-950 el que falla es el oscuro.
   Se usa el relleno fuerte, que ahí sí pasa de sobra. */
  :root[data-tema="oscuro"]{
    --c-fiesta-tinta:#A893E7; --c-musica-tinta:#F47662; --c-cultura-tinta:#7DA5D5;
    --c-clases-tinta:#F6B65E; --c-libre-tinta:#5FC79B; --c-deporte-tinta:#5FC8D6;
    --c-charla-tinta:#EE8FB4; --c-otros-tinta:#FAD391;
    --c-descuento-tinta:#E0A063; --c-comer-tinta:#A8C64F;
  }
:root[data-tema="oscuro"]{
  --c-fiesta-tinta:#A893E7; --c-musica-tinta:#F47662; --c-cultura-tinta:#7DA5D5;
  --c-clases-tinta:#F6B65E; --c-libre-tinta:#5FC79B; --c-deporte-tinta:#5FC8D6;
  --c-charla-tinta:#EE8FB4; --c-otros-tinta:#FAD391;
  --c-descuento-tinta:#E0A063; --c-comer-tinta:#A8C64F;
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
/* El fondo del body NO es decorativo y no se puede dar por supuesto: sin
   `background` declarado, el lienzo queda transparente y lo pinta el
   navegador, que en un aparato configurado en oscuro lo pinta NEGRO. La
   página quedaba con el hero crema y el resto en negro. Vale para las nueve
   páginas porque todas heredan de acá. */
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font:var(--t-base)/1.5 var(--fuente-ui);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--fuente-marca);font-weight:800;letter-spacing:-.02em;margin:0}
h1{font-size:var(--t-2xl);line-height:1.12}
h2{font-size:var(--t-xl);line-height:1.2}
h3{font-size:var(--t-lg);line-height:1.25}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--foco),0 0 0 6px var(--contorno);border-radius:6px}

/* ---------- 3. NAVEGACIÓN ---------- */
.barra{
  display:flex;align-items:center;gap:var(--e-3);
  padding:var(--e-3) var(--e-4);background:var(--fondo-elevado);
  border-bottom:2.5px solid var(--contorno);
}
.logo{display:flex;align-items:center;gap:var(--e-2);text-decoration:none;flex:none}
.logo svg{width:32px;height:32px}
.logo b{font-family:var(--fuente-marca);font-size:21px;font-weight:800;letter-spacing:-.03em}
.nav{display:flex;gap:var(--e-1);margin-left:var(--e-4);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  display:inline-flex;align-items:center;min-height:42px;
  padding:0 var(--e-4);border-radius:var(--r-pill);text-decoration:none;
  font:700 var(--t-base)/1 var(--fuente-marca);color:var(--tinta-suave);
  white-space:nowrap;transition:var(--rapido);
}
.nav a:hover{background:var(--fondo-hundido);color:var(--tinta)}
.nav a[aria-current="page"]{
  background:var(--nav-color,var(--tinta));color:var(--nav-tinta,var(--arena-50));
  border:2px solid var(--contorno);box-shadow:var(--repisa-1);
}
/* La repisa del enlace activo pisaba el anillo de foco de §2 (mismo
   box-shadow, más especificidad): quien navega con Tab no veía dónde estaba
   justo en la página en que está. Se apilan, como en el chip. */
.nav a[aria-current="page"]:focus-visible{
  box-shadow:var(--repisa-1),0 0 0 3px var(--foco),0 0 0 6px var(--contorno);
}
.barra-fin{margin-left:auto;display:flex;align-items:center;gap:var(--e-2)}

/* Navegación inferior: en celular los destinos van al alcance del pulgar.
   En la barra de arriba solo se veía 1 de los 4 enlaces. */
.nav-inferior{display:none}
@media(max-width:879px){
  .barra .nav{display:none}
  /* Los tres `env()`: el de abajo es la barra de gestos y los de los costados
     son el notch, que en un teléfono ACOSTADO se come una franja lateral. Sin
     ellos —y con viewport-fit=cover, que es lo que traen las ocho páginas— el
     primer y el último destino quedan debajo de la muesca. */
  .nav-inferior{
    display:flex;position:fixed;inset:auto 0 0 0;z-index:20;
    background:var(--fondo-elevado);border-top:2.5px solid var(--contorno);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    /* El alto es EXPLÍCITO y con box-sizing:border-box incluye el borde de
       2.5px. Si se dejara crecer con el contenido, --alto-nav describiría los
       enlaces y no la barra, el borde quedaría fuera de la cuenta y el hueco
       reservado abajo saldría corto por esos 2.5px. */
    height:calc(var(--alto-nav) + env(safe-area-inset-bottom));
    box-sizing:border-box;
  }
  /* Ocho destinos: a 375px cada celda queda en 47px, así que el texto baja
     a 9.5px y el ícono a 21. El alto se respeta igual — es el área táctil y
     esa no se negocia. La etiqueta no envuelve nunca: prefiero que se corte
     a que la barra crezca a dos líneas.

     Es una REJILLA y no una columna flex por una razón concreta: el ícono de
     la página activa lleva pastilla y mide 30px contra los 21 de los demás.
     En flex ese ícono estiraba la fila entera, la barra pasaba de 54 a 65px
     y las seis reservas de espacio calculadas sobre 52 quedaban cortas: la
     última línea de cada página terminaba debajo de la barra. Con la primera
     fila fijada en 30px la altura es la misma haya pastilla o no. */
  .nav-inferior a{
    flex:1;min-width:0;position:relative;
    display:grid;grid-template-rows:30px auto;gap:2px;
    justify-items:center;align-content:center;
    height:100%;padding:0 2px;
    text-decoration:none;color:var(--tinta-tenue);
    font-size:9.5px;font-weight:700;letter-spacing:-.01em;
  }
  .nav-inferior a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-inferior a svg{width:21px;height:21px;align-self:center;transition:var(--rapido)}
  .nav-inferior a[aria-current="page"]{color:var(--tinta)}
  /* La pastilla de color tras el ícono: los colores de la Loica en la nav.
     20 de alto + 3+3 de relleno + 2+2 de contorno = los 30px de la fila.
     El relleno lateral era de 9px cuando había siete destinos; con ocho la
     celda bajó a 47px y la pastilla (21+18+4 = 43) quedaba a dos píxeles de
     tocar a la vecina. A 6px vuelve a respirar sin dejar de leerse pastilla. */
  .nav-inferior a[aria-current="page"] svg{
    background:var(--nav-color,var(--acento));color:var(--nav-tinta,var(--arena-50));
    border:2px solid var(--contorno);border-radius:var(--r-pill);
    padding:3px 6px;width:auto;height:20px;box-sizing:content-box;
  }
  .nav-inferior a[aria-current="page"] .punto{display:none}
  :root{--hueco-nav:calc(var(--alto-nav) + env(safe-area-inset-bottom))}
  body.con-nav-inferior{padding-bottom:var(--hueco-nav)}
}

/* Un color por destino; cada color viaja con su tinta (el naranjo y el
   amarillo son claros: llevan tinta azul, no crema). */
:root[data-pagina="mapa"]       {--nav-color:var(--c-musica); --nav-tinta:var(--arena-50)}
/* Habla se lleva el rosado del Pingüino: es la única familia que quedaba sin
   destino y además es la de las charlas, que es literalmente lo que pasa ahí. */
:root[data-pagina="habla"]      {--nav-color:var(--c-charla); --nav-tinta:var(--arena-50)}
:root[data-pagina="calendario"] {--nav-color:var(--c-cultura);--nav-tinta:var(--arena-50)}
:root[data-pagina="blog"]       {--nav-color:var(--c-fiesta); --nav-tinta:var(--arena-50)}
:root[data-pagina="agregar"]    {--nav-color:var(--c-clases); --nav-tinta:var(--azul-900)}
:root[data-pagina="nosotros"]   {--nav-color:var(--c-libre);  --nav-tinta:var(--arena-50)}
:root[data-pagina="descuentos"] {--nav-color:var(--c-descuento);--nav-tinta:var(--arena-50)}
:root[data-pagina="talleres"]   {--nav-color:var(--c-clases);  --nav-tinta:var(--azul-900)}
/* Comer se lleva el oliva de la Bandurria. Al lado de los descuentos —que son
   café— se distinguen: uno es la tarjeta del banco, el otro es la mesa. */
:root[data-pagina="comer"]      {--nav-color:var(--c-comer);  --nav-tinta:var(--arena-50)}

.idiomas{display:flex;gap:2px}
.idiomas button, .tema{
  border:1px solid var(--borde);background:var(--fondo-elevado);color:var(--tinta-suave);
  font-size:var(--t-xs);font-weight:700;padding:5px 8px;border-radius:var(--r-sm);
  cursor:pointer;font-family:var(--fuente-ui);transition:var(--rapido);
}
.idiomas button[aria-pressed="true"]{background:var(--tinta);color:var(--fondo-elevado);border-color:var(--tinta)}
.tema{padding:5px 9px;font-size:14px;line-height:1}

/* Con el dedo, estos botones miden 33x29 —y el logo 83x32, que es el único
   camino de vuelta a la portada desde las siete páginas— contra los 44 que
   pide el pulgar. Se agranda el ÁREA y no la caja: la barra del mapa pelea
   por cada píxel de alto, así que un pseudo-elemento transparente estira el
   blanco hacia el relleno que la barra ya tenía. El ancho no se toca en los
   idiomas —hay 2px entre ES, EN y PT y agrandarlos los haría solaparse, que
   es peor que uno chico. */
@media (pointer:coarse){
  .idiomas button,.tema,.logo{position:relative}
  .idiomas button::after,.tema::after,.logo::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }
  /* El de tema sí está solo: puede crecer hacia los lados hasta el hueco. */
  .tema::after{left:-4px;right:-4px}
}

/* ---------- 4. CHIPS DE FILTRO ---------- */
.filtros{display:flex;gap:var(--e-2);overflow-x:auto;padding:var(--e-3) var(--e-4);scrollbar-width:none;
  background:var(--fondo-elevado);border-bottom:1px solid var(--borde)}
.filtros::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  border:2px solid var(--contorno);background:var(--fondo-elevado);color:var(--tinta);
  padding:8px 15px 8px 10px;border-radius:var(--r-pill);
  font:700 var(--t-sm)/1 var(--fuente-marca);cursor:pointer;white-space:nowrap;
  box-shadow:var(--repisa-1);transition:var(--rapido);
}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(3px);box-shadow:none}
/* Los chips del mapa y de descuentos se aprietan a 36-38px de alto para no
   comerse la pantalla. Con el dedo eso queda corto, así que se estira el área
   —no la caja— hacia el relleno del riel. Solo a lo alto: los chips van a 8px
   uno de otro y ensancharlos los haría pisarse, que es peor que uno chico. */
@media (pointer:coarse){
  .chip,.segmentado button{position:relative}
  .chip::before,.segmentado button::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }
}
.chip svg{width:22px;height:22px;flex:none}
.chip[aria-pressed="true"]{
  background:var(--tinta);color:var(--fondo-elevado);
  transform:translateY(3px);box-shadow:none;
}
.chip.es-gratis[aria-pressed="true"]{background:var(--gratis);color:var(--gratis-contraste)}
/* El anillo de foco de §2 se dibuja con `box-shadow` y el chip usa `box-shadow`
   para su repisa. Misma especificidad y el chip va más abajo: ganaba el chip y
   quien navega con Tab no veía nada. Se apilan a mano —repisa primero, que es
   la que va encima, y después los dos anillos del sistema—. El chip encendido
   ya está hundido y no tiene repisa que respetar: solo anillo. */
.chip:focus-visible{
  box-shadow:var(--repisa-1),0 0 0 3px var(--foco),0 0 0 6px var(--contorno);
}
.chip[aria-pressed="true"]:focus-visible{
  box-shadow:0 0 0 3px var(--foco),0 0 0 6px var(--contorno);
}

/* ---------- 5. TARJETA DE EVENTO ----------
   Los dos datos que deciden si voy son la HORA y el PRECIO. Antes la
   categoría se repetía tres veces y la hora no aparecía nunca. */
.tarjeta{
  display:grid;grid-template-columns:58px 1fr auto;gap:var(--e-3);
  padding:var(--e-3) var(--e-4);align-items:start;
  border-bottom:1px solid var(--borde);cursor:pointer;transition:var(--rapido);
  background:var(--fondo-elevado);text-align:left;width:100%;border-left:0;border-right:0;border-top:0;
  font-family:inherit;color:inherit;
}
.tarjeta:hover{background:var(--fondo-hundido)}
.tarjeta-gratis{box-shadow:inset 3px 0 0 var(--gratis)}

/* Entrada escalonada. La regla es de _direccion_visual.md §8.4 y es una regla
   de rendimiento antes que de gusto: escalonar 345 tarjetas es un desastre.
   Solo las 12 primeras, 20ms entre una y otra, 240ms de techo. */
.lista-anima .tarjeta{animation:tarjeta-entra var(--medio) backwards}
.lista-anima .tarjeta:nth-child(1){animation-delay:0ms}
.lista-anima .tarjeta:nth-child(2){animation-delay:20ms}
.lista-anima .tarjeta:nth-child(3){animation-delay:40ms}
.lista-anima .tarjeta:nth-child(4){animation-delay:60ms}
.lista-anima .tarjeta:nth-child(5){animation-delay:80ms}
.lista-anima .tarjeta:nth-child(6){animation-delay:100ms}
.lista-anima .tarjeta:nth-child(7){animation-delay:120ms}
.lista-anima .tarjeta:nth-child(8){animation-delay:140ms}
.lista-anima .tarjeta:nth-child(9){animation-delay:160ms}
.lista-anima .tarjeta:nth-child(10){animation-delay:180ms}
.lista-anima .tarjeta:nth-child(11){animation-delay:200ms}
.lista-anima .tarjeta:nth-child(12){animation-delay:220ms}
@keyframes tarjeta-entra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.miniatura{
  width:58px;height:58px;border-radius:var(--r-md);overflow:hidden;
  background:var(--fondo-hundido);display:grid;place-items:center;position:relative;
  border:2.5px solid var(--contorno);
}
/* La mascota va DEBAJO de la foto: si la imagen del organizador no carga o
   se cae, queda la mascota sin dejar un hueco negro. */
.miniatura img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.miniatura > svg{width:44px;height:44px}
/* La cinta del día deja de ser una franja sobre el mentón de la carita y pasa
   a ser una pastilla con contorno colgada de la esquina de la miniatura (§7.2
   de la dirección visual). Vive en `.mini-caja`, FUERA de `.miniatura`, porque
   esa caja recorta (overflow:hidden) para redondear la foto y la pastilla tiene
   que asomar. El rojo es el sólido: blanco sobre rojo-500 daba 3,96:1 y de
   noche 2,76; `--acento-contraste` ya trae la tinta correcta para cada tema. */
.mini-caja{position:relative;width:58px;height:58px;flex:none}
.mini-caja .dia{
  position:absolute;inset:auto -6px -6px auto;z-index:1;
  background:var(--tinta);color:var(--fondo-elevado);
  border:2px solid var(--contorno);border-radius:var(--r-pill);
  font:800 10.5px/1 var(--fuente-marca);letter-spacing:.04em;text-transform:uppercase;
  padding:3px 6px;white-space:nowrap;
}
.mini-caja .dia.pronto{background:var(--acento-solido);color:var(--acento-contraste)}

.tarjeta-cuerpo{min-width:0}
.tarjeta .hora{
  font:800 var(--t-sm)/1 var(--fuente-ui);color:var(--tinta);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.tarjeta h3{
  font-family:var(--fuente-ui);font-size:var(--t-md);font-weight:700;line-height:1.24;
  letter-spacing:-.01em;margin:3px 0 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tarjeta-meta{
  display:flex;flex-wrap:wrap;gap:2px var(--e-2);align-items:center;
  font-size:var(--t-sm);color:var(--tinta-suave);
}
.precio{
  font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums;
  font-size:var(--t-sm);white-space:nowrap;text-align:right;padding-top:1px;
}
.precio.libre{color:var(--gratis)}
/* Sin dato no se pinta un guion: se dice dónde está el precio. */
.precio.sin-dato{color:var(--tinta-tenue);font:600 var(--t-xs)/1.25 var(--fuente-ui);
  max-width:78px;white-space:normal}

/* --- La misma tarjeta, con datos de descuento ---
   Donde el evento pone la hora, el descuento pone el banco; donde pone el
   precio, pone cuánto rebaja. El lomo de color a la izquierda es el banco:
   sirve para barrer la lista buscando el tuyo sin leer. */
.tarjeta-dcto{box-shadow:inset 4px 0 0 var(--banco)}
.tarjeta .banco-nombre{color:var(--banco);letter-spacing:.01em}
.precio.dcto{
  font-family:var(--fuente-marca);font-size:var(--t-lg);line-height:1;
  color:var(--c-descuento-tinta);
}
.tarjeta-meta .aviso{color:var(--tinta-tenue);font-style:italic}

/* Los talleres que se repiten son UNA tarjeta que dice su cadencia: "↻ martes
   y jueves". Va más apagado que el lugar porque responde una pregunta
   distinta —cuándo vuelve, no dónde es— y no debe competir con el título. */
.tarjeta-meta.cadencia{
  color:var(--tinta-tenue);font-size:var(--t-xs);margin-top:1px;
}

/* ---------- 5b. ESQUELETO DE CARGA ----------
   Tres filas con la forma de la tarjeta mientras llega eventos.json. La lista
   no arranca vacía ni dice "0 eventos" durante el segundo que tarda el JSON,
   que es justo el segundo en que uno decide si la página funciona. */
.esqueleto{display:grid;grid-template-columns:58px 1fr auto;gap:var(--e-3);
  padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--borde);
  animation:latir 1.2s ease-in-out infinite}
.esqueleto i{display:block;background:var(--fondo-hundido);border-radius:var(--r-sm)}
.esqueleto .e-mini{width:58px;height:58px;border-radius:var(--r-md)}
.esqueleto .e-txt{display:grid;gap:7px;align-content:start;padding-top:4px}
.esqueleto .e-txt i{height:13px}
.esqueleto .e-txt i:first-child{width:38%}
.esqueleto .e-txt i:nth-child(2){width:88%}
.esqueleto .e-txt i:last-child{width:60%}
.esqueleto .e-precio{width:44px;height:13px;margin-top:4px}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- 6. BOTONES ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  background:var(--acento-solido);color:var(--acento-contraste);
  border:3px solid var(--contorno);
  padding:13px var(--e-6);border-radius:var(--r-pill);
  font:800 var(--t-md)/1 var(--fuente-marca);cursor:pointer;text-decoration:none;
  box-shadow:var(--repisa-3);transition:var(--rapido);
}
.boton:hover{background:var(--acento-hover);transform:translateY(-1px)}
.boton:active{transform:translateY(5px);box-shadow:none}
.boton.secundario{background:var(--fondo-elevado);color:var(--tinta);
  border:2.5px solid var(--contorno);box-shadow:var(--repisa-2)}
.boton.secundario:hover{background:var(--fondo-hundido)}
.boton.secundario:active{transform:translateY(4px);box-shadow:none}
.boton.bloque{width:100%}
/* Mismo choque que en el chip: el anillo de §2 y la repisa se disputan el
   único `box-shadow`, y ganaba la repisa. El botón es el control principal de
   media docena de páginas, así que quedaba sin señal de foco justo donde más
   importa. Cada variante repone SU repisa, que no es la misma. */
.boton:focus-visible{
  box-shadow:var(--repisa-3),0 0 0 3px var(--foco),0 0 0 6px var(--contorno);
}
.boton.secundario:focus-visible{
  box-shadow:var(--repisa-2),0 0 0 3px var(--foco),0 0 0 6px var(--contorno);
}

/* ---------- 7. FORMULARIOS ---------- */
.campo{margin-bottom:var(--e-4)}
.campo label{display:block;font-weight:700;font-size:var(--t-sm);margin-bottom:6px}
.campo .ayuda{font-size:var(--t-xs);color:var(--tinta-tenue);margin-top:4px}
/* 16px NO es un capricho de tamaño: bajo esa cifra Safari de iOS hace zoom
   solo al enfocar el campo, deja la página corrida y el visitante tiene que
   pellizcar para volver. Con --t-base (15px) el formulario de publicar hacía
   eso en sus veintidós campos, uno por uno. La diferencia de un píxel no se
   nota; el zoom sí. */
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px var(--e-3);border:2px solid var(--contorno-suave);
  border-radius:var(--r-sm);background:var(--fondo);color:var(--tinta);
  font:16px/1.4 var(--fuente-ui);transition:var(--rapido);
}
/* Los nativos de iOS y Android dibujan `date` y `time` con su propio alto y
   quedan más bajos que el resto. Se listan los tipos uno por uno a propósito:
   un `.campo input` a secas también le pondría 46px de alto a los radios que
   agrega.html esconde con height:0 para dibujar sus propias pastillas, y los
   haría reaparecer. */
.campo input:not([type]),.campo input[type="text"],.campo input[type="url"],
.campo input[type="email"],.campo input[type="tel"],.campo input[type="number"],
.campo input[type="date"],.campo input[type="time"],.campo select{min-height:46px}
/* La casilla de "es gratis" medía 19px. Es el único control del formulario
   que se toca sin apuntar a un texto, así que necesita área propia. */
.campo input[type="checkbox"]{width:24px;height:24px;accent-color:var(--acento);flex:none}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--acento);outline:none;box-shadow:0 0 0 3px rgba(232,68,46,.14)
}
.campo textarea{min-height:110px;resize:vertical}
.campo.error input,.campo.error textarea,.campo.error select{border-color:var(--acento)}
.campo .mensaje-error{color:var(--acento);font-size:var(--t-xs);margin-top:4px;font-weight:600}

/* ---------- 7b. COMPARTIR ---------- */
.compartir{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.compartir-titulo{
  font-size:var(--t-xs);font-weight:700;color:var(--tinta-tenue);
  text-transform:uppercase;letter-spacing:.06em;
}
.compartir-botones{display:flex;gap:var(--e-2);flex-wrap:wrap}
.red{
  width:44px;height:44px;border-radius:var(--r-pill);cursor:pointer;
  border:2px solid var(--contorno);background:var(--fondo-elevado);color:var(--tinta-suave);
  box-shadow:var(--repisa-1);display:grid;place-items:center;transition:var(--rapido);
}
.red:active{transform:translateY(3px);box-shadow:none}
.red:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.red.copiado{background:var(--gratis);border-color:var(--gratis);color:#fff}
/* El corte entre compartir y agendar: los cinco de la izquierda mandan el
   panorama a otra persona, el de la derecha lo guarda para uno. Es la misma
   línea dura de `.separa-chips`, sin desenfoque. */
.compartir-corte{
  flex:none;width:2px;align-self:stretch;margin:3px 2px;
  background:var(--borde-fuerte);border-radius:2px;
}
/* Agendar es el único con texto, así que deja de ser un círculo. El alto se
   mantiene en 44 para no romper la fila ni el área táctil. */
.red.con-texto{
  width:auto;gap:7px;padding:0 15px 0 12px;border-radius:var(--r-pill);
  grid-auto-flow:column;font:800 var(--t-sm)/1 var(--fuente-ui);
}

/* ---------- 8. CONTENEDORES ---------- */
/* El `max()` de los costados es para el teléfono acostado: si el notch pide
   más que los 20px de siempre, manda el notch; si no, no pasa nada. */
.contenido{
  max-width:760px;margin:0 auto;
  padding:var(--e-8) max(var(--e-5),env(safe-area-inset-right))
          var(--e-12) max(var(--e-5),env(safe-area-inset-left));
}
.panel{background:var(--fondo-elevado);border:2.5px solid var(--contorno);border-radius:var(--r-lg);
  padding:var(--e-6);box-shadow:var(--repisa-2)}
.vacio{padding:var(--e-10) var(--e-5);text-align:center;color:var(--tinta-suave)}
/* Los enlaces sueltos dentro de un párrafo de pie quedaban en 17px de alto.
   `inline-block` con relleno vertical les da área sin correr la línea. */
.pie a{display:inline-block;padding:12px 4px;margin:-12px 0}
/* Sin opacidad: el animal dormido ya dice "nada"; a medio tono parecía enfermo. */
.vacio svg{width:78px;height:78px;margin:0 auto var(--e-3)}

/* Etiqueta de mascota */
.mascota-nombre{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);
  font-weight:700;color:var(--tinta-tenue);text-transform:uppercase;letter-spacing:.05em;
}

/* ---------- LA CORDILLERA ----------
   El SVG lo arma `cordillera()` en loica.js; acá va solo cómo se para en la
   página, para que todas la posicionen igual y ninguna la redefina. */
.cerros{position:absolute;inset:auto 0 0 0;width:100%;height:132px;pointer-events:none}
/* Cuando el contenedor YA es la franja (el paseo del hero, el remate) la
   cordillera lo llena entero; si no, es una banda al pie y el texto respira. */
.paseo .cerros,.remate .cerros{height:100%}
/* Banda de cierre: las páginas que no tienen hero igual terminan en cordillera,
   que es lo que las hace parecer del mismo sitio. */
.remate{position:relative;height:96px;margin-top:var(--e-10);overflow:hidden}
.remate .cerros{height:96px}
@media(max-width:600px){ .remate,.remate .cerros{height:74px} }

/* ---------- MASCOTAS: partes y tics ----------
   Los dibujos de loica.js traen grupos con clase (.p-ojos, .p-oreja, .p-cola,
   .p-ala, .p-acc…) y este bloque los mueve. Nada corre solo: los tics piden
   {anima:true} al dibujar, y las entradas la clase `entra` en el contenedor
   más --d (retardo) en cada animal. Cada animal tiene UN gesto sacado de su
   historia: el Cóndor asiente al beat, la Chinchilla mueve las orejas, el
   Chungungo trota, el Quiltro no para la cola. Ciclos de 3 a 5 segundos. */
.masc{overflow:visible}
.masc [class^="p-"],.masc [class*=" p-"]{transform-box:fill-box;transform-origin:50% 50%}
/* --- Tics de reposo: solo con .anima --- */
.masc.anima .p-ojos{animation:m-parpadeo var(--parp,5.3s) ease-in-out var(--d,0s) infinite}
.masc.anima .p-dormido{animation:none}
@keyframes m-parpadeo{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
/* Loica: ladea la cabeza, como quien escucha tu pregunta */
.masc-loica.anima{transform-origin:50% 100%;animation:m-ladear 4.6s ease-in-out var(--d,0s) infinite}
@keyframes m-ladear{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}
/* Cóndor: asiente al beat, cuatro golpes y descansa */
.masc-condor.anima .p-cabeza{transform-origin:50% 100%;animation:m-beat 3.6s linear var(--d,0s) infinite}
@keyframes m-beat{0%,8%,16%,24%,32%,100%{transform:translateY(0)}4%,12%,20%,28%{transform:translateY(.9px)}}
/* Culpeo: el destello cruza los lentes; una oreja se mueve */
.masc-culpeo.anima .p-brillo{animation:m-destello 5.4s ease-in-out var(--d,0s) infinite}
@keyframes m-destello{0%,80%,100%{transform:translateX(0);opacity:.9}88%{transform:translateX(1.6px);opacity:.2}}
.masc-culpeo.anima .p-oreja-d{transform-origin:50% 100%;animation:m-oreja 5.4s ease-in-out var(--d,0s) infinite}
/* Chinchilla: orejas que escuchan, alternadas */
.masc-chinchilla.anima .p-oreja{transform-origin:50% 100%;animation:m-oreja 3.8s ease-in-out var(--d,0s) infinite}
.masc-chinchilla.anima .p-oreja-d{animation-delay:calc(var(--d,0s) + 1.9s)}
@keyframes m-oreja{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-9deg)}95%{transform:rotate(6deg)}}
/* Chincol: dos saltitos; los chincoles saltan, no caminan */
.masc-chincol.anima{animation:m-saltos 3.4s ease-in-out var(--d,0s) infinite}
@keyframes m-saltos{0%,24%,100%{transform:translateY(0)}6%,18%{transform:translateY(-7%)}12%{transform:translateY(0)}}
.masc-chincol.anima .p-lapiz{transform-origin:20% 80%;animation:m-lapiz 3.4s ease-in-out var(--d,0s) infinite}
@keyframes m-lapiz{0%,24%,100%{transform:rotate(0)}8%{transform:rotate(-6deg)}}
/* Pudú: sacude una oreja, mira */
.masc-pudu.anima .p-oreja-i{transform-origin:80% 90%;animation:m-oreja 4.4s ease-in-out var(--d,0s) infinite}
/* Degú: la etiqueta cuelga y se mece */
.masc-degu.anima .p-etiqueta{transform-origin:30% 0%;animation:m-pendulo 2.9s ease-in-out var(--d,0s) infinite}
@keyframes m-pendulo{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-7deg)}}
.masc-degu.anima .p-nariz{animation:m-nariz 2.9s ease-in-out var(--d,0s) infinite}
@keyframes m-nariz{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.25,.8)}86%{transform:scale(1)}}
/* Guarén: mordisquea la tarjeta; la cola barre */
.masc-guaren.anima .p-tarjeta{transform-origin:50% 20%;animation:m-mordisco 1.7s ease-in-out var(--d,0s) infinite}
@keyframes m-mordisco{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-8deg)}}
.masc-guaren.anima .p-cola{transform-origin:0% 80%;animation:m-cola-lenta 3.2s ease-in-out var(--d,0s) infinite}
@keyframes m-cola-lenta{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
/* Chungungo: trota en el lugar, sudando */
.masc-chungungo.anima{animation:m-trote .36s ease-in-out var(--d,0s) infinite alternate}
@keyframes m-trote{from{transform:translateY(0)}to{transform:translateY(-4%)}}
.masc-chungungo.anima .p-sudor{animation:m-sudor 1.4s ease-out var(--d,0s) infinite}
@keyframes m-sudor{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-3px);opacity:0}}
/* Pingüino: asiente en los momentos correctos; la borla se mece */
.masc-pinguino.anima{transform-origin:50% 100%;animation:m-asentir 5.2s ease-in-out var(--d,0s) infinite}
@keyframes m-asentir{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(6deg)}76%{transform:rotate(0)}84%{transform:rotate(5deg)}}
.masc-pinguino.anima .p-borla{transform-origin:0% 0%;animation:m-pendulo 3.4s ease-in-out var(--d,0s) infinite}
/* Quiltro: cola que no para, lengua que jadea */
.masc-quiltro.anima .p-cola{transform-origin:0% 90%;animation:m-colita .32s ease-in-out var(--d,0s) infinite alternate}
@keyframes m-colita{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}
.masc-quiltro.anima .p-lengua{transform-origin:50% 0%;animation:m-jadeo .55s ease-in-out var(--d,0s) infinite alternate}
@keyframes m-jadeo{from{transform:scaleY(.78)}to{transform:scaleY(1.08)}}
/* Aves en vuelo: aleteo en dos cuadros, corte seco = dibujado, no interpolado */
.masc.anima[data-pose="volando"] .p-ala,.masc.anima[data-pose="celebrando"] .p-ala{animation:m-aleteo .22s steps(1) var(--d,0s) infinite}
.masc.anima .p-ala-i{transform-origin:100% 100%}.masc.anima .p-ala-d{transform-origin:0% 100%}
@keyframes m-aleteo{0%,49%{transform:rotate(0)}50%,100%{transform:rotate(var(--aleteo,14deg))}}
.masc.anima .p-ala-i{--aleteo:-14deg}
/* --- Entradas: una por animal, sacada de su historia. backwards = arranca escondido --- */
.entra .masc{animation-fill-mode:backwards}
.entra .masc-loica{animation:m-vuelo-llega 1.1s cubic-bezier(.25,0,.35,1) var(--d,0s) backwards}
@keyframes m-vuelo-llega{from{transform:translate(-160px,60px) rotate(-12deg)}to{transform:none}}
.entra .masc-condor{animation:m-planeo 1.2s cubic-bezier(.2,0,.2,1) var(--d,0s) backwards}
@keyframes m-planeo{from{transform:translate(60px,-140px) rotate(-22deg)}70%{transform:translate(4px,-6px) rotate(-4deg)}to{transform:none}}
.entra .masc-culpeo{animation:m-noche .9s ease-out var(--d,0s) backwards}
@keyframes m-noche{from{opacity:0;transform:scale(.86)}60%{opacity:1}to{transform:none}}
.entra .masc-chinchilla{animation:m-tarde .5s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .9s) backwards}
@keyframes m-tarde{from{transform:scale(0) rotate(-20deg)}to{transform:none}}
.entra .masc-chincol{animation:m-saltos-entra 1s ease-out var(--d,0s) backwards}
@keyframes m-saltos-entra{0%{transform:translate(-110px,0)}17%{transform:translate(-90px,-22px)}34%{transform:translate(-66px,0)}51%{transform:translate(-44px,-18px)}68%{transform:translate(-22px,0)}85%{transform:translate(-8px,-10px)}100%{transform:none}}
.entra .masc-pudu{animation:m-asoma .8s cubic-bezier(.34,1.4,.64,1) var(--d,0s) backwards}
@keyframes m-asoma{from{transform:translateY(60%) scale(.7);opacity:0}40%{opacity:1}to{transform:none}}
.entra .masc-degu{animation:m-tierra .7s cubic-bezier(.34,1.56,.64,1) var(--d,0s) backwards}
@keyframes m-tierra{from{transform:translateY(70%);opacity:0}30%{opacity:1}to{transform:none}}
.entra .masc-guaren{animation:m-muralla .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
@keyframes m-muralla{from{transform:translate(180px,6px)}to{transform:none}}
.entra .masc-chungungo{animation:m-trote-entra 1.1s linear var(--d,0s) backwards}
@keyframes m-trote-entra{0%{transform:translate(-220px,0)}10%{transform:translate(-198px,-6px)}20%{transform:translate(-176px,0)}30%{transform:translate(-154px,-6px)}40%{transform:translate(-132px,0)}50%{transform:translate(-110px,-6px)}60%{transform:translate(-88px,0)}70%{transform:translate(-66px,-6px)}80%{transform:translate(-44px,0)}90%{transform:translate(-22px,-6px)}100%{transform:none}}
.entra .masc-pinguino{animation:m-pasitos 1.3s ease-out var(--d,0s) backwards}
@keyframes m-pasitos{0%{transform:translateX(150px) rotate(7deg)}12%{transform:translateX(132px) rotate(-7deg)}24%{transform:translateX(114px) rotate(7deg)}36%{transform:translateX(96px) rotate(-7deg)}48%{transform:translateX(78px) rotate(7deg)}60%{transform:translateX(60px) rotate(-7deg)}72%{transform:translateX(42px) rotate(7deg)}84%{transform:translateX(22px) rotate(-5deg)}100%{transform:none}}
/* El Quiltro no entra: ya estaba. Solo se sacude cuando llegan los demás. */
.entra .masc-quiltro{animation:m-sacudida .6s ease-in-out calc(var(--d,0s) + .2s) backwards}
@keyframes m-sacudida{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
/* Reacciones: celebra (un brinco con rebote) y se duerme (se hunde) */
.masc.celebra{animation:m-celebra .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes m-celebra{0%{transform:none}40%{transform:translateY(-14%) rotate(-6deg)}70%{transform:translateY(0) rotate(4deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .masc,.masc *{animation:none!important}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}