/* =========================================================================
   Concurso de Disfraces — Lamarque
   La direccion es el flyer: naranja calido, atmosfera templada, tinta oscura.
   El flyer pone texto CLARO sobre naranja (2.30:1, ilegible en celular); aqui
   se conserva su naranja pero la tinta va oscura: 6.00:1 y pasa AA completo.
   ========================================================================= */

/* Eagle Lake: lettering antiguo, SOLO para titulazos. Es la voz del flyer.
   Bodoni Moda: la didone que comparte genero con el wordmark de Lamarque; es
   la voz de la marca y carga todo lo demas. Inter hace el trabajo callado.
   Autoalojadas: Google Fonts filtraria la IP de cada colaborador a un tercero,
   y el aviso de privacidad promete que no. */
@font-face{font-family:Young;font-weight:400;font-display:swap;
  src:url(fuentes/young-serif.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:Bodoni;font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fuentes/bodoni-moda.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:Bodoni;font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fuentes/bodoni-moda-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:InterVar;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fuentes/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}

:root{
  /* Medidos del poster oficial. Ratios en docs/MARCA.md. */
  --calabaza:#D37A3B; --terracota:#B27042; --corteza:#915933;
  --tumba:#7C4426;    --hueso:#E4DAD1;     --noche:#0D1016;

  --piso:var(--noche);
  --superficie:#1A1E25;     /* bloque solido, sin borde ni sombra */
  --tinta:var(--hueso);     /* sobre el collage con velo plano */
  --tenue:#A99C90;          /* tintado del hueso, nunca gris neutro */
  --filo:rgba(13,16,22,.16);
  --oscuro:var(--noche);

  /* Movimiento medido en squareup.com y zasshi.mx: 0.3s domina en ambos. */
  --rapido:150ms; --normal:300ms; --lento:1s;
  --salida:cubic-bezier(.16,1,.3,1);

  --ancho:min(1180px,100% - 2.5rem);
  --radio:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Dos naturalezas, como en soporte: el collage vive SOLO en los momentos de
   cartel (portada, antes de abrir, espera, podio). Las pantallas de trabajo
   —identificarse, subir foto, ver la galeria, votar— van sobre crema limpia.
   Mezclarlas fue el error: el texto peleaba con las fotos y nada se leia. */
body{
  margin:0; color:var(--tinta); background:var(--piso);
  font:400 16px/1.6 InterVar,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-synthesis:none; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100svh;
}
/* Atmosfera templada: brillos naranjas mas claros, muy difusos. Es lo que da
   el aire del flyer sin meter una sola imagen. */
/* El collage de sucursales de soporte-v2, revirado de azul petroleo a naranja
   (bin/tenir_collage.py). Velo leve como el de soporte (.34): la foto se lee.
   El contraste del texto NO lo da el velo, lo da el panel crema de abajo. */
body::before{
  content:"";position:fixed;left:0;right:0;top:0;z-index:-2;pointer-events:none;
  /* 100lvh y no inset:0: en Safari de iOS la capa fija no sigue a la barra
     del navegador y dejaba una franja oscura abajo. lvh es el alto mayor. */
  height:100lvh;min-height:100%;
  background:url(collage-v-1200.jpg) center/cover no-repeat;
}
@media(min-width:760px){body::before{background-image:url(collage-2200.jpg)}}

/* Grano fino: sin esto el degradado se ve plano y sintetico, que es justo lo
   que delata una pagina generada. Con grano se lee como impreso. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Superficies del navegador: lo que no dibujamos tambien es diseno ---- */
::selection{background:var(--noche);color:var(--hueso)}
/* Barra discreta: un gris cálido translúcido, no el naranja de marca. El
   acento se gasta en lo que se toca, no en el cromo del navegador. */
:root{scrollbar-color:rgba(228,218,209,.22) transparent;scrollbar-width:thin;
  accent-color:var(--calabaza);caret-color:var(--calabaza)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(228,218,209,.22);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(228,218,209,.38)}
:focus-visible{outline:2px solid var(--noche);outline-offset:3px;border-radius:5px}
:where(a){color:var(--tumba);text-decoration-thickness:1px;text-underline-offset:.22em}
img{max-width:100%;display:block}

/* ------------------------------- tipografia ----------------------------- */
h1,h2,h3{font-family:Young,Bodoni,'Times New Roman',serif;font-weight:900;line-height:.96;
  letter-spacing:-.028em;text-wrap:balance;margin:0}
h1{font-size:clamp(3rem,13vw,6rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,5vw,2.7rem);letter-spacing:-.022em}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
p{margin:0 0 1rem;max-width:68ch}
.sub{font-size:clamp(1rem,2.6vw,1.2rem);color:var(--tenue);line-height:1.45}
.nota{font-size:.84rem;color:var(--tenue);line-height:1.5}
.quien{font-size:.92rem;color:var(--tinta);margin:.15rem 0 0}
.depto{font-size:.72rem;color:var(--tumba);letter-spacing:.1em;text-transform:uppercase;
  margin:.35rem 0 0;font-weight:600}

/* --------------------------------- chrome -------------------------------- */
.marca{padding:1.8rem 0 .3rem;text-align:center}
.marca img{width:148px;margin:0 auto;opacity:.86}
main{width:var(--ancho);margin:0 auto;padding-bottom:5rem}
footer{width:var(--ancho);margin:0 auto;
  padding:2.5rem 0 calc(3rem + env(safe-area-inset-bottom));border-top:0}
footer a{font-size:.85rem;color:var(--hueso);font-weight:500;text-decoration:none}
footer a:hover{color:var(--calabaza)}
.sesion{width:var(--ancho);margin:0 auto .4rem;display:flex;gap:.9rem;align-items:center;
  justify-content:flex-end;font-size:.76rem;color:var(--tenue);font-weight:500}
.sesion .salir{color:var(--tenue);text-decoration:none;border-bottom:0}
.sesion .salir:hover{color:var(--noche);border-color:var(--noche)}

/* ------------------------------ formularios ------------------------------ */
label{display:block;font-size:.95rem;color:var(--hueso);margin:1.4rem 0 .55rem;font-weight:500}
input[type=text],input:not([type]),input[type=file],textarea{
  width:100%;padding:1rem 1.1rem;background:var(--superficie);color:var(--tinta);
  border:0;border-radius:var(--radio);font:inherit;
  transition:border-color var(--normal) var(--salida),box-shadow var(--normal) var(--salida);
}
input::placeholder,textarea::placeholder{color:#9A8878}
input:focus,textarea:focus{border-color:var(--noche);outline:none}
textarea{resize:vertical;min-height:5rem}
input[type=file]{padding:.85rem;color:var(--tenue);font-size:.88rem}
input[type=file]::file-selector-button{margin-right:.9rem;padding:.6rem 1.05rem;border:0;
  border-radius:10px;cursor:pointer;background:var(--noche);color:var(--hueso);
  font:inherit;font-weight:600;transition:background var(--rapido) var(--salida)}
input[type=file]::file-selector-button:hover{background:var(--tumba)}

button{font:inherit;cursor:pointer;border:0;border-radius:99px;
  transition:transform var(--rapido) var(--salida),background var(--rapido) var(--salida),
             box-shadow var(--normal) var(--salida)}
button:active{transform:scale(.975)}
button[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.primario{width:100%;margin-top:1.6rem;padding:1.1rem 1.6rem;font-weight:700;font-size:1rem;
  background:var(--noche);color:var(--hueso)}
.primario:hover{background:#1C2430}
.secundario{padding:.78rem 1.4rem;font-weight:600;font-size:.9rem;background:transparent;
  color:var(--noche);border:0}
.secundario:hover{background:var(--noche);color:var(--hueso)}

.aviso{padding:.95rem 1.15rem;border-radius:var(--radio);font-size:.9rem;margin:1.2rem 0;
  max-width:none;font-weight:500}
.aviso.error{background:#FBE4DC;color:#7A2410;border:0}
.aviso.ok{background:#DDEDDF;color:#18502C;border:0}

/* ─── Portada, CALCADA del prototipo de Claude Design ─────────────────────
   Los valores son los del .dc.html, no una reinterpretacion: 76px/.9 en el
   titulazo, 12px con .32em arriba, 19px italica en el premio, campo de 17px
   con radio 14 y boton calabaza. */
.marca{padding:1.4rem 0 .2rem}
.marca img{width:min(200px,52vw)}
body.portada main,body.previa main{max-width:390px;text-align:center}

section.portada{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.2rem 1rem .6rem;gap:0}
section.portada .chico{font:700 12px InterVar,sans-serif;letter-spacing:.32em;
  text-transform:uppercase;color:var(--hueso)}
section.portada .grandote{margin:10px 0 0;font:400 clamp(58px,19vw,76px)/.9 Young,serif;
  letter-spacing:-.03em;color:#fff}
section.portada .premio{margin:14px 0 0;font:italic 500 19px/1.3 Bodoni,serif;color:#fff}
section.portada .nota{margin-top:1rem;color:var(--hueso)}
section.portada .ilustracion{width:min(290px,84%);height:auto;margin:30px auto 0;display:block;
  /* Centrado ÓPTICO, no geométrico. El recuadro está centrado al pixel, pero
     el centro de gravedad del dibujo (medido por peso de alfa) cae 14.6px a
     la derecha sobre un lienzo de 800 = 1.8%. A simple vista son 4.5px. */
  transform:translateX(-1.8%)}

.accede{width:100%;max-width:330px;margin:36px auto 0;display:flex;flex-direction:column;gap:10px}
.accede label{font:600 11.5px InterVar,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hueso);margin:0;text-align:center}
.accede input{width:100%;padding:17px 18px;background:#fff;color:var(--noche);border:0;
  border-radius:14px;font:500 17px InterVar,sans-serif;outline:none}
.accede .primario{width:100%;margin:0;padding:17px;border-radius:99px;
  background:var(--calabaza);color:var(--noche);font:700 16px InterVar,sans-serif}
.accede .primario:hover{background:#E08942}
.accede .aviso{margin:0;text-align:left}
/* Iba en --tenue y sobre la foto quedaba casi invisible. */
.consiente{display:block;margin-top:.35rem;text-align:center;
  font:400 11.5px InterVar,sans-serif;color:var(--hueso);opacity:.78;
  text-decoration:none;line-height:1.5}
.consiente:hover{opacity:1}

/* ─── Entrada escalonada: los cuatro movimientos que Square nombra en sus
   keyframes. Exponencial de salida, 0.3s de base. ───────────────────────── */
@media(prefers-reduced-motion:no-preference){
  .marca img,section.portada .chico,section.portada .grandote,section.portada .premio,
  section.portada .nota,.accede,section.portada .ilustracion{opacity:0;animation-fill-mode:forwards}
  .marca img            {animation:desdeArriba   .85s var(--salida) .05s forwards}
  section.portada .chico       {animation:desdeIzq      .75s var(--salida) .30s forwards}
  section.portada .grandote    {animation:sube         1.05s var(--salida) .40s forwards}
  section.portada .premio      {animation:aparecer      .80s var(--salida) .72s forwards}
  section.portada .nota        {animation:aparecer      .80s var(--salida) .80s forwards}
  .accede               {animation:haciaFrente   .90s var(--salida) .86s forwards}
  /* Keyframe propio: 'sube' acaba en transform:none y borraba el ajuste optico. */
  section.portada .ilustracion {animation:subeOptico   1.10s var(--salida) 1.0s forwards}
}
@keyframes desdeArriba {from{opacity:0;transform:translateY(-26px)} to{opacity:1;transform:none}}
@keyframes desdeIzq    {from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:none}}
@keyframes sube        {from{opacity:0;transform:translateY(44px) scale(.94)} to{opacity:1;transform:none}}
@keyframes aparecer    {from{opacity:0} to{opacity:1}}
@keyframes haciaFrente {from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none}}
@keyframes subeOptico  {from{opacity:0;transform:translate(-1.8%,44px) scale(.94)}
                        to{opacity:1;transform:translateX(-1.8%)}}}

/* ============ Revelado por scroll (ui-ux-pro-max, tier Standard) ===========
   Stagger de rejilla: opacity 0 -> scale .92 / y 16 / 400ms / back.out.
   El retardo por pieza es .045s y no .06: la guia advierte que arriba de 10
   items un stagger grande se vuelve lento, y aqui son 12 disfraces.
   Sin libreria: una variable --i por tarjeta y un IntersectionObserver. */
.rejilla .disfraz{opacity:0;transform:translateY(16px) scale(.94)}
.rejilla.revelada .disfraz{
  opacity:1;transform:none;
  transition:opacity .4s cubic-bezier(.34,1.3,.5,1) calc(var(--i,0) * .045s),
             transform .4s cubic-bezier(.34,1.3,.5,1) calc(var(--i,0) * .045s);
}

/* ---- Podio: tier Complex, expo.out, revelado 3º -> 2º -> 1º --------------
   Es el unico momento del concurso que merece drama, y por eso es el unico
   sitio con recorrido largo y tiempos de 600-700ms. */
.puestos .puesto{opacity:0;transform:translateY(54px) scale(.93)}
.puestos.revelada .puesto{opacity:1;transform:none;
  transition:opacity .65s cubic-bezier(.16,1,.3,1) var(--d),
             transform .7s  cubic-bezier(.16,1,.3,1) var(--d)}
.puestos.revelada .p3{--d:0s}
.puestos.revelada .p2{--d:.34s}
.puestos.revelada .p1{--d:.72s}
.puestos.revelada .p1{animation:coronar .9s cubic-bezier(.16,1,.3,1) 1.3s backwards}
@keyframes coronar{
  from{}
  60% {}
  to  {}
}

@media(prefers-reduced-motion:reduce){
  .rejilla .disfraz,.puestos .puesto{opacity:1!important;transform:none!important}
}

/* ═══════════════ PANTALLAS DE TRABAJO (sobre crema) ═══════════════════════
   Aqui el collage NO aparece. Son pantallas para hacer algo: identificarse,
   subir una foto, elegir un disfraz. Fondo calmado, tinta oscura, 13.8:1. */

/* ----------------------- identidad / candidatos -------------------------- */
body.entrada main{max-width:470px;padding-top:.3rem}
body.entrada h1{font-size:clamp(2.1rem,7vw,3rem);text-align:center;margin-bottom:.5rem}
body.entrada .sub{text-align:center;margin:0 auto 1.6rem}

.candidato{margin:.85rem 0}
.candidato button{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1rem;padding:1.1rem 1.2rem;border-radius:var(--radio);text-align:left;
  background:var(--superficie);color:var(--tinta);border:0;
}
.candidato button::before{content:"";width:40px;height:40px;border-radius:50%;
  background:rgba(13,16,22,.56);width:9px;height:9px;
  border-right:2px solid var(--tumba);border-top:2px solid var(--tumba);
  transform:rotate(45deg);transition:transform var(--rapido) var(--salida)}
.candidato button:hover{border-color:var(--tumba)}
.candidato button:hover::after{transform:rotate(45deg) translate(3px,-3px)}
.candidato strong{display:block;font-size:1.05rem;font-weight:650;line-height:1.25}
/* En su propio renglon: antes salia pegado al nombre, como volcado de BD. */
.candidato span{display:block;margin-top:.22rem;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tumba);font-weight:600}
a.volver{display:block;width:fit-content;margin:1.6rem auto 0;font-size:.86rem;
  color:var(--tumba);text-decoration:none;border-bottom:0}
a.volver:hover{border-color:var(--tumba)}

/* ------------------------ inscripcion / registro ------------------------- */
body.inscripcion main,body.registro main{max-width:520px}
body.inscripcion h1,body.registro h1{font-size:clamp(2rem,7vw,2.8rem);margin-bottom:.4rem}

/* ------------------------- banda de la votacion -------------------------- */
.banda{
  display:flex;flex-direction:column;gap:.25rem;margin:.4rem 0 1.8rem;
  padding:1.15rem 1.3rem;border-radius:var(--radio);background:var(--superficie);
  border:0;border-left:0;
}
.bandaVoto{font-family:Young,serif;font-size:1.3rem;letter-spacing:-.02em;
  margin:0;color:var(--tinta);line-height:1.15}
.bandaVoto strong{color:var(--tumba);font-weight:400}
.bandaNota{font-size:.86rem;color:var(--tumba);margin:.35rem 0 0}
.bandaNota b{color:var(--tinta);font-weight:650;font-variant-numeric:tabular-nums}

/* --------------------------------- filtros ------------------------------- */
.galeria{margin-top:2.2rem}
.galeria h2{margin-bottom:1.2rem;font-size:clamp(1.4rem,4vw,2rem)}
.galeria h2 span{font-family:InterVar,sans-serif;font-size:.78rem;font-weight:700;
  color:var(--calabaza);vertical-align:super;margin-left:.45rem;letter-spacing:0}
.filtros{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 1.3rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtros::-webkit-scrollbar{display:none}
.filtros a{flex:0 0 auto;padding:.52rem 1rem;border-radius:99px;font-size:.78rem;
  font-weight:600;text-decoration:none;white-space:nowrap;color:var(--tumba);
  background:var(--superficie);border:0;
  transition:color var(--rapido) var(--salida),border-color var(--rapido) var(--salida)}
.filtros a:hover{background:#262C36}
.filtros a.on{background:var(--calabaza);color:var(--noche)}
.filtros a span{opacity:.55;margin-left:.35rem}

/* ---------------------------- tarjeta de disfraz -------------------------
   El MARCO es de la marca; la FOTO va natural, sin un solo filtro encima.
   Es el disfraz de una persona, no una textura decorativa. */
/* El tope de 1fr hacia que con un filtro de 1-2 disfraces la tarjeta se
   estirara a todo lo ancho. Se acota la columna y se centra la fila. */
.rejilla{display:grid;gap:1rem;justify-content:center;
  grid-template-columns:repeat(auto-fill,minmax(148px,200px))}
@media(min-width:720px){.rejilla{gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,264px))}}
a.disfraz{text-decoration:none;color:inherit}
.disfraz{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--superficie);border:0;border-radius:var(--radio)}
.disfraz:hover{border-color:var(--tumba)}
.disfraz .foto{aspect-ratio:3/4;overflow:hidden;background:#E2D7CA}
.disfraz .foto img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--lento) var(--salida)}   /* sin filter: foto limpia */
.disfraz:hover .foto img{transform:scale(1.04)}
.disfraz .ficha{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;flex:1}
.disfraz h3{font-family:Young,serif;font-weight:400;font-size:1rem;line-height:1.15;
  letter-spacing:-.01em}
.disfraz .quien{font-size:.84rem;color:var(--tumba);margin-top:.3rem}
.disfraz .depto{font-size:.65rem}
.disfraz.esMiVoto{border-color:var(--calabaza)}
.sello{position:absolute;z-index:2;top:.65rem;left:.65rem;padding:.3rem .7rem;
  border-radius:99px;background:var(--calabaza);color:var(--noche);font-size:.66rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.tuyo{margin:.8rem 0 0;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tumba);font-weight:600}
.mio{margin-bottom:1.4rem}
.mio h2{font-size:.72rem;font-family:InterVar,sans-serif;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tumba);margin-bottom:.8rem}
.disfraz.grande .foto{aspect-ratio:4/5;max-height:58vh}

/* --------------------- vista dedicada de un disfraz ---------------------- */
.detalle{margin-top:.6rem}
.detalle .foto{border-radius:var(--radio);overflow:hidden;background:#E2D7CA;
  aspect-ratio:3/4;max-height:56vh;border:0}
.detalle .foto img{width:100%;height:100%;object-fit:cover}
.detalle .info{padding-top:1.5rem}
.detalle h1{font-size:clamp(2rem,7vw,3rem);margin-bottom:.4rem}
.quien.grande{font-size:1.05rem;color:var(--tumba)}
.tuyo.grande{margin-top:1.6rem;font-size:.84rem}
.yaEs{margin:1.6rem 0 .5rem;padding:1rem 1.2rem;border-radius:var(--radio);
  background:var(--superficie);border:0;color:var(--tumba);
  font-weight:650;font-size:.95rem}
@media(min-width:820px){
  .detalle{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .detalle .foto{max-height:none}
  .detalle .info{padding-top:.4rem}
  .detalle .primario{width:auto;min-width:250px}
}

/* ---------------------------- ya voto / reporte -------------------------- */
body.votacion .votado{max-width:560px}
.votado h1{font-size:clamp(2.2rem,7vw,3rem);margin-bottom:.5rem}
.votado strong{color:var(--tumba);font-weight:650}
.noFui{margin-top:1rem;padding-top:1.4rem;border-top:0}
.noFui summary{cursor:pointer;font-size:.85rem;color:var(--tumba);list-style:none;
  font-weight:600}
.noFui summary::-webkit-details-marker{display:none}
.noFui summary::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:99px;background:var(--calabaza);margin-right:.55rem;vertical-align:middle}
.noFui p{font-size:.88rem;color:var(--tumba);margin-top:.85rem}

/* --------------------------------- espera -------------------------------- */
.espera{padding-top:2rem;text-align:center}
.espera h1{color:#fff}
.espera .sub,.espera .nota{color:rgba(255,255,255,.82);margin-left:auto;margin-right:auto}
.calabaza{width:min(180px,50vw);aspect-ratio:1;margin:2.4rem auto 1.4rem;border-radius:50%;
  background:rgba(13,16,22,.56)}

/* --------------------------------- podio --------------------------------- */
.podio{text-align:center;padding:1rem 0}
.podio h1{color:#fff;
  font-size:clamp(2.8rem,12vw,5.5rem)}
.puestos{display:grid;gap:1.4rem;margin-top:2.2rem;text-align:left}
@media(min-width:760px){
  .puestos{grid-template-columns:repeat(3,1fr);align-items:end}
  .puesto.p1{order:2} .puesto.p2{order:1} .puesto.p3{order:3}
  .puesto.p1{transform:translateY(-1.4rem)}
  .puestos.revelada .puesto.p1{transform:translateY(-1.4rem)}
}
.puesto{background:var(--superficie);border:0;border-radius:var(--radio);
  overflow:hidden;padding-bottom:1.1rem}
.puesto .foto{aspect-ratio:3/4;overflow:hidden;background:#E2D7CA}
.puesto .foto img{width:100%;height:100%;object-fit:cover}
.medalla{margin:.9rem 1.1rem .1rem;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tumba);font-weight:700}
.puesto h2{font-family:Young,serif;font-weight:400;font-size:1.3rem;margin:.5rem 1.1rem .2rem}
.puesto .quien,.puesto .depto,.puesto .votos{margin-left:1.1rem;margin-right:1.1rem}
.puesto .votos{font-size:.8rem;color:var(--calabaza);font-weight:700;margin-top:.55rem;
  font-variant-numeric:tabular-nums}
.puesto.p1{border-color:var(--calabaza)}
.puesto.p1 .medalla{color:var(--calabaza)}

.mencion{margin-top:3.2rem;background:var(--superficie);border:0;
  border-radius:var(--radio);padding:1.4rem 1.5rem}
.mencion h2{font-size:1.2rem;margin-bottom:.5rem}
.mencion table{width:100%;border-collapse:collapse;font-size:.9rem}
.mencion th{text-align:left;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tumba);font-weight:700;padding:.6rem .4rem;border-bottom:0}
.mencion td{padding:.75rem .4rem;border-bottom:0;
  font-variant-numeric:tabular-nums}
.mencion td:first-child{font-weight:650}
.mencion tr:last-child td{border-bottom:0}
body.podio .galeria h2{color:#fff}


/* Respuesta al toque en TODO control, que es lo que pide el piso de taste:
   presionar, pasar el cursor y enfocar se sienten distintos. Solo transform
   y opacity, que no provocan recalculo de maquetado. */
button,.disfraz,.filtros a,.candidato button,a.volver{
  transition:transform var(--rapido) var(--salida),opacity var(--rapido) var(--salida),
             background var(--rapido) var(--salida),color var(--rapido) var(--salida);
}
button:active,.candidato button:active{transform:scale(.97)}
a.disfraz:active{transform:scale(.985)}
.filtros a:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){
  button:active,.candidato button:active,a.disfraz:active,.filtros a:active{transform:none}
}

/* ═══ Riel horizontal, CALCADO de prototipo/vistas/galeria.html ═══════════
   38px/.96 Young en el encabezado, flechas de 42px, chips de 42px de alto,
   paneles con radio 18 y rotulo de 21px subrayado. No es rejilla ni tarjeta:
   la pila de tres metadatos bajo cada miniatura era lo que lo hacia sentir
   app de comida. */
.tuVoto{display:flex;gap:12px;align-items:center;background:var(--noche);
  border-radius:16px;padding:13px 16px;margin:0 0 18px}
.tuVoto svg{flex:none}
.tuVoto div{flex:1;min-width:0}
.tuVoto .et{margin:0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue)}
.tuVoto .cual{margin:2px 0 0;font:400 19px/1.1 Young,serif;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.galeria{margin-top:14px}
.encabezado{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.encabezado h2{margin:0;font:400 clamp(30px,9vw,38px)/.96 Young,serif;
  letter-spacing:-.03em;color:#fff}
.encabezado .sub{margin:7px 0 0;font-size:13.5px;color:rgba(255,255,255,.8)}
.flechas{display:flex;gap:9px;flex:none}
.flecha{width:42px;height:42px;border-radius:50%;border:0;background:var(--noche);
  color:var(--hueso);display:grid;place-items:center;cursor:pointer;
  transition:background 150ms var(--salida),color 150ms var(--salida)}
.flecha:hover{background:var(--calabaza);color:var(--noche)}
.flecha[disabled]{opacity:.3;cursor:default}

.filtros{display:flex;gap:8px;overflow-x:auto;padding:16px 0 2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtros::-webkit-scrollbar{display:none}
.filtros a{flex:none;border:0;border-radius:99px;padding:9px 15px;min-height:42px;
  display:inline-flex;align-items:center;background:var(--noche);color:var(--hueso);
  font:600 13.5px InterVar,sans-serif;text-decoration:none;white-space:nowrap;
  transition:background 150ms var(--salida),color 150ms var(--salida)}
.filtros a:hover{background:#262C36}
.filtros a.on{background:var(--calabaza);color:var(--noche)}
.filtros a span{font-size:12px;opacity:.6;margin-left:6px}

.riel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:18px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* Sangra a los bordes: el panel siguiente tiene que asomar. */
  margin-inline:calc(50% - 50vw);padding-inline:max(1.25rem,calc(50vw - 50%))}
.riel::-webkit-scrollbar{display:none}
.panel{flex:0 0 76%;max-width:330px;scroll-snap-align:center;display:flex;
  flex-direction:column;gap:12px;text-align:left;text-decoration:none;color:var(--hueso)}
.panel .foto{position:relative;aspect-ratio:3/4;width:100%;border-radius:18px;
  overflow:hidden;background:var(--superficie)}
.panel .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--lento) var(--salida)}   /* foto limpia, sin filtro */
.panel:hover .foto img{transform:scale(1.03)}
.panel .rotulo{padding:0 2px}
.panel .titulo{display:inline-block;font:400 21px/1.1 Young,serif;letter-spacing:-.015em;
  color:#fff;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.55)}
.panel .quien{display:block;margin:8px 0 0;font-size:13px;color:rgba(255,255,255,.76)}
.panel.esMiVoto .foto{outline:2px solid var(--calabaza);outline-offset:-2px}
.sello{position:absolute;z-index:2;left:12px;top:12px;background:var(--calabaza);
  color:var(--noche);border-radius:99px;padding:6px 12px;font:700 11.5px InterVar,sans-serif}
@media(min-width:900px){
  body.votacion main{max-width:1180px}
  .panel{flex:0 0 300px;max-width:300px}
  .encabezado h2{font-size:44px}
}

/* ------------------------------- horarios -------------------------------- */
.horarios{background:var(--superficie);border-radius:18px;padding:.5rem 1.5rem;
  margin:1.6rem auto 0;text-align:left;max-width:420px;width:100%}
.horarios .fila{display:flex;justify-content:space-between;align-items:baseline;
  gap:2rem;padding:1.1rem 0;color:var(--hueso)}
.horarios .fila.paso{color:var(--calabaza)}
.horarios .que{font-family:Young,serif;font-size:1.25rem;display:block;line-height:1.15}
.horarios .estado{display:block;margin-top:.3rem;font-size:.85rem;color:var(--tenue)}
.horarios b{font-weight:600;font-size:1.15rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pagHorarios h1{font-size:clamp(2.2rem,9vw,3rem)}
.pagHorarios .sub{margin:.3rem 0 0}
.pagHorarios .horarios{margin-inline:0}
.pagHorarios .nota{margin-top:1.1rem;max-width:360px}

/* ------------------- iconos de sesión y aviso en el login ---------------- */
.sesion .icono{width:30px;height:30px;border-radius:50%;background:var(--superficie);
  color:var(--hueso);display:grid;place-items:center;text-decoration:none;flex:none}
.sesion .icono.acento{background:var(--calabaza);color:var(--noche)}
.sesion .icono:hover{background:var(--hueso);color:var(--noche)}
.consiente{display:block;margin-top:.9rem;text-align:center;font-size:.78rem;
  color:var(--tenue);text-decoration:none;line-height:1.5}
.consiente:hover{color:var(--hueso)}

/* ─── "¿Eres tú?", CALCADA de prototipo/vistas/eresTu.html ────────────────
   46px/.98 Young en el nombre, 12px con .14em naranja en la adscripción,
   botón calabaza de 17px y secundario de 15px sobre #1A1E25. Sin tarjeta,
   sin círculo de iniciales, sin flecha. */
body.eresTu main{max-width:390px}
.eresTu{min-height:62svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 24px}
.eresTu .pregunta{font:400 clamp(26px,8vw,34px)/1 Young,serif;letter-spacing:-.02em;
  color:var(--hueso);opacity:.75;margin:0 0 26px}
.identidad{width:100%;max-width:330px;margin:0}
.identidad h2{margin:0;font:400 clamp(34px,11vw,46px)/.98 Young,serif;
  letter-spacing:-.03em;color:#fff;text-wrap:balance}
.identidad h2.varios{font-size:clamp(26px,8vw,32px)}
.identidad .adscripcion{margin:16px 0 0;font:600 12px InterVar,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#fff}
.soyYo{width:100%;margin-top:44px;padding:17px;border:0;border-radius:99px;
  background:var(--calabaza);color:var(--noche);font:700 16px InterVar,sans-serif;
  cursor:pointer;display:flex;gap:10px;justify-content:center;align-items:center}
.soyYo:hover{background:#E08942}
.identidad + .identidad h2{margin-top:34px}
.identidad + .identidad .soyYo{margin-top:20px}
.noSoy{display:block;width:100%;max-width:330px;margin-top:10px;padding:15px;
  border-radius:99px;background:var(--superficie);color:var(--hueso);
  font:600 15px InterVar,sans-serif;text-decoration:none;text-align:center}
.noSoy:hover{background:#262C36;color:#fff}

/* ═══════════ ESCRITORIO ═══════════════════════════════════════════════════
   El prototipo es una maqueta de celular. Calcarla tal cual deja una columna
   de 390 px en medio de una pantalla de 1900 y todo lo demas vacio. En PC la
   composicion es otra: el titulazo crece de verdad y la ilustracion deja de
   ir debajo para ponerse al lado. */
@media(min-width:900px){
  body.portada main,body.previa main{max-width:1060px}
  .marca{padding:2.2rem 0 0}
  .marca img{width:230px}

  /* Dos celdas: el bloque de texto y la ilustracion. */
  section.portada{display:grid;grid-template-columns:1fr .9fr;align-items:center;
    gap:4rem;text-align:left;padding:1rem 0 3rem;min-height:auto}
  section.portada .texto{display:flex;flex-direction:column;align-items:flex-start}
  section.portada .chico{font-size:14px;letter-spacing:.34em}
  section.portada .grandote{font-size:clamp(92px,8vw,128px);margin-top:12px}
  section.portada .premio{font-size:24px;margin-top:16px}
  section.portada .nota{font-size:1rem;margin-top:1.1rem;max-width:34ch}
  .accede{margin:32px 0 0;max-width:380px;align-items:stretch}
  .accede label,.consiente{text-align:left}
  .horarios{margin:1.6rem 0 0}
  section.portada .ilustracion{width:100%;max-width:440px;margin:0;justify-self:center}

  body.eresTu main{max-width:760px}
  .eresTu{min-height:70svh}
  .eresTu .pregunta{font-size:40px;margin-bottom:34px}
  .identidad{max-width:520px}
  .identidad h2{font-size:clamp(56px,6vw,78px)}
  .identidad .adscripcion{font-size:14px;margin-top:20px}
  .soyYo,.noSoy{max-width:380px;margin-inline:auto}
  .soyYo{margin-top:52px;font-size:17px;padding:19px}
  .noSoy{font-size:16px;padding:17px}
}
@media(min-width:1500px){
  body.portada main,body.previa main{max-width:1240px}
  section.portada{gap:5rem}
  section.portada .grandote{font-size:clamp(128px,8.5vw,160px)}
  section.portada .ilustracion{max-width:520px}
}


/* ═══ Subir disfraz, CALCADA de prototipo/vistas/subir.html ═══════════════ */
body.subir main{max-width:430px}
.subir .caja{background:var(--noche);border-radius:22px;padding:24px 18px 20px;color:var(--hueso)}
.subir h2{margin:0 4px;font:400 clamp(28px,8vw,34px)/1 Young,serif;letter-spacing:-.025em;color:#fff}
.subir .sub{margin:8px 4px 18px;font-size:14px;color:var(--tenue)}
.zonaFoto{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  cursor:pointer;background:var(--superficie);border:1.5px dashed #B9A48E;margin:0}
.zonaFoto input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.zonaFoto .vacia{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;pointer-events:none}
.zonaFoto .circulo{width:76px;height:76px;border-radius:50%;background:var(--calabaza);
  color:var(--noche);display:grid;place-items:center}
.zonaFoto .tomar{font:700 16px InterVar,sans-serif;color:var(--hueso)}
.subir .et{display:block;margin:20px 4px 8px;font:600 11.5px InterVar,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.subir input[name=titulo]{width:100%;padding:16px 17px;background:var(--superficie);
  color:var(--hueso);border:0;border-radius:16px;font:500 16px InterVar,sans-serif;outline:none;
  transition:background var(--normal) var(--salida)}
.subir input[name=titulo]:focus{background:#232833}
.subir .primario{width:100%;margin-top:18px;padding:17px;border-radius:99px;
  background:var(--calabaza);color:var(--noche);font:700 16px InterVar,sans-serif}
.subir .aviso{margin:0 4px 14px}

/* ═══ Disfraz individual, CALCADA de prototipo/vistas/disfraz.html ════════ */
body.detalle main{max-width:430px}
.volverPill{display:inline-flex;gap:8px;align-items:center;background:var(--noche);
  color:var(--hueso);border-radius:99px;padding:10px 16px 10px 12px;min-height:44px;
  font:600 14px InterVar,sans-serif;text-decoration:none}
.volverPill:hover{background:var(--calabaza);color:var(--noche)}
.detalle .foto{margin-top:16px;position:relative;aspect-ratio:3/4;border-radius:22px;
  overflow:hidden;background:var(--superficie)}
.detalle .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detalle .info{padding:20px 2px 0}
.detalle h2{margin:0;font:400 clamp(30px,10vw,38px)/.98 Young,serif;letter-spacing:-.03em;
  color:#fff;text-wrap:balance}
.detalle .quien{margin:12px 0 0;font-size:15.5px;color:rgba(255,255,255,.88)}
.detalle .depto{margin:5px 0 0;font:600 11.5px InterVar,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--calabaza)}
.detalle .primario{width:100%;margin-top:26px;padding:18px;border-radius:99px;
  background:var(--calabaza);color:var(--noche);font:700 16.5px InterVar,sans-serif;
  display:flex;gap:10px;justify-content:center;align-items:center}
.btnInerte{width:100%;margin-top:26px;padding:18px;border-radius:99px;text-align:center;
  background:var(--superficie);color:#8A8378;font:700 16.5px InterVar,sans-serif}

/* ═══ Ya votaste, CALCADA de prototipo/vistas/votado.html ═════════════════ */
body.votado main{max-width:430px}
.votado{padding:30px 0 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.palomita{width:78px;height:78px;border-radius:50%;background:var(--calabaza);color:var(--noche);
  display:grid;place-items:center}
.votado h2{margin:18px 0 0;font:400 clamp(38px,13vw,48px)/1 Young,serif;letter-spacing:-.03em;color:#fff}
.miniFicha{margin-top:24px;width:100%;background:var(--noche);border-radius:20px;padding:10px;
  display:flex;gap:14px;align-items:center;text-align:left;color:var(--hueso)}
.miniFicha .mini{position:relative;flex:none;width:92px;aspect-ratio:3/4;border-radius:12px;
  overflow:hidden;background:var(--superficie)}
.miniFicha .mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.miniFicha .datos{display:flex;flex-direction:column;gap:4px;min-width:0}
.miniFicha .et{font:600 11px InterVar,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--calabaza)}
.miniFicha .cual{font:400 22px/1.05 Young,serif;letter-spacing:-.015em;color:#fff}
.miniFicha .dequien{font-size:13.5px;color:var(--tenue)}
.votado .hasta{margin:18px 0 0;font:italic 500 18px/1.35 Bodoni,serif;color:#fff}
.votado .primario{width:100%;margin-top:22px;padding:17px;border-radius:99px;
  background:var(--calabaza);color:var(--noche);font:700 16px InterVar,sans-serif;
  display:flex;gap:10px;justify-content:center;align-items:center;text-decoration:none}
.noFui{margin-top:18px;width:100%}
.noFui summary{cursor:pointer;list-style:none;color:rgba(255,255,255,.78);
  font:600 13.5px InterVar,sans-serif;text-decoration:underline;text-underline-offset:4px}
.noFui summary::-webkit-details-marker{display:none}
.noFui .dentro{margin-top:16px;text-align:left;background:var(--noche);border-radius:18px;padding:18px}
.noFui p{margin:0 0 12px;font-size:14px;color:var(--tenue);line-height:1.5}
.noFui textarea{width:100%;padding:13px 14px;background:var(--superficie);color:var(--hueso);
  border:0;border-radius:14px;font:400 15px InterVar,sans-serif;outline:none;resize:vertical}
.noFui .secundario{width:100%;margin-top:12px;padding:14px;border-radius:99px;
  background:var(--superficie);color:var(--hueso);font:600 15px InterVar,sans-serif;border:0}
.noFui .secundario:hover{background:#262C36}

/* ═══ Espera, CALCADA de prototipo/vistas/espera.html ═════════════════════ */
body.espera main{max-width:430px}
.espera{padding:70px 12px;display:flex;flex-direction:column;align-items:center;
  text-align:center;color:#fff}
.espera h2{margin:22px 0 0;font:400 clamp(34px,12vw,44px)/1 Young,serif;
  letter-spacing:-.025em;text-wrap:balance}
.espera .sub{margin:16px 0 0;font:italic 500 20px/1.35 Bodoni,serif;color:#fff}

/* ═══ Podio, CALCADA de prototipo/vistas/podio.html ═══════════════════════
   Con una corrección: el prototipo pone el departamento en naranja sobre la
   tarjeta naranja del primer lugar — 1.00:1, invisible. Todo el texto de esa
   tarjeta va en tinta noche, que da 6.00:1. */
body.podio main{max-width:430px}
.podio{padding:18px 0 10px}
.podio h1{margin:0 0 18px;text-align:center;font:400 clamp(42px,15vw,54px)/1 Young,serif;
  letter-spacing:-.03em;color:#fff}
.puesto .foto{position:relative;border-radius:14px;overflow:hidden;background:var(--superficie)}
.puesto .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.puesto.p1{background:var(--calabaza);border-radius:22px;padding:10px;color:var(--noche)}
.puesto.p1 .foto{aspect-ratio:4/5}
.puesto.p1 .corona{position:absolute;z-index:2;left:12px;top:12px;display:flex;gap:7px;
  align-items:center;background:var(--calabaza);color:var(--noche);border-radius:99px;
  padding:7px 13px;font:700 13px InterVar,sans-serif}
.puesto.p1 .datos{padding:16px 10px 10px;display:flex;justify-content:space-between;
  align-items:flex-end;gap:12px}
.puesto.p1 h2{margin:0;font:400 clamp(26px,8vw,30px)/1 Young,serif;letter-spacing:-.02em;
  color:var(--noche)}
.puesto.p1 .quien{margin:8px 0 0;font-size:14px;color:rgba(13,16,22,.78)}
.puesto.p1 .depto{margin:3px 0 0;font:600 10.5px InterVar,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(13,16,22,.68)}
.puesto.p1 .cuenta{flex:none;text-align:right}
.puesto.p1 .cuenta .n{display:block;font:400 34px/1 Young,serif;color:var(--noche)}
.puesto.p1 .cuenta .et{font-size:11px;color:rgba(13,16,22,.7)}

.segundos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.puesto.p2,.puesto.p3{background:var(--noche);border-radius:18px;padding:8px;color:var(--hueso)}
.puesto.p2 .foto,.puesto.p3 .foto{aspect-ratio:3/4;border-radius:12px}
.puesto .lugar{position:absolute;z-index:2;left:8px;top:8px;background:rgba(13,16,22,.9);
  color:var(--hueso);border-radius:99px;padding:5px 10px;font:700 11.5px InterVar,sans-serif}
.puesto.p2 .datos,.puesto.p3 .datos{padding:10px 6px 6px}
.puesto h3{margin:0;font:400 17px/1.1 Young,serif;text-wrap:balance;color:#fff}
.puesto.p2 .quien,.puesto.p3 .quien{margin:5px 0 0;font-size:12px;color:var(--tenue);line-height:1.3}
.puesto .votos{margin:6px 0 0;font:600 12px InterVar,sans-serif;color:var(--calabaza)}

.mencion{margin-top:22px;background:var(--noche);border-radius:20px;padding:20px 18px 12px;
  color:var(--hueso)}
.mencion h2{margin:0 0 6px;font:400 24px/1 Young,serif;color:#fff}
.mencion table{width:100%;border-collapse:collapse;font-size:14px}
.mencion th{text-align:left;font:600 10.5px InterVar,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--calabaza);padding:8px 0}
.mencion td{padding:11px 0;border-top:1px solid rgba(228,218,209,.1)}  /* taste-skill-ignore: tabla real */
.mencion td:first-child{font-weight:600}
.mencion .num{text-align:right;font-variant-numeric:tabular-nums}

/* Revelado 3º → 2º → 1º, con los tiempos del prototipo. */
@media(prefers-reduced-motion:no-preference){
  .puesto{opacity:0;animation-fill-mode:forwards}
  .puesto.p3{animation:subePodio .7s var(--salida) .5s forwards}
  .puesto.p2{animation:subePodio .7s var(--salida) 1.3s forwards}
  .puesto.p1{animation:subePodio1 1s var(--salida) 2.3s forwards}
  .mencion{opacity:0;animation:aparecer .6s ease 3.2s forwards}
}
@keyframes subePodio {from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none}}
@keyframes subePodio1{from{opacity:0;transform:translateY(40px) scale(.94)} to{opacity:1;transform:none}}

/* ═══ Aviso de privacidad ═════════════════════════════════════════════════ */
body.legal main{max-width:620px}
.legal{background:var(--noche);border-radius:22px;padding:28px 24px;color:var(--hueso)}
.legal h1{font:400 clamp(30px,9vw,38px)/1 Young,serif;letter-spacing:-.025em;color:#fff;margin:0}
.legal h2{margin:26px 0 0;font:600 11.5px InterVar,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--calabaza)}
.legal p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#C9BCB0;max-width:none}
.legal strong{color:var(--hueso);font-weight:650}
.legal a{color:var(--calabaza)}
.legal .fecha{margin-top:26px;font-size:12.5px;color:var(--tenue)}