@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Rubik:wght@400;500;600;700;800&display=swap');

/* ==========================================================
   SISTEMA VISUAL · Grito Altea 2026
   Fondo: papel crepé de piñata, en franjas con fleco.
   El color abre la página; el resto es crema.
   ========================================================== */
:root{
  --altea:#0b4f86;
  --altea-hondo:#06375e;
  --magenta:#d81e5b;
  --amarillo:#f5b301;
  --turquesa:#0aa5a0;
  --naranja:#f2622a;
  --verde:#0f9d58;
  --rojo:#d7263d;
  --morado:#6b3fa0;
  --crema:#fdf6e8;
  --crema-2:#f6e9d2;
  --tinta:#2a1c10;
  --tinta-suave:#2a1c10a0;
  --titulo:'Alfa Slab One', Georgia, serif;
  --texto:'Rubik', system-ui, -apple-system, sans-serif;
  --rapido:.18s;
  --medio:.4s;
  --curva:cubic-bezier(.22,1,.36,1);
  --radio:16px;
  --marco:3px solid var(--tinta);

}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--tinta);font-family:var(--texto);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--crema);
  background-image:url('assets/fondo-altea-suave.png?v=55');
  background-size:450px 450px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.02;margin:0}
h2{font-size:clamp(32px,5vw,62px)}
h3{font-size:clamp(19px,2vw,25px);line-height:1.15}
em{font-style:normal;color:var(--magenta)}

/* ---------- botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;
  background:var(--altea);color:#fff;border:var(--marco);border-radius:999px;
  cursor:pointer;font-family:var(--texto);font-weight:800;font-size:15px;
  padding:14px 28px;box-shadow:0 6px 0 var(--tinta);
  transition:transform var(--rapido) var(--curva),box-shadow var(--rapido) var(--curva)}
.btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--tinta)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--tinta)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 6px 0 var(--tinta)}
.btn-icono{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#ffffff28;font-size:15px;line-height:1;flex:0 0 auto}
.btn-chico{padding:10px 20px;font-size:14px;box-shadow:0 4px 0 var(--tinta)}
.btn-chico:hover{box-shadow:0 7px 0 var(--tinta)}
.btn-chico .btn-icono{width:24px;height:24px;font-size:13px}
.btn-grande{padding:17px 34px;font-size:17px}
.btn-amarillo{background:var(--amarillo);color:var(--tinta)}
.btn-amarillo .btn-icono{background:#2a1c1018}
.btn-lleno{width:100%;justify-content:center;margin-top:6px}
.btn-blanco{background:#fff;color:var(--altea)}
.btn-blanco .btn-icono{background:#0b4f8618}

/* ---------- encabezado ---------- */
.cabecera{position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:12px clamp(18px,4vw,54px);
  background:#fdf6e8f2;backdrop-filter:blur(10px);border-bottom:var(--marco)}
.cabecera .marca img{width:128px}
.cabecera nav{display:flex;gap:28px;font-size:14px;font-weight:700}
.cabecera nav a{position:relative;padding:4px 0}
.cabecera nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:0;
  border-radius:2px;background:var(--magenta);transition:width var(--medio) var(--curva)}
.cabecera nav a:hover::after{width:100%}

/* ---------- papel picado ---------- */
.picado{position:relative;z-index:12;height:clamp(110px,13vw,178px);
  margin-bottom:calc(-1 * clamp(34px,4.6vw,60px));pointer-events:none}
.picado svg{width:100%;height:100%;display:block;overflow:visible}
.picado .hilera-frente{animation:ondear 6.5s ease-in-out infinite;transform-origin:50% 0}
.picado .hilera-fondo{animation:ondear 8.4s ease-in-out infinite reverse;transform-origin:50% 0}
@keyframes ondear{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(4px) rotate(.3deg)}}

/* ---------- PORTADA con color ---------- */
.portada{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:36px;
  align-items:center;padding:clamp(48px,6vw,86px) clamp(18px,5vw,64px) clamp(58px,7vw,98px);
  background:var(--altea);color:#fff;border-bottom:var(--marco)}
.portada::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('assets/fondo-altea.png?v=55');background-size:450px 450px;
  filter:brightness(0) invert(1);opacity:.13}
.portada-texto{position:relative;z-index:2}
.lema-patrio{margin:0 0 26px;font-family:var(--titulo);
  font-size:clamp(16px,2.1vw,24px);color:var(--amarillo);line-height:1.2}
