/* Ponchera Crew — dirección neón con el oro como base.
   El oro viene del logo real; el magenta y el cian quedan como acento. */

:root{
  --fondo:#07070B;
  --superficie:#101018;
  --linea:#1E1E2B;
  --oro:#E8C56A;
  --oro-claro:#F7E7B4;
  --oro-oscuro:#A67C2E;
  --magenta:#FF2D87;
  --cian:#29D3E8;
  --texto:#ECECF4;
  --texto-suave:#9B9BAE;
  --texto-tenue:#66667A;
  --display:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --cuerpo:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--cuerpo);
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.contenedor{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.linea{height:1px;background:linear-gradient(90deg,transparent,var(--linea) 20%,var(--linea) 80%,transparent)}

/* cabecera */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(7,7,11,.82);
          backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;gap:1.6rem;padding:.7rem 0}
.marca{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.marca img{height:44px;width:auto;display:block}
.marca b{font-family:var(--display);font-weight:900;font-size:.95rem;
         letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.marca small{display:block;font-family:var(--mono);font-size:.55rem;
             letter-spacing:.2em;color:var(--oro);margin-top:.2rem}
.barra nav{display:flex;gap:1.5rem;margin-left:auto;font-size:.78rem;
           letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.barra nav a:hover{color:var(--oro)}
.btn-comprar{background:linear-gradient(150deg,var(--oro-claro),var(--oro) 55%,var(--oro-oscuro));
             color:#14100A;font-weight:800;font-size:.74rem;letter-spacing:.12em;
             text-transform:uppercase;padding:.62rem 1.15rem;border-radius:999px;
             white-space:nowrap;box-shadow:0 0 24px rgba(232,197,106,.28)}
@media(max-width:900px){.barra nav{display:none}}

/* portada */
.portada{position:relative;overflow:hidden;padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem)}
.portada::before,.portada::after{content:"";position:absolute;pointer-events:none}
.portada::before{inset:-30% -10% auto -10%;height:150%;
  background:radial-gradient(52% 62% at 82% 8%,rgba(255,45,135,.30),transparent 62%),
             radial-gradient(46% 56% at 12% 2%,rgba(41,211,232,.20),transparent 60%),
             radial-gradient(70% 70% at 50% 120%,rgba(232,197,106,.16),transparent 66%)}
.portada::after{inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.022) 3px 4px)}
.haz{position:absolute;top:-40%;left:50%;width:56%;height:190%;
     background:linear-gradient(96deg,transparent,rgba(232,197,106,.13),transparent);
     transform:translateX(-50%) rotate(9deg);filter:blur(26px);
     animation:barrido 11s ease-in-out infinite;pointer-events:none}
@keyframes barrido{
  0%,100%{transform:translateX(-72%) rotate(9deg);opacity:.35}
  50%{transform:translateX(-26%) rotate(-7deg);opacity:.85}}
.portada-in{position:relative;z-index:2;text-align:center}
.escudo{width:clamp(120px,20vw,168px);height:auto;margin:0 auto 1.6rem;display:block;
        filter:drop-shadow(0 0 30px rgba(232,197,106,.4))}
.etiqueta{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(232,197,106,.32);
          border-radius:999px;padding:.42rem 1rem;font-family:var(--mono);font-size:.66rem;
          letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-bottom:1.5rem;
          background:rgba(232,197,106,.05)}
.punto{width:6px;height:6px;border-radius:50%;background:var(--magenta);
       box-shadow:0 0 10px var(--magenta);animation:latido 2s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}
.portada h1{font-family:var(--display);font-weight:900;text-transform:uppercase;
   font-size:clamp(2.9rem,11vw,7.4rem);line-height:.84;letter-spacing:-.045em;
   margin:0 0 1.2rem;text-wrap:balance}
.portada h1 .l1{display:block;background:linear-gradient(96deg,var(--oro-claro),var(--oro) 42%,var(--oro-oscuro));
   -webkit-background-clip:text;background-clip:text;color:transparent}
.portada h1 .l2{display:block;color:#fff;
   text-shadow:0 0 34px rgba(255,45,135,.42),0 0 74px rgba(255,45,135,.2)}
