/* =========================================================================
Fiesta de la Primavera - Rosario | hoja de estilos del sitio
=========================================================================
Estilo del afiche 2026, segun el boceto
docs/mockup/bocetos_web_fiesta_primavera_v3.html (aprobado el 17/10/2026).
El boceto escribe los cortes de celular como @container para poder
dibujar telefonos dentro de la pagina; aca son @media (max-width:860px),
el mismo corte que ya usaba el sitio.
Se mantienen los pedidos de la Organizacion sobre el diseno anterior:
- "Apoyan" visible sin scrollear en una notebook de 1366x768;
- sin cuenta regresiva en el hero;
- carrusel sin flechas ni pausa y fotos sin rotulo encima;
- cabezal y pie sin banda blanca, logos grandes;
- grilla compacta, con los eventos propios de la fiesta aparte.
Orden del archivo:
1. Variables y base
2. Piezas del afiche (cinta, pastilla, marco, botones...)
3. Cabezal y pie
4. Inicio
5. Paginas interiores (grilla, ediciones, galeria, votacion)
6. Ventanas (video y contacto)
7. Formularios (contacto e inscripcion)
8. Celular
========================================================================= */
/* =========================================================================
1. VARIABLES Y BASE
========================================================================= */
:root{
color-scheme:dark;
/* Paleta tomada del afiche con cuentagotas */
--noche:#123238; /* fondo general */
--noche-alta:#1a3e46; /* fondo detras del titulo del afiche */
--noche-honda:#071a20; /* paneles de cada dia */
--panel:rgba(7,26,32,.82);
--naranja:#f26a21;
--amarillo:#f7bf1c;
--turquesa:#3cc3b9;
--lima:#8ccb4a;
--fucsia:#e11a86;
--fucsia-claro:#ff6fb3; /* fucsia legible para texto chico sobre noche */
--azul:#2f8fd8;
--rojo:#ff6b5e; /* errores, legible sobre noche */
--blanco:#ffffff;
--marco:#eef2f1; /* borde claro de las fotos */
--texto-suave:#bcd2d3;
--texto-tenue:#8aa8aa;
--linea:rgba(255,255,255,.13);
--tinta:#0b2228; /* texto oscuro sobre degrades y fondos claros */
--grad-sol:linear-gradient(90deg,#f05a28 0%,#f7931e 52%,#f7bf1c 100%);
--grad-mar:linear-gradient(90deg,#44c2b5 0%,#88cb4a 100%);
--grad-fucsia:linear-gradient(90deg,#e11a86 0%,#f2563a 100%);
--grad-cielo:linear-gradient(90deg,#2f7fd8 0%,#3cc3b9 100%);
--display:'Bebas Neue','Oswald','Arial Narrow',Impact,sans-serif;
--texto:'Montserrat','Segoe UI',system-ui,sans-serif;
--radius:22px;
/* Flores y confeti del afiche. Cada pieza de confeti es una imagen chica
que se ubica a mano en los costados, lejos de los titulos. */
--flor-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%23f26a21' transform='rotate(0)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%233cc3b9' transform='rotate(60)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%238ccb4a' transform='rotate(120)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%23f7bf1c' transform='rotate(180)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%23e2541f' transform='rotate(240)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%232aa79c' transform='rotate(300)'/%3E%3Ccircle r='26' fill='%23cfd9d6'/%3E%3Ccircle r='15' fill='%23123238'/%3E%3C/svg%3E");
--flor-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%233cc3b9' transform='rotate(0)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%23f7931e' transform='rotate(60)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%238ccb4a' transform='rotate(120)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%232aa79c' transform='rotate(180)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%23f7bf1c' transform='rotate(240)'/%3E%3Cpath d='M0-10C-34-28-40-86 0-98C40-86 34-28 0-10Z' fill='%23f26a21' transform='rotate(300)'/%3E%3Ccircle r='26' fill='%23cfd9d6'/%3E%3Ccircle r='15' fill='%23123238'/%3E%3C/svg%3E");
--p-fucsia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23e11a86'/%3E%3C/svg%3E");
--p-turquesa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%233cc3b9'/%3E%3C/svg%3E");
--p-amarillo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23f7bf1c'/%3E%3C/svg%3E");
--p-naranja:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23f26a21'/%3E%3C/svg%3E");
--a-naranja:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M8 30q18-26 44-8' stroke='%23f26a21' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
--a-turquesa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M8 30q18-26 44-8' stroke='%233cc3b9' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
--a-lima:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M8 30q18-26 44-8' stroke='%238ccb4a' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
/* Pincelada de las cintas de dias, grupos y "Ademas" (ver .pincel). */
--pincel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M18 12L70 9L150 12L230 8L300 11L334 9L342 14L336 20L346 26L338 33L348 40L336 47L346 54L334 61L344 68L332 75L342 82L330 90L240 92L150 89L70 93L20 90L12 84L20 78L8 71L18 64L6 56L16 48L4 40L14 32L8 24L16 18ZM330 10L362 11L370 15L362 20L330 21ZM330 25L388 26L398 30L388 34L330 35ZM330 39L350 40L356 44L350 48L330 49ZM330 52L384 53L394 56L384 59L330 60ZM330 63L372 64L380 68L372 72L330 73ZM330 77L392 78L398 81L392 84L330 85ZM325 88L356 88L362 91L356 94L325 94ZM0 16L22 14L22 20L4 20ZM2 86L24 84L26 90L6 91Z' fill='%23000'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--texto);font-size:15px;line-height:1.5;color:var(--blanco);
background:
radial-gradient(70% 560px at 50% -160px,rgba(165,115,50,.55),transparent 72%),
radial-gradient(55% 520px at 100% 100%,rgba(140,203,74,.16),transparent 70%),
linear-gradient(180deg,var(--noche-alta) 0,var(--noche) 640px,var(--noche) 80%,#10262a 100%);
background-color:var(--noche);min-height:100vh}
/* Las flores del hero y los fondos de "Apoyan" y del pie salen por los
costados de la columna de 1080 px: .pagina (todo el ancho) los recorta
contra la ventana. clip, y no hidden, para que la barra de confirmar el
voto siga pegandose al borde (hidden queda de respaldo para Safari < 16). */
.pagina{overflow-x:hidden;overflow-x:clip}
/* Columna del sitio: el mismo ancho de 1080 px de los bocetos. */
.sitio{position:relative;max-width:1080px;margin:0 auto;min-height:100vh}
ul{list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
/* --- Accesibilidad -------------------------------------------------------- */
/* Salto al contenido: invisible hasta que se lo enfoca con el teclado. */
.saltar-al-contenido{position:absolute;left:-9999px;top:0;z-index:100;
background:var(--amarillo);color:var(--tinta);padding:12px 22px;border-radius:0 0 12px 0;
font-weight:800;text-decoration:none}
.saltar-al-contenido:focus{left:0}
/* Texto solo para lectores de pantalla. */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Foco visible por teclado. No aparece al hacer click. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
outline:3px solid var(--amarillo);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
.carrusel-pista{scroll-behavior:auto}
}
/* =========================================================================
2. PIEZAS DEL AFICHE
========================================================================= */
/* Texto con el degrade naranja-amarillo de "PRIMAVERA". */
.texto-sol{background:var(--grad-sol);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Cinta: rotulo inclinado con degrade ("SABADO 7", "AGATA", "Nº 3"). */
.cinta{--fondo-cinta:var(--grad-sol);display:inline-block;font-family:var(--display);font-weight:400;line-height:1;letter-spacing:.02em;
color:var(--blanco);padding:.14em .6em .06em;background:var(--fondo-cinta);transform:rotate(-2deg);
box-shadow:0 10px 22px rgba(0,0,0,.35);text-shadow:0 2px 6px rgba(0,0,0,.28);white-space:nowrap}
.fondo-mar{--fondo-cinta:var(--grad-mar);background:var(--grad-mar)}
.fondo-fucsia{--fondo-cinta:var(--grad-fucsia);background:var(--grad-fucsia)}
.fondo-cielo{--fondo-cinta:var(--grad-cielo);background:var(--grad-cielo)}
/* Cinta con forma de pincelada, como los dias, los nombres de los grupos y
los rotulos de "Ademas" del folleto. La forma es una mascara SVG (--pincel)
estirada al tamano de la cinta; el color sale de --fondo-cinta y va en
::before para que la sombra del filter siga el contorno del trazo y no el
rectangulo. Mas aire a la derecha para las hebras. La cinta tiene que estar
posicionada (relative o absolute): lo resuelve cada lugar donde se usa. */
.cinta.pincel,.cinta-ademas.pincel{background:none;box-shadow:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.cinta.pincel{padding:.12em 1.15em .04em .85em}
.pincel::before{content:'';position:absolute;inset:0 -.1em;z-index:-1;background:var(--fondo-cinta);
-webkit-mask:var(--pincel) center / 100% 100% no-repeat;mask:var(--pincel) center / 100% 100% no-repeat}
/* Pastilla de la fecha con borde turquesa luminoso. */
.pastilla-fecha{display:inline-block;font-family:var(--display);letter-spacing:.14em;line-height:1;
color:var(--blanco);padding:.16em 1.1em .06em;border:4px solid var(--turquesa);border-radius:999px;
background:rgba(7,26,32,.55);box-shadow:0 0 22px rgba(60,195,185,.55),inset 0 0 16px rgba(60,195,185,.3)}
/* Foto con marco claro y esquinas redondeadas, como las del afiche. Sirve
tanto para ![]()
adentro como para fotos puestas como fondo. */
.marco{position:relative;border:4px solid var(--marco);border-radius:20px;background-color:var(--noche-honda);
background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.marco > img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.kicker{font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--turquesa)}
.sub{color:var(--texto-suave);font-size:15px;line-height:1.6;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 28px;
border-radius:999px;font-family:var(--texto);font-weight:800;font-size:14.5px;letter-spacing:.02em;
text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primario{background:var(--grad-sol);color:var(--tinta);box-shadow:0 10px 26px rgba(242,106,33,.38)}
.btn-secundario{background:rgba(7,26,32,.85);color:var(--blanco);border-color:var(--turquesa);
box-shadow:0 0 16px rgba(60,195,185,.35),inset 0 0 10px rgba(60,195,185,.18)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
/* Fondo de repuesto de las fotos que todavia no tienen imagen cargada. Las
clases .f* van en la foto; .e* y .c* en la tarjeta de edicion o carroza.
Cuando hay foto, el background-image del atributo style le gana. */
.foto.f1,.e3 .portada,.c1 .foto-c{background-image:linear-gradient(135deg,var(--naranja),#c43d2c)}
.foto.f2,.c2 .foto-c{background-image:linear-gradient(135deg,var(--amarillo),var(--naranja))}
.foto.f3,.e2 .portada,.c3 .foto-c{background-image:linear-gradient(135deg,var(--lima),#2b8f5e)}
.foto.f4,.e1 .portada,.c4 .foto-c{background-image:linear-gradient(135deg,var(--turquesa),#157f87)}
.c5 .foto-c{background-image:linear-gradient(135deg,var(--fucsia),#8e1b5c)}
.c6 .foto-c{background-image:linear-gradient(135deg,var(--azul),var(--turquesa))}
/* =========================================================================
3. CABEZAL Y PIE
========================================================================= */
.site-nav{position:relative;z-index:3;display:flex;align-items:center;gap:30px;padding:12px 36px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:88px;width:auto}
.logo .nombre{font-family:var(--display);font-size:25px;letter-spacing:.03em;line-height:.95}
.logo .nombre small{display:block;font-family:var(--texto);font-weight:800;font-size:10.5px;
letter-spacing:.2em;text-transform:uppercase;color:var(--turquesa);margin-top:5px}
.site-nav .enlaces{display:flex;gap:26px;margin-left:auto}
.site-nav .enlaces a{position:relative;padding:10px 0;font-weight:700;font-size:13px;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none;color:var(--texto-suave)}
.site-nav .enlaces a:hover,.site-nav .enlaces a.activo{color:var(--blanco)}
.site-nav .enlaces a.activo::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:4px;
border-radius:4px;background:var(--grad-sol)}
.site-nav .cta-nav{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 22px;
border-radius:999px;background:var(--grad-sol);color:var(--tinta);font-weight:800;font-size:14px;
text-decoration:none;box-shadow:0 10px 24px rgba(242,106,33,.35)}
.site-nav .cta-nav.votacion-abierta{background:var(--grad-mar);box-shadow:0 10px 24px rgba(140,203,74,.3)}
.site-nav .cta-nav.votacion-abierta::before{content:'';width:9px;height:9px;border-radius:50%;
background:var(--tinta);animation:latido-oscuro 1.6s ease-in-out infinite}
/* Pie: el fondo y la linea de degrade llegan a los dos bordes de la ventana
aunque el contenido quede en la columna de 1080 px. */
.pie{position:relative;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
margin-top:20px;padding:28px 36px;background:rgba(4,16,20,.72);
box-shadow:0 0 0 100vmax rgba(4,16,20,.72);clip-path:inset(0 -100vmax)}
.pie::before{content:'';position:absolute;top:0;left:-100vmax;right:-100vmax;height:4px;background:var(--grad-sol)}
.pie .marca{display:flex;align-items:center;gap:14px}
.pie .marca img{height:84px}
.pie strong{display:block;font-family:var(--display);font-weight:400;font-size:27px;letter-spacing:.03em;line-height:1}
.pie .enlaces{margin-top:4px;font-size:13.5px;color:var(--texto-tenue)}
.pie .enlaces a{color:var(--texto-suave);font-weight:600;text-decoration:none}
.pie .enlaces a:hover{color:var(--amarillo);text-decoration:underline}
.pie .logos-pie{display:flex;align-items:center;gap:16px}
.pie .logos-pie .titulo{font-family:var(--display);font-size:22px;letter-spacing:.16em;color:var(--texto-tenue)}
.pie .logos-pie img{height:80px}
/* =========================================================================
4. INICIO
========================================================================= */
/* --- Hero: la composicion del afiche --------------------------------------
Organizadores a los costados y el titulo apilado en el centro. Mide lo
justo para que "Apoyan" se vea al abrir en una notebook de 1366x768. */
.hero{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr) 190px;align-items:start;
gap:20px;padding:8px 36px 24px;text-align:center;
background:
var(--a-naranja) 26% 5%/46px no-repeat,var(--p-fucsia) 31% 13%/14px no-repeat,
var(--p-naranja) 73% 7%/12px no-repeat,var(--p-turquesa) 22% 46%/12px no-repeat,
var(--a-lima) 9% 70%/40px no-repeat,var(--a-naranja) 21% 78%/44px no-repeat,
var(--p-amarillo) 17% 94%/16px no-repeat,var(--p-fucsia) 89% 72%/14px no-repeat,
var(--p-amarillo) 79% 50%/13px no-repeat,var(--a-turquesa) 84% 93%/46px no-repeat}
.hero::before,.hero::after{content:'';position:absolute;width:380px;height:380px;pointer-events:none;
background:var(--flor-a) center/contain no-repeat}
.hero::before{left:-190px;top:-70px;transform:rotate(-12deg)}
.hero::after{right:-190px;top:-40px;background-image:var(--flor-b);transform:rotate(18deg)}
.hero > *{position:relative;z-index:1}
.hero-centro{display:flex;flex-direction:column;align-items:center}
.hero h1{display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-weight:400}
.hero .numero-edicion{font-size:44px;line-height:1;padding-top:.12em;letter-spacing:.03em}
.hero .numero-edicion sup{font-size:.5em;vertical-align:top;line-height:1}
.hero .linea1{font-size:58px;line-height:.92;letter-spacing:.03em}
.hero .primavera{font-size:126px;line-height:.9;letter-spacing:.01em;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
.hero .pastilla-fecha{font-size:34px;margin-top:18px}
.hero .lugar{font-family:var(--display);font-size:22px;letter-spacing:.24em;color:var(--turquesa);margin-top:10px}
.hero .proximamente{max-width:420px;margin-top:16px;color:var(--texto-suave);font-size:16px;line-height:1.6}
/* Los dos botones en una fila y del mismo ancho: columnas 1fr dentro de una
grilla que se ajusta al contenido toman el ancho del boton mas largo. */
.hero-acciones{grid-column:1 / -1;justify-self:center;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px}
.hero-org{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.hero-org .titulo{font-family:var(--display);font-size:27px;letter-spacing:.16em;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.hero-org img{width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.hero-org .quien{font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;
text-shadow:0 2px 6px rgba(0,0,0,.7);white-space:nowrap}
/* --- Apoyan ----------------------------------------------------------------
En el afiche es una banda crema; va en blanco a pedido de la Organizacion,
porque varios logos traen su propio fondo blanco. Los cuatro logos entran
en una fila desde los 861 px: sus alturas se achican con el ancho de la
ventana y en 1080 px llegan al tamano completo. */
.apoyan{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(16px,2.2vw,24px);padding:10px clamp(20px,3.3vw,36px);
background:var(--blanco);color:var(--tinta);box-shadow:0 0 0 100vmax var(--blanco);clip-path:inset(0 -100vmax)}
.apoyan .titulo{font-family:var(--display);font-size:clamp(28px,3.4vw,34px);letter-spacing:.16em;line-height:1;color:var(--naranja)}
.apoyan .logos{flex:1;display:flex;align-items:center;justify-content:space-evenly;gap:clamp(12px,1.8vw,18px);flex-wrap:wrap}
.apoyan img{width:auto}
.apoyan .logo-intendencia{height:clamp(46px,5.4vw,58px)}
.apoyan .logo-turismo{height:clamp(44px,5.2vw,56px)}
.apoyan .logo-rosario{height:clamp(40px,4.7vw,50px);border-radius:4px}
.apoyan .logo-antel{height:clamp(54px,6.5vw,70px)}
.apoyan .logo-con-nombre{display:flex;align-items:center;gap:10px}
.apoyan .logo-con-nombre span{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
/* --- Secciones ------------------------------------------------------------- */
.seccion{padding:56px 36px}
.seccion-cabeza{text-align:center;max-width:660px;margin:0 auto}
.seccion-cabeza h2,.seccion h2{font-family:var(--display);font-weight:400;font-size:62px;line-height:.95;letter-spacing:.01em;margin-top:6px}
.seccion-cabeza.izq{text-align:left;margin:0 0 26px;max-width:none}
/* --- Programa: un panel por dia, como en el afiche ------------------------- */
.programa{position:relative;padding:58px 36px 46px}
.dias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:52px}
.panel-dia{--acento:var(--naranja);--brillo:rgba(242,106,33,.45);position:relative;text-align:center;
background:var(--panel);border:3px solid var(--acento);border-radius:28px;padding:64px 18px 30px;
box-shadow:0 0 26px var(--brillo),inset 0 0 40px rgba(0,0,0,.35)}
.panel-dia.dia-2{--acento:var(--turquesa);--brillo:rgba(60,195,185,.45)}
.panel-dia > .cinta{position:absolute;top:-32px;left:50%;transform:translateX(-50%) rotate(-1.5deg);
font-size:64px;padding:.1em .9em .02em}
.lineup{display:grid;gap:10px;--hora-ancho:86px}
.lineup li{font-weight:800;font-size:21px;text-transform:uppercase;letter-spacing:.01em;line-height:1.2}
.lineup .h{display:inline-block;margin-right:10px;font-weight:700;font-size:13px;letter-spacing:.04em;
color:var(--acento);vertical-align:.2em}
/* Los eventos propios de la fiesta (desfile, batalla) en amarillo, como
"DESFILE DE CARROZAS" en el afiche. */
.lineup li.destacado{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.1vw,44px);line-height:1;color:var(--amarillo);letter-spacing:.02em}
.lineup li.destacado .h{font-family:var(--texto);font-weight:800;font-size:16px;color:var(--blanco);vertical-align:.55em}
/* Fotos de los artistas: un poco mas chicas que el ancho del panel, con la
proporcion de los archivos (13:10) para que el marco no las recorte, y el
nombre en una cinta debajo de la foto, sin taparla. */
.fotos-dia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:400px;margin:30px auto 0}
.panel-dia > .fotos-dia:nth-child(2){margin-top:0}
.foto-artista{display:flex;flex-direction:column;align-items:center}
.foto-artista .marco{width:100%;aspect-ratio:13 / 10}
/* Todas las cintas de nombre miden lo mismo de alto: en los nombres largos
se achica la letra (.medio, .largo), no la cinta. */
.foto-artista figcaption.cinta{position:relative;z-index:1;display:flex;align-items:center;height:46px;margin-top:-6px;font-size:40px}
.foto-artista figcaption.cinta.medio{font-size:32px}
.foto-artista figcaption.cinta.largo{font-size:25px}
/* Hora y boton de video en las esquinas de abajo, lejos de las caras. */
.hora-foto{position:absolute;bottom:8px;left:8px;z-index:1;padding:4px 10px;border-radius:999px;
background:rgba(7,26,32,.85);font-weight:800;font-size:12px;letter-spacing:.04em}
.ver-video{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 14px;border:none;
border-radius:999px;background:var(--blanco);color:var(--tinta);font-family:var(--texto);font-weight:800;
font-size:12.5px;cursor:pointer;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.3);transition:background .15s ease}
.ver-video:hover{background:var(--amarillo)}
.foto-artista .ver-video{position:absolute;bottom:8px;right:8px;z-index:1;min-height:30px;padding:4px 11px;font-size:12px}
/* --- Ademas: la tira de fotos del afiche ----------------------------------- */
.ademas{position:relative;display:flex;align-items:center;min-height:300px;padding:36px;overflow:hidden;
border-block:4px solid var(--marco)}
.ademas-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ademas::before{content:'';position:absolute;inset:0;
background:linear-gradient(90deg,rgba(7,26,32,.88) 0%,rgba(7,26,32,.5) 38%,rgba(7,26,32,0) 66%)}
.ademas-texto{position:relative}
.ademas .kicker{color:var(--blanco);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.ademas ul{display:grid;gap:14px;justify-items:start;margin-top:14px}
.cinta-ademas{position:relative;font-weight:800;font-size:28px;line-height:1.1;padding:9px 26px;color:var(--blanco);transform:rotate(-3deg);
background:var(--fondo-cinta);
box-shadow:0 10px 22px rgba(0,0,0,.35);text-shadow:0 2px 6px rgba(0,0,0,.25)}
.cinta-ademas:nth-child(2){margin-left:24px}
.cinta-ademas:nth-child(3){margin-left:8px}
.cinta-ademas.fondo-fucsia{--fondo-cinta:var(--fucsia)}
.cinta-ademas.fondo-sol{--fondo-cinta:linear-gradient(90deg,#f7a31e,#f7bf1c)}
.cinta-ademas.fondo-cielo{--fondo-cinta:var(--azul)}
.cinta-ademas.pincel{padding:.32em 1.25em .32em .95em}
@media(min-width:1120px){
.ademas{border-inline:4px solid var(--marco);border-radius:24px}
}
/* --- Galeria de Inicio: carrusel sin flechas ------------------------------ */
.carrusel{position:relative}
.carrusel-pista{display:flex;gap:20px;overflow:hidden;padding:4px;scroll-behavior:smooth}
.carrusel-pista .foto{flex:0 0 312px;height:220px}
.puntos{display:flex;justify-content:center;gap:8px;margin-top:22px}
.puntos button{width:10px;height:10px;padding:0;border:none;border-radius:999px;background:rgba(255,255,255,.25);
cursor:pointer;transition:width .2s ease,background .2s ease}
.puntos button.on{width:30px;background:var(--grad-sol)}
/* Fotos sin imagen cargada: degrade de repuesto con una camara al centro. */
.foto{position:relative}
.foto:not(.con-imagen)::after{content:'📷';position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;font-size:40px;opacity:.5}
/* --- Cuenta regresiva (hoy apagada a pedido de la Organizacion) ------------
Para volver a mostrarla: incluir partials/countdown en el hero. */
.cuenta{display:flex;justify-content:center;gap:12px;margin-top:22px}
.cuenta .caja{min-width:76px;padding:10px 14px;border:2px solid var(--linea);border-radius:14px;background:var(--panel);text-align:center}
.cuenta .num{font-family:var(--display);font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.cuenta .lbl{font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-tenue)}
.badge-edicion{display:inline-block;margin-top:22px;padding:10px 22px;border:2px solid var(--lima);border-radius:999px;
color:var(--lima);font-weight:800;font-size:15px}
.badge-edicion.finalizada{border-color:var(--turquesa);color:var(--turquesa)}
/* =========================================================================
5. PAGINAS INTERIORES
========================================================================= */
/* --- Encabezado ------------------------------------------------------------ */
.encabezado-pagina{position:relative;padding:22px 36px 16px;
background:
var(--p-fucsia) 70% 22%/14px no-repeat,var(--a-naranja) 79% 88%/46px no-repeat,
var(--p-turquesa) 71% 82%/12px no-repeat,var(--p-amarillo) 86% 48%/14px no-repeat}
.encabezado-pagina::after{content:'';position:absolute;right:-130px;top:-150px;width:330px;height:330px;
pointer-events:none;background:var(--flor-a) center/contain no-repeat;transform:rotate(14deg)}
.encabezado-pagina > *{position:relative;z-index:1}
.encabezado-pagina h1{font-family:var(--display);font-weight:400;font-size:70px;line-height:.92;letter-spacing:.01em;text-wrap:balance}
.encabezado-pagina p{max-width:660px;margin-top:8px;color:var(--texto-suave);font-size:15px;line-height:1.6}
.encabezado-pagina p a{color:var(--turquesa);font-weight:800}
.encabezado-pagina .pastilla-fecha{font-size:22px;border-width:3px;margin-top:12px}
/* Estado vacio generico (sin espectaculos, sin carrozas, sin fotos...). */
.vacio{margin:24px 36px 56px;padding:38px 30px;border:2px dashed var(--linea);border-radius:var(--radius);
background:var(--panel);text-align:center;color:var(--texto-suave);font-size:15px}
/* --- Grilla de espectaculos ------------------------------------------------ */
.tabs-dia{display:flex;gap:16px;padding:14px 36px 0}
/* Pestanas con la misma pincelada que los dias de Inicio (.pincel): la del
dia elegido va llena y con sombra; la otra, con la pincelada atenuada. */
.tab-dia{--fondo-cinta:var(--grad-sol);position:relative;display:inline-flex;align-items:center;min-height:44px;
padding:.12em 1.15em .04em .85em;font-family:var(--display);font-size:40px;line-height:1;letter-spacing:.04em;
color:rgba(255,255,255,.75);text-decoration:none;transform:rotate(-1.5deg);text-shadow:0 2px 6px rgba(0,0,0,.28);
transition:color .15s ease}
.tab-dia.dia-2{--fondo-cinta:var(--grad-mar)}
.tab-dia.pincel::before{opacity:.45;transition:opacity .15s ease}
.tab-dia:hover{color:var(--blanco)}
.tab-dia:hover::before{opacity:.7}
.tab-dia.on{color:var(--blanco);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.tab-dia.on::before{opacity:1}
.dia-grilla[hidden]{display:none}
.grilla{--acento:var(--naranja);--brillo:rgba(242,106,33,.4);margin:24px 36px 48px;padding:8px 26px;
background:var(--panel);border:3px solid var(--acento);border-radius:28px;
box-shadow:0 0 26px var(--brillo),inset 0 0 40px rgba(0,0,0,.3)}
.grilla.dia-2{--acento:var(--turquesa);--brillo:rgba(60,195,185,.4)}
.evento{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:22px;align-items:center;
padding:16px 4px;border-bottom:1px dashed var(--linea)}
.evento:last-child{border-bottom:none}
.evento .hora{font-family:var(--display);font-size:40px;line-height:1;color:var(--acento);font-variant-numeric:tabular-nums}
.evento .hora small{display:block;margin-top:4px;font-family:var(--texto);font-weight:700;font-size:10.5px;
letter-spacing:.06em;text-transform:uppercase;color:var(--texto-tenue)}
.evento h3{font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.01em;line-height:1.2}
.evento p{margin-top:2px;color:var(--texto-suave);font-size:14px}
.evento-nombre{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.chip{justify-self:end;padding:5px 13px;border:2px solid currentColor;border-radius:999px;font-weight:800;
font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.chip.musica::before{content:'♪ '}
.chip.musica{color:var(--turquesa)}
.chip.destacado{color:var(--amarillo)}
.chip.gastro{color:var(--lima)}
.chip.voto{color:var(--fucsia-claro)}
/* Resaltados: borde encendido, estrella y nombre en letra de cartel. */
.evento.estelar{margin:10px -12px;padding:14px 16px;border:2px solid var(--acento);border-radius:20px;
background:linear-gradient(90deg,var(--brillo),transparent 65%);box-shadow:0 0 18px var(--brillo)}
.evento.estelar.con-foto{grid-template-columns:96px 120px minmax(0,1fr) auto}
.evento .miniatura{width:120px;height:92px;border-width:3px;border-radius:14px}
.evento .miniatura > img{border-radius:11px}
.evento.estelar h3{font-family:var(--display);font-weight:400;font-size:42px;line-height:1;letter-spacing:.02em}
.evento.estelar h3::before{content:'★ ';content:'★ ' / '';color:var(--amarillo)}
.evento.tipo-destacado h3{color:var(--amarillo)}
/* --- Ediciones ------------------------------------------------------------- */
.linea-tiempo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:18px 36px 54px}
.edicion{display:flex;flex-direction:column;padding:16px;background:var(--panel);border:2px solid var(--linea);border-radius:26px}
.edicion .portada{display:flex;align-items:center;justify-content:center;aspect-ratio:3 / 2;font-size:40px}
.edicion .anio{position:absolute;top:-16px;left:-12px;font-size:36px}
.edicion .cuerpo{display:flex;flex-direction:column;flex:1;padding:16px 6px 4px}
.edicion h3{font-family:var(--display);font-weight:400;font-size:40px;line-height:.95;margin-top:6px}
/* Podio de la edicion: ocupa el lugar que antes tenia la descripcion. */
.ganadores{margin:16px 0 4px;padding:16px 20px 18px;border:2px solid var(--amarillo);border-radius:18px;
background:rgba(247,191,28,.1)}
.ganadores .rotulo{display:block;font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.06em;
color:var(--amarillo);margin-bottom:10px}
.ganadores ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ganadores li{display:flex;align-items:baseline;gap:14px;font-size:16.5px;line-height:1.35}
.ganadores .puesto{flex:none;min-width:34px;font-family:var(--display);font-size:30px;line-height:1;color:var(--amarillo)}
.ganadores li + li{padding-top:8px;border-top:1px solid rgba(247,191,28,.25)}
.ganadores .sin-dato{color:var(--texto-tenue)}
.edicion p{flex:1;color:var(--texto-suave);font-size:15px;line-height:1.6}
.stats{display:flex;gap:clamp(14px,2.4vw,26px);margin:20px 0 24px}
/* Cada rotulo centrado debajo de su numero ("ASISTENTES" al medio de "+5.000"). */
.stat{text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(38px,4.6vw,48px);line-height:.9;font-variant-numeric:tabular-nums}
.stat span{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-tenue)}
.edicion .btn{align-self:flex-start}
/* Una sola edicion (hoy, solo 2025 tiene fotos): tarjeta ancha con la
portada grande a la izquierda y el borde encendido. */
.linea-tiempo:has(> .edicion:only-child){grid-template-columns:1fr}
@media(min-width:861px){
.edicion:only-child{display:grid;grid-template-columns:56% minmax(0,1fr);gap:36px;align-items:center;padding:26px;
border:3px solid var(--turquesa);border-radius:28px;box-shadow:0 0 26px rgba(60,195,185,.35)}
.edicion:only-child .anio{top:-20px;left:-16px;font-size:48px}
.edicion:only-child .cuerpo{padding:0}
.edicion:only-child h3{font-size:60px}
.edicion:only-child p{flex:none}
/* Se achican con la ventana para que "+5.000" y "Mucha" entren en la fila. */
.edicion:only-child .stats{gap:clamp(16px,2.4vw,30px)}
.edicion:only-child .stat b{font-size:clamp(40px,5vw,58px)}
}
/* --- Galeria de una edicion ----------------------------------------------- */
.volver{display:inline-flex;gap:8px;margin:6px 36px 0;color:var(--turquesa);font-weight:800;font-size:14px;text-decoration:none}
.volver:hover{text-decoration:underline}
.galeria-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:180px;gap:20px;padding:22px 36px 54px}
.galeria-grid .foto:first-child{grid-column:span 2;grid-row:span 2}
/* --- Votacion -------------------------------------------------------------- */
/* Apoyan la votacion: logos en blanco directo sobre el fondo, en la fila
del titulo; si no entran al lado, bajan debajo de el. El rotulo va
arriba de los logos para que el grupo entre al lado del titulo. */
.encabezado-fila{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px}
.apoyan-voto{display:flex;flex-direction:column;gap:6px}
.apoyan-voto .titulo{font-family:var(--display);font-size:18px;letter-spacing:.16em;line-height:1;color:var(--naranja)}
.apoyan-voto .logos{display:flex;align-items:center;gap:26px}
.apoyan-voto img{width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.apoyan-voto .logo-turismo{height:52px}
.apoyan-voto .logo-antel{height:68px}
/* La flor del encabezado se corre a la derecha para no quedar detras de los
logos: sobre sus petalos naranja y amarillo se perdian los detalles. En el
celular los logos van debajo del titulo y la flor queda donde estaba. */
@media(min-width:861px){.encabezado-pagina:has(.apoyan-voto)::after{right:-250px}}
.voto-estado{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
margin:14px 36px 0;padding:16px 24px;background:var(--panel);border:2px solid var(--linea);border-radius:22px}
.voto-estado:has(.abierta){border-color:var(--lima);box-shadow:0 0 22px rgba(140,203,74,.3)}
.voto-estado .abierta,.voto-estado .cerrada{display:flex;align-items:center;gap:12px;font-family:var(--display);
font-size:31px;line-height:1;letter-spacing:.04em}
.voto-estado .abierta{color:var(--lima)}
.voto-estado .abierta i{width:13px;height:13px;border-radius:50%;background:var(--lima);animation:latido 1.6s ease-in-out infinite}
.voto-estado .cerrada{color:var(--texto-tenue)}
.voto-estado .cerrada i{width:13px;height:13px;border-radius:50%;background:var(--texto-tenue);box-shadow:0 0 0 4px rgba(138,168,170,.2)}
.voto-estado .proxima{color:var(--naranja)}
.voto-estado .proxima i{background:var(--naranja);box-shadow:0 0 0 4px rgba(242,106,33,.25)}
.voto-estado .cierre{color:var(--texto-suave);font-size:14px}
.voto-estado b{color:var(--blanco)}
.carrozas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px 24px;padding:30px 36px}
.carroza{display:flex;flex-direction:column;padding:12px;background:var(--panel);border:2px solid var(--linea);
border-radius:24px;transition:border-color .15s ease,box-shadow .15s ease}
/* La tarjeta elegida se enciende en naranja. */
.carroza:has(.btn-voto.elegido){border-color:var(--naranja);box-shadow:0 0 24px rgba(242,106,33,.4)}
.carroza .foto-c{display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 3;border-width:3px;
border-radius:16px;font-size:42px;color:rgba(255,255,255,.75)}
.num-carroza{position:absolute;top:-12px;left:-10px;z-index:1;font-size:28px}
.galeria-mini{position:absolute;right:10px;bottom:10px;padding:4px 11px;border-radius:999px;
background:rgba(7,26,32,.85);color:var(--blanco);font-weight:700;font-size:12px}
.carroza .cuerpo{display:flex;flex-direction:column;flex:1;padding:14px 6px 4px}
.carroza h3{font-weight:800;font-size:18px;text-transform:uppercase;line-height:1.2}
.carroza .grupo{margin:3px 0 8px;color:var(--turquesa);font-weight:700;font-size:13px}
.carroza .desc{flex:1;color:var(--texto-suave);font-size:14px;line-height:1.5}
.btn-voto{width:100%;min-height:52px;margin-top:14px;padding:8px 12px;border:2px solid rgba(60,195,185,.6);border-radius:14px;
background:transparent;color:var(--blanco);font-family:var(--display);font-size:24px;line-height:1;cursor:pointer}
.btn-voto:hover:not(:disabled){border-color:var(--turquesa);background:rgba(60,195,185,.12)}
.btn-voto.elegido,.btn-voto.elegido:hover{background:var(--grad-sol);border-color:transparent;color:var(--tinta)}
.btn-voto .si-elegida,.btn-voto.elegido .sin-elegir{display:none}
.btn-voto.elegido .si-elegida{display:inline}
.btn-voto:disabled{opacity:.35;cursor:not-allowed}
.nota-voto{display:flex;gap:12px;margin:0 36px 22px;padding:14px 18px;border:1px solid var(--linea);border-radius:16px;
background:rgba(255,255,255,.04);color:var(--texto-suave);font-size:13px;line-height:1.6}
.nota-voto .i{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
background:var(--turquesa);color:var(--tinta);font-weight:900;font-size:13px}
/* Queda pegada abajo mientras se recorre la lista: en el celular el boton
de confirmar siempre esta a mano. */
.barra-confirmar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px 16px;
flex-wrap:wrap;margin:0 36px 44px;padding:18px 24px;background:rgba(4,16,20,.95);border:2px solid var(--naranja);
border-radius:22px;box-shadow:0 0 26px rgba(242,106,33,.4)}
.barra-confirmar .resumen{color:var(--texto-suave);font-size:14.5px}
.barra-confirmar .resumen b{color:var(--blanco)}
/* Fuera de horario: la barra no se pega y pierde el brillo. */
.barra-confirmar.inactiva{position:static;border:2px dashed var(--linea);box-shadow:none;background:var(--panel)}
/* Pantallas de agradecimiento (voto e inscripcion). */
.gracias{margin:14px 36px 56px;padding:44px 40px;text-align:center;background:var(--panel);
border:3px solid var(--lima);border-radius:28px;box-shadow:0 0 26px rgba(140,203,74,.3)}
.gracias .emoji{font-size:52px;line-height:1}
.gracias h2{margin:12px 0 8px;font-family:var(--display);font-weight:400;font-size:48px;line-height:1}
.gracias p{max-width:520px;margin:0 auto;color:var(--texto-suave);font-size:15.5px;line-height:1.6}
.gracias p b{color:var(--blanco)}
.gracias .elegidas{display:flex;flex-direction:column;gap:10px;max-width:440px;margin:26px auto 0;text-align:left}
.gracias .elegida{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--linea);
border-radius:14px;background:rgba(255,255,255,.05);font-weight:700;font-size:14.5px}
.gracias .elegida small{color:var(--texto-tenue);font-weight:700}
.gracias .elegida .puesto{flex:none;padding:4px 11px;border-radius:8px;background:var(--grad-sol);color:var(--tinta);
font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.04em}
.gracias .acciones{margin-top:28px}
/* Avisos (votacion cerrada, voto duplicado, errores, envio correcto). */
.aviso{margin:14px 36px 0;padding:14px 20px;border:2px solid;border-radius:16px;font-size:14.5px;line-height:1.55}
.aviso.info{border-color:rgba(60,195,185,.55);background:rgba(60,195,185,.08);color:var(--texto-suave)}
.aviso.error{border-color:var(--rojo);background:rgba(255,107,94,.1);color:#ffd2cd}
.aviso.exito{border-color:var(--lima);background:rgba(140,203,74,.1);color:#e2f3cf}
.aviso b{color:var(--blanco);font-weight:800}
/* =========================================================================
6. VENTANAS
========================================================================= */
/* margin:auto: el reset (*{margin:0}) le quita al