.titulazo{display:block;text-transform:uppercase;margin:0 0 30px}
.titulazo span{display:block;line-height:.86}
.titulazo .l1{font-size:clamp(28px,4.2vw,50px);color:#fff}
.titulazo .l2{font-size:clamp(56px,10.4vw,126px);color:var(--amarillo);margin:2px 0 8px;
  text-shadow:5px 5px 0 var(--tinta)}
.titulazo .l3{font-size:clamp(24px,3.4vw,42px);color:#fff;letter-spacing:.04em}
.entrada{max-width:44ch;font-size:clamp(16px,1.5vw,17.5px);color:#ffffffd0;margin:0 0 22px}
.busca-lema{display:inline-block;margin:0 0 40px;font-family:var(--titulo);
  font-size:clamp(15px,1.8vw,20px);color:#fff;
  border-bottom:4px solid var(--amarillo);padding-bottom:2px}
.portada-acciones{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:44px}

/* cuenta regresiva */
.cuenta{border:var(--marco);border-radius:var(--radio);background:#fff;color:var(--tinta);
  overflow:hidden;max-width:520px;box-shadow:0 6px 0 var(--tinta)}
.cuenta-titulo{margin:0;padding:10px 16px;font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;background:var(--amarillo);color:var(--tinta);
  border-bottom:var(--marco)}
.cuenta-cajas{display:flex;align-items:baseline;justify-content:space-around;padding:14px 10px 8px}
.cuenta-cajas>div{text-align:center;position:relative;flex:1}
.cuenta-cajas>div+div::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:#2a1c1018}
.cuenta-cajas strong{display:block;font-family:var(--titulo);font-size:clamp(28px,4vw,44px);
  line-height:1;color:var(--altea)}
.cuenta-cajas span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.cuenta-pie{margin:0;padding:0 16px 12px;font-size:12px;color:var(--tinta-suave);text-align:center}
.cuenta.cerrada .cuenta-cajas{display:none}

.portada-arte{position:relative;z-index:1;display:grid;place-items:center;min-height:340px}
.sol{position:absolute;top:4%;left:50%;transform:translateX(-50%);
  width:min(80%,430px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#ffffff1c 0 60%,transparent 61%);
  animation:girar 44s linear infinite}
@keyframes girar{to{transform:translateX(-50%) rotate(360deg)}}
/* Las poses las cambia cascos.js. Aqui solo el vaiven, muy lento. */
.dueto{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(4px,1.6vw,30px);width:100%;padding-top:clamp(56px,6vw,78px)}
.companero{position:relative;flex:0 1 auto;display:flex;align-items:flex-end}
/* El casco verde mide 317px de ancho, el azul 276 y el rojo 245. Se escala
   cada uno para que TODOS los cascos se vean del mismo tamano. */
.companero img{height:auto;display:block;filter:drop-shadow(0 18px 22px #00000048)}
.companero.es-verde img{width:clamp(150px,19.4vw,268px)}
.companero.es-azul  img{width:clamp(172px,22.3vw,308px)}
.companero.es-rojo  img{width:clamp(194px,25.1vw,347px)}
.companero:nth-child(1) img{animation:mecerCasco 11s ease-in-out infinite}
.companero:nth-child(2) img{animation:mecerCasco 11s ease-in-out infinite 5.5s}
@keyframes mecerCasco{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.globo{position:absolute;top:0;z-index:3;background:#fff;border:var(--marco);
  border-radius:20px;padding:12px 20px;font-family:var(--titulo);
  font-size:clamp(15px,1.75vw,23px);line-height:1.05;text-align:center;color:var(--tinta);
  box-shadow:5px 5px 0 var(--tinta);white-space:nowrap;
  display:flex;align-items:center;justify-content:center;min-height:52px}
.globo-izq{left:4%;animation:latir 9s ease-in-out infinite}
.globo-der{right:2%;animation:latir 9s ease-in-out infinite 4.5s}
.globo::after{content:"";position:absolute;left:24px;bottom:-14px;
  border:8px solid transparent;border-top-color:var(--tinta);border-bottom:0}
.globo-der::after{left:auto;right:24px}
@keyframes latir{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(2deg) scale(1.03)}}

/* la fecha, como cinta conmemorativa */
.cinta-fecha{display:inline-block;margin:0 0 22px;padding:8px 18px;
  background:var(--amarillo);color:var(--tinta);border:var(--marco);border-radius:999px;
  font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 4px 0 var(--tinta)}

/* ---------- secciones ---------- */
.seccion{padding:clamp(64px,8vw,116px) clamp(18px,5vw,64px);position:relative}
.seccion-azul{background:var(--altea);color:#fff;
  background-image:url('assets/fondo-altea.png?v=55');background-size:450px 450px;background-blend-mode:soft-light;
  border-top:var(--marco);border-bottom:var(--marco)}

.titulo-centro{text-align:center;max-width:50ch;margin:0 auto clamp(44px,5vw,60px);
  position:relative;z-index:2}
.titulo-centro h2{text-transform:uppercase;margin:0 0 10px;display:inline-block;position:relative;
  text-wrap:balance;line-height:1.02}
.titulo-centro h2 span{position:absolute;left:50%;transform:translateX(-50%);bottom:-22px;
  width:180px;height:24px;
  background-image:
    url('assets/altea-isotipo.png'),
    radial-gradient(circle at 8px 12px,var(--amarillo) 3.6px,transparent 4.6px),
    radial-gradient(circle at 8px 12px,var(--amarillo) 3.6px,transparent 4.6px);
  background-size:450px 450px, 64px 24px, 64px 24px;
  background-position:center, left center, right center;
  background-repeat:no-repeat, repeat-x, repeat-x}
.titulo-centro p{margin:38px 0 0;font-size:16.5px;color:var(--tinta-suave)}
.titulo-centro.claro h2{color:#fff}
.titulo-centro.claro p{color:#ffffffc9}

.sub-bloque{margin:clamp(78px,8.5vw,110px) 0 0}
.sub-bloque h3{text-align:center;text-transform:uppercase;font-size:clamp(22px,3vw,34px);margin:0 0 8px}
.sub-bloque .sub-linea{text-align:center;margin:0 auto clamp(34px,4vw,48px);
  max-width:46ch;color:var(--tinta-suave);font-size:15.5px}

/* ---------- pasos: número fuera de la caja ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(26px,3.4vw,40px);position:relative;z-index:2;padding-top:26px}
.paso{position:relative;background:#fff;border:var(--marco);border-radius:var(--radio);
  padding:26px 26px 26px 30px;box-shadow:0 6px 0 var(--tinta);
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva),
             background var(--medio)}
.paso:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 14px 0 var(--tinta);
  background:var(--crema)}
.paso .num{position:absolute;top:-30px;left:-14px;z-index:3;
  font-family:var(--titulo);font-size:clamp(58px,7vw,86px);line-height:.8;
  color:var(--amarillo);-webkit-text-stroke:4px var(--tinta);
  paint-order:stroke fill;transition:transform var(--medio) var(--curva)}
.paso:hover .num{transform:rotate(-8deg) scale(1.08)}
.paso .casco-paso{position:absolute;top:-64px;right:16px;width:104px;z-index:2;
  filter:drop-shadow(0 8px 10px #2a1c1030);
  transition:transform var(--medio) var(--curva)}
.paso:hover .casco-paso{transform:translateY(-8px) rotate(6deg)}
/* mismo criterio que el hero: se iguala el ancho del CASCO, no el de la imagen */
.paso .casco-paso[src*="revo"]{width:99px}
.paso .casco-paso[src*="charro"]{width:114px}
.paso .casco-paso[src*="mariachi"]{width:128px;top:-72px}
.paso h3{margin:16px 0 10px}
.paso p{margin:0;font-size:15px;color:var(--tinta-suave)}

/* ---------- puntos ---------- */
.puntos{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,72px);
  flex-wrap:wrap;position:relative;z-index:2}
.punto{display:flex;align-items:center;gap:18px}
.punto img{width:130px;height:auto;flex:0 0 130px;filter:drop-shadow(0 8px 10px #2a1c1026)}
.punto .silueta{width:104px;height:104px;flex:0 0 104px;color:var(--altea);opacity:.85}
.punto .silueta svg{width:100%;height:auto;display:block}
.punto .cifra{font-family:var(--titulo);font-size:clamp(42px,5.6vw,66px);line-height:.9;
  color:var(--altea)}
.punto .cifra small{display:block;font-family:var(--texto);font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);margin-top:6px}
.punto .quien-vota{font-size:15px;font-weight:700;max-width:15ch;line-height:1.35;margin:0}
.punto-altea .cifra{color:var(--magenta)}

/* ---------- reglas: viñetas, no números ---------- */
.reglas{max-width:840px;margin:0 auto;position:relative;z-index:2;
  background:#fff;border:var(--marco);border-radius:var(--radio);
  padding:clamp(26px,3.4vw,40px);box-shadow:0 6px 0 var(--tinta)}
.reglas ul{margin:0;padding:0;list-style:none}
.reglas li{position:relative;padding:0 0 0 36px;margin:0 0 20px;font-size:16px;line-height:1.55}
.reglas li:last-child{margin:0}
/* la viñeta es el isotipo de Altea, no un punto cualquiera */
.reglas li::before{content:"";position:absolute;left:4px;top:.52em;width:11px;height:11px;
  border-radius:50%;
  background:var(--altea)}
.reglas .aparte{margin:26px 0 0;padding:20px 0 0;border-top:2px dotted #2a1c1030}
.reglas .aparte li::before{background:var(--magenta)}

/* ---------- premios ---------- */
.premios{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:26px;
  align-items:end;position:relative;z-index:2}
.premio{background:#fff;border:var(--marco);border-radius:var(--radio);padding:26px 22px 24px;
  text-align:center;box-shadow:0 6px 0 var(--tinta);
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva)}
.premio:hover{transform:translateY(-6px);box-shadow:0 12px 0 var(--tinta)}
.premio.p1{background:var(--amarillo)}
.premio.p2{background:#eceef1}
.premio.p3{background:#f2ddc8}
.premio .figura{width:112px;margin:0 auto 12px}
.premio .figura svg{width:100%;height:auto;display:block}
.premio .lugar-num{display:inline-block;font-family:var(--titulo);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;background:var(--tinta);color:#fff;
  padding:5px 14px;border-radius:999px;margin-bottom:10px}
.premio h3{margin:0 0 8px}
.premio p{margin:0;font-size:14.6px;color:var(--tinta-suave)}

/* ---------- PODIO ---------- */
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(10px,1.8vw,22px);
  align-items:stretch;max-width:900px;margin:0 auto}
.lugar{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
/* avatares y nombres alineados arriba; el escalon crece hacia abajo */
.lugar .bloque{margin-top:auto}
.lugar .avatar{width:clamp(84px,11vw,136px);height:clamp(84px,11vw,136px);
  display:grid;place-items:center;overflow:hidden;
  filter:drop-shadow(0 10px 12px #00000045);animation:mecerCasco 11s ease-in-out infinite}
.lugar .avatar img{width:100%;height:100%;object-fit:contain}
.lugar .avatar .iniciales{font-family:var(--titulo);font-size:34px;color:#fff}
@keyframes saltito{0%,76%,100%{transform:translateY(0)}86%{transform:translateY(-8px)}}
.lugar .nombre-podio{font-family:var(--titulo);font-size:clamp(14px,1.7vw,19px);
  line-height:1.14;color:#fff;margin:18px 0 5px;max-width:100%}
.lugar .grito-podio{font-size:12.5px;font-style:italic;color:#ffffffab;
  margin:0 0 22px;line-height:1.3;max-width:22ch}
/* El número es una chapa sentada sobre el borde del escalón:
   así cada uno queda alineado con SU bloque, no flotando. */
.bloque{position:relative;width:100%;border:var(--marco);border-radius:10px 10px 0 0;
  display:flex;align-items:center;justify-content:center;
  padding:26px 14px 20px;box-shadow:inset 0 -14px 0 #00000018}
.bloque .num{position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;background:#fff;border:var(--marco);
  box-shadow:0 4px 0 var(--tinta);display:grid;place-items:center;
  font-family:var(--titulo);font-size:22px;line-height:1;color:var(--tinta)}
.bloque .pts{font-family:var(--titulo);font-size:clamp(17px,2.2vw,26px);line-height:1;
  color:var(--tinta);margin:0;text-align:center}
.bloque .pts small{display:block;font-family:var(--texto);font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-top:5px}
.l1 .bloque{background:var(--amarillo);height:clamp(130px,15vw,178px)}
.l2 .bloque{background:#dfe3e8;height:clamp(100px,11.5vw,132px)}
.l3 .bloque{background:#e0b98d;height:clamp(84px,10vw,110px)}
.podio-base{max-width:900px;margin:0 auto;height:14px;background:var(--altea-hondo);
  border:var(--marco);border-radius:0 0 10px 10px}
.cargando{color:#ffffffb0;grid-column:1/-1;text-align:center;padding:26px}
.seccion:not(.seccion-azul) .cargando{color:var(--tinta-suave)}

/* ---------- buscador ---------- */
.buscador{display:flex;align-items:center;gap:10px;background:#fff;border:var(--marco);
  border-radius:999px;padding:12px 24px;max-width:430px;margin:0 auto 46px;
  box-shadow:0 5px 0 var(--tinta)}
.buscador span{font-size:19px;color:var(--tinta-suave)}
.buscador input{border:0;outline:0;flex:1;font-family:var(--texto);font-size:15px;background:none}

/* ---------- tarjetas ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.tarjeta{background:#fff;border:var(--marco);border-radius:var(--radio);
  display:flex;flex-direction:column;box-shadow:0 6px 0 var(--tinta);
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva)}
.tarjeta:hover{transform:translateY(-5px);box-shadow:0 11px 0 var(--tinta)}
.tarjeta-alto{display:flex;align-items:center;gap:16px;padding:12px 18px 14px;
  border-bottom:2px dotted #2a1c1030}
.tarjeta-alto .avatar{width:116px;height:116px;flex:0 0 116px;display:grid;place-items:center;overflow:visible}
.tarjeta-alto .avatar img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 5px 6px #2a1c1026)}
.tarjeta-alto .avatar .iniciales{font-family:var(--titulo);font-size:26px;color:var(--altea)}
.tarjeta-alto .quien{min-width:0;flex:1}
.tarjeta-alto .nombre{font-family:var(--titulo);font-size:17.5px;line-height:1.12;margin:0}
.tarjeta-alto .area{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-suave);margin:3px 0 0}
.tarjeta-alto .marcadorcito{display:flex;align-items:baseline;gap:5px;margin-top:6px}
.tarjeta-alto .marcadorcito strong{font-family:var(--titulo);font-size:22px;line-height:1;color:var(--altea)}
.tarjeta-alto .marcadorcito span{font-size:11.5px;color:var(--tinta-suave)}
.tarjeta-cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.tarjeta .frase{margin:0;font-size:16px;font-family:var(--titulo);line-height:1.25;text-align:center}
.btn-votar{width:100%;justify-content:center;background:var(--amarillo);color:var(--tinta);
  font-size:15.5px;padding:14px 22px}
.btn-votar:disabled{background:#e6e0d4;color:var(--tinta-suave)}
.reproductor{display:flex;align-items:center;gap:10px;background:var(--crema-2);color:var(--tinta);
  border:var(--marco);border-radius:999px;padding:9px 16px;cursor:pointer;
  font-weight:800;font-size:14px;width:100%;font-family:var(--texto);transition:background var(--rapido)}
.reproductor:hover{background:var(--amarillo)}
.reproductor .onda{flex:1;display:flex;gap:2px;align-items:center;height:22px}
.reproductor .onda i{flex:1;background:var(--altea);border-radius:2px;height:26%;transition:height .09s linear}
.reproductor .dur{font-size:12px;color:var(--tinta-suave)}
.compartir{display:flex;gap:26px;justify-content:center;align-items:center;padding-top:2px}
.compartir button{display:grid;place-items:center;border:0;background:none;cursor:pointer;
  padding:4px;color:var(--altea);
  transition:transform var(--rapido) var(--curva),color var(--rapido)}
.compartir button:hover{transform:translateY(-2px) scale(1.1);color:var(--magenta)}
.compartir button svg{width:30px;height:30px;display:block}
.compartir button.hecho{color:var(--verde)}
.vacio{text-align:center;padding:38px;color:var(--tinta-suave)}
.vacio a{color:var(--magenta);font-weight:700;text-decoration:underline}

/* ---------- cierre, en crema ---------- */
.cierre{position:relative;text-align:center;padding:clamp(60px,7.5vw,100px) 22px;
  border-top:var(--marco);background:var(--crema-2)}
.cierre h2{position:relative;z-index:2;text-transform:uppercase;margin:30px 0 18px}
.cierre-linea{position:relative;z-index:2;margin:0 0 38px;font-size:16.5px;color:var(--tinta-suave)}
.cierre-cascos{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(6px,2vw,26px);margin-bottom:0}
.cierre-cascos img{width:clamp(96px,13vw,164px);filter:drop-shadow(0 12px 14px #2a1c1030)}
.cierre-cascos img:nth-child(1){animation:mecerCasco 12s ease-in-out infinite}
.cierre-cascos img:nth-child(2){animation:mecerCasco 12s ease-in-out infinite 4s;width:clamp(112px,15vw,190px)}
.cierre-cascos img:nth-child(3){animation:mecerCasco 12s ease-in-out infinite 8s}
.cierre .btn{position:relative;z-index:2}

/* ---------- pie ---------- */
.pie{background:var(--altea-hondo);color:#fff;text-align:center;padding:40px 22px 86px;
  border-top:var(--marco)}
.pie img{width:146px;margin:0 auto 16px}
.pie .legal{margin:0;font-size:14px;color:#ffffffb8}
.pie .legal a{text-decoration:underline}

/* ---------- ventana de voto ---------- */
.fondo-modal{position:fixed;inset:0;z-index:80;background:#2a1c10b0;
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.fondo-modal[hidden]{display:none}
.modal{background:var(--crema);border:var(--marco);border-radius:var(--radio);
  padding:30px clamp(20px,4vw,34px);max-width:440px;width:100%;position:relative;
  box-shadow:0 8px 0 var(--tinta)}
.modal h3{margin:0 0 12px;text-transform:uppercase}
.modal .cerrar{position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;
  font-size:19px;color:var(--tinta-suave)}
.modal-nota{font-size:13.6px;color:var(--tinta-suave);margin:0 0 18px}
.modal label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:6px}
.modal input{width:100%;border:var(--marco);border-radius:12px;padding:13px 16px;
  font-family:var(--texto);font-size:15px;margin-bottom:14px;background:#fff}
.modal input:focus{outline:3px solid var(--amarillo);outline-offset:1px}
.aviso{margin-top:14px;padding:12px 15px;border-radius:12px;font-size:14px;font-weight:600}
.aviso.ok{background:#e4f6ec;color:#0a5c34;border:2px solid var(--verde)}
.aviso.mal{background:#fdeaec;color:#8d1523;border:2px solid var(--rojo)}
.aviso.info{background:#fff5db;color:#7a5600;border:2px solid var(--amarillo)}

/* ---------- aparecer ---------- */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.visible{opacity:1;transform:none;
  transition:opacity .6s var(--curva),transform .6s var(--curva)}

/* ---------- música ---------- */
.boton-musica{position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;
  border:var(--marco);border-radius:999px;cursor:pointer;
  font-family:var(--texto);font-weight:800;font-size:14px;
  background:#fff;color:var(--altea);box-shadow:0 4px 0 var(--tinta);
  transition:transform var(--rapido) var(--curva),background var(--rapido),color var(--rapido)}
.boton-musica:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)}
.boton-musica.activa{background:var(--amarillo);color:var(--tinta)}
.boton-musica.activa span{animation:notita 1.1s ease-in-out infinite;display:inline-block}
@keyframes notita{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-3px) rotate(8deg)}}

/* ---------- celular ---------- */
@media (max-width:900px){
  .portada{grid-template-columns:1fr}
  .portada-arte{order:-1;min-height:250px}
  .cabecera nav{display:none}
  .podio{grid-template-columns:1fr;gap:18px;max-width:400px}
  .l1 .bloque,.l2 .bloque,.l3 .bloque{height:auto;flex-direction:row;gap:16px;
    border-radius:10px;padding:22px 14px 18px}
  .podio-base{display:none}
  .puntos{flex-direction:column;gap:26px}
  .paso .casco-paso{width:82px;top:-46px}
}
@media (max-width:600px){
  .cabecera .marca img{width:104px}
  .titulazo .l2{text-shadow:3px 3px 0 var(--tinta)}
  .boton-musica{right:12px;bottom:12px;padding:10px 16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================
   AJUSTES  ·  segunda ronda de comentarios de Alejandra
   Paleta de papel picado: un color por seccion.
   ========================================================== */
:root{
  --rosa:#e4007c;
  --oro:#e8a33d;
  --plata:#ccd2d9;
  --bronce:#c5875a;
}
.portada     { --ac:var(--amarillo); --acTxt:var(--tinta) }   /* la portada se queda en amarillo */
#dinamica    { --ac:var(--naranja);  --acTxt:#fff }
#ganando     { --ac:var(--oro);      --acTxt:var(--tinta) }
#gritos      { --ac:var(--rosa);     --acTxt:#fff }
.cierre      { --ac:var(--verde);    --acTxt:#fff }

/* --- el fondo, con mas aire --- */
body{background-image:url('assets/fondo-altea-suave.png?v=55');background-size:500px 500px}
.portada::before{background-image:url('assets/fondo-altea.png?v=55');background-size:500px 500px;opacity:.17}
.seccion-azul{background-image:url('assets/fondo-altea.png?v=55');background-size:500px 500px}

/* --- PORTADA --- */
.lema-patrio{margin:0 0 30px;font-size:clamp(17px,1.9vw,22px);color:var(--ac)}
.titulazo{margin:0 0 34px;line-height:1}
.titulazo .l1{font-size:clamp(30px,4.6vw,58px)}
.titulazo .l2{font-size:clamp(52px,9vw,112px);margin:6px 0 10px;color:var(--ac)}
.titulazo .l3{font-size:clamp(26px,3.9vw,49px);letter-spacing:.02em}
.entrada{margin:0 0 30px;font-size:clamp(16px,1.55vw,18px);line-height:1.62;max-width:46ch}
/* el lema, con enfasis pero legible: blanco sobre azul, subrayado de color */
.busca-lema{display:block;margin:0 0 44px;padding:0;border:0;background:none;
  font-family:var(--titulo);font-size:clamp(18px,2.05vw,25px);line-height:1.4;
  color:#fff;max-width:24ch;text-decoration:none}
.busca-lema::after{content:"";display:block;width:86px;height:5px;border-radius:3px;
  background:var(--ac);margin-top:15px}

.portada-acciones{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:48px}
.portada-acciones .btn{min-width:232px;height:62px;padding:0 26px;
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.portada-acciones .btn-amarillo{background:var(--ac);color:var(--acTxt)}

/* la cuenta: el titulo deja de volar, es una ficha */
.cuenta{background:none;border:0;box-shadow:none;padding:0;max-width:none;overflow:visible}
.cuenta-titulo{display:inline-block;background:var(--ac);color:var(--acTxt);
  border:var(--marco);border-radius:999px;padding:7px 16px;margin:0 0 16px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 4px 0 var(--tinta)}
.cuenta-cajas{display:flex;gap:12px;border:0;background:none}
.cuenta-cajas>div{flex:0 0 auto;min-width:86px;padding:14px 10px;border:0;
  background:#ffffff16;border-radius:14px;text-align:center;box-shadow:inset 0 0 0 1px #ffffff2e}
.cuenta-cajas strong{display:block;font-family:var(--titulo);
  font-size:clamp(26px,3vw,36px);line-height:1;color:#fff}
.cuenta-cajas span{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#ffffff8c}
.cuenta-pie{margin:16px 0 0;font-size:13.5px;color:#ffffff9e;text-align:left}

/* --- LETREROS y CASCOS del hero --- */
.dueto{padding-top:clamp(40px,4.6vw,62px)}
.globo{top:0;padding:11px 18px;border-radius:16px;font-size:clamp(14px,1.6vw,20px);
  min-height:0;box-shadow:4px 4px 0 var(--tinta)}
.globo-izq{left:0}
.globo-der{right:0}
.companero img,
.companero.es-verde img,.companero.es-azul img,.companero.es-rojo img{width:clamp(150px,19.6vw,272px)}
/* piso: una sombra elipsoidal para que NO parezcan flotando */
.companero{position:relative}
.companero::after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:58%;height:16px;border-radius:50%;background:#00000038;filter:blur(7px);z-index:-1}

/* --- TITULOS --- */
.titulo-centro{max-width:64ch}
.titulo-centro h2{font-size:clamp(30px,4.6vw,54px);line-height:1.06;white-space:nowrap}
.titulo-centro h2 span{display:none}
.titulo-centro p{margin:20px 0 0}
/* la bajada de "como participar", con peso */
.bajada-fuerte{font-family:var(--titulo);font-size:clamp(17px,2vw,24px)!important;
  line-height:1.4;color:var(--ac)!important;max-width:26ch;margin:22px auto 0!important}
.sub-fuerte{font-family:var(--titulo);font-size:clamp(15px,1.7vw,20px);color:var(--ac);
  line-height:1.4}

/* el casco que acompana al titulo: se mueve UNA vez y se queda quieto */
.titulo-centro.con-casco{position:relative}
.casco-titulo{position:absolute;right:2%;bottom:-6px;width:clamp(88px,10.4vw,138px);
  filter:drop-shadow(0 10px 12px #2a1c1030);animation:saludo 1.5s var(--curva) .35s 1 both}
@keyframes saludo{
  0%{transform:translateY(26px) rotate(-9deg);opacity:0}
  55%{transform:translateY(-6px) rotate(4deg);opacity:1}
  100%{transform:translateY(0) rotate(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.casco-titulo{animation:none}}

/* --- PASOS --- */
.pasos{padding-top:62px}
.paso{padding-top:38px}
.paso .casco-paso,
.paso .casco-paso[src*="verde"],.paso .casco-paso[src*="azul"],.paso .casco-paso[src*="rojo"]{
  width:132px;top:-78px;right:12px}
.paso .num{top:-34px;left:-10px;background:none;color:var(--ac)}

/* --- COMO SUMAN LOS VOTOS: fichas solidas para que NO se pierdan --- */
.punto{display:flex;align-items:center;gap:18px}
.punto img{width:118px;height:auto;flex:0 0 118px;display:block}
.punto .cifra{display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;background:var(--altea);color:#fff;border:var(--marco);border-radius:16px;
  padding:14px 18px;box-shadow:0 5px 0 var(--tinta);min-width:96px}
.punto .cifra small{margin-top:6px;opacity:.85;color:#fff}
.punto-altea .cifra{background:var(--ac)}
.punto .quien-vota{margin:0;align-self:center;max-width:18ch;font-weight:700}

/* --- PREMIOS: mismo tamano, oro / plata / bronce --- */
.premios{align-items:stretch}
.premio{transform:none!important;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:100%;box-shadow:0 7px 0 var(--tinta)}
.premio h4{font-size:clamp(20px,2.15vw,26px);line-height:1.12}
.premio p{font-size:14.5px;line-height:1.5;max-width:36ch;margin:auto auto 0}
.premio:nth-child(1){background:var(--oro)}
.premio:nth-child(2){background:var(--plata)}
.premio:nth-child(3){background:var(--bronce)}

/* --- REGLAS --- */
.reglas li::before,.reglas .aparte li::before{background:var(--altea)}
.reglas li{margin:0 0 20px}

/* ==========================================================
   PODIO DE VERDAD
   El avatar va PARADO sobre su escalon (por eso en el HTML el
   bloque va al final). El escalon lleva huella arriba y frente
   abajo para que se lea como podio, no como cuadro.
   ========================================================== */
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(14px,2.4vw,30px);
  align-items:end;max-width:900px;margin:0 auto}
.lugar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;min-width:0}
.lugar .bloque{margin-top:0}
.lugar .nombre-podio{margin:0 0 4px;font-size:clamp(14px,1.7vw,19px)}
.lugar .grito-podio{margin:0 0 12px}
.pts-chapa{display:inline-flex;align-items:baseline;gap:6px;margin:0 0 12px;
  background:#ffffff1a;border:2px solid #ffffff45;border-radius:999px;padding:5px 14px;
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.pts-chapa strong{font-family:var(--titulo);font-size:17px;letter-spacing:0;color:#fff}
.lugar .avatar{width:clamp(96px,12.4vw,152px);height:clamp(96px,12.4vw,152px);
  margin:0;overflow:visible;filter:drop-shadow(0 8px 8px #00000038);animation:none}

.bloque{position:relative;width:100%;border:var(--marco);border-top:0;
  border-radius:0 0 8px 8px;display:flex;align-items:center;justify-content:center;
  padding:22px 14px 18px;box-shadow:none;overflow:visible}
/* la huella: la cara de arriba del escalon, donde se para el avatar */
.bloque::before{content:"";position:absolute;left:-3px;right:-3px;top:-13px;height:13px;
  border:var(--marco);border-bottom:0;border-radius:7px 7px 0 0;background:inherit;
  filter:brightness(1.12)}
.bloque .num{position:static;transform:none;width:auto;height:auto;border:0;background:none;
  box-shadow:none;font-family:var(--titulo);font-size:clamp(30px,4vw,52px);line-height:1;
  color:var(--tinta);opacity:.9}
.bloque .pts{display:none}
.l1 .bloque{background:var(--oro);   height:clamp(122px,14vw,168px)}
.l2 .bloque{background:var(--plata); height:clamp(92px,10.6vw,124px)}
.l3 .bloque{background:var(--bronce);height:clamp(74px,9vw,102px)}
.podio-base{display:none}
.seccion-azul .titulo-centro{margin-bottom:clamp(54px,6vw,74px)}

/* --- TARJETAS --- */
.tarjeta-alto .avatar{width:138px;height:138px;flex:0 0 138px}
.tarjeta .btn-votar{background:var(--altea);color:#fff;border:var(--marco);
  box-shadow:0 5px 0 var(--tinta)}
.tarjeta .btn-votar:hover{background:var(--altea-hondo)}
.compartir{display:flex;justify-content:center;gap:20px}
.compartir button{background:none;border:0;padding:6px;cursor:pointer;line-height:0;color:var(--altea)}
.compartir svg{width:26px;height:26px;color:var(--altea)}

/* --- CIERRE --- */
.cierre-cascos{align-items:flex-end;gap:clamp(8px,2.2vw,30px)}
.cierre-cascos img,
.cierre-cascos img:nth-child(1),.cierre-cascos img:nth-child(2),.cierre-cascos img:nth-child(3){
  width:clamp(104px,13.6vw,168px)}
.cierre .btn{background:var(--ac);color:var(--acTxt);border:var(--marco)}

/* --- PIE: redes y contacto --- */
.redes-pie{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin:20px 0 16px}
.redes-pie a{display:inline-flex;align-items:center;gap:8px;color:#ffffffcf;
  font-size:13px;font-weight:600;padding:6px 2px;transition:color var(--rapido)}
.redes-pie a:hover{color:#fff}
.redes-pie svg{width:19px;height:19px;flex:0 0 19px}

@media (max-width:720px){
  .titulo-centro h2{white-space:normal}
  .portada-acciones .btn{min-width:100%}
  .cuenta-cajas{flex-wrap:wrap}
  .paso .casco-paso{width:104px;top:-62px}
  .punto{flex-direction:column;text-align:center}
  .casco-titulo{position:static;display:block;margin:14px auto 0}
  .redes-pie{flex-direction:column;align-items:center;gap:12px}
}

/* ==== FIESTA: papel picado, pinata, fuegos, trompetas y bandera ==== */

/* --- papel picado colgando en cada corte de seccion --- */
.seccion,.cierre{position:relative}
#dinamica::after,#ganando::after,#gritos::after,.cierre::after{
  content:"";position:absolute;left:0;right:0;top:0;height:118px;z-index:4;
  pointer-events:none;
  background:url('assets/papel-picado.svg') repeat-x left top;
  background-size:auto 118px}
#dinamica,#ganando,#gritos{padding-top:clamp(154px,12vw,196px)}
.cierre{padding-top:clamp(150px,11vw,188px)}

/* --- los adornos arrancan invisibles y se quedan al entrar --- */
.al-entrar{opacity:0}
.al-entrar.entro{opacity:1}

/* LA PINATA: cuelga en el apartado de Reglas, cae a un tercio de la altura */
.bloque-reglas{position:relative}
.pinata{position:absolute;top:0;right:clamp(10px,6vw,90px);z-index:5;
  width:clamp(84px,9vw,128px);transform-origin:50% -18px;pointer-events:none}
.pinata.entro{animation:pinataCae 2.4s var(--curva) 1 both}
@keyframes pinataCae{
  0%{transform:translateY(-190px) rotate(-16deg);opacity:0}
  30%{opacity:1}
  48%{transform:translateY(33%) rotate(11deg)}
  66%{transform:translateY(33%) rotate(-7deg)}
  82%{transform:translateY(33%) rotate(4deg)}
  92%{transform:translateY(33%) rotate(-2deg)}
  100%{transform:translateY(33%) rotate(0);opacity:1}}

/* FUEGOS: estallan al entrar al ranking y se quedan */
.fuegos{position:absolute;top:clamp(120px,10vw,168px);width:clamp(160px,17vw,260px);
  z-index:2;pointer-events:none}
.fuegos-izq{left:clamp(6px,3vw,58px)}
.fuegos-der{right:clamp(6px,3vw,58px)}
.fuegos-izq.entro{animation:estalla 1.7s ease-out 1 both}
.fuegos-der.entro{animation:estallaEspejo 1.7s ease-out .5s 1 both}
@keyframes estalla{
  0%{opacity:0;transform:scale(.32)}
  40%{opacity:1;transform:scale(1.07)}
  100%{opacity:.62;transform:scale(1)}}
@keyframes estallaEspejo{
  0%{opacity:0;transform:scaleX(-1) scale(.32)}
  40%{opacity:1;transform:scaleX(-1) scale(1.07)}
  100%{opacity:.62;transform:scaleX(-1) scale(1)}}

/* TROMPETAS: entran desde los lados en Gritos Altea y se quedan */
.trompeta{position:absolute;top:clamp(150px,13vw,214px);z-index:2;pointer-events:none;
  width:clamp(120px,14vw,214px)}
.trompeta-izq{left:clamp(2px,1.6vw,34px)}
.trompeta-der{right:clamp(2px,1.6vw,34px)}
.trompeta-izq.entro{animation:entraIzq 1s var(--curva) 1 both}
.trompeta-der.entro{animation:entraDer 1s var(--curva) .18s 1 both}
@keyframes entraIzq{
  0%{opacity:0;transform:translateX(-70px) rotate(-12deg)}
  70%{transform:translateX(6px) rotate(2deg)}
  100%{opacity:.9;transform:translateX(0) rotate(0)}}
@keyframes entraDer{
  0%{opacity:0;transform:translateX(70px) rotate(12deg)}
  70%{transform:translateX(-6px) rotate(-2deg)}
  100%{opacity:.9;transform:translateX(0) rotate(0)}}

/* BANDERA: ondea al entrar al cierre */
.bandera{position:relative;z-index:2;display:block;margin:0 auto 6px;
  width:clamp(96px,9vw,132px)}
.bandera.entro{animation:ondea 1.2s var(--curva) 1 both}
@keyframes ondea{
  0%{opacity:0;transform:translateY(16px) rotate(-6deg)}
  60%{transform:translateY(-3px) rotate(3deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}}

@media (prefers-reduced-motion:reduce){
  .al-entrar,.al-entrar.entro{animation:none!important;opacity:1;transform:none}
}

/* ==========================================================
   RONDA 3
   ========================================================== */

/* --- que se alcance a ver mas contenido en la primera pantalla --- */
.portada{padding-top:clamp(34px,4vw,56px);padding-bottom:clamp(38px,4.4vw,62px);
  align-items:center}
.titulazo{margin:0 0 26px}
.titulazo .l1{font-size:clamp(28px,4.1vw,50px)}
.titulazo .l2{font-size:clamp(48px,8.1vw,98px);margin:4px 0 8px}
.titulazo .l3{font-size:clamp(24px,3.5vw,43px)}
.lema-patrio{margin:0 0 22px}
.entrada{margin:0 0 24px}
.busca-lema{margin:0 0 32px}
.busca-lema::after{margin-top:12px}
.portada-acciones{margin-bottom:34px}
.cuenta-titulo{margin:0 0 12px}
.cuenta-cajas>div{padding:11px 10px;min-width:80px}
.cuenta-pie{margin:12px 0 0}

/* --- REDACCIONES QUE NO SE LEIAN: mas contraste --- */
:root{--tinta-suave:#2a1c10cf}
.titulo-centro p,.sub-linea,.premio p,.cuenta-pie,.tarjeta .area{color:var(--tinta-suave)}
.titulo-centro p{font-size:clamp(15.5px,1.6vw,18px);font-weight:500}
.sub-linea{font-weight:500}
.premio p{color:#2a1c10d9;font-weight:500}
.seccion-azul .titulo-centro p{color:#ffffffe0}
.cuenta-pie{color:#ffffffcc}
.lugar .grito-podio{color:#ffffffd0}

/* --- el hero, con enfasis: los textos dejan de volar --- */
.lema-patrio{display:inline-block;background:var(--ac);color:var(--tinta);
  border:var(--marco);border-radius:999px;padding:8px 18px;
  font-family:var(--titulo);font-size:clamp(14px,1.5vw,18px);
  box-shadow:0 4px 0 var(--tinta)}
.titulazo .l2{text-shadow:6px 6px 0 var(--tinta)}
.entrada{color:#ffffffdd}

/* --- PREMIOS parejos: todos los titulos a dos lineas --- */
.premio h4{max-width:13ch;margin-left:auto;margin-right:auto}
.premio p{min-height:2.9em;display:flex;align-items:center;justify-content:center}

/* --- CASCOS: mismo tamano en todas partes; el verde crece --- */
.companero img{width:clamp(150px,19.6vw,272px)}
.companero.es-verde img{width:clamp(168px,22vw,304px)}
.paso .casco-paso,
.paso .casco-paso[src*="azul"],.paso .casco-paso[src*="rojo"]{width:132px}
.paso .casco-paso[src*="verde"]{width:148px}
.cierre-cascos img{width:clamp(104px,13.6vw,168px)}
.cierre-cascos img[src*="verde"]{width:clamp(116px,15.2vw,188px)}
.punto img{width:118px}
.punto-altea img{width:118px}

/* el casco del paso: PARADO en el borde de la tarjeta, sin blanco detras */
.pasos{padding-top:158px}
.paso{padding-top:30px;overflow:visible}
.paso .casco-paso{top:auto;bottom:100%;right:14px;margin-bottom:-2px}

/* --- AVATARES: recortados a los pies, se apoyan exacto --- */
.lugar .avatar{width:clamp(96px,12.4vw,152px);height:auto;margin-bottom:0;
  display:block;overflow:visible;filter:drop-shadow(0 8px 8px #00000038);animation:none}
.lugar .avatar img{width:100%;height:auto;display:block;object-fit:fill}
.tarjeta-alto .avatar{width:112px;height:auto;flex:0 0 112px;display:block;align-self:center}
.tarjeta-alto .avatar img{width:100%;height:auto;display:block;object-fit:fill}


/* el casco del titulo: alineado con la linea del texto, entra una vez y se queda */
.titulo-centro.con-casco{position:relative;padding-right:clamp(0px,10vw,152px)}
.casco-titulo{position:absolute;right:clamp(2px,3vw,44px);bottom:auto;top:50%;
  width:clamp(84px,9.4vw,126px);transform-origin:50% 100%;
  filter:drop-shadow(0 9px 10px #2a1c1030)}
.casco-titulo.entro{animation:saludo 1.3s var(--curva) 1 both}
@keyframes saludo{
  0%{transform:translate(0,-50%) translateY(30px) rotate(-10deg);opacity:0}
  45%{transform:translate(0,-50%) translateY(-9px) rotate(5deg);opacity:1}
  72%{transform:translate(0,-50%) translateY(0) rotate(-3deg)}
  100%{transform:translate(0,-50%) translateY(0) rotate(0);opacity:1}}
@media (max-width:900px){
  .titulo-centro.con-casco{padding-right:0}
  .casco-titulo{position:static;display:block;margin:16px auto 0;transform:none}
  .casco-titulo.entro{animation:saludoPlano 1.3s var(--curva) 1 both}
  @keyframes saludoPlano{
    0%{transform:translateY(26px) rotate(-10deg);opacity:0}
    50%{transform:translateY(-8px) rotate(5deg);opacity:1}
    100%{transform:translateY(0) rotate(0);opacity:1}}
}

@media (max-width:720px){
  #dinamica::after,#ganando::after,#gritos::after,.cierre::after{height:76px;background-size:auto 76px}
  #dinamica,#ganando,#gritos{padding-top:112px}
  .cierre{padding-top:108px}
  .fuegos,.trompeta{display:none}
  .pinata{width:74px;right:8px}
  .pasos{padding-top:120px}
}

/* ==== CORRECCIONES 3b ==== */

/* 1) Los cascos de los pasos: PARADOS sobre el borde de la tarjeta, nunca
      encima del texto. Se repiten los selectores con atributo para ganarle
      a las reglas anteriores, que tenian mas peso. */
.paso .casco-paso,
.paso .casco-paso[src*="verde"],
.paso .casco-paso[src*="azul"],
.paso .casco-paso[src*="rojo"]{
  width:126px;height:auto;top:auto;bottom:100%;right:16px;margin-bottom:-4px;left:auto}
.pasos{padding-top:150px}
.paso{padding-top:26px}

/* 2) El casco verde del hero: casi igual al azul, no mas grande */
.companero.es-verde img{width:clamp(156px,20.4vw,284px)}
.cierre-cascos img[src*="verde"]{width:clamp(108px,14.1vw,175px)}

/* 3) La pinata cuelga de su cuerda y cae a un TERCIO de la altura del bloque */
.pinata-cuelga{position:absolute;top:0;right:clamp(6px,5vw,74px);z-index:5;
  height:33%;pointer-events:none;display:block;opacity:0}
.pinata-cuelga.entro{opacity:1;animation:cuelgaCae 2.4s var(--curva) 1 both}
.pinata-cuelga .cuerda{position:absolute;left:50%;top:0;bottom:0;width:3px;
  margin-left:-1.5px;background:var(--tinta);border-radius:2px}
.pinata-cuelga .pinata{position:absolute;top:100%;left:50%;
  width:clamp(88px,9.4vw,134px);transform:translate(-50%,-6px);display:block}
@keyframes cuelgaCae{
  0%{opacity:0;transform:translateY(-100%) rotate(-14deg)}
  28%{opacity:1}
  50%{transform:translateY(0) rotate(10deg)}
  68%{transform:translateY(0) rotate(-6deg)}
  84%{transform:translateY(0) rotate(3.5deg)}
  94%{transform:translateY(0) rotate(-1.5deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}}
.pinata-cuelga{transform-origin:50% 0}

/* 4) El bloque de reglas necesita aire a la derecha para la pinata */
.bloque-reglas{position:relative;padding-top:26px}

@media (max-width:900px){
  .pinata-cuelga{right:4px}
  .pinata-cuelga .pinata{width:76px}
}
@media (max-width:720px){
  .paso .casco-paso,
  .paso .casco-paso[src*="verde"],
  .paso .casco-paso[src*="azul"],
  .paso .casco-paso[src*="rojo"]{width:100px;right:10px}
  .pasos{padding-top:112px}
}

/* ==== CORRECCIONES 3c ==== */

/* Los cascos del cierre PISAN el suelo: sombra elipsoidal bajo los pies. */
.cierre-cascos{align-items:flex-end;gap:clamp(10px,2.6vw,38px)}
.pisa{position:relative;display:block;line-height:0}
.pisa::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:66%;height:15px;border-radius:50%;background:#2a1c1030;filter:blur(6px);z-index:0}
.pisa img{position:relative;z-index:1;display:block}
.cierre-cascos .pisa img{width:clamp(104px,13.6vw,168px)}
.cierre-cascos .pisa img[src*="verde"]{width:clamp(110px,14.3vw,178px)}

/* Los cascos de los pasos tambien apoyan: sombra de contacto */
.paso .casco-paso{filter:drop-shadow(0 7px 4px #2a1c1030) drop-shadow(0 2px 1px #2a1c1026)}

/* Los avatares del podio, con su sombrita de contacto */
.lugar .avatar{filter:drop-shadow(0 6px 4px #00000040)}


/* El pie: solo los iconos, y el slogan en transparencia bajo el logo. */
.marca-pie{display:flex;flex-direction:column;align-items:center;gap:12px}
.marca-pie img{display:block}
.slogan-pie{margin:0;max-width:34ch;text-align:center;
  font-family:var(--titulo);font-size:clamp(12.5px,1.35vw,15.5px);line-height:1.5;
  color:#ffffff;opacity:.42;letter-spacing:.015em}
.redes-pie{gap:26px;margin:22px 0 14px}
.redes-pie a{gap:0;padding:9px;border-radius:50%;color:#ffffffc2;
  border:2px solid #ffffff2e;transition:color var(--rapido),border-color var(--rapido),background var(--rapido)}
.redes-pie a:hover{color:#fff;border-color:#ffffff70;background:#ffffff14}
.redes-pie svg{width:21px;height:21px;flex:0 0 21px}

@media (max-width:720px){
  .pisa::after{height:10px}
  .slogan-pie{max-width:28ch}
}

/* ==== CORRECCIONES 3d ==== */
/* La bandera se planta al lado del grupo, a la misma linea de piso. */
.cierre-cascos{align-items:flex-end}
.bandera{position:static;display:block;margin:0 0 -4px;align-self:flex-end;
  width:clamp(84px,8.4vw,116px)}
.bandera.entro{animation:ondea 1.2s var(--curva) .3s 1 both}
@media (max-width:720px){ .bandera{width:66px} }

/* ==== CORRECCIONES 3e ==== */
/* La pinata: reglas anteriores le dejaban un `right` que peleaba con el
   `left:50%`, y por eso solo se veia la cuerda. Se anulan aqui. */
.pinata-cuelga .pinata{
  position:absolute;top:100%;left:50%;right:auto;bottom:auto;
  width:clamp(92px,9.8vw,138px);height:auto;
  transform:translate(-50%,-8px);display:block;z-index:2}
.pinata-cuelga{overflow:visible}
.pinata-cuelga .cuerda{z-index:1}

/* ==== CONTADOR DE PAPEL PICADO ==== */
/* Cada cuadro del contador es una banderita: color de la tira, feston
   abajo y perforaciones arriba. Cuelgan de la misma cuerda. */
.cuenta-cajas{position:relative;gap:10px;padding-top:11px;align-items:flex-start}
.cuenta-cajas::before{content:"";position:absolute;left:-2px;right:-2px;top:8px;height:3px;
  background:var(--tinta);border-radius:2px}
.cuenta-cajas>div{position:relative;flex:0 0 auto;min-width:88px;
  padding:16px 12px 26px;border:0;border-radius:0;box-shadow:none;text-align:center;
  -webkit-mask:
    radial-gradient(circle 11px at 50% 0, #0000 97%, #000 100%) bottom left/22px 11px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 11px) no-repeat;
  mask:
    radial-gradient(circle 11px at 50% 0, #0000 97%, #000 100%) bottom left/22px 11px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 11px) no-repeat}
.cuenta-cajas>div:nth-child(1){background:var(--rosa)}
.cuenta-cajas>div:nth-child(2){background:var(--turquesa)}
.cuenta-cajas>div:nth-child(3){background:var(--naranja)}
.cuenta-cajas>div:nth-child(4){background:var(--verde)}
/* las perforaciones de la banderita */
.cuenta-cajas>div::before{content:"";position:absolute;left:0;right:0;top:12px;height:9px;
  background:radial-gradient(circle 3.2px at 50% 50%, #ffffffcc 96%, transparent 100%)
             center/17px 9px repeat-x;opacity:.9;pointer-events:none}
.cuenta-cajas strong{position:relative;display:block;font-family:var(--titulo);
  font-size:clamp(27px,3.1vw,37px);line-height:1;color:#fff;
  text-shadow:0 2px 0 #00000026;margin-top:9px}
.cuenta-cajas span{display:block;margin-top:6px;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:#ffffffdd;font-weight:800}
@media (max-width:720px){
  .cuenta-cajas>div{min-width:74px;padding:13px 8px 22px}
}

/* ==== CASCOS IGUALADOS ====
   Cada PNG tiene distinto margen, asi que el ancho CSS se calcula
   para que el CASCO se vea del mismo tamano en los tres. */
.companero.es-verde img{width:clamp(135px,17.70vw,246px)}
.paso .casco-paso[src*="verde"]{width:clamp(90px,8.67vw,114px)}
.cierre-cascos .pisa img[src*="verde"]{width:clamp(94px,12.28vw,152px)}
.punto img[src*="verde"]{width:clamp(87px,8.31vw,107px);height:auto;flex:0 0 auto}
.companero.es-azul img{width:clamp(150px,19.60vw,272px)}
.paso .casco-paso[src*="azul"]{width:clamp(100px,9.60vw,126px)}
.cierre-cascos .pisa img[src*="azul"]{width:clamp(104px,13.60vw,168px)}
.punto img[src*="azul"]{width:clamp(96px,9.20vw,118px);height:auto;flex:0 0 auto}
.companero.es-rojo img{width:clamp(164px,21.39vw,297px)}
.paso .casco-paso[src*="rojo"]{width:clamp(109px,10.48vw,138px)}
.cierre-cascos .pisa img[src*="rojo"]{width:clamp(114px,14.84vw,183px)}
.punto img[src*="rojo"]{width:clamp(105px,10.04vw,129px);height:auto;flex:0 0 auto}

/* ==== RONDA 4 ==== */

/* 1) Las fichas ya NO parecen botones: son cintas con las puntas en V,
      sin pill ni sombra de boton. */
.lema-patrio,.cuenta-titulo{
  display:inline-block;position:relative;border:0;border-radius:0;box-shadow:none;
  background:var(--amarillo);color:var(--tinta);
  padding:7px 26px;margin-left:0;
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 50%,100% 100%,0 100%,13px 50%)}
.lema-patrio{font-family:var(--titulo);font-size:clamp(14px,1.5vw,18px);
  letter-spacing:.01em;margin-bottom:22px}
.cuenta-titulo{font-family:var(--texto);font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;padding:6px 24px;margin-bottom:14px}

/* 2) El contador es papel picado de verdad: banderitas JUNTAS colgando de
      la misma cuerda, angostas, con feston redondo. Sin cartelones. */
.cuenta-cajas{position:relative;display:flex;gap:0;padding-top:12px;
  align-items:flex-start;width:max-content;max-width:100%}
.cuenta-cajas::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;
  background:var(--tinta);border-radius:2px;z-index:2}
.cuenta-cajas>div{position:relative;flex:0 0 auto;min-width:0;width:74px;
  padding:15px 6px 22px;border:0;border-radius:0;box-shadow:none;text-align:center;
  -webkit-mask:
    radial-gradient(circle 9px at 50% 0,#0000 97%,#000 100%) bottom left/18px 9px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 9px) no-repeat;
  mask:
    radial-gradient(circle 9px at 50% 0,#0000 97%,#000 100%) bottom left/18px 9px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 9px) no-repeat}
.cuenta-cajas>div:nth-child(1){background:var(--rosa)}
.cuenta-cajas>div:nth-child(2){background:var(--turquesa)}
.cuenta-cajas>div:nth-child(3){background:var(--naranja)}
.cuenta-cajas>div:nth-child(4){background:var(--verde)}
/* las perforaciones caladas de cada banderita */
.cuenta-cajas>div::before{content:"";position:absolute;left:0;right:0;top:24px;bottom:14px;
  background:
    radial-gradient(circle 3px at 50% 50%,#2a1c1033 96%,transparent 100%) center 0/14px 13px repeat-x,
    radial-gradient(circle 3px at 50% 50%,#2a1c1033 96%,transparent 100%) center 100%/14px 13px repeat-x;
  pointer-events:none}
/* 3) los numeros, en tinta: se leen y parecen calados en el papel */
.cuenta-cajas strong{position:relative;z-index:1;display:block;font-family:var(--titulo);
  font-size:clamp(23px,2.5vw,30px);line-height:1;color:var(--tinta);
  text-shadow:none;margin-top:6px}
.cuenta-cajas span{position:relative;z-index:1;display:block;margin-top:5px;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:#2a1c10b8;font-weight:800}

@media (max-width:720px){
  .cuenta-cajas>div{width:60px;padding:12px 4px 18px}
  .cuenta-cajas strong{font-size:20px}
}

/* ==== RONDA 5 ==== */
/* La pinata media 0px: sus dos hijos eran absolutos y el contenedor
   colapsaba. Ahora el CONTENEDOR lleva el ancho y la imagen ocupa el 100%. */
.pinata-cuelga{position:absolute;top:0;right:clamp(6px,5vw,74px);z-index:5;
  width:clamp(96px,10vw,140px);height:33%;pointer-events:none;display:block;
  transform-origin:50% 0;overflow:visible}
.pinata-cuelga .cuerda{position:absolute;left:50%;top:0;height:100%;width:3px;
  margin-left:-1.5px;background:var(--tinta);border-radius:2px;z-index:1;bottom:auto}
.pinata-cuelga .pinata{position:absolute;top:100%;left:0;right:auto;bottom:auto;
  width:100%;height:auto;max-width:none;transform:translateY(-6px);display:block;z-index:2}

/* el contador, un poco mas grande para que se lea */
.cuenta-cajas>div{width:84px;padding:16px 6px 25px}
.cuenta-cajas strong{font-size:clamp(25px,2.7vw,33px)}
.cuenta-cajas span{font-size:9.5px}
@media (max-width:720px){
  .cuenta-cajas>div{width:64px;padding:12px 4px 19px}
}

/* ==== RONDA 5b ==== */
/* El casco del titulo: parado junto al texto, sin encimarse. */
.titulo-centro.con-casco{padding-right:clamp(0px,13vw,190px)}
.casco-titulo{right:clamp(4px,5vw,72px);top:auto;bottom:6px;
  width:clamp(80px,8.6vw,116px);transform:none}
.casco-titulo.entro{animation:saludo 1.3s var(--curva) 1 both}
@keyframes saludo{
  0%{transform:translateY(30px) rotate(-10deg);opacity:0}
  45%{transform:translateY(-9px) rotate(5deg);opacity:1}
  72%{transform:translateY(0) rotate(-3deg)}
  100%{transform:translateY(0) rotate(0);opacity:1}}

/* ==== RONDA 6 ==== */

/* 1) FUERA LOS LISTONES. Los dos rotulos vuelven a ser texto, con jerarquia
      pero sin caja: ni boton ni cinta. */
.lema-patrio,.cuenta-titulo{
  display:block;background:none;border:0;box-shadow:none;clip-path:none;
  padding:0;color:var(--amarillo)}
.lema-patrio{font-family:var(--titulo);font-size:clamp(15px,1.65vw,20px);
  letter-spacing:.01em;margin:0 0 16px}
.cuenta-titulo{font-family:var(--texto);font-size:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:#ffffff9e;margin:0 0 12px}

/* 2) LOS CASCOS DEL HERO: mas chicos, y el verde igualado al azul.
      El azul trae sombrero, asi que su cupula se ve menor: el verde se
      reduce un poco mas para que las dos cupulas midan lo mismo. */
.dueto{padding-top:clamp(30px,3.4vw,46px);gap:clamp(6px,2vw,34px)}
.companero img,
.companero.es-verde img,.companero.es-azul img,.companero.es-rojo img{width:auto}
.companero.es-azul  img{width:clamp(122px,15.6vw,214px)}
.companero.es-verde img{width:clamp(104px,13.3vw,183px)}
.companero.es-rojo  img{width:clamp(133px,17vw,233px)}
.companero::after{width:52%;height:13px;bottom:6px}
.globo{font-size:clamp(13px,1.45vw,18px);padding:9px 15px}

/* 3) EL CONTADOR: banderitas de papel picado con el numero CALADO,
      orla de puntos y celosia, como la referencia.
      El numero se recorta de verdad con mezcla, asi que se ve el fondo. */
.cuenta-cajas{position:relative;display:flex;gap:0;padding-top:12px;
  align-items:flex-start;width:max-content;max-width:100%}
.cuenta-cajas::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;
  background:var(--tinta);border-radius:2px;z-index:3}
.cuenta-cajas>div{position:relative;isolation:isolate;flex:0 0 auto;
  width:86px;padding:0;border:0;border-radius:0;box-shadow:none;text-align:center;
  -webkit-mask:
    radial-gradient(circle 8px at 50% 0,#0000 97%,#000 100%) bottom left/16px 8px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 8px) no-repeat;
  mask:
    radial-gradient(circle 8px at 50% 0,#0000 97%,#000 100%) bottom left/16px 8px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 8px) no-repeat}
.cuenta-cajas>div:nth-child(1){background:var(--rosa)}
.cuenta-cajas>div:nth-child(2){background:var(--turquesa)}
.cuenta-cajas>div:nth-child(3){background:var(--naranja)}
.cuenta-cajas>div:nth-child(4){background:var(--verde)}

/* la celosia y la orla de puntos, caladas */
.cuenta-cajas>div::before{content:"";position:absolute;inset:0;z-index:2;
  mix-blend-mode:destination-out;pointer-events:none;
  background:
    /* orla de puntos, arriba y abajo */
    radial-gradient(circle 2.6px at 50% 50%,#000 96%,transparent 100%) left 7px/11px 11px repeat-x,
    radial-gradient(circle 2.6px at 50% 50%,#000 96%,transparent 100%) left calc(100% - 15px)/11px 11px repeat-x,
    /* celosia */
    linear-gradient(#000,#000) 0 0/100% 2px no-repeat,
    linear-gradient(90deg,transparent 0 28px,#000 28px 30px,transparent 30px 56px,#000 56px 58px,transparent 58px)
      0 20px/86px calc(100% - 44px) repeat-y,
    linear-gradient(#000,#000) 0 44px/100% 2px no-repeat,
    linear-gradient(#000,#000) 0 74px/100% 2px no-repeat}

/* el numero, calado de verdad */
.cuenta-cajas strong{position:relative;z-index:2;display:block;
  font-family:var(--titulo);font-size:44px;line-height:1;
  padding:22px 0 4px;color:#000;mix-blend-mode:destination-out}
.cuenta-cajas span{position:relative;z-index:2;display:block;padding:0 0 16px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:#000;font-weight:800;mix-blend-mode:destination-out}

@media (max-width:720px){
  .cuenta-cajas>div{width:66px}
  .cuenta-cajas strong{font-size:33px;padding:17px 0 3px}
  .cuenta-cajas span{font-size:7.5px;padding-bottom:12px}
}

/* ==== RONDA 7 ==== */
/* Contador de papel picado, como la referencia: banderita de color con
   orla de puntos, celosia y el NUMERO CALADO. El calado se pinta del color
   del fondo (destination-out no existe en mix-blend-mode). */
.cuenta-cajas{position:relative;display:flex;gap:0;padding-top:13px;
  align-items:flex-start;width:max-content;max-width:100%}
.cuenta-cajas::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;
  background:var(--tinta);border-radius:2px;z-index:3}
.cuenta-cajas>div{position:relative;flex:0 0 auto;width:88px;height:112px;
  padding:0;border:0;border-radius:0;box-shadow:none;text-align:center;overflow:hidden;
  -webkit-mask:
    radial-gradient(circle 8px at 50% 0,#0000 97%,#000 100%) bottom left/16px 8px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 8px) no-repeat;
  mask:
    radial-gradient(circle 8px at 50% 0,#0000 97%,#000 100%) bottom left/16px 8px repeat-x,
    linear-gradient(#000,#000) top left/100% calc(100% - 8px) no-repeat}
.cuenta-cajas>div:nth-child(1){background:var(--rosa)}
.cuenta-cajas>div:nth-child(2){background:var(--turquesa)}
.cuenta-cajas>div:nth-child(3){background:var(--naranja)}
.cuenta-cajas>div:nth-child(4){background:var(--verde)}

/* orla de puntos arriba y abajo + celosia, en el color del fondo */
.cuenta-cajas>div::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle 2.4px at 50% 50%,var(--altea) 96%,transparent 100%) left 6px/10px 10px repeat-x,
    radial-gradient(circle 2.4px at 50% 50%,var(--altea) 96%,transparent 100%) left 88px/10px 10px repeat-x,
    linear-gradient(var(--altea),var(--altea)) 0 17px/100% 2px no-repeat,
    linear-gradient(var(--altea),var(--altea)) 0 84px/100% 2px no-repeat,
    linear-gradient(90deg,var(--altea) 0 2px,transparent 2px) 21px 19px/23px 65px repeat,
    linear-gradient(var(--altea) 0 2px,transparent 2px) 0 19px/100% 23px repeat}
.cuenta-cajas>div::after{content:"";position:absolute;left:5px;right:5px;top:19px;bottom:28px;
  z-index:2;background:inherit;pointer-events:none}
.cuenta-cajas>div:nth-child(1)::after{background:var(--rosa)}
.cuenta-cajas>div:nth-child(2)::after{background:var(--turquesa)}
.cuenta-cajas>div:nth-child(3)::after{background:var(--naranja)}
.cuenta-cajas>div:nth-child(4)::after{background:var(--verde)}

/* el numero y la etiqueta, calados */
.cuenta-cajas strong{position:relative;z-index:3;display:block;
  font-family:var(--titulo);font-size:42px;line-height:1;
  padding:26px 0 0;color:var(--altea)}
.cuenta-cajas span{position:relative;z-index:3;display:block;margin-top:7px;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--altea);font-weight:800}

@media (max-width:720px){
  .cuenta-cajas>div{width:68px;height:92px}
  .cuenta-cajas strong{font-size:32px;padding-top:21px}
  .cuenta-cajas span{font-size:7px}
}

/* ==== RONDA 8 ==== */

/* --- CONTADOR: banderita calada como la referencia --- */
.cuenta-cajas>div{position:relative;flex:0 0 auto;width:88px;height:116px;
  padding:0;border:0;border-radius:0;box-shadow:none;text-align:center;overflow:hidden}
/* orla de puntos + celosia, todo calado (pintado del color del fondo) */
.cuenta-cajas>div::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle 2.3px at 50% 50%,var(--altea) 96%,transparent 100%) 4px 6px/11px 11px repeat-x,
    radial-gradient(circle 2.3px at 50% 50%,var(--altea) 96%,transparent 100%) 4px 99px/11px 11px repeat-x,
    linear-gradient(var(--altea),var(--altea)) 0 17px/100% 1.6px no-repeat,
    linear-gradient(var(--altea),var(--altea)) 0 93px/100% 1.6px no-repeat,
    linear-gradient(var(--altea),var(--altea)) 0 40px/100% 1.6px no-repeat,
    linear-gradient(var(--altea),var(--altea)) 0 66px/100% 1.6px no-repeat,
    linear-gradient(var(--altea),var(--altea)) 22px 17px/1.6px 78px no-repeat,
    linear-gradient(var(--altea),var(--altea)) 44px 17px/1.6px 78px no-repeat,
    linear-gradient(var(--altea),var(--altea)) 66px 17px/1.6px 78px no-repeat}
.cuenta-cajas>div::after{content:none}
.cuenta-cajas strong{position:relative;z-index:3;display:block;
  font-family:var(--titulo);font-size:44px;line-height:1;padding:26px 0 0;
  color:var(--altea)}
.cuenta-cajas span{position:relative;z-index:3;display:block;margin-top:6px;
  font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
  color:var(--altea)}

/* --- PINATA: cae, hace DOS swings de ~2cm por lado y se queda fija --- */
/* Sube ~2cm respecto de donde estaba y la cuerda entra en la pinata para
   que se vea sujeta de verdad. */
.pinata-cuelga{position:absolute;top:0;right:clamp(6px,5vw,74px);z-index:5;
  width:clamp(96px,10vw,140px);height:calc(33% - 76px);
  pointer-events:none;display:block;transform-origin:50% 0;overflow:visible}
.pinata-cuelga .cuerda{position:absolute;left:50%;top:0;height:100%;width:3px;
  margin-left:-1.5px;background:var(--tinta);border-radius:2px;z-index:1;bottom:auto}
.pinata-cuelga .pinata{position:absolute;top:100%;left:0;right:auto;bottom:auto;
  width:100%;height:auto;max-width:none;display:block;z-index:2;
  transform:translateY(-16px)}
.pinata-cuelga.entro{opacity:1;animation:pinataEntra 2.6s cubic-bezier(.34,1.1,.5,1) 1 both}
@keyframes pinataEntra{
  0%  {opacity:0; transform:translateY(-170px) rotate(0deg)}
  20% {opacity:1}
  36% {transform:translateY(0) rotate(13deg)}     /* swing 1 */
  56% {transform:translateY(0) rotate(-11deg)}
  74% {transform:translateY(0) rotate(7deg)}      /* swing 2 */
  88% {transform:translateY(0) rotate(-3deg)}
  100%{opacity:1; transform:translateY(0) rotate(0deg)}   /* se queda fija */
}
@media (max-width:720px){
  .cuenta-cajas>div{width:68px;height:94px}
  .cuenta-cajas strong{font-size:33px;padding-top:20px}
  .cuenta-cajas span{font-size:7px}
  .pinata-cuelga{height:calc(33% - 50px)}
}

/* ==== RONDA 9 ==== */
/* Cada cuadro del contador ES una banderita calada (SVG con los huecos
   de verdad: orla de puntos, celosia y feston). El numero va encima. */
.cuenta-cajas>div{position:relative;flex:0 0 auto;width:88px;height:116px;
  padding:0;border:0;border-radius:0;box-shadow:none;text-align:center;
  overflow:visible;background:none;-webkit-mask:none;mask:none;
  background-repeat:no-repeat;background-position:top left;background-size:88px 116px}
.cuenta-cajas>div::before{content:none}
.cuenta-cajas>div::after{content:none}
.cuenta-cajas>div:nth-child(1){background-image:url('assets/flag-rosa.svg')}
.cuenta-cajas>div:nth-child(2){background-image:url('assets/flag-turquesa.svg')}
.cuenta-cajas>div:nth-child(3){background-image:url('assets/flag-naranja.svg')}
.cuenta-cajas>div:nth-child(4){background-image:url('assets/flag-verde.svg')}
.cuenta-cajas strong{position:relative;z-index:3;display:block;
  font-family:var(--titulo);font-size:40px;line-height:1;padding:27px 0 0;
  color:var(--altea)}
.cuenta-cajas span{position:relative;z-index:3;display:block;margin-top:8px;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:var(--altea)}
@media (max-width:720px){
  .cuenta-cajas>div{width:68px;height:90px;background-size:68px 90px}
  .cuenta-cajas strong{font-size:30px;padding-top:20px}
  .cuenta-cajas span{font-size:7px;margin-top:6px}
}

/* ==== RONDA 10 ==== */
/* El color de fondo tapaba los huecos del SVG: se pone transparente para
   que la celosia y la orla se vean caladas de verdad. */
.cuenta-cajas>div,
.cuenta-cajas>div:nth-child(1),.cuenta-cajas>div:nth-child(2),
.cuenta-cajas>div:nth-child(3),.cuenta-cajas>div:nth-child(4){
  background-color:transparent}
.cuenta-cajas>div:nth-child(1){background-image:url('assets/flag-rosa.svg')}
.cuenta-cajas>div:nth-child(2){background-image:url('assets/flag-turquesa.svg')}
.cuenta-cajas>div:nth-child(3){background-image:url('assets/flag-naranja.svg')}
.cuenta-cajas>div:nth-child(4){background-image:url('assets/flag-verde.svg')}

/* --- el slogan del pie, con mas presencia --- */
.slogan-pie{opacity:.62;font-size:clamp(14px,1.6vw,19px);max-width:38ch;
  letter-spacing:.02em;line-height:1.45}
.marca-pie{gap:16px}

/* ==== RONDA 11 ==== */
/* Altone, la tipografia de Grupo Altea, para el slogan del pie. */

.slogan-pie{font-family:'Altone','Rubik',system-ui,sans-serif;font-weight:400;
  font-size:clamp(15px,1.75vw,21px);line-height:1.45;letter-spacing:.015em;
  max-width:36ch;opacity:.72;color:#fff}
.marca-pie{gap:18px}

/* las etiquetas del contador, un pelin mas legibles sobre la celosia */
.cuenta-cajas span{margin-top:9px;font-size:9px;letter-spacing:.13em}

/* ==== RONDA 12 ==== */
/* La cuerda entra bien dentro de la pinata: se solapan para que no se vea
   el empalme entre la cuerda oscura y el cordel dibujado del icono. */
.pinata-cuelga .pinata{transform:translateY(-34px)}
.pinata-cuelga .cuerda{width:3px}

/* ==== RONDA 13 ==== */
/* La banderita deja una banda limpia abajo y la etiqueta va en BLANCO,
   para que DIAS / HORAS / MIN / SEG se lean de verdad. */
.cuenta-cajas>div{height:120px;background-size:88px 120px}
.cuenta-cajas strong{font-size:38px;padding:23px 0 0;color:var(--altea)}
.cuenta-cajas span{margin-top:16px;font-size:10px;letter-spacing:.16em;
  font-weight:800;color:#fff;text-shadow:0 1px 1px #00000030}
@media (max-width:720px){
  .cuenta-cajas>div{width:68px;height:94px;background-size:68px 94px}
  .cuenta-cajas strong{font-size:29px;padding-top:18px}
  .cuenta-cajas span{font-size:8px;margin-top:11px}
}

/* ==== RONDA 14 ==== */
/* El slogan va en Altone, pero como IMAGEN. El sitio no publica el archivo
   de la fuente, que es trial y no tenemos licencia. Mismo criterio que el
   Loop, donde la Altone queda horneada en los pixeles del video. */
.slogan-pie{display:block;width:min(74%,440px);height:auto;margin:0 auto;
  opacity:.74;max-width:100%}
.marca-pie{gap:20px}

/* ==== RONDA 15 ==== */
/* El slogan, en Altone y como imagen, con presencia de marca de agua. */
.slogan-pie{display:block;width:min(78%,392px);height:auto;margin:2px auto 0;
  opacity:.8;max-width:100%}
.marca-pie{gap:22px}
.pie .marca-pie img[alt="Grupo Altea"]{width:min(46%,196px);height:auto}

/* ==== RONDA 16 ==== */

/* --- La cuerda de la pinata: mismo rosa y mismo grosor que el cordel
       dibujado del icono, para que se vea UNA sola cuerda. --- */
.pinata-cuelga .cuerda{background:#e4007c;width:2.6px;margin-left:-1.3px;
  border-radius:0}
.pinata-cuelga .pinata{transform:translateY(-30px)}

/* --- El liston de papel picado, 2 cm mas bajo --- */
#dinamica::after,#ganando::after,#gritos::after,.cierre::after{
  height:88px;background-size:auto 88px}
#dinamica,#ganando,#gritos{padding-top:clamp(120px,9.4vw,152px)}
.cierre{padding-top:clamp(116px,8.8vw,146px)}

/* --- Iconos de compartir: mas finos y con mas aire --- */
.compartir{gap:24px}
.compartir svg{width:24px;height:24px}
.compartir button{padding:8px}

/* --- El slogan, marca de agua integrada bajo el logo --- */
.marca-pie{gap:26px;position:relative}
.slogan-pie{display:block;width:min(84%,520px);height:auto;margin:0 auto;
  opacity:.34;max-width:100%}

/* --- Reglas con enfasis --- */
.reglas li strong{font-weight:800;color:var(--altea)}

/* --- La bandera, un poco mas grande y bien apoyada --- */
.bandera{width:clamp(92px,9.2vw,128px);margin:0 0 -2px}

@media (max-width:720px){
  #dinamica::after,#ganando::after,#gritos::after,.cierre::after{
    height:62px;background-size:auto 62px}
  #dinamica,#ganando,#gritos{padding-top:96px}
  .cierre{padding-top:92px}
}

/* ==== RONDA 17 ==== */
/* El slogan es una MARCA DE AGUA de verdad: grande, muy tenue y detras
   del logotipo, integrada al pie en vez de ser una linea suelta. */
.marca-pie{position:relative;display:grid;place-items:center;padding:26px 0 8px;gap:0}
.slogan-pie{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(94%,860px);height:auto;opacity:.15;pointer-events:none;z-index:0;
  max-width:none}
.marca-pie .logo-pie{position:relative;z-index:1;width:min(48%,206px);height:auto;
  display:block}
.pie .redes-pie{margin-top:26px}

@media (max-width:720px){
  .slogan-pie{width:104%}
  .marca-pie .logo-pie{width:150px}
}

/* ==== RONDA 18 ==== */
/* El contenedor del pie encogia al ancho del logo, por eso la marca de agua
   salia diminuta. Ahora ocupa todo el ancho. */
.marca-pie{width:100%;max-width:900px;margin:0 auto;position:relative;
  display:grid;place-items:center;padding:34px 0 10px}
.slogan-pie{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(96%,820px);height:auto;opacity:.17;pointer-events:none;z-index:0}
.marca-pie .logo-pie{position:relative;z-index:1;width:min(210px,42%);height:auto;display:block}
@media (max-width:720px){
  .slogan-pie{width:104%}
  .marca-pie .logo-pie{width:148px}
}

/* ==== RONDA 19 ==== */
/* `.pie img{width:146px}` le ganaba por especificidad a la marca de agua y
   por eso salia chiquita. Aqui se le da mas peso al selector. */
.pie .marca-pie{width:100%;max-width:920px;margin:0 auto;position:relative;
  display:grid;place-items:center;padding:40px 0 12px}
.pie .marca-pie .slogan-pie{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(96%,840px);height:auto;margin:0;
  opacity:.18;pointer-events:none;z-index:0;max-width:none}
.pie .marca-pie .logo-pie{position:relative;z-index:1;width:min(212px,44%);
  height:auto;margin:0;display:block}

/* ==== RONDA 20 ==== */
/* El "liston" que sobraba era la FRANJA AZUL DEL PIE, no el papel picado.
   El papel picado recupera su altura y el pie se achica. */
#dinamica::after,#ganando::after,#gritos::after,.cierre::after{
  height:112px;background-size:auto 112px}
#dinamica,#ganando,#gritos{padding-top:clamp(146px,11.4vw,186px)}
.cierre{padding-top:clamp(142px,10.6vw,178px)}

/* la franja azul del pie, mucho mas baja */
.pie{padding:22px 22px 30px}
.pie .marca-pie{padding:16px 0 4px}
.pie .redes-pie{margin:14px 0 10px}

/* el slogan, con mas presencia */
.pie .marca-pie .slogan-pie{width:min(98%,900px);opacity:.30}
.pie .marca-pie .logo-pie{width:min(196px,40%)}

/* aviso y reglas: mayusculas, chico, centrado, como marca de agua */
.pie .legal{margin:0;text-align:center;font-size:10.5px;font-weight:800;
  letter-spacing:.19em;text-transform:uppercase;color:#ffffff66}
.pie .legal a{text-decoration:none;color:inherit;transition:color var(--rapido)}
.pie .legal a:hover{color:#ffffffc4;text-decoration:underline}

@media (max-width:720px){
  #dinamica::after,#ganando::after,#gritos::after,.cierre::after{
    height:74px;background-size:auto 74px}
  #dinamica,#ganando,#gritos{padding-top:108px}
  .cierre{padding-top:104px}
  .pie{padding:18px 18px 24px}
  .pie .legal{font-size:9px;letter-spacing:.15em}
}

/* ==== RONDA 21 ==== */
/* La marca de agua va DETRAS DE TODO EL PIE, no detras del logo: asi no
   choca con el logotipo y se lee como una filigrana de fondo. */
.pie{position:relative;overflow:hidden;padding:30px 22px 34px}
.pie .marca-pie{position:static;display:block;padding:0;margin:0;max-width:none;width:auto}
.pie .marca-pie .slogan-pie{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(96%,980px);height:auto;margin:0;
  opacity:.15;z-index:0;pointer-events:none;max-width:none}
.pie .marca-pie .logo-pie{position:relative;z-index:2;width:min(196px,42%);
  height:auto;margin:0 auto;display:block}
.pie .redes-pie{position:relative;z-index:2;margin:22px 0 14px}
.pie .legal{position:relative;z-index:2}

/* ==== RONDA 22 ==== */
/* Los avatares se normalizaron por ALTURA, asi que el CSS debe fijar la
   ALTURA (no el ancho): si no, cada uno rinde distinto de alto.
   Y se cierra el hueco para que APOYEN sobre su escalon. */
.podio .lugar .avatar{width:auto;height:clamp(84px,10.6vw,132px);
  display:block;font-size:0;line-height:0;margin:0 0 -3px;overflow:visible;
  filter:drop-shadow(0 5px 4px #00000045)}
.podio .lugar .avatar img{height:100%;width:auto;display:block;margin:0 auto;
  object-fit:contain}

/* lo mismo en las tarjetas: misma altura para todos */
.tarjeta-alto .avatar{width:auto;height:112px;flex:0 0 auto;display:block;
  font-size:0;line-height:0}
.tarjeta-alto .avatar img{height:100%;width:auto;display:block;object-fit:contain}

/* ==== RONDA 23 ==== */
/* El slogan NO es filigrana de fondo: va legible, en dos lineas, entre el
   logotipo y los iconos. */
.pie{position:relative;overflow:visible;padding:30px 22px 30px}
.pie .marca-pie{position:static;display:flex;flex-direction:column;
  align-items:center;gap:20px;padding:0;margin:0;max-width:none;width:auto}
.pie .marca-pie .logo-pie{position:static;z-index:auto;width:min(190px,42%);
  height:auto;margin:0;display:block}
.pie .marca-pie .slogan-pie{position:static;transform:none;left:auto;top:auto;
  width:min(92%,460px);height:auto;margin:0;opacity:.88;z-index:auto;max-width:100%}

/* los iconos, SIN circulos */
.pie .redes-pie{margin:24px 0 16px;gap:30px}
.pie .redes-pie a{border:0;background:none;padding:4px;border-radius:0;
  color:#ffffffc4}
.pie .redes-pie a:hover{background:none;border:0;color:#fff}
.pie .redes-pie svg{width:23px;height:23px}

/* aviso y reglas: sin negritas */
.pie .legal{margin:0;text-align:center;font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:#ffffff7a}
.pie .legal a{text-decoration:none;color:inherit;font-weight:400}
.pie .legal a:hover{color:#ffffffc4;text-decoration:underline}

@media (max-width:720px){
  .pie .marca-pie .slogan-pie{width:96%}
  .pie .legal{font-size:9.5px;letter-spacing:.13em}
}

/* ==== RONDA 24 ==== */
/* La huella del escalon (::before, 13px por encima del bloque) se pintaba
   ENCIMA de los pies. Ahora el avatar va por delante y apoyado justo sobre
   esa huella. */
.podio .lugar .avatar{position:relative;z-index:3;margin:0 0 13px}
.podio .bloque{z-index:1}
.podio .bloque::before{z-index:1}

/* los tres escalones del mismo ancho: solo la ALTURA marca el lugar */
.podio{grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,2vw,26px)}

/* ==== RONDA 25 ==== */

/* --- REGLAS: vinetas alineadas al centro del primer renglon --- */
.reglas li{position:relative;padding:0 0 0 34px;margin:0 0 19px;
  font-size:16px;line-height:1.55}
.reglas li::before,.reglas .aparte li::before{
  content:"";position:absolute;left:5px;top:calc(.775em - 5px);
  width:10px;height:10px;border-radius:50%;background:var(--altea)}
.reglas li strong{font-weight:700;color:var(--altea)}

/* --- CONTADOR: el numero manda, sin celosia encima --- */
.cuenta-cajas strong{position:relative;z-index:3;display:block;
  font-family:var(--titulo);font-size:42px;line-height:1;padding:29px 0 0;
  color:var(--altea)}
.cuenta-cajas span{position:relative;z-index:3;display:block;margin-top:15px;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
  color:#fff;text-shadow:0 1px 1px #00000026}

/* --- NUMEROS DE LOS PASOS: en azul Altea, no naranja --- */
.paso .num{color:var(--altea);background:none;
  -webkit-text-stroke:4px var(--tinta);paint-order:stroke fill}

/* --- SLOGAN: marca de agua de verdad, y el aviso todavia mas tenue --- */
.pie .marca-pie{gap:16px}
.pie .marca-pie .slogan-pie{width:min(88%,430px);opacity:.42}
.pie .legal{font-size:10px;letter-spacing:.17em;color:#ffffff55}

@media (max-width:720px){
  .cuenta-cajas strong{font-size:31px;padding-top:22px}
  .cuenta-cajas span{font-size:8px;margin-top:10px}
}

/* ==== RONDA 26 ==== */

/* --- PAPEL PICADO: se veia estirado porque el alto mandaba. Ahora manda
       el ANCHO del azulejo y la altura sale sola, sin deformar. --- */
#dinamica::after,#ganando::after,#gritos::after,.cierre::after{
  height:104px;background-size:466px 104px}
#dinamica,#ganando,#gritos{padding-top:clamp(138px,10.8vw,176px)}
.cierre{padding-top:clamp(134px,10.2vw,170px)}

/* --- CASCOS DEL HERO: pisan el suelo y los letreros se acercan --- */
.dueto{padding-top:clamp(26px,3vw,40px);gap:clamp(4px,1.4vw,22px);align-items:flex-end}
.companero{position:relative;display:flex;align-items:flex-end}
.companero::after{content:"";position:absolute;left:50%;bottom:4px;
  transform:translateX(-50%);width:58%;height:14px;border-radius:50%;
  background:#00000042;filter:blur(6px);z-index:0}
.companero img{position:relative;z-index:1}
.globo{top:auto;bottom:calc(100% - 10px);padding:9px 15px;
  font-size:clamp(13px,1.4vw,17px);box-shadow:3px 3px 0 var(--tinta)}
.globo-izq{left:2%}
.globo-der{right:0}

/* el rojo de ojos abiertos no trae sombrero: se iguala por el casco */
.companero.es-rojo img{width:clamp(120px,15.3vw,210px)}
.paso .casco-paso[src*="rojo"]{width:112px}
.cierre-cascos .pisa img[src*="rojo"]{width:clamp(96px,12.5vw,154px)}
.punto img[src*="rojo"]{width:104px}

/* --- NUMEROS DE LOS PASOS: linea delgada, sin bloque --- */
.paso .num{top:-30px;left:-6px;font-size:clamp(52px,6.2vw,76px);
  color:transparent;-webkit-text-stroke:2.4px var(--altea);paint-order:stroke fill;
  background:none;letter-spacing:-.02em}
.paso:hover .num{transform:rotate(-5deg) scale(1.05)}

/* --- COMO SUMAN LOS VOTOS: los dos textos a dos renglones --- */
.punto .quien-vota{max-width:none;line-height:1.35;font-weight:700}

/* --- RANKING: entra con animacion y los fuegos crecen --- */
.entra-titulo{opacity:0}
.entra-titulo.entro{animation:subeTitulo .9s var(--curva) 1 both}
@keyframes subeTitulo{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:none}}
.entra-podio{opacity:0}
.entra-podio.entro{animation:subePodio 1s var(--curva) .25s 1 both}
@keyframes subePodio{0%{opacity:0;transform:translateY(38px) scale(.97)}100%{opacity:1;transform:none}}
.fuegos{width:clamp(210px,23vw,360px);top:clamp(104px,9vw,150px)}
.fuegos-izq.entro{animation:estalla 2.1s ease-out 1 both}
.fuegos-der.entro{animation:estallaEspejo 2.1s ease-out .45s 1 both}
@keyframes estalla{
  0%{opacity:0;transform:scale(.18)}
  45%{opacity:1;transform:scale(1.16)}
  100%{opacity:.7;transform:scale(1)}}
@keyframes estallaEspejo{
  0%{opacity:0;transform:scaleX(-1) scale(.18)}
  45%{opacity:1;transform:scaleX(-1) scale(1.16)}
  100%{opacity:.7;transform:scaleX(-1) scale(1)}}

/* --- PODIO: el revolucionario mas grande y el grito legible --- */
.podio .lugar .avatar{height:clamp(96px,12vw,150px)}
.lugar .grito-podio{color:#ffffffe6;font-size:13.5px;font-style:italic;
  margin:0 0 14px;line-height:1.35}
.lugar .nombre-podio{font-size:clamp(15px,1.8vw,20px)}

/* --- GRITOS ALTEA: todo centrado y el casco a un lado --- */
#gritos .titulo-centro.con-casco{padding-right:0;text-align:center;
  max-width:none;display:block}
#gritos .titulo-centro h2{white-space:nowrap}
.casco-titulo{position:absolute;right:auto;left:calc(50% + clamp(150px,17vw,290px));
  top:auto;bottom:-6px;width:clamp(78px,8.4vw,112px)}
#gritos .buscador{margin-left:auto;margin-right:auto}

/* --- TARJETAS: marcador en dos renglones, iconos finos --- */
.marcadorcito{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  margin-top:8px}
.mc-pts{font-size:13px;color:var(--tinta)}
.mc-pts strong{font-family:var(--titulo);font-size:19px;color:var(--altea);
  margin-right:4px}
.mc-vot{font-size:11.5px;color:var(--tinta-suave);letter-spacing:.02em}
.compartir svg{width:23px;height:23px}

@media (max-width:1100px){
  .casco-titulo{position:static;display:block;margin:14px auto 0}
}
@media (max-width:720px){
  #dinamica::after,#ganando::after,#gritos::after,.cierre::after{
    height:70px;background-size:314px 70px}
  #dinamica,#ganando,#gritos{padding-top:102px}
  .cierre{padding-top:98px}
  .paso .num{font-size:46px}
}

/* ==== RONDA 27 ==== */
/* El azulejo del papel picado mide 672x168. Para que la cuerda empalme sin
   corte, el ancho tiene que ser exactamente 4 veces el alto (672/168). */
#dinamica::after,#ganando::after,#gritos::after,.cierre::after{
  height:104px;background-size:416px 104px}

/* Los letreros, pegados a la cabeza del casco */
.globo{top:auto;bottom:calc(100% - 26px);padding:8px 14px;
  font-size:clamp(13px,1.4vw,17px)}
.globo-izq{left:-2%}
.globo-der{right:-4%}
.globo::after{bottom:-12px;border-width:7px}

@media (max-width:720px){
  #dinamica::after,#ganando::after,#gritos::after,.cierre::after{
    height:68px;background-size:272px 68px}
}

/* ==== RONDA 28 ==== */
/* El rojo vuelve a traer sombrero (av-mariachi, ojos abiertos): se reajusta
   su ancho para que la CUPULA mida lo mismo que la del azul. */
.companero.es-rojo img{width:clamp(142px,18.2vw,250px)}
.paso .casco-paso[src*="rojo"]{width:134px}
.cierre-cascos .pisa img[src*="rojo"]{width:clamp(114px,14.8vw,183px)}
.punto img[src*="rojo"]{width:126px}

/* ==== CIERRE FINAL ==== */

/* --- 1) LA PINATA: una sola pieza, cuelga, cae, hace dos swings y se queda --- */
.bloque-reglas{position:relative}
.pinata{position:absolute;top:-18px;right:clamp(4px,4.4vw,68px);z-index:5;
  width:clamp(104px,10.6vw,148px);height:auto;pointer-events:none;
  transform-origin:27% 0;opacity:0}
.pinata.entro{opacity:1;animation:pinataCuelga 2.8s cubic-bezier(.3,1.05,.5,1) 1 both}
@keyframes pinataCuelga{
  0%  {opacity:0; transform:translateY(-52%) rotate(0deg)}
  18% {opacity:1}
  38% {transform:translateY(0) rotate(12deg)}
  57% {transform:translateY(0) rotate(-9.5deg)}
  74% {transform:translateY(0) rotate(6deg)}
  88% {transform:translateY(0) rotate(-2.5deg)}
  100%{opacity:1; transform:translateY(0) rotate(0deg)}}

/* --- 2) PAPEL PICADO igual en todas las paginas --- */
.tira-picado{position:relative;z-index:12;height:104px;
  background:url('assets/papel-picado.svg') repeat-x left top/416px 104px}
.picado{display:none}
#dinamica::after,#ganando::after,#gritos::after,.cierre::after{
  height:104px;background-size:416px 104px}

/* --- 3) HERO: borde limpio, circulo de fondo y sombra marcada --- */
.portada-arte{position:relative}
.portada-arte::before{content:"";position:absolute;left:50%;top:46%;
  transform:translate(-50%,-50%);width:min(78%,430px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,#ffffff16 0 62%,transparent 63%);
  z-index:0;pointer-events:none}
.dueto{position:relative;z-index:2}
.companero img{filter:drop-shadow(0 0 1px #9ccbff8c) drop-shadow(0 14px 16px #00000052)}
.companero::after{width:64%;height:18px;bottom:2px;background:#00000059;filter:blur(7px)}

/* los letreros, pegados y con aire de onomatopeya */
.globo{top:auto;bottom:calc(100% - 34px);padding:9px 16px;border-radius:14px;
  font-size:clamp(14px,1.55vw,19px);transform:rotate(-3deg);
  box-shadow:4px 4px 0 var(--tinta)}
.globo-der{transform:rotate(3deg)}
.globo-izq{left:-4%}
.globo-der{right:-6%}

/* --- 4) NUMEROS DE LOS PASOS: sólidos, sin cruce de lineas --- */
.paso{overflow:visible}
.paso .num{z-index:6;color:var(--altea);-webkit-text-stroke:5px var(--crema);
  paint-order:stroke fill;top:-34px;left:-8px;
  font-size:clamp(54px,6.4vw,80px);text-shadow:3px 3px 0 #2a1c1024}

/* --- 5) GRITOS ALTEA: buscador mas chico y arriba; el casco entra una vez --- */
#gritos .titulo-centro{margin-bottom:clamp(26px,3vw,38px)}
.buscador{max-width:380px;padding:9px 18px;font-size:14px;margin-bottom:34px}
.buscador input{font-size:14px}
.casco-titulo{opacity:0}
.casco-titulo.entro{animation:saludoCasco 1.35s var(--curva) 1 both}
@keyframes saludoCasco{
  0%{opacity:0;transform:translateY(34px) rotate(-11deg)}
  46%{opacity:1;transform:translateY(-10px) rotate(6deg)}
  74%{transform:translateY(0) rotate(-3deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}}

/* --- 6) RANKING: los fuegos aparecen brillando y se quedan --- */
.fuegos{position:absolute;width:clamp(200px,22vw,340px);
  top:clamp(96px,8.4vw,140px);z-index:2;pointer-events:none;opacity:0}
.fuegos-izq{left:clamp(4px,2.4vw,50px)}
.fuegos-der{right:clamp(4px,2.4vw,50px)}
.fuegos-izq.entro{animation:brilla 1.8s ease-out 1 both}
.fuegos-der.entro{animation:brillaEspejo 1.8s ease-out .4s 1 both}
@keyframes brilla{
  0%{opacity:0;transform:scale(.2);filter:brightness(2.4)}
  40%{opacity:1;transform:scale(1.12);filter:brightness(1.5)}
  100%{opacity:.68;transform:scale(1);filter:none}}
@keyframes brillaEspejo{
  0%{opacity:0;transform:scaleX(-1) scale(.2);filter:brightness(2.4)}
  40%{opacity:1;transform:scaleX(-1) scale(1.12);filter:brightness(1.5)}
  100%{opacity:.68;transform:scaleX(-1) scale(1);filter:none}}

/* --- 7) CIERRE: cascos parejos, sin flotar, y las trompetas entran aqui --- */
.cierre{position:relative;overflow:hidden}
.cierre-cascos{align-items:flex-end;gap:clamp(10px,2.4vw,34px)}
.cierre-cascos .pisa img{animation:none}
.cierre-cascos .pisa img[src*="verde"]{width:clamp(104px,13.5vw,166px)}
.cierre-cascos .pisa img[src*="azul"] {width:clamp(114px,14.9vw,184px)}
.cierre-cascos .pisa img[src*="rojo"] {width:clamp(126px,16.4vw,202px)}
.pisa::after{height:17px;background:#2a1c1038;bottom:1px;width:70%}
.trompeta{position:absolute;top:clamp(120px,11vw,180px);z-index:2;
  pointer-events:none;width:clamp(130px,15vw,230px);opacity:0}
.trompeta-izq{left:clamp(2px,1.4vw,30px)}
.trompeta-der{right:clamp(2px,1.4vw,30px)}
.trompeta-izq.entro{animation:entraIzq 1.1s var(--curva) 1 both}
.trompeta-der.entro{animation:entraDer 1.1s var(--curva) .2s 1 both}
@keyframes entraIzq{
  0%{opacity:0;transform:translateX(-90px) rotate(-14deg)}
  62%{transform:translateX(8px) rotate(3deg)}
  100%{opacity:.92;transform:translateX(0) rotate(0)}}
@keyframes entraDer{
  0%{opacity:0;transform:translateX(90px) rotate(14deg)}
  62%{transform:translateX(-8px) rotate(-3deg)}
  100%{opacity:.92;transform:translateX(0) rotate(0)}}

/* --- 8) MODERACION: la anfitriona --- */
.anfitriona{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:6px auto 22px;max-width:520px}
.anfitriona img{width:86px;height:auto;display:block;
  filter:drop-shadow(0 6px 6px #2a1c1030)}
.anfitriona p{margin:0;font-family:var(--titulo);font-size:15px;
  color:var(--tinta-suave);line-height:1.35;text-align:left}

@media (max-width:720px){
  .tira-picado{height:68px;background-size:272px 68px}
  #dinamica::after,#ganando::after,#gritos::after,.cierre::after{
    height:68px;background-size:272px 68px}
  .trompeta{display:none}
  .pinata{width:88px;right:2px}
  .anfitriona{flex-direction:column;text-align:center}
  .anfitriona p{text-align:center}
}

/* ==== MODERACION ==== */
/* El panel interno con el mismo aire que el sitio: papel picado arriba,
   fondo de iconos y la Adelita como anfitriona. */
.panel,.moderacion,main{position:relative}
.anfitriona{display:flex;align-items:flex-end;justify-content:center;gap:18px;
  margin:14px auto 26px;max-width:560px}
.anfitriona img{width:104px;height:auto;display:block;flex:0 0 auto;
  filter:drop-shadow(0 7px 6px #2a1c1030)}
.anfitriona p{margin:0 0 14px;font-family:var(--titulo);
  font-size:clamp(14px,1.5vw,17px);color:var(--tinta-suave);
  line-height:1.35;text-align:left;max-width:30ch}

/* ==== MEDIDO Y CORREGIDO ====
   Se dejo de normalizar por ancho de cupula (cada PNG tiene distinta
   proporcion y salian de distinto ALTO: 192, 219 y 207 px medidos).
   Ahora manda la ALTURA: los tres miden lo mismo en pantalla.
   ================================================================= */

/* --- HERO: misma altura para los dos, y el brinco --- */
.companero img,
.companero.es-verde img,.companero.es-azul img,.companero.es-rojo img{
  width:auto!important;height:clamp(178px,20.5vw,268px)!important}
.brinca img{animation:brinco 1.25s cubic-bezier(.28,.9,.35,1) .45s 1 both}
.brinca-2 img{animation-delay:.78s}
@keyframes brinco{
  0%  {transform:translateY(0) scaleY(1)}
  16% {transform:translateY(0) scaleY(.9) scaleX(1.05)}
  42% {transform:translateY(-38px) scaleY(1.05) scaleX(.97)}
  68% {transform:translateY(0) scaleY(.93) scaleX(1.03)}
  84% {transform:translateY(-9px) scaleY(1.01)}
  100%{transform:translateY(0) scaleY(1)}}
@media (prefers-reduced-motion:reduce){.brinca img{animation:none}}

/* --- PASOS: los pies A RAS del borde de la tarjeta (habia +7px) --- */
.paso .casco-paso,
.paso .casco-paso[src*="verde"],.paso .casco-paso[src*="azul"],.paso .casco-paso[src*="rojo"]{
  width:auto!important;height:132px!important;
  top:auto;bottom:100%;right:16px;margin-bottom:0}

/* --- CIERRE: misma altura para los tres --- */
.cierre-cascos .pisa img,
.cierre-cascos .pisa img[src*="verde"],
.cierre-cascos .pisa img[src*="azul"],
.cierre-cascos .pisa img[src*="rojo"]{
  width:auto!important;height:clamp(140px,17vw,208px)!important}

/* --- COMO SUMAN LOS VOTOS: misma altura --- */
.punto img,.punto img[src*="rojo"],.punto img[src*="azul"],.punto img[src*="verde"]{
  width:auto!important;height:126px!important;flex:0 0 auto}

/* --- PODIO: misma altura para los tres avatares --- */
.podio .lugar .avatar{width:auto;height:clamp(96px,12vw,150px)}
.podio .lugar .avatar img{height:100%;width:auto;display:block;margin:0 auto}

@media (max-width:720px){
  .paso .casco-paso{height:100px!important}
  .companero img{height:150px!important}
  .cierre-cascos .pisa img{height:118px!important}
}

/* ==== AJUSTE DE 3PX ====
   El desfase que quedaba era exactamente el grosor del marco de la
   tarjeta (3px). Se levanta el casco para que apoye sobre la linea. */
.paso .casco-paso,
.paso .casco-paso[src*="verde"],.paso .casco-paso[src*="azul"],.paso .casco-paso[src*="rojo"]{
  margin-bottom:3px}

/* ==== PUNTOS 2-3-4 ==== */

/* 2) El borde deja de verse escalonado: un halo del mismo azul del fondo
      pega el recorte contra la portada. */
.portada .companero img{
  filter:drop-shadow(0 0 1.5px #1f5f9e) drop-shadow(0 0 3px #1f5f9e88)
         drop-shadow(0 15px 16px #00000052)}

/* 3) Nada de brinco basico: durante la ronda hay un acompanamiento sutil */
.brinca img{animation:none}
.companero img.en-ronda{animation:acompana .26s ease-in-out infinite alternate}
@keyframes acompana{from{transform:translateY(0)}to{transform:translateY(-5px)}}

/* 4) Los letreros SALEN de la cabeza del casquito */
.dueto{padding-top:clamp(58px,6.4vw,86px)}
.globo{position:absolute;top:auto;bottom:calc(100% - 52px);z-index:4;
  padding:9px 15px;border-radius:15px;font-size:clamp(14px,1.5vw,18px);
  box-shadow:3px 3px 0 var(--tinta);white-space:nowrap}
.globo-izq{left:12%;transform:rotate(-4deg)}
.globo-der{right:6%;transform:rotate(4deg)}
/* la colita apunta a la cabeza */
.globo::after{content:"";position:absolute;bottom:-13px;left:26px;
  border:8px solid transparent;border-top-color:var(--tinta);border-bottom:0}
.globo-izq::after{left:auto;right:24px}
.globo-der::after{left:26px;right:auto}

/* ==== ULTIMA RONDA ==== */

/* 12) PAPEL PICADO de Altea. El azulejo mide 696x174 = proporcion 4:1.
       Si el ancho no es 4 veces el alto, se estira. Aqui se respeta. */
.tira-picado{height:116px;background:url('assets/papel-picado.svg') repeat-x left top/464px 116px}
#dinamica::after,#ganando::after,#gritos::after,.cierre::after{
  height:116px;background-size:464px 116px}
#dinamica,#ganando,#gritos{padding-top:clamp(150px,11.6vw,190px)}
.cierre{padding-top:clamp(146px,11vw,184px)}

/* 8) RANKING: los fuegos estallan TRES veces antes de quedarse */
.fuegos-izq.entro{animation:tresEstallidos 3.4s ease-out 1 both}
.fuegos-der.entro{animation:tresEstallidosEsp 3.4s ease-out .45s 1 both}
@keyframes tresEstallidos{
  0%  {opacity:0;transform:scale(.15);filter:brightness(2.6)}
  14% {opacity:1;transform:scale(1.12);filter:brightness(1.6)}
  26% {opacity:.25;transform:scale(.9);filter:brightness(1)}
  38% {opacity:1;transform:scale(1.16);filter:brightness(2)}
  52% {opacity:.3;transform:scale(.92)}
  64% {opacity:1;transform:scale(1.1);filter:brightness(1.8)}
  100%{opacity:.7;transform:scale(1);filter:none}}
@keyframes tresEstallidosEsp{
  0%  {opacity:0;transform:scaleX(-1) scale(.15);filter:brightness(2.6)}
  14% {opacity:1;transform:scaleX(-1) scale(1.12);filter:brightness(1.6)}
  26% {opacity:.25;transform:scaleX(-1) scale(.9);filter:brightness(1)}
  38% {opacity:1;transform:scaleX(-1) scale(1.16);filter:brightness(2)}
  52% {opacity:.3;transform:scaleX(-1) scale(.92)}
  64% {opacity:1;transform:scaleX(-1) scale(1.1);filter:brightness(1.8)}
  100%{opacity:.7;transform:scaleX(-1) scale(1);filter:none}}

/* 9) GRITOS ALTEA: el buscador sube y se achica */
#gritos .titulo-centro{margin-bottom:18px}
#gritos .titulo-centro p{margin-top:14px}
.buscador{max-width:340px;padding:8px 16px;margin:0 auto 30px}
.buscador input{font-size:13.5px}

/* 10 y 16) TARJETAS PAREJAS: el nombre ocupa siempre dos renglones */
.tarjeta-alto{align-items:flex-start}
.tarjeta .quien{min-width:0;flex:1}
.tarjeta .nombre{margin:0 0 2px;font-family:var(--titulo);
  font-size:clamp(15px,1.55vw,18px);line-height:1.16;
  height:2.32em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;word-break:break-word}
.tarjeta .area{margin:0 0 6px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800}
.tarjeta .frase{min-height:2.7em;display:flex;align-items:center;justify-content:center}
.compartir svg{width:22px;height:22px}

/* 11) EL CIERRE: las trompetas entran con enfasis de tamano */
.trompeta{width:clamp(140px,16vw,250px);opacity:0}
.trompeta-izq.entro{animation:trompetaIzq 1.4s cubic-bezier(.25,1.15,.4,1) 1 both}
.trompeta-der.entro{animation:trompetaDer 1.4s cubic-bezier(.25,1.15,.4,1) .22s 1 both}
@keyframes trompetaIzq{
  0%  {opacity:0;transform:translateX(-120px) scale(.55) rotate(-16deg)}
  55% {opacity:1;transform:translateX(14px) scale(1.16) rotate(4deg)}
  78% {transform:translateX(-4px) scale(.97) rotate(-2deg)}
  100%{opacity:.95;transform:translateX(0) scale(1) rotate(0)}}
@keyframes trompetaDer{
  0%  {opacity:0;transform:translateX(120px) scaleX(-1) scale(.55) rotate(16deg)}
  55% {opacity:1;transform:translateX(-14px) scaleX(-1) scale(1.16) rotate(-4deg)}
  78% {transform:translateX(4px) scaleX(-1) scale(.97) rotate(2deg)}
  100%{opacity:.95;transform:translateX(0) scaleX(-1) scale(1) rotate(0)}}

/* 5) COMO PARTICIPAR: menos cafe, mas color de fiesta */
#dinamica .paso h3{color:var(--altea)}
#dinamica .paso{border-color:var(--altea);box-shadow:0 6px 0 var(--altea)}
#dinamica .paso .num{-webkit-text-stroke-color:var(--crema)}
#dinamica .titulo-centro h2{color:var(--altea)}

/* 15) La Adelita, al lado del panel */
.anfitriona-lado{position:fixed;right:26px;bottom:22px;z-index:40;
  display:flex;align-items:flex-end;gap:12px;max-width:330px;pointer-events:none}
.anfitriona-lado img{width:110px;height:auto;display:block;
  filter:drop-shadow(0 8px 8px #2a1c1033)}
.anfitriona-lado p{margin:0 0 16px;font-family:var(--titulo);font-size:13.5px;
  line-height:1.35;color:var(--tinta-suave);background:#fffdf7;
  border:var(--marco);border-radius:14px;padding:10px 14px;
  box-shadow:3px 3px 0 var(--tinta)}
.anfitriona{display:none}

@media (max-width:900px){
  .anfitriona-lado{display:none}
}
@media (max-width:720px){
  .tira-picado{height:76px;background-size:304px 76px}
  #dinamica::after,#ganando::after,#gritos::after,.cierre::after{
    height:76px;background-size:304px 76px}
  #dinamica,#ganando,#gritos{padding-top:110px}
  .cierre{padding-top:106px}
}

/* ==== RONDA FINAL ====
   LOS TAMANOS, DE UNA VEZ.
   Medido: la cupula ya mide 302/301/300 px en los tres archivos, pero la
   relacion cupula÷alto es 0.797 / 0.700 / 0.730. Al fijar la ALTURA, la
   cupula del verde salia 14% mas grande. Por eso ahora se fija el ANCHO
   proporcional a imagen÷cupula, que iguala la CUPULA, que es lo que se
   percibe como "tamano". Los pies ya estan al ras, asi que apoyan igual.
       verde 327/302 = 1.083   ->  x0.903 respecto del azul
       azul  361/301 = 1.199   ->  x1.000  (referencia)
       rojo  399/300 = 1.330   ->  x1.109
   ================================================================= */
.companero img,.companero.es-verde img,.companero.es-azul img,.companero.es-rojo img,
.paso .casco-paso,.paso .casco-paso[src*="verde"],.paso .casco-paso[src*="azul"],.paso .casco-paso[src*="rojo"],
.punto img,.punto img[src*="verde"],.punto img[src*="azul"],.punto img[src*="rojo"],
.cierre-cascos .pisa img{height:auto!important}

.companero.es-azul  img{width:clamp(150px,19.4vw,252px)!important}
.companero.es-verde img{width:clamp(135px,17.5vw,228px)!important}
.companero.es-rojo  img{width:clamp(166px,21.5vw,279px)!important}

.paso .casco-paso[src*="azul"] {width:118px!important}
.paso .casco-paso[src*="verde"]{width:107px!important}
.paso .casco-paso[src*="rojo"] {width:131px!important}

.punto img[src*="azul"] {width:118px!important}
.punto img[src*="verde"]{width:107px!important}
.punto img[src*="rojo"] {width:131px!important}

.cierre-cascos .pisa img[src*="azul"] {width:172px!important}
.cierre-cascos .pisa img[src*="verde"]{width:155px!important}
.cierre-cascos .pisa img[src*="rojo"] {width:191px!important}

/* 2) LA SOMBRA DE LOS PIES: mas apretada y menos difusa */
.companero::after{width:46%;height:11px;bottom:3px;
  background:#00000060;filter:blur(3.5px)}
.pisa::after{width:52%;height:11px;bottom:2px;
  background:#2a1c1052;filter:blur(3.5px)}

/* 2b) EL CONTORNO: halo del color exacto del fondo, sin desenfoque */
.portada .companero img{
  filter:drop-shadow(.8px 0 0 #14528f) drop-shadow(-.8px 0 0 #14528f)
         drop-shadow(0 .8px 0 #14528f) drop-shadow(0 -.8px 0 #14528f)
         drop-shadow(0 14px 14px #00000045)}
#dinamica .casco-paso,.punto img{
  filter:drop-shadow(.7px 0 0 #fdf6e8) drop-shadow(-.7px 0 0 #fdf6e8)
         drop-shadow(0 .7px 0 #fdf6e8) drop-shadow(0 -.7px 0 #fdf6e8)
         drop-shadow(0 6px 5px #2a1c1026)}

/* 6) EL BUSCADOR: 10% mas chico y con aire hasta las tarjetas */
.buscador{max-width:306px;padding:7px 15px;margin:0 auto 52px}
.buscador input{font-size:13px}

/* 7) TARJETAS: el nombre se corta seco, sin puntos suspensivos */
.tarjeta .nombre{height:2.32em;overflow:hidden;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ico-red{width:23px;height:23px;display:block}
.compartir button{line-height:0;padding:7px}

/* 8) TROMPETAS: dos por lado, mirando al centro, con tres impulsos */
.trompetas-izq,.trompetas-der{position:absolute;top:clamp(96px,9vw,150px);
  display:flex;flex-direction:column;gap:16px;z-index:2;pointer-events:none;opacity:0}
.trompetas-izq{left:clamp(2px,1.2vw,26px)}
.trompetas-der{right:clamp(2px,1.2vw,26px)}
.trompetas-izq img,.trompetas-der img{width:clamp(118px,13vw,196px);height:auto;display:block}
.trompetas-izq img:nth-child(2){margin-left:34px;width:clamp(96px,10.6vw,160px)}
.trompetas-der img:nth-child(2){margin-right:34px;margin-left:auto;width:clamp(96px,10.6vw,160px)}
.trompetas-izq.entro{animation:tresToques 2.6s cubic-bezier(.3,1.1,.45,1) 1 both}
.trompetas-der.entro{animation:tresToquesDer 2.6s cubic-bezier(.3,1.1,.45,1) .2s 1 both}
@keyframes tresToques{
  0%  {opacity:0;transform:translateX(-150px) scale(.6)}
  22% {opacity:1;transform:translateX(16px) scale(1.14)}
  38% {transform:translateX(0) scale(1)}
  54% {transform:translateX(14px) scale(1.1)}
  68% {transform:translateX(0) scale(1)}
  82% {transform:translateX(10px) scale(1.06)}
  100%{opacity:.95;transform:translateX(0) scale(1)}}
@keyframes tresToquesDer{
  0%  {opacity:0;transform:translateX(150px) scale(.6)}
  22% {opacity:1;transform:translateX(-16px) scale(1.14)}
  38% {transform:translateX(0) scale(1)}
  54% {transform:translateX(-14px) scale(1.1)}
  68% {transform:translateX(0) scale(1)}
  82% {transform:translateX(-10px) scale(1.06)}
  100%{opacity:.95;transform:translateX(0) scale(1)}}

/* 9) AVATARES DEL REGISTRO: parejos y centrados */
.casquitos,.elige-casquito,.rejilla-casquitos{align-items:stretch}
.casquito,.opcion-casquito{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end}
.casquito img,.opcion-casquito img{width:auto!important;height:88px!important;
  display:block;margin:0 auto 8px;object-fit:contain}

/* 10) GRABACION: el casco no tapa nada y el recuadro va centrado */
.paso-caja,.tarjeta-paso,.caja-paso{margin-left:auto;margin-right:auto}
.medidor,.cronometro,.reloj-grito{display:flex;align-items:center;
  justify-content:center;gap:26px;flex-wrap:nowrap}
.casco-graba{width:auto!important;height:104px!important;flex:0 0 auto;
  position:relative;z-index:1}
.medidor .segundos,.cronometro strong,.reloj-grito strong{position:relative;z-index:2}

/* 11) EL PANEL: Adelita mas grande y con aire + estadisticas */
.anfitriona-lado{right:30px;bottom:26px;max-width:400px;gap:16px}
.anfitriona-lado img{width:148px}
.anfitriona-lado p{margin:0 0 22px;font-size:15px;line-height:1.45;
  padding:14px 18px;border-radius:16px}
.stats{max-width:820px;margin:26px auto 40px;padding:0 22px}
.stats h2{font-family:var(--titulo);font-size:clamp(20px,2.2vw,26px);
  margin:0 0 16px;color:var(--altea)}
.stats-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px}
.stat{background:#fff;border:var(--marco);border-radius:16px;padding:18px 14px;
  text-align:center;box-shadow:0 5px 0 var(--tinta)}
.stat strong{display:block;font-family:var(--titulo);font-size:clamp(26px,3vw,36px);
  line-height:1;color:var(--altea)}
.stat span{display:block;margin-top:8px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:800;color:var(--tinta-suave)}
.stats-pie{margin:14px 0 0;font-size:12.5px;color:var(--tinta-suave)}

@media (max-width:900px){
  .trompetas-izq,.trompetas-der{display:none}
}

/* ==== FACEBOOK Y MARIACHI NUEVO ==== */
/* El mariachi nuevo mide imagen/cupula = 1.327 (antes 1.330): el ancho
   se mantiene, la cupula sigue midiendo lo mismo que la del azul. */
.compartir{gap:22px}
.compartir button{padding:6px}
.ico-red{width:23px;height:23px;display:block}

/* ==== CIERRE DEFINITIVO ====

   1) EL CONTORNO PIXELEADO ERA MIO: yo apilaba cuatro drop-shadow de
      0.8px SIN desenfoque, y eso replica el borde duro cuatro veces.
      Se quitan. Queda un solo halo con desenfoque, que si funde.
   ========================================================== */
.portada .companero img,
#dinamica .casco-paso,.punto img{filter:none}
.portada .companero img{
  filter:drop-shadow(0 0 2px #14528fcc) drop-shadow(0 0 4px #14528f77)
         drop-shadow(0 13px 13px #00000047)}
#dinamica .casco-paso,.punto img{
  filter:drop-shadow(0 0 2px #fdf6e8cc) drop-shadow(0 0 4px #fdf6e877)
         drop-shadow(0 6px 5px #2a1c1024)}

/* 1b) Un 8% mas chicos, como pediste */
.companero.es-azul  img{width:clamp(138px,17.8vw,232px)!important}
.companero.es-verde img{width:clamp(124px,16.1vw,210px)!important}
.companero.es-rojo  img{width:clamp(153px,19.8vw,257px)!important}

/* 1c) La caja de la imagen es FIJA: al cambiar de pose no salta ni
       asoma el fondo entre cuadro y cuadro. */
.companero img{height:268px!important;object-fit:contain;
  object-position:bottom center}
.companero.es-azul  img{height:268px!important}
.companero.es-verde img{height:242px!important}
.companero.es-rojo  img{height:252px!important}

/* 1d) La sombra de los pies: compacta, no difusa */
.companero::after{width:38%;height:9px;bottom:4px;
  background:#00000072;filter:blur(2.5px)}
.pisa::after{width:44%;height:9px;bottom:2px;
  background:#2a1c1060;filter:blur(2.5px)}

/* 4) BUSCADOR: otro 10% mas chico y 2 cm mas de aire */
.buscador{max-width:276px;padding:6px 14px;margin:0 auto 128px}
.buscador input{font-size:12.5px}
.buscador span{font-size:13px}

/* 4b) el casco de Gritos: caja fija para que la ronda no salte */
.casco-titulo{height:112px!important;width:auto!important;
  object-fit:contain;object-position:bottom center}

/* 5) TROMPETAS mas grandes */
.trompetas-izq img,.trompetas-der img{width:clamp(160px,18vw,272px)}
.trompetas-izq img:nth-child(2),.trompetas-der img:nth-child(2){
  width:clamp(132px,15vw,224px)}
.trompetas-izq,.trompetas-der{top:clamp(84px,8vw,132px);gap:20px}

/* 6) AVATARES DEL REGISTRO: misma altura, centrados */
.elige{display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.elige img{width:auto!important;height:94px!important;margin:0 auto;
  object-fit:contain;object-position:bottom center}

/* 8) EL PANEL DE STATS ya no viene oculto */
.stats{display:block}

/* ==== PIES DE LOS VOTOS ====
   Medido: los dos cascos tienen distinto alto (141 y 124 px) y el bloque
   los centraba, asi que los pies quedaban 8.3 px desfasados. Se alinean
   por abajo. */
.punto{align-items:flex-end}
.punto .cifra{margin-bottom:14px}
.punto .quien-vota{margin-bottom:20px}

/* ==== SIN DEFORMAR ====

   EL ERROR: yo fijaba ANCHO y ALTO a la vez. Proporcion nativa del azul
   0.8395, la que le imponia 0.8657 -> lo estiraba 3%. Por eso el verde
   se veia alargado al lado.
   REGLA: de aqui en adelante SOLO se fija el ANCHO. El alto sale solo y
   la proporcion nunca se toca. El espacio lo reserva el CONTENEDOR.
   ========================================================== */

.companero img,
.companero.es-verde img,.companero.es-azul img,.companero.es-rojo img,
.paso .casco-paso,.paso .casco-paso[src*="verde"],.paso .casco-paso[src*="azul"],.paso .casco-paso[src*="rojo"],
.punto img,.punto img[src*="verde"],.punto img[src*="azul"],.punto img[src*="rojo"],
.cierre-cascos .pisa img,
.cierre-cascos .pisa img[src*="verde"],.cierre-cascos .pisa img[src*="azul"],.cierre-cascos .pisa img[src*="rojo"],
.casco-titulo{height:auto!important;object-fit:fill!important}

/* el contenedor reserva el alto, asi al cambiar de pose no salta */
.companero{height:280px;display:flex;align-items:flex-end;position:relative}
.paso .casco-paso{position:absolute}
.cierre-cascos .pisa{display:flex;align-items:flex-end}

/* ANCHOS: calculados para que la CUPULA mida lo mismo. Un 8% mas chicos. */
.companero.es-verde img{width:clamp(114px,14.8vw,193px)!important}
.companero.es-azul  img{width:clamp(127px,16.4vw,213px)!important}
.companero.es-rojo  img{width:clamp(140px,18.2vw,236px)!important}

.paso .casco-paso[src*="verde"]{width:98px!important}
.paso .casco-paso[src*="azul"] {width:109px!important}
.paso .casco-paso[src*="rojo"] {width:120px!important}

.punto img[src*="verde"]{width:98px!important}
.punto img[src*="azul"] {width:109px!important}
.punto img[src*="rojo"] {width:120px!important}

.cierre-cascos .pisa img[src*="verde"]{width:142px!important}
.cierre-cascos .pisa img[src*="azul"] {width:158px!important}
.cierre-cascos .pisa img[src*="rojo"] {width:174px!important}

.casco-titulo{width:clamp(80px,8.6vw,116px)!important}

/* el borde ya viene arreglado en el propio PNG (sangrado de color):
   aqui solo queda la sombra de contacto, sin halos duros */
.portada .companero img{filter:drop-shadow(0 12px 12px #00000047)}
#dinamica .casco-paso,.punto img{filter:drop-shadow(0 6px 5px #2a1c1024)}

/* la sombra de los pies: chica y definida */
.companero::after{width:34%;height:8px;bottom:3px;
  background:#00000078;filter:blur(2px)}
.pisa::after{width:40%;height:8px;bottom:1px;
  background:#2a1c1066;filter:blur(2px)}

/* 3) LA PINATA sube a la tercera parte del bloque de reglas */
.pinata{top:0;transform-origin:27% 0}
.bloque-reglas{position:relative}
.pinata.entro{animation:pinataCuelga 2.8s cubic-bezier(.3,1.05,.5,1) 1 both}

/* 5) AVATARES DEL REGISTRO: mismo alto, centrados, sin deformar */
.elige{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-height:150px;padding:10px 8px 8px}
.elige img{width:auto!important;height:92px!important;margin:0 auto;
  object-fit:contain;object-position:bottom center;display:block}
.elige b{margin-top:auto;padding-top:8px}

@media (max-width:720px){
  .companero{height:190px}
  .elige{min-height:120px}
  .elige img{height:70px!important}
}

/* ==== HOMOLOGADO ====
   1) Las 24 poses ya comparten lienzo dentro de cada juego, asi que al
      cambiar de pose la imagen NO cambia de tamano y no asoma el fondo.
      Aqui solo se fija el ancho; el alto sale solo y siempre es el mismo.
   ========================================================== */
.companero img{display:block}
.companero{overflow:visible}

/* 3) LA PINATA, a la tercera parte del bloque de reglas */
.bloque-reglas{position:relative}
.pinata{position:absolute;top:33%;right:clamp(4px,4.4vw,68px);
  transform-origin:27% 0;z-index:5;pointer-events:none;
  width:clamp(104px,10.6vw,148px);height:auto}

/* 4) EL CIERRE: misma separacion entre los tres */
.cierre-cascos{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(18px,3.2vw,48px)}
.cierre-cascos .pisa{margin:0}

/* 6) el boton de actualizar las estadisticas */
.stats-refrescar{float:right;margin:-42px 0 0;background:var(--altea);color:#fff;
  border:var(--marco);border-radius:999px;padding:7px 16px;font-size:11.5px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 4px 0 var(--tinta)}
.stats-refrescar:hover{background:var(--altea-hondo)}
.stats{clear:both}

/* ==== LOTERIA ====

   1) EL HERO. Antes arrancaba con cascos/casco-*.png y la animacion
      saltaba a poses/*.png, que tienen OTRO lienzo. Ahora usa las poses
      desde el principio. Proporciones nuevas imagen/cupula:
          verde 1.2086   azul 1.5216   rojo 1.7550
      Con el azul de referencia: verde x0.794, rojo x1.153.
      Asi las tres CUPULAS miden lo mismo en pantalla.
   ========================================================== */
.companero img,
.companero.es-verde img,.companero.es-azul img,.companero.es-rojo img{
  height:auto!important;object-fit:fill!important;display:block}
.companero.es-azul  img{width:clamp(160px,20.6vw,268px)!important}
.companero.es-verde img{width:clamp(127px,16.4vw,213px)!important}
.companero.es-rojo  img{width:clamp(184px,23.8vw,309px)!important}
.companero{height:300px;display:flex;align-items:flex-end}

/* 3) LA PINATA: el cordon ya es corto, el cuerpo cae a un tercio */
.pinata{position:absolute;top:0;right:clamp(4px,4.4vw,68px);
  width:clamp(104px,10.6vw,148px);height:auto;
  transform-origin:27% 0;z-index:5;pointer-events:none}

/* ==========================================================
   5) TARJETAS DE LOTERIA MEXICANA
   Marco negro doble, fondo claro, numero arriba a la izquierda,
   la figura centrada y el nombre abajo en versales espaciadas.
   ========================================================== */
#avatares{display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.4vw,18px);counter-reset:loteria}
.elige{counter-increment:loteria;position:relative;
  background:#fdf6e8;border:3px solid #1a1a1a;border-radius:4px;
  padding:9px;cursor:pointer;display:block;text-align:center;
  box-shadow:0 3px 0 #1a1a1a;transition:transform var(--rapido)}
.elige::before{content:"";position:absolute;inset:5px;
  border:1.5px solid #1a1a1a;border-radius:2px;pointer-events:none}
.elige::after{content:counter(loteria);position:absolute;left:11px;top:7px;
  font-family:var(--titulo);font-size:15px;line-height:1;color:#1a1a1a;z-index:2}
.elige img{position:relative;z-index:1;width:auto!important;height:104px!important;
  display:block;margin:6px auto 4px;object-fit:contain;object-position:center}
.elige b{position:relative;z-index:2;display:block;margin:0;padding:5px 2px 1px;
  font-family:var(--titulo);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:#1a1a1a;line-height:1.15}
.elige:hover{transform:translateY(-3px)}
.elige.puesto{background:var(--amarillo);box-shadow:0 4px 0 #1a1a1a}
.elige.puesto::before{border-color:#1a1a1a}

@media (max-width:820px){
  #avatares{grid-template-columns:repeat(3,1fr)}
  .elige img{height:84px!important}
}
@media (max-width:520px){
  #avatares{grid-template-columns:repeat(2,1fr)}
}

/* ==== LOTERIA PAREJA ====
   Cinco columnas iguales, tarjetas del mismo alto y el nombre siempre
   en UN renglon (a "EL NOPAL" se le partia en dos y descuadraba su fila). */
#avatares.avatares-elige{display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(10px,1.3vw,16px)!important;align-items:stretch;counter-reset:loteria}
#avatares .elige{width:100%!important;min-width:0;height:100%;
  display:flex!important;flex-direction:column;align-items:center;
  justify-content:space-between;padding:10px 6px 7px;
  background:#fdf6e8;border:3px solid #1a1a1a;border-radius:4px;
  box-shadow:0 3px 0 #1a1a1a}
#avatares .elige img{width:auto!important;height:100px!important;
  margin:8px auto 6px;object-fit:contain;object-position:center;flex:0 0 auto}
#avatares .elige b{width:100%;white-space:nowrap;overflow:hidden;
  font-size:clamp(8.5px,.78vw,10.5px);letter-spacing:.06em;
  font-family:var(--titulo);text-transform:uppercase;color:#1a1a1a;
  padding:4px 0 0;line-height:1.1}
#avatares .elige::after{content:counter(loteria);position:absolute;left:11px;top:7px;
  font-family:var(--titulo);font-size:14px;line-height:1;color:#1a1a1a;z-index:2}
#avatares .elige{position:relative;counter-increment:loteria}
#avatares .elige::before{content:"";position:absolute;inset:5px;
  border:1.5px solid #1a1a1a;border-radius:2px;pointer-events:none}
#avatares .elige.puesto{background:var(--amarillo)}

@media (max-width:860px){
  #avatares.avatares-elige{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #avatares .elige img{height:82px!important}
}
@media (max-width:520px){
  #avatares.avatares-elige{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ==== NOMBRES COMPLETOS ====
   Se reservan DOS renglones: asi caben "Corregidora" y "Revolucionario"
   sin cortarse y las diez tarjetas siguen midiendo igual. */
#avatares .elige b{white-space:normal;overflow:visible;
  height:2.2em;display:flex;align-items:center;justify-content:center;
  font-size:clamp(8px,.72vw,9.5px);letter-spacing:.05em;line-height:1.08;
  padding:2px 1px 0;word-break:break-word}
#avatares .elige img{height:94px!important;margin:6px auto 4px}

/* ==== LA MANCHA ====

   AQUI ESTABA. La "mancha de fondo" detras de los casquitos no venia de
   los PNG (medido: 0 manchas blancas en las 16 poses del hero). Era un
   circulo de CSS que yo mismo puse, con un corte duro:
        radial-gradient(circle, #ffffff16 0 62%, transparent 63%)
   Ese salto de 62% a 63% dibuja un FILO visible. Aqui se sustituye por
   un degradado que se apaga poco a poco, sin borde.
   ========================================================== */
/* El circulo SE VA. Punto. Ni degradado suave ni nada: no se dibuja. */
.portada-arte::before{content:none!important;display:none!important}
.sol{display:none!important;background:none!important;animation:none!important}

/* 2) el cordon crecio: la pinata se mantiene donde esta */
/* la pinata NO se mueve: sube el arranque del cordon lo mismo que crecio */
.pinata{top:-104px;width:clamp(104px,10.6vw,148px);height:auto}

/* 3) el casco de Gritos Altea: mismo sitio y escala, ahora el rojo */
.casco-titulo{width:clamp(86px,9.2vw,124px)!important;height:auto!important}

/* 4) TARJETAS: nombre en UNA linea, medio punto mas delgado, y vuelve
      el amarillo al pasar el mouse */
/* el nombre SIEMPRE en una linea: el mas largo es REVOLUCIONARIO (14
   letras). Medido en pantalla, a 7.4px con 0 de espaciado cabe con
   holgura dentro de los 85px utiles de la tarjeta. */
#avatares .elige b{white-space:nowrap!important;overflow:visible;
  height:auto!important;display:block!important;
  font-family:var(--texto)!important;font-weight:700!important;
  font-size:clamp(6.2px,.55vw,7.4px)!important;letter-spacing:0!important;
  line-height:1.2;padding:4px 1px 0}
#avatares .elige img{height:96px!important;margin:7px auto 3px!important}
#avatares .elige:hover{background:var(--amarillo);transform:translateY(-3px)}
#avatares .elige:hover::before{border-color:#1a1a1a}
#avatares .elige.puesto{background:var(--amarillo)}

/* 5) el cuadro de "Acepto": centrado y con menos peso */
/* EL CUADRO DE "ACEPTO"
   Salia en MAYUSCULAS y en negritas porque es un <label> y heredaba el
   estilo de las etiquetas del formulario. Aqui se le quita todo eso:
   texto normal, minusculas, marco tenue y centrado. Menos peso, no mas. */
.consiento{display:flex!important;align-items:flex-start;gap:11px;
  max-width:540px;margin:30px auto 8px!important;padding:12px 16px!important;
  background:#fffdf7;border:1.5px solid #2a1c101f!important;border-radius:14px;
  box-shadow:none!important;
  font-family:var(--texto)!important;font-size:12px!important;
  font-weight:400!important;text-transform:none!important;
  letter-spacing:0!important;line-height:1.55;
  color:var(--tinta-suave)!important;text-align:left;cursor:pointer}
.consiento span{font-weight:400!important;text-transform:none!important}
.consiento strong{font-weight:600!important;text-transform:none!important;color:var(--tinta)}
.consiento input[type=checkbox]{width:17px;height:17px;flex:0 0 17px;
  margin:2px 0 0;accent-color:var(--verde);cursor:pointer}
.consiento.falta{border-color:var(--rojo)!important;background:#fdeaec}
.consiento a{font-weight:600;text-decoration:underline}
.consiento input[type=checkbox]{flex:0 0 auto;margin-top:2px}

/* ==== TARJETAS Y SOMBRAS ====

   4) LA TARJETA, con las cuentas hechas:
      ancho util = 100 - 6 (marco) - 12 (margen) = 82 px.
      "REVOLUCIONARIO" son 14 letras; en versales a 7.8 px mide ~68 px.
      Quedan 14 px de aire. Nunca se parte ni toca las orillas.
      El numero ya no choca con la figura: hay 15 px arriba.
   ========================================================== */
#avatares.avatares-elige{display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:11px!important;counter-reset:loteria}

#avatares .elige{counter-increment:loteria;position:relative;
  background:#fdf6e8;border:3px solid #1a1a1a;border-radius:5px;
  padding:15px 6px 10px!important;min-height:0!important;
  display:block!important;text-align:center;cursor:pointer;
  box-shadow:0 3px 0 #1a1a1a;transition:background .12s,transform .12s}
#avatares .elige::before{content:"";position:absolute;inset:5px;
  border:1.5px solid #1a1a1a;border-radius:3px;pointer-events:none}
#avatares .elige::after{content:counter(loteria);position:absolute;left:10px;top:6px;
  font-family:var(--titulo);font-size:13px;line-height:1;color:#1a1a1a;z-index:2}

/* la figura manda por ANCHO: el lienzo de los avatares es 504x438 y asi
   nunca se sale de la tarjeta ni se deforma */
#avatares .elige img{width:100%!important;height:auto!important;
  display:block;margin:0 0 5px!important;object-fit:contain}

#avatares .elige b{display:block!important;white-space:nowrap!important;
  height:auto!important;overflow:visible;
  font-family:var(--texto)!important;font-weight:700!important;
  font-size:7.8px!important;letter-spacing:.02em!important;
  line-height:1.25;padding:0;margin:0;
  text-transform:uppercase;color:#1a1a1a}

/* el amarillo: al pasar el mouse y al quedar elegida. Ninguna nace prendida. */
#avatares .elige:hover{background:var(--amarillo);transform:translateY(-3px)}
#avatares .elige.puesto{background:var(--amarillo);box-shadow:0 4px 0 #1a1a1a}

@media (max-width:820px){#avatares.avatares-elige{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:560px){#avatares.avatares-elige{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* 3) el mariachi de Gritos Altea ya no flota: sombra de contacto */
.casco-titulo{filter:drop-shadow(0 10px 6px #2a1c104a) drop-shadow(0 3px 2px #2a1c1040)}

/* ==== SIN NUBE ====
   Lo unico que seguia pintando algo alrededor de los casquitos era una
   sombra difuminada de 22 px. Sobre el azul con patron se lee como una
   nube de fondo. Se quita. Queda solo la sombrita de contacto en el
   piso, que es la que da peso sin manchar. */
.portada .companero img,.companero img{filter:none!important}
.companero::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:2px;width:32%;height:7px;border-radius:50%;
  background:#00000066;filter:blur(3px);z-index:0}

/* ==== NOMBRE A DOS PALABRAS ====
   Ya nunca se parte en dos renglones, asi que la caja no necesita
   reservar dos lineas ni pegarse al margen de arriba. */
.tarjeta .nombre,.tarjeta-alto .nombre{
  height:auto!important;overflow:visible!important;
  white-space:nowrap;text-overflow:ellipsis;
  margin:2px 0 3px!important;padding-top:2px}
.tarjeta-alto .quien{padding-top:4px}
.lugar .nombre-podio{white-space:nowrap}

/* ==== CONTADOR: ALINEACION Y AIRE ====
   · la nota de abajo iba centrada bajo los banderines; ahora arranca en
     la misma linea que el rotulo "LA VOTACION CIERRA EN".
   · los cuadros de papel picado se separan un poco para que cada color
     se lea aparte: rosa | aqua | naranja | verde. */
.cuenta{display:flex;flex-direction:column;align-items:flex-start}
.cuenta-titulo{margin-left:0!important;padding-left:0!important;
  background:none!important;color:#fff!important;box-shadow:none!important}
.cuenta-cajas{gap:13px!important;justify-content:flex-start!important;
  padding-left:0!important;padding-right:0!important;width:fit-content}
.cuenta-cajas>div{flex:0 0 auto!important;margin:0!important}
.cuenta-pie{text-align:left!important;padding-left:0!important;
  margin-left:0!important;align-self:flex-start;max-width:42ch}

/* ==== TROMPETAS A LA ALTURA DEL TITULO ====
   Estaban pegadas al papel picado. Medido en pantalla: el bloque de
   trompetas iba de 110 a 298 px y "¿Y TU GRITO?" cae en 363-408.
   Bajan ~180 px para quedar a la altura del titulo. */
.trompetas-izq,.trompetas-der{top:clamp(238px,25vw,332px)!important}
@media (max-width:1100px){
  .trompetas-izq,.trompetas-der{top:clamp(210px,23vw,300px)!important}
}

/* ==== MARGENES DEL NOMBRE Y EL SLOGAN ====

   1) EL NOMBRE de la ficha se salia por la derecha ("...llafranco").
      Ahora la columna del texto no puede crecer mas que su caja
      (min-width:0 en un flex es lo que lo permite), el nombre cabe en
      una linea y siempre le quedan 14 px de aire a la derecha.
   2) EL SLOGAN: un punto mas chico y con mas transparencia.
   3) LA FRANJA AZUL del pie: mas compacta. */

.tarjeta-alto{gap:12px}
.tarjeta-alto .quien{min-width:0;flex:1 1 auto;padding-right:14px;padding-top:4px}
.tarjeta .nombre,.tarjeta-alto .nombre{
  font-size:16px!important;line-height:1.16!important;
  height:auto!important;overflow:hidden!important;
  white-space:nowrap!important;text-overflow:ellipsis!important;
  margin:1px 0 3px!important;padding-top:1px!important;max-width:100%}
.tarjeta .area,.tarjeta-alto .area{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2) el slogan: mas transparente y un punto mas chico */
.pie .marca-pie .slogan-pie{width:min(80%,392px)!important;opacity:.30!important}

/* 3) la franja azul, mas compacta */
.pie{padding:22px 22px 24px!important}
.pie .marca-pie{gap:9px}

/* ==== EL TITULAZO ====
   El "¡" de la primera linea quedaba tapado por la E de ESCUCHE porque
   las tres lineas se encimaban. Se les da su propio renglon y un
   respiro entre la primera y la segunda. El "!" ya vive al final,
   despues de GRUPO ALTEA, como debe leerse la frase completa. */
.titulazo{display:block;line-height:1.02}
.titulazo .l1,.titulazo .l2,.titulazo .l3{display:block;position:relative}
.titulazo .l1{margin-bottom:.10em;padding-bottom:.06em;z-index:2}
.titulazo .l2{margin-top:0!important;z-index:1}
.titulazo .l3{margin-top:.04em}

/* ==== CENTRAR EN LA TARJETA ====
   El PNG deja a la figura apoyada abajo (para el podio). Aqui, solo en
   la tarjeta, cada personaje sube o baja lo que le sobra de hueco, para
   que quede centrado en su recuadro. El PNG no se toca. */
#avatares .elige img{transform-origin:center}
#avatares .elige img[src*="av-burro"]{transform:translateY(-5.22%)}
#avatares .elige img[src*="av-charro"]{transform:translateY(-4.76%)}
#avatares .elige img[src*="av-corregidora"]{transform:translateY(-2.49%)}
#avatares .elige img[src*="av-hidalgo"]{transform:translateY(-5.67%)}
#avatares .elige img[src*="av-mariachi"]{transform:translateY(-5.44%)}
#avatares .elige img[src*="av-nopal"]{transform:translateY(-0.68%)}
#avatares .elige img[src*="av-oaxaquena"]{transform:translateY(-6.92%)}
#avatares .elige img[src*="av-revolucionario"]{transform:translateY(-4.88%)}
#avatares .elige img[src*="av-zarape"]{transform:translateY(-6.12%)}