.entradilla{font-size:clamp(1rem,2.1vw,1.18rem);color:var(--texto-suave);max-width:46ch;margin:0 auto 2rem}
.acciones{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem}
.btn{font-weight:800;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
     padding:.92rem 1.9rem;border-radius:999px;transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn-oro{background:linear-gradient(150deg,var(--oro-claro),var(--oro) 55%,var(--oro-oscuro));
         color:#14100A;box-shadow:0 0 30px rgba(232,197,106,.34)}
.btn-fantasma{border:1px solid rgba(255,255,255,.2);color:var(--texto)}
.btn-fantasma:hover{border-color:var(--cian);color:var(--cian)}
.cifras{display:flex;justify-content:center;gap:clamp(1.4rem,5vw,3.6rem);flex-wrap:wrap}
.cifras b{display:block;font-family:var(--display);font-weight:900;
          font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:-.03em;color:var(--oro);
          font-variant-numeric:tabular-nums}
.cifras span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
             text-transform:uppercase;color:var(--texto-tenue)}

/* secciones */
section{padding:clamp(3.2rem,7vw,5.2rem) 0;position:relative}
.antetitulo{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;
            text-transform:uppercase;color:var(--oro);margin:0 0 1rem}
h2{font-family:var(--display);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;
   font-size:clamp(1.8rem,4.6vw,3rem);line-height:.95;margin:0 0 .8rem;text-wrap:balance}
.bajada{color:var(--texto-suave);max-width:56ch;margin:0 0 2.2rem}

/* noches */
.noches{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.noche{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;
       padding:1.4rem;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.noche:hover{transform:translateY(-4px)}
.noche::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--borde)}
.noche.n1{--borde:linear-gradient(90deg,var(--cian),transparent)}
.noche.n2{--borde:linear-gradient(90deg,var(--magenta),transparent)}
.noche.n3{--borde:linear-gradient(90deg,var(--oro),transparent)}
.noche.n1:hover{border-color:rgba(41,211,232,.45)}
.noche.n2:hover{border-color:rgba(255,45,135,.45)}
.noche.n3:hover{border-color:rgba(232,197,106,.45)}
.cuando{display:flex;align-items:baseline;gap:.55rem;margin:0 0 .9rem}
.cuando b{font-family:var(--display);font-weight:900;font-size:2.1rem;letter-spacing:-.04em;line-height:1}
.cuando span{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
             text-transform:uppercase;color:var(--texto-tenue)}
.noche h3{font-family:var(--display);font-weight:900;text-transform:uppercase;
          font-size:1.15rem;letter-spacing:-.02em;margin:0 0 .4rem}
.artistas{font-size:.86rem;color:var(--texto-suave);margin:0 0 1rem;min-height:2.4em}
.desde{display:flex;align-items:baseline;justify-content:space-between;
       padding-top:.9rem;border-top:1px solid var(--linea);margin:0}
.desde small{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
             text-transform:uppercase;color:var(--texto-tenue)}
.desde b{font-family:var(--display);font-weight:900;font-size:1.4rem;color:var(--oro);
         font-variant-numeric:tabular-nums}

/* pase completo */
.pase{margin-top:1rem;border:1px solid rgba(232,197,106,.36);border-radius:18px;padding:1.7rem;
      display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
      background:linear-gradient(120deg,rgba(232,197,106,.10),rgba(255,45,135,.05) 70%,transparent)}
.pase-txt{flex:1 1 300px}
.pase h3{font-family:var(--display);font-weight:900;text-transform:uppercase;
         font-size:1.5rem;letter-spacing:-.03em;margin:0 0 .35rem}
.pase p{margin:0;color:var(--texto-suave);font-size:.92rem}
.ahorro{color:var(--oro);font-weight:700}
.pase-precio{text-align:right;flex:0 0 auto}
.pase-precio b{display:block;font-family:var(--display);font-weight:900;font-size:2.6rem;
               letter-spacing:-.04em;color:var(--oro);font-variant-numeric:tabular-nums;line-height:1}
.pase-precio small{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
                   text-transform:uppercase;color:var(--texto-tenue)}

/* entradas */
.entradas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.bloque{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:1.4rem}
.bloque h3{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
           color:var(--cian);margin:0 0 1.1rem;font-weight:400}
.fila{display:flex;justify-content:space-between;align-items:center;gap:1rem;
      padding:.72rem 0;border-bottom:1px solid var(--linea)}
.fila:last-child{border-bottom:0}
.fila.agotada{opacity:.42}
.nom{display:flex;flex-direction:column;gap:.15rem}
.nom b{font-size:.92rem;font-weight:600}
.nom small{font-size:.7rem;color:var(--texto-tenue)}
.pre{font-family:var(--display);font-weight:900;font-size:1.15rem;color:var(--oro);
     font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.pre em{display:block;font-family:var(--mono);font-style:normal;font-size:.54rem;
        letter-spacing:.12em;color:var(--texto-tenue);font-weight:400}
.chip{display:inline-block;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
      text-transform:uppercase;padding:.16rem .45rem;border-radius:4px;margin-left:.4rem;vertical-align:1px}
.chip.pocas{background:rgba(255,45,135,.16);color:var(--magenta);border:1px solid rgba(255,45,135,.34)}
.chip.agotado{background:rgba(155,155,174,.12);color:var(--texto-suave);border:1px solid var(--linea)}
.nota{margin-top:1.2rem;font-size:.78rem;color:var(--texto-tenue);display:flex;gap:.5rem}
.nota b{color:var(--oro)}

/* galería */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.65rem}
.tarjeta{aspect-ratio:4/5;border-radius:12px;position:relative;overflow:hidden;
         border:1px solid var(--linea);display:flex;flex-direction:column;
         justify-content:flex-end;padding:.85rem;transition:transform .25s,border-color .25s}
.tarjeta:hover{transform:translateY(-4px);border-color:rgba(232,197,106,.5)}
.tarjeta::before{content:"";position:absolute;inset:0;background:var(--bg);opacity:.9}
.tarjeta::after{content:"";position:absolute;inset:0;
                background:linear-gradient(180deg,transparent 38%,rgba(7,7,11,.94))}
.tarjeta b,.tarjeta span{position:relative;z-index:2}
.tarjeta b{font-family:var(--display);font-weight:900;text-transform:uppercase;
           font-size:.82rem;letter-spacing:-.01em;line-height:1.15;margin-bottom:.2rem}
.tarjeta span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--oro)}
.g1{--bg:linear-gradient(150deg,#3A1D52,#0C0814)}
.g2{--bg:linear-gradient(150deg,#52213C,#0C0814)}
.g3{--bg:linear-gradient(150deg,#1D3B52,#0C0814)}
.g4{--bg:linear-gradient(150deg,#523B1D,#0C0814)}
.g5{--bg:linear-gradient(150deg,#22523A,#0C0814)}
.g6{--bg:linear-gradient(150deg,#4A2231,#0C0814)}

/* pie */
.pie{border-top:1px solid var(--linea);padding:2.6rem 0 3rem;margin-top:1rem}
.pie-cols{display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.pie-cols>div{flex:1 1 200px}
.pie-logo{height:60px;margin-bottom:.8rem}
.pie p{font-size:.85rem;color:var(--texto-suave);margin:0;max-width:30ch}
.pie h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
        color:var(--texto-tenue);margin:0 0 .7rem;font-weight:400}
.pie-cols a{display:block;font-size:.85rem;color:var(--texto-suave);padding:.2rem 0}
.pie-cols a:hover{color:var(--oro)}
.pie-legal{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--linea);
           font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--texto-tenue);
           display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.idiomas a{padding:0 .3rem}
.idiomas a.activo{color:var(--oro);font-weight:700}

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

/* ---------- páginas de galería ---------- */
.cabeza-seccion{padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.6rem,4vw,2.4rem)}
.titulo-seccion{font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  text-transform:uppercase;font-size:clamp(2rem,5.4vw,3.4rem);line-height:.95;
  margin:0 0 .8rem;text-wrap:balance}
.volver{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-tenue);margin-bottom:1rem}
.volver:hover{color:var(--oro)}

.rejilla-galerias{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.tarjeta-gal{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  border:1px solid var(--linea);display:block;background:var(--superficie);
  transition:transform .25s,border-color .25s}
.tarjeta-gal:hover{transform:translateY(-4px);border-color:rgba(232,197,106,.5)}
.tarjeta-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s,filter .3s;filter:saturate(.85) brightness(.8)}
.tarjeta-gal:hover img{transform:scale(1.06);filter:saturate(1) brightness(.95)}
.tarjeta-gal-txt{position:absolute;inset:auto 0 0 0;padding:.9rem;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(7,7,11,.94) 60%)}
.tarjeta-gal-txt b{display:block;font-family:var(--display);font-weight:900;
  text-transform:uppercase;font-size:.85rem;letter-spacing:-.01em;line-height:1.15;
  margin-bottom:.2rem}
.tarjeta-gal-txt span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--oro)}

/* mosaico de fotos */
.mosaico{columns:4 200px;column-gap:.55rem}
.foto{display:block;margin:0 0 .55rem;break-inside:avoid;border-radius:10px;overflow:hidden;
  background-size:cover;background-position:center;border:1px solid transparent;
  transition:border-color .2s,transform .2s}
.foto:hover{border-color:var(--oro);transform:scale(1.015)}
.foto img{display:block;width:100%;height:auto}

.paginacion{margin-top:2rem;display:flex;justify-content:center}
.paginacion nav{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.paginacion a,.paginacion span{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.1rem;height:2.1rem;padding:0 .5rem;border:1px solid var(--linea);
  border-radius:8px;font-size:.8rem;color:var(--texto-suave);
  font-variant-numeric:tabular-nums;background:var(--superficie)}
.paginacion a:hover{border-color:var(--oro);color:var(--oro)}
.paginacion [aria-current] span,.paginacion .active span{background:var(--oro);color:#14100A;
  border-color:var(--oro);font-weight:700}
.paginacion svg{width:1rem;height:1rem;fill:currentColor}
.paginacion p{display:none}

/* ---------- checkout ---------- */
.checkout{display:grid;grid-template-columns:1.25fr .85fr;gap:1.6rem;align-items:start}
@media(max-width:820px){.checkout{grid-template-columns:1fr}}
.checkout-form{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:1.6rem}
.campo{margin-bottom:1.1rem;border:0;padding:0}
.campo label,.campo legend{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:.45rem;padding:0}
.opcional{color:var(--texto-tenue);letter-spacing:.1em}
.campo input[type=text],.campo input[type=email],.campo input[type=tel]{
  width:100%;background:var(--fondo);border:1px solid var(--linea);border-radius:10px;
  padding:.8rem .9rem;color:var(--texto);font-size:.95rem;font-family:inherit}
.campo input::placeholder{color:var(--texto-tenue)}
.campo input:focus{border-color:var(--oro);outline:none}
.pago-opcion{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem;margin-bottom:.5rem;
  border:1px solid var(--linea);border-radius:12px;cursor:pointer;background:var(--fondo);
  text-transform:none;letter-spacing:normal;font-family:var(--cuerpo)}
.pago-opcion:has(input:checked){border-color:var(--oro);background:rgba(232,197,106,.06)}
.pago-opcion input{margin-top:.25rem;accent-color:var(--oro)}
.pago-opcion b{display:block;font-size:.92rem}
.pago-opcion small{color:var(--texto-tenue);font-size:.76rem}
.btn-ancho{display:block;width:100%;text-align:center;border:0;cursor:pointer;
  font-family:inherit;margin-top:.4rem}
.nota-legal{margin-top:1rem;font-size:.74rem;color:var(--texto-tenue)}
.nota-legal b{color:var(--texto-suave)}
.aviso-error{border:1px solid rgba(255,45,135,.4);background:rgba(255,45,135,.08);
  border-radius:12px;padding:.9rem 1rem;margin-bottom:1.2rem;font-size:.86rem}
.aviso-error p{margin:.15rem 0}

.checkout-resumen{background:var(--superficie);border:1px solid var(--linea);
  border-radius:16px;padding:1.5rem;position:sticky;top:5rem}
.resumen-titulo{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cian);margin:0 0 1.1rem;font-weight:400}
.resumen-linea{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--linea);font-size:.9rem}
.resumen-linea b{display:block;font-weight:600}
.resumen-linea small{color:var(--texto-tenue);font-size:.74rem}
.resumen-precio{font-variant-numeric:tabular-nums;white-space:nowrap}
.resumen-total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:1rem;margin-top:.4rem}
.resumen-total span{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texto-suave)}
.resumen-total b{font-family:var(--display);font-weight:900;font-size:1.9rem;
  color:var(--oro);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.resumen-nota{font-size:.72rem;color:var(--texto-tenue);margin:.2rem 0 0}
.cuenta-atras{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--linea);
  font-size:.8rem;color:var(--texto-suave)}
.cuenta-atras b{color:var(--oro);font-variant-numeric:tabular-nums}
.cuenta-atras.caducada{color:var(--magenta)}
.cuenta-atras.caducada b{color:var(--magenta)}

/* botón de añadir al carrito */
.fila{flex-wrap:wrap}
.añadir{display:flex;gap:.4rem;align-items:center;width:100%;margin-top:.5rem}
.añadir input[type=number]{width:3.6rem;background:var(--fondo);border:1px solid var(--linea);
  border-radius:8px;padding:.4rem .5rem;color:var(--texto);font-size:.85rem;
  font-variant-numeric:tabular-nums;text-align:center;font-family:inherit}
.añadir button{background:transparent;border:1px solid var(--oro);color:var(--oro);
  border-radius:999px;padding:.4rem 1rem;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;font-family:inherit;
  transition:background .18s,color .18s}
.añadir button:hover{background:var(--oro);color:#14100A}

/* ---------- entradas con QR ---------- */
.entradas-qr{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.entrada{background:var(--superficie);border:1px solid var(--linea);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column}
.entrada-cabeza{padding:1.1rem 1.2rem;border-bottom:1px dashed var(--linea)}
.entrada-cabeza b{display:block;font-family:var(--display);font-weight:900;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:-.02em}
.entrada-cabeza span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro)}
/* El QR va sobre blanco a propósito: sobre fondo oscuro muchos lectores fallan. */
.entrada-qr{background:#fff;padding:1.1rem;display:flex;justify-content:center}
.entrada-qr img{display:block;width:100%;max-width:240px;height:auto}
.entrada-pie{padding:.9rem 1.2rem;display:flex;justify-content:space-between;
  align-items:center;gap:.8rem;flex-wrap:wrap}
.entrada-pie code{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  color:var(--texto-tenue);word-break:break-all}
.entrada-pie span{font-size:.8rem;color:var(--texto-suave)}

/* Cabecera en pantallas estrechas.
   Al ocultarse el menú por debajo de 900px, el botón de comprar se quedaba
   pegado a la marca y se salía de la pantalla: en un móvil de 390px la mitad
   del botón quedaba fuera. Se empuja a la derecha y se aprieta la marca. */
.btn-comprar{margin-left:auto}
@media(max-width:560px){
  .barra{gap:.7rem}
  .marca img{height:34px}
  .marca b{font-size:.78rem}
  .marca small{display:none}
  .btn-comprar{padding:.55rem .8rem;font-size:.63rem;letter-spacing:.08em}
}
@media(max-width:380px){
  /* A 320px no caben las tres cosas. El logo ya identifica la marca, así que
     el que cede es el texto: lo importante a ese ancho es que el botón de
     comprar se vea entero. */
  .marca span{display:none}
  .btn-comprar{padding:.5rem .7rem;font-size:.6rem}
}

/* ─────────────────────────────────────────────────────────────
   Galería: rejilla, paginación y visor
   ───────────────────────────────────────────────────────────── */

/* La rejilla de fotos.
   Antes era una sola columna en el móvil: 41 fotos hacían una página de
   20.000px que nadie recorre hasta el final. Ahora son dos columnas desde el
   móvil más pequeño, y crece con la pantalla. */
.mosaico{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.4rem;
}
@media(min-width:640px){.mosaico{grid-template-columns:repeat(3,1fr);gap:.55rem}}
@media(min-width:1000px){.mosaico{grid-template-columns:repeat(4,1fr);gap:.7rem}}

.mosaico .foto{
  position:relative;
  display:block;
  aspect-ratio:1/1;          /* cuadrado: la rejilla no baila según la foto */
  overflow:hidden;
  border-radius:.5rem;
  background-color:#14131a;
  background-size:cover;
  background-position:center;
  cursor:zoom-in;
}
.mosaico .foto img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .3s;
}
.mosaico .foto:hover img,
.mosaico .foto:focus-visible img{transform:scale(1.06)}
.mosaico .foto:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* Paginación */
.paginas{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.35rem;
  margin:2.4rem 0 .6rem;
  font-family:var(--mono);font-size:.72rem;
}
.pag-flecha,.pag-num,.pag-salto{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.2rem;height:2.2rem;padding:0 .7rem;
  border:1px solid var(--linea);border-radius:999px;
  color:var(--texto-suave);letter-spacing:.06em;
  transition:border-color .2s,color .2s,background .2s;
}
.pag-flecha:hover,.pag-num:hover{border-color:var(--oro);color:var(--oro)}
.pag-num.actual{
  background:linear-gradient(150deg,var(--oro-claro),var(--oro) 55%,var(--oro-oscuro));
  border-color:transparent;color:#14100A;font-weight:800;
}
.pag-salto{border-color:transparent}
.pag-flecha.inerte{opacity:.3;pointer-events:none}
.pag-cuenta{
  flex-basis:100%;text-align:center;
  margin-top:.7rem;color:var(--texto-suave);opacity:.6;font-size:.66rem;
}
@media(max-width:520px){
  /* En el móvil sobran los números: con las flechas y la cuenta basta. */
  .pag-numeros{display:none}
  .pag-flecha{flex:1;max-width:9rem}
}

/* ── Visor ── */
body.sin-scroll{overflow:hidden}

.visor{
  position:fixed;inset:0;z-index:200;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:1fr auto;
  align-items:center;
  gap:.5rem;
  padding:.8rem;
  background:rgba(5,5,8,.94);
  backdrop-filter:blur(10px);
  animation:visor-entra .22s ease-out;
}
.visor[hidden]{display:none}
@keyframes visor-entra{from{opacity:0}to{opacity:1}}

.visor-marco{
  grid-column:2;grid-row:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;margin:0;min-width:0;min-height:0;height:100%;
}
.visor-marco img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  border-radius:.4rem;
  box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.visor.cargando .visor-marco img{opacity:.55;filter:blur(1px)}
.visor figcaption{
  font-size:.8rem;color:var(--texto-suave);text-align:center;
  max-width:44rem;line-height:1.5;
}

.visor-cerrar{
  position:absolute;top:.7rem;right:.9rem;
  width:2.6rem;height:2.6rem;
  font-size:1.6rem;line-height:1;
  color:var(--texto-suave);background:rgba(255,255,255,.06);
  border:1px solid var(--linea);border-radius:999px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.visor-cerrar:hover{color:var(--oro);border-color:var(--oro)}

.visor-ir{
  width:2.9rem;height:2.9rem;
  font-size:1.7rem;line-height:1;
  color:var(--texto-suave);background:rgba(255,255,255,.06);
  border:1px solid var(--linea);border-radius:999px;cursor:pointer;
  transition:color .2s,border-color .2s,opacity .2s;
}
.visor-ir:hover:not(:disabled){color:var(--oro);border-color:var(--oro)}
.visor-ir:disabled{opacity:.22;cursor:default}
.visor-antes{grid-column:1;grid-row:1}
.visor-despues{grid-column:3;grid-row:1}

.visor-cuenta{
  grid-column:1/-1;grid-row:2;
  text-align:center;margin:0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  color:var(--texto-suave);opacity:.75;
}

@media(max-width:600px){
  /* En el móvil las flechas estorban a los lados de la foto: se bajan a una
     barra, y además se puede pasar deslizando. */
  .visor{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .visor-marco{grid-column:1;grid-row:1}
  .visor-antes,.visor-despues{grid-row:2;width:3.2rem;height:3.2rem}
  .visor-antes{grid-column:1;justify-self:start}
  .visor-despues{grid-column:1;justify-self:end}
  .visor-cuenta{grid-column:1;grid-row:2;align-self:center}
  .visor figcaption{font-size:.72rem}
}

/* ── Tarjetas de galería (índice y portada) ── */
.rejilla-galerias{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.8rem;
}
@media(max-width:560px){
  .rejilla-galerias{grid-template-columns:repeat(2,1fr);gap:.5rem}
}
.tarjeta-gal{
  position:relative;display:block;
  aspect-ratio:4/5;overflow:hidden;border-radius:.6rem;
  background:#14131a;
}
.tarjeta-gal img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tarjeta-gal:hover img{transform:scale(1.05)}
.tarjeta-gal-txt{
  position:absolute;inset:auto 0 0 0;
  padding:2.4rem .8rem .8rem;
  background:linear-gradient(to top,rgba(5,5,8,.92) 15%,rgba(5,5,8,0));
}
.tarjeta-gal-txt b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:.92rem;line-height:1.2;text-transform:uppercase;letter-spacing:-.01em;
}
.tarjeta-gal-txt span{
  display:block;margin-top:.25rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  color:var(--oro);opacity:.85;
}
/* Galería sin ninguna foto: que no quede un rectángulo negro sin explicación. */
.tarjeta-gal.sin-foto{display:flex;align-items:center;justify-content:center}
.tarjeta-gal.sin-foto::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(232,197,106,.14),transparent 70%);
}

/* Enlace de «ver todas», bajo las tarjetas de la portada. */
.mas-galerias{margin:1.6rem 0 0;text-align:center}
.btn-linea{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.7rem 1.4rem;border:1px solid var(--linea);border-radius:999px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-suave);transition:border-color .2s,color .2s;
}
.btn-linea:hover{border-color:var(--oro);color:var(--oro)}

/* ── Corrección del visor ─────────────────────────────────────
   Dos fallos que solo se ven usándolo:

   1. Las columnas eran `auto 1fr auto`, así que el ancho de las flechas lo
      marcaba la foto: al pasar a una imagen más estrecha, los botones SE
      MOVÍAN bajo el dedo. Ahora las columnas laterales son fijas.

   2. En el móvil el contador ocupaba toda la fila inferior, encima de las
      flechas, y tapaba el botón de siguiente: no se podía pulsar.
   ───────────────────────────────────────────────────────────── */
.visor{grid-template-columns:4.4rem 1fr 4.4rem}
.visor-antes{justify-self:center}
.visor-despues{justify-self:center}

@media(max-width:600px){
  .visor{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:1fr auto;
    padding:.6rem .6rem 1rem;
  }
  .visor-marco{grid-column:1/-1;grid-row:1}
  .visor-antes{grid-column:1;grid-row:2;justify-self:start}
  .visor-cuenta{grid-column:2;grid-row:2;align-self:center;margin:0 .6rem}
  .visor-despues{grid-column:3;grid-row:2;justify-self:end}
}

/* ─── Cartelera ───────────────────────────────────────────────
   La lista de lo que viene, de todos los productores. */
.mes{
  margin:2.2rem 0 .9rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);opacity:.85;font-weight:400;
}
.ciudades{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 0}
.chip-ciudad{
  padding:.35rem .8rem;border:1px solid var(--linea);border-radius:999px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);
}
.cartelera{display:grid;gap:.6rem}
.evento-tarjeta{
  display:grid;
  grid-template-columns:4.4rem 1fr auto;
  align-items:center;gap:1rem;
  padding:1rem 1.2rem;
  border:1px solid var(--linea);border-radius:.7rem;
  background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 60%);
  transition:border-color .25s,transform .25s;
}
.evento-tarjeta:hover{border-color:rgba(232,197,106,.45);transform:translateY(-2px)}
.evento-fecha{
  margin:0;text-align:center;line-height:1;
  padding-right:1rem;border-right:1px solid var(--linea);
}
.evento-fecha b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:900;color:var(--oro)}
.evento-fecha span{
  display:block;margin-top:.2rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);
}
.evento-txt{min-width:0}
.evento-txt h4{
  margin:0;font-family:var(--display);font-weight:800;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;
}
.evento-gancho{margin:.25rem 0 0;font-size:.85rem;color:var(--texto-suave)}
.evento-donde,.evento-quien{
  margin:.3rem 0 0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--texto-suave);opacity:.75;
}
.evento-quien{opacity:.55}
.evento-precio{text-align:right;white-space:nowrap}
.evento-precio small{
  display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-suave);opacity:.7;
}
.evento-precio b{font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--oro)}

