/* Lotte 6 — estilos de la web.
   Los colores salen de design-system/tokens.css. Si cambia algo allá, cambia acá.

   La página se compromete con el negro de marca y no ofrece modo claro: es la
   versión negativa del logo, que es donde vive una fiesta. Todos los colores
   van pintados explícitos. */
:root{
  --negro:#0E1417; --superficie:#191F22; --linea:#373C3E;
  --texto:#F8F8F8; --arena:#AEA58F; --naranjo:#EC963E; --vino:#9F1F27;
  --tenue:#939597;
  --titulo:"Poppins","Avenir Next","Century Gothic",system-ui,sans-serif;
  --cuerpo:"Karla",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--negro);color:var(--texto);
     font:400 16px/1.6 var(--cuerpo);-webkit-font-smoothing:antialiased;
     display:flex;flex-direction:column;min-height:100dvh}

/* el halo: en una pieza sobre negro lo que separa los planos es la luz */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(58% 44% at 50% 42%,
    rgba(236,150,62,.17) 0%, rgba(159,31,39,.10) 38%, rgba(14,20,23,0) 78%)}

main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
     align-items:center;justify-content:center;gap:40px;
     padding:56px 24px;text-align:center}

.flor{width:min(62vw,300px);height:auto}
.flor .petalo{opacity:0}
.flor .petalo.visible{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .flor .petalo.visible{animation:brotar .9s cubic-bezier(.2,.7,.3,1) backwards}
}
@keyframes brotar{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}
}
.flor{overflow:visible}

h1{font:800 clamp(34px,9vw,58px)/1 var(--titulo);letter-spacing:-.03em;margin:0;
   overflow-wrap:break-word;max-width:100%}
.bajada{color:var(--arena);max-width:34ch;margin:0;font-size:17px}

/* --- formulario --- */
form{display:flex;flex-direction:column;gap:12px;width:min(100%,380px)}
.campo{display:flex;flex-direction:column;gap:6px;text-align:left}
label{font:700 11px/1 var(--titulo);letter-spacing:.16em;text-transform:uppercase;
      color:var(--tenue)}
input{width:100%;padding:14px 16px;border-radius:12px;background:var(--superficie);
      border:1px solid var(--linea);color:var(--texto);font:400 16px/1.2 var(--cuerpo)}