@media(max-width:560px){
  /* En el móvil el precio baja debajo: en tres columnas el título quedaba
     partido en una palabra por línea. */
  .evento-tarjeta{grid-template-columns:3.6rem 1fr;gap:.8rem;padding:.9rem 1rem}
  .evento-precio{grid-column:2;text-align:left;margin-top:.4rem}
  .evento-precio small{display:inline;margin-right:.4rem}
  .evento-precio b{font-size:1.05rem}
  .evento-txt h4{font-size:.95rem}
}

/* ─── Tarjetas de evento ──────────────────────────────────────
   La rejilla de la cartelera. Antes eran filas horizontales sin foto: en una
   plataforma de eventos, la foto es lo que hace que alguien se pare. */
.rejilla-eventos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  gap:1rem;
}
@media(max-width:640px){
  .rejilla-eventos{grid-template-columns:1fr;gap:.9rem}
}

.tarjeta-evento{
  display:flex;flex-direction:column;
  border:1px solid var(--linea);border-radius:.8rem;
  overflow:hidden;background:#0e0d13;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.tarjeta-evento:hover,.tarjeta-evento:focus-visible{
  border-color:rgba(232,197,106,.5);
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.tarjeta-evento:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

.tarjeta-evento-foto{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(140deg,#191722,#0e0d13);
}
.tarjeta-evento-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tarjeta-evento:hover .tarjeta-evento-foto img{transform:scale(1.05)}
/* El marcador de «sin foto» no se recorta: se centra pequeño. */
.tarjeta-evento-foto .marcador{
  width:auto;height:46%;margin:auto;object-fit:contain;opacity:.28;
  position:absolute;inset:0;
}
.tarjeta-evento:hover .marcador{transform:none}

.tarjeta-evento-fecha{
  position:absolute;top:.6rem;left:.6rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:3rem;padding:.4rem .5rem;
  background:rgba(8,7,11,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(232,197,106,.28);border-radius:.5rem;
  line-height:1;
}
.tarjeta-evento-fecha b{font-family:var(--display);font-size:1.35rem;font-weight:900;color:var(--oro)}
.tarjeta-evento-fecha span{
  margin-top:.15rem;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);
}

.tarjeta-evento-chip{
  position:absolute;top:.7rem;right:.7rem;
  padding:.28rem .6rem;border-radius:999px;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;
}
.tarjeta-evento-chip.agotado{background:rgba(0,0,0,.75);color:#c9c6d4;border:1px solid var(--linea)}
.tarjeta-evento-chip.pocas{background:rgba(232,197,106,.92);color:#14100A;font-weight:800}

.tarjeta-evento-txt{
  display:flex;flex-direction:column;gap:.3rem;
  padding:.9rem 1rem 1rem;flex:1;
}
.tarjeta-evento-txt h3{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:1rem;line-height:1.25;text-transform:uppercase;letter-spacing:-.01em;
}
.tarjeta-evento-donde,.tarjeta-evento-hora{
  margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  color:var(--texto-suave);opacity:.8;
}
.tarjeta-evento-hora{opacity:.6}
.tarjeta-evento-pie{
  display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;
  margin:.5rem 0 0;padding-top:.7rem;
  border-top:1px solid var(--linea);
  margin-top:auto;   /* pega el pie abajo: las tarjetas quedan alineadas */
}
.tarjeta-evento-precio small{
  display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-suave);opacity:.7;
}
.tarjeta-evento-precio b{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--oro)}
.tarjeta-evento-quien{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;
  color:var(--texto-suave);opacity:.55;text-align:right;
}

/* ─── Ficha de evento ─────────────────────────────────────── */
.evento-cabeza{position:relative;overflow:hidden}
.evento-cabeza-foto{position:absolute;inset:0;z-index:0}
.evento-cabeza-foto img{width:100%;height:100%;object-fit:cover;display:block;opacity:.34}
.evento-cabeza-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(7,7,11,.55) 0%,rgba(7,7,11,.88) 60%,var(--fondo) 100%);
}
/* padding-block, no padding: el atajo tambien pone el horizontal a 0 y
   anulaba el margen lateral que trae .contenedor, asi que en el movil
   el titulo salia pegado al borde de la pantalla. */
.evento-cabeza-txt{position:relative;z-index:1;padding-block:3.4rem 2.6rem}
.evento-meta{
  display:flex;flex-wrap:wrap;gap:1.6rem;
  margin:1.4rem 0 0;font-size:.86rem;color:var(--texto-suave);
}
.evento-meta span{display:block;max-width:22rem}
.evento-meta b{
  display:block;margin-bottom:.15rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);font-weight:400;
}
.aviso-pocas{
  margin:1rem 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--oro);
}
.btn.inerte{opacity:.5;pointer-events:none}
.prosa{max-width:44rem;line-height:1.75;color:var(--texto-suave)}
.legal{
  margin:1.6rem 0 0;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.06em;color:var(--texto-suave);opacity:.55;
}
@media(max-width:560px){
  .evento-cabeza-txt{padding-block:2.4rem 2rem}
  .evento-meta{gap:1rem;font-size:.8rem}
}

/* Los chips de ciudad necesitan aire antes de la rejilla: pegados a las
   tarjetas parecían parte de la primera. */
.ciudades{margin-bottom:1.6rem}

/* En la ficha del evento todo va alineado a la izquierda: el botón centrado
   venía de la portada, donde el bloque entero está centrado. Aquí quedaba
   suelto en medio, sin relación con el texto que tiene encima. */