input::placeholder{color:#6E7274}
input:focus-visible{outline:2px solid var(--naranjo);outline-offset:2px;
                    border-color:var(--naranjo)}
button{padding:15px 20px;border:0;border-radius:12px;background:var(--naranjo);
       color:var(--negro);font:700 16px/1 var(--titulo);cursor:pointer;
       transition:background .18s ease}
button:hover{background:#F3BE87}
button:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
button[disabled]{opacity:.55;cursor:default}
.letra-chica{color:var(--tenue);font-size:13px;margin:0}
.aviso{margin:0;font-size:15px;min-height:1.4em}
.aviso.ok{color:var(--naranjo)}
.aviso.error{color:#D4646B}

footer{position:relative;z-index:1;padding:24px;display:flex;justify-content:center;
       gap:20px;flex-wrap:wrap;color:var(--tenue);font-size:13px}
footer a{color:var(--arena);text-decoration:none;border-bottom:1px solid var(--linea);
         padding-bottom:1px}
footer a:hover{color:var(--texto)}
footer a:focus-visible{outline:2px solid var(--naranjo);outline-offset:3px}

/* --- estado revelado --- */
/* columnas explícitas, no auto-fit: con auto-fit los cuatro datos se repartían
   3+1 y quedaba una celda vacía pintada del gris de los filetes, que se lee
   como un error. 2×2 en teléfono, 4 en línea en pantalla ancha. */
.datos{display:grid;grid-template-columns:repeat(2,1fr);
       gap:1px;background:var(--linea);border:1px solid var(--linea);
       border-radius:14px;overflow:hidden;width:min(100%,760px)}
@media (min-width:760px){ .datos{grid-template-columns:repeat(4,1fr)} }
.datos div{background:var(--negro);padding:22px 20px;text-align:left}
.datos dt{font:700 11px/1 var(--titulo);letter-spacing:.16em;text-transform:uppercase;
          color:var(--tenue);margin:0 0 8px}
.datos dd{margin:0;font:600 19px/1.3 var(--titulo)}
.marca-pie{width:min(52vw,220px);height:auto;color:var(--texto)}

/* --- preventa --- */
/* El desplegable se pinta igual que los campos de texto: el estilo propio del
   sistema llega blanco y rompe el negro de la página. */
select{width:100%;padding:14px 16px;border-radius:12px;background:var(--superficie);
       border:1px solid var(--linea);color:var(--texto);font:400 16px/1.2 var(--cuerpo);
       appearance:none;-webkit-appearance:none;
       background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23939597' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
       background-repeat:no-repeat;background-position:right 16px center;
       background-size:12px;padding-right:42px}
select:focus-visible{outline:2px solid var(--naranjo);outline-offset:2px;
                     border-color:var(--naranjo)}
.opcional{color:var(--linea);letter-spacing:.1em}
.rotulo{margin:0 0 -26px;font:700 12px/1 var(--titulo);letter-spacing:.3em;
        text-transform:uppercase;color:var(--naranjo)}

/* --- venta (venta.html) --- */
/* La portada de la venta es una página larga, no una pantalla: el main
   centrado vertical de las otras páginas aquí deja todo apretado arriba. */
main.largo{justify-content:flex-start;gap:56px;padding:48px 24px 24px}
/* La portada ocupa la primera pantalla, pero con tope: en un monitor muy alto
   calc(100dvh) la estiraba hasta dejar el botón flotando en medio de la nada. */
main.largo .portada{display:flex;flex-direction:column;align-items:center;
                    gap:22px;min-height:min(calc(100dvh - 120px),760px);
                    justify-content:center;width:100%}
.bloque{display:flex;flex-direction:column;align-items:center;gap:16px;
        width:min(100%,760px)}
.titulo-bloque{font:700 clamp(20px,5vw,26px)/1.2 var(--titulo);margin:0;
               letter-spacing:-.01em}

/* La flor completa no depende de guion.js: si el script no corre, igual se ve */
.flor.completa .petalo{opacity:1}

/* el rótulo de la portada va encendido, no apagado como en preventa */
.rotulo.vivo{margin:0;color:var(--naranjo)}

/* El botón de compra es un enlace, no un submit: mismo peso visual que el
   botón del formulario, pero más grande — es la única acción de la página. */
.boton-grande{display:inline-block;padding:18px 36px;border-radius:14px;
  background:var(--naranjo);color:var(--negro);text-decoration:none;
  font:800 19px/1 var(--titulo);letter-spacing:-.01em;
  transition:background .18s ease,transform .18s ease}
.boton-grande:hover{background:#F3BE87;transform:translateY(-1px)}
.boton-grande:focus-visible{outline:2px solid var(--texto);outline-offset:3px}

/* los tramos: filas, no tabla — en teléfono una tabla de tres columnas se
   comprime y el precio queda ilegible */
.tramos{list-style:none;margin:0;padding:0;width:100%;
        display:flex;flex-direction:column;gap:1px;
        background:var(--linea);border:1px solid var(--linea);
        border-radius:14px;overflow:hidden}
.tramos li{background:var(--negro);padding:18px 20px;text-align:left;
           display:grid;grid-template-columns:1fr auto;
           grid-template-areas:"nombre valor" "estado valor";
           gap:2px 16px;align-items:center}
.t-nombre{grid-area:nombre;font:700 17px/1.2 var(--titulo)}
.t-estado{grid-area:estado;font-size:13px;color:var(--tenue)}
.t-valor{grid-area:valor;font:800 24px/1 var(--titulo);color:var(--tenue)}
.tramos li.activo{background:var(--superficie)}
.tramos li.activo .t-valor{color:var(--naranjo)}
.tramos li.activo .t-estado{color:var(--arena)}

/* fichas: un titular corto arriba y una línea de explicación abajo.
   Nació para el cartel de DJs; hoy lo usan las razones del local. */
.fichas{list-style:none;margin:0;padding:0;width:100%;
        display:grid;grid-template-columns:1fr;gap:1px;
        background:var(--linea);border:1px solid var(--linea);
        border-radius:14px;overflow:hidden}
@media (min-width:600px){ .fichas{grid-template-columns:repeat(2,1fr)} }
.fichas li{background:var(--negro);padding:18px 20px;text-align:left;
           display:flex;flex-direction:column;gap:4px}
/* Con cinco nombres en dos columnas sobraba media fila pintada del gris de los
   filetes, que se lee como un error: el último ocupa el ancho completo. */
.fichas li:last-child:nth-child(odd){grid-column:1/-1}
.fichas b{font:700 17px/1.2 var(--titulo)}
.fichas span{font-size:13px;color:var(--tenue)}

main.largo form{align-items:stretch}
main.largo form .titulo-bloque,
main.largo form .bajada{text-align:center;align-self:center}
/* la dirección va bajo el nombre del local, en cuerpo chico: es dato de apoyo */
.datos .dato-extra{display:block;margin-top:6px;font:400 13px/1.4 var(--cuerpo);
                   color:var(--tenue)}

/* --- lo principal: con quién te encuentras --- */
/* Esta sección reemplazó al cartel de DJs: el argumento del evento no es quién
   toca, es quién va. Por eso el titular pesa como un h1 y no como un h2. */
.estrella{gap:12px}
.titulo-estrella{font:800 clamp(30px,8vw,52px)/1.05 var(--titulo);
                 letter-spacing:-.03em;margin:0}
.bajada.ancha{max-width:46ch}

/* las fotos de archivo: apiladas en teléfono, lado a lado en pantalla ancha */
.galeria{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:720px){ .galeria{grid-template-columns:1fr 1fr} }
.retrato{margin:0;width:100%}
.retrato img{width:100%;height:auto;display:block;border-radius:14px;
             border:1px solid var(--linea)}
.retrato figcaption{margin-top:10px;font-size:13px;color:var(--tenue);
                    text-align:left}

/* el logo del local va dentro de la celda «Dónde», en vez del nombre escrito */
.logo-local{display:block;width:min(100%,160px);height:auto;margin:0 0 2px}

/* Los estilos de .tramos siguen más arriba sin uso: esa sección salió de
   venta.html el 16-10-2026 y puede volver. */

/* El rótulo de las páginas de venta exclusiva pesa mucho más que el de la
   portada pública: es lo que le dice a la persona que ese enlace es suyo.
   Solo lo llevan las páginas que genera construir-exclusivas.py. */
/* el margen negativo de .rotulo pega el rótulo chico al título; con el nombre
   grande hay que devolverle el aire o «BETO» y «Nos volvemos» se tocan */
.rotulo.exclusivo{font-size:clamp(13px,3.2vw,16px);letter-spacing:.22em;
                  line-height:1.9;margin:0 0 6px}
.rotulo.exclusivo b{display:block;color:var(--texto);
                    font:800 clamp(26px,7vw,40px)/1 var(--titulo);
                    letter-spacing:.04em}

/* --- la cuenta regresiva de la portada --- */
/* Los números van en tabulares y con ancho fijo por bloque: con la tipografía
   proporcional, un 11 ocupa menos que un 00 y el reloj entero tiembla cada
   segundo. */
.reloj{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap}
.reloj>div{background:var(--superficie);border:1px solid var(--linea);
           border-radius:14px;padding:18px 10px;min-width:clamp(86px,25vw,120px);
           display:flex;flex-direction:column;align-items:center;gap:6px}
.numero{font:800 clamp(34px,11vw,56px)/1 var(--titulo);color:var(--naranjo);
        font-variant-numeric:tabular-nums;letter-spacing:.02em}
.unidad{font:700 10px/1 var(--titulo);letter-spacing:.18em;text-transform:uppercase;
        color:var(--tenue)}

/* --- cuando a alguien se le agotan sus entradas --- */
/* El botón deja de ser un enlace y pasa a ser un cartel: no lleva a ninguna
   parte, no cambia al pasar el mouse y no se puede apretar. Si siguiera
   pareciendo un botón, la gente lo apretaría una y otra vez. */
.boton-grande.agotado{background:var(--superficie);color:var(--tenue);
  border:1px solid var(--linea);cursor:default;letter-spacing:.12em;
  text-transform:uppercase;font-size:16px}
.boton-grande.agotado:hover{background:var(--superficie);transform:none}

/* el rótulo apagado: el nombre en gris y «Agotada» en vino bajo el nombre */
.rotulo.apagado{color:var(--tenue)}
.rotulo.apagado b{color:var(--tenue)}
.rotulo.apagado i{display:block;margin-top:6px;font-style:normal;
  color:#D4646B;font:800 clamp(14px,3.6vw,18px)/1 var(--titulo);
  letter-spacing:.24em}

/* el reloj de una venta con horario: más chico que el de la portada, porque
   acompaña al botón en vez de ser el protagonista */
main.largo .reloj{margin-top:4px}
main.largo .reloj>div{padding:12px 10px;min-width:clamp(74px,22vw,100px)}
main.largo .numero{font-size:clamp(26px,8vw,38px)}
/* cuando ya abrió, el reloj cuenta al cierre: deja de ser naranjo festivo */
.reloj.cierre .numero{color:var(--arena)}