.evento-cabeza-txt .acciones{justify-content:flex-start;margin-bottom:0}
.evento-cabeza-txt .antetitulo{margin-top:0}

/* ─── Publica tu evento ───────────────────────────────────── */
.publica{padding:clamp(2.6rem,6vw,4.4rem) 0}
.publica-grande{
  /* Cuando no hay cartelera, esta sección es la portada: pesa más. */
  background:radial-gradient(130% 90% at 50% 0%,rgba(232,197,106,.08),transparent 65%);
}
.ventajas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;margin-top:2rem;
}
.ventaja{
  position:relative;padding:1.4rem 1.3rem 1.5rem;
  border:1px solid var(--linea);border-radius:.8rem;
  background:linear-gradient(150deg,rgba(255,255,255,.03),transparent 65%);
  transition:border-color .3s,transform .3s;
}
.ventaja:hover{border-color:rgba(232,197,106,.4);transform:translateY(-3px)}
.ventaja-num{
  display:block;margin-bottom:.7rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  color:var(--oro);opacity:.7;
}
.ventaja h3{
  margin:0 0 .45rem;font-family:var(--display);font-weight:800;
  font-size:1rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;
}
.ventaja p{margin:0;font-size:.86rem;line-height:1.6;color:var(--texto-suave)}

.publica-cierre{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem;margin-top:2.2rem;padding-top:1.8rem;
  border-top:1px solid var(--linea);
}
.publica-cierre p{margin:0;font-size:.92rem;color:var(--texto-suave)}
.publica-cierre .acciones{margin-bottom:0;justify-content:flex-start}

@media(max-width:560px){
  .publica-cierre{flex-direction:column;align-items:stretch}
  .publica-cierre .acciones{flex-direction:column}
  .publica-cierre .btn{text-align:center}
}

/* ─── Movimiento ──────────────────────────────────────────────
   La clase `con-movimiento` la pone el JavaScript al arrancar. Si el fichero
   no carga, nada de esto aplica y la página se ve entera: ocultar aquí y
   confiar en que el script llegue es cómo se queda una web en blanco. */
.con-movimiento [data-anima]{
  opacity:0;
  transform:translateY(18px);
  will-change:opacity,transform;
}
.con-movimiento [data-anima].dentro{
  opacity:1;
  transform:none;
  transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.7,.3,1);
}

/* El haz del encabezado respira solo, muy despacio. */
.con-movimiento .portada .haz{
  animation:respira 9s ease-in-out infinite;
  transition:transform .1s linear;
}
@keyframes respira{
  0%,100%{opacity:.55}
  50%{opacity:.95}
}

/* El punto de la etiqueta parpadea: da señal de «esto está vivo». */
.con-movimiento .etiqueta .punto{animation:latido 2.4s ease-in-out infinite}
@keyframes latido{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.82)}
}

/* El botón principal tiene un brillo que lo recorre de vez en cuando. */
.con-movimiento .btn-oro{position:relative;overflow:hidden}
.con-movimiento .btn-oro::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:destello 5.5s ease-in-out infinite;
}
@keyframes destello{
  0%,72%{left:-60%}
  86%,100%{left:130%}
}

/* Las cifras del encabezado, mientras suben, no deben bailar de ancho: con
   dígitos de ancho fijo el bloque se queda quieto. */
.cifras b{font-variant-numeric:tabular-nums}

/* Quien pide que no le muevan la pantalla no ve nada de esto. Va después de
   todo lo anterior a propósito, para ganar siempre. */
@media(prefers-reduced-motion:reduce){
  .con-movimiento [data-anima],
  .con-movimiento [data-anima].dentro{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .con-movimiento .portada .haz,
  .con-movimiento .etiqueta .punto,
  .con-movimiento .btn-oro::after{animation:none!important}
}

/* ─── Entrada del encabezado ──────────────────────────────────
   Lo de abajo aparecía al bajar, pero el encabezado —lo primero y muchas veces
   lo único que se mira— estaba completamente quieto. La página parecía un
   folleto. Aquí entra escalonado, de arriba abajo, en menos de un segundo. */
.con-movimiento .portada-in > *{
  opacity:0;
  transform:translateY(22px);
  animation:sube .8s cubic-bezier(.2,.75,.3,1) forwards;
}
.con-movimiento .portada-in > .escudo   {animation-delay:.05s}
.con-movimiento .portada-in > .etiqueta {animation-delay:.20s}
.con-movimiento .portada-in > h1        {animation-delay:.32s}
.con-movimiento .portada-in > .entradilla{animation-delay:.46s}
.con-movimiento .portada-in > .acciones {animation-delay:.58s}
.con-movimiento .portada-in > .cifras   {animation-delay:.70s}

@keyframes sube{to{opacity:1;transform:none}}

/* El título llega con un poco más de recorrido: es lo que sujeta la página. */
.con-movimiento .portada-in > h1{transform:translateY(34px) scale(.985)}
@keyframes sube-titulo{to{opacity:1;transform:none}}
.con-movimiento .portada-in > h1{animation-name:sube-titulo}

/* Las dos líneas del título entran una detrás de otra. */
.con-movimiento .portada-in h1 .l1,
.con-movimiento .portada-in h1 .l2{
  display:block;opacity:0;
  animation:sube .7s cubic-bezier(.2,.75,.3,1) forwards;
}
.con-movimiento .portada-in h1 .l1{animation-delay:.34s}
.con-movimiento .portada-in h1 .l2{animation-delay:.48s}

/* El escudo, además, respira despacio una vez colocado. */
.con-movimiento .escudo{animation:sube .8s cubic-bezier(.2,.75,.3,1) forwards,
                                  flota 7s ease-in-out 1.2s infinite}
@keyframes flota{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* El fondo del encabezado se mueve muy despacio: da sensación de profundidad
   sin que nadie sepa decir qué se está moviendo. */
.con-movimiento .portada::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(38% 45% at 22% 28%,rgba(232,197,106,.16),transparent 62%),
    radial-gradient(34% 40% at 78% 62%,rgba(190,70,140,.13),transparent 60%);
  animation:deriva 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes deriva{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.02)}
}
.portada{position:relative;overflow:hidden}
.portada-in{position:relative;z-index:1}

/* Las tarjetas responden más al pasar por encima. */
.con-movimiento .tarjeta-evento{transition:border-color .3s,transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.con-movimiento .tarjeta-evento:hover{transform:translateY(-6px) scale(1.012)}
.con-movimiento .tarjeta-gal:hover{transform:translateY(-4px)}
.con-movimiento .tarjeta-gal{transition:transform .35s cubic-bezier(.2,.7,.3,1)}

/* Quien pide que no le muevan la pantalla, no ve nada de esto. */
@media(prefers-reduced-motion:reduce){
  .con-movimiento .portada-in > *,
  .con-movimiento .portada-in h1 .l1,
  .con-movimiento .portada-in h1 .l2,
  .con-movimiento .escudo{animation:none!important;opacity:1!important;transform:none!important}
  .con-movimiento .portada::before{animation:none!important}
}

/* ─── Formulario para publicar eventos ────────────────────── */
.publica-cierre{align-items:flex-start}
.publica-form-titulo{
  margin:0 0 .5rem;font-family:var(--display);font-weight:800;
  font-size:1.15rem;text-transform:uppercase;letter-spacing:-.01em;
}
.publica-otro-canal{margin-top:1rem;font-size:.82rem;opacity:.75}
.publica-otro-canal a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}

.formulario-productor{flex:1;min-width:min(100%,26rem)}
.rejilla-form{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
}
.campo-ancho{grid-column:1/-1}
@media(max-width:640px){.rejilla-form{grid-template-columns:1fr}}

.campo{margin:0;display:flex;flex-direction:column;gap:.3rem}
.campo label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);
}
.campo input,.campo textarea{
  width:100%;padding:.7rem .85rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--linea);border-radius:.5rem;
  color:var(--texto);font-family:inherit;font-size:.92rem;
  transition:border-color .2s,background .2s;
}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--oro);background:rgba(255,255,255,.07);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-suave);opacity:.45}
.campo .error{display:block;font-size:.72rem;color:#ff8484;font-style:normal;margin-top:.15rem}

.acciones-form{flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.acciones-form small{font-size:.72rem;color:var(--texto-suave);opacity:.7}

/* La trampa para envíos automáticos: fuera de la vista sin usar `display:none`,
   que algunos robots detectan y saltan. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.solicitud-recibida{
  padding:2rem 1.6rem;text-align:center;
  border:1px solid rgba(232,197,106,.4);border-radius:.8rem;
  background:radial-gradient(120% 100% at 50% 0%,rgba(232,197,106,.12),transparent 70%);
}
.solicitud-tic{
  margin:0 auto .7rem;width:2.6rem;height:2.6rem;line-height:2.5rem;
  border:1px solid var(--oro);border-radius:999px;color:var(--oro);font-size:1.2rem;
}
.solicitud-recibida h3{
  margin:0 0 .5rem;font-family:var(--display);font-weight:800;
  font-size:1.2rem;text-transform:uppercase;
}
.solicitud-recibida p{margin:0;color:var(--texto-suave);font-size:.9rem;line-height:1.6}

/* ── Páginas de error (resources/views/errors) ───────────────────────────── */
.pagina-error{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:2rem 1.2rem;text-align:center}
.pagina-error-logo{width:96px;height:96px;object-fit:contain;opacity:.9}
.pagina-error-codigo{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;color:var(--texto-tenue);margin:0}
.pagina-error h1{font-size:clamp(1.6rem,5vw,2.4rem);margin:0}
.pagina-error p{color:var(--texto-suave);max-width:46ch;margin:0}
.pagina-error .btn{margin-top:.8rem}

/* ── Reenviar mis entradas ───────────────────────────────────────────────── */
.reenvio{max-width:520px}
.reenvio-form{padding:1.6rem}
.reenvio .campo input[type=email]{width:100%}