/* ../../css/2026/event-page.css
   Estilos generales para páginas de inscripción (tema NO flúor)
*/

:root{
  /* Tema general (podés cambiar solo estas variables) */
  --event-accent: #0be348;        /* naranja */
  --event-accent-2: #74e864;      /* naranja claro */
  --event-title: #ffffff;         /* título */
  --event-text: rgba(255,255,255,.92);
  --event-muted: rgba(255,255,255,.78);

  --event-card-bg: rgba(0,0,0,.55);
  --event-card-border: rgba(255,255,255,.10);
  --event-shadow: rgba(0,0,0,.35);
}

/* Base tipográfica (recupera “la fuente de antes”) */
.event-page{
  max-width: 980px;
  margin: 110px auto;
  padding: 0 18px;
  color: var(--event-text);
  font-family: "Avenir Next", Avenir, "AvenirNext", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.event-hero{
  text-align: center;
  margin-bottom: 24px;
}

.event-title{
  font-family: 'Teko', sans-serif;
  font-size: 64px;
  letter-spacing: 1.2px;
  text-transform: uppercase;

  /* YA NO flúor: blanco con sombra sutil */
  color: var(--event-title);
  text-shadow: 0 4px 18px rgba(0,0,0,.45);

  margin: 0;
}

.event-subtitle{
  font-size: 20px;
  opacity: .92;
  margin: 10px 0 0;
}

/* Tarjetas */
.event-card{
  margin: 28px 0;
  padding: 26px 22px;
  border-radius: 18px;
  background: var(--event-card-bg);
  border: 1px solid var(--event-card-border);
  box-shadow: 0 0 34px var(--event-shadow);
  backdrop-filter: blur(6px);
}

.event-card-title{
  font-size: 28px;
  color: var(--event-accent);
  margin: 0 0 14px;
  text-shadow: 0 0 10px rgba(0,0,0,.35);
}

.event-card p{
  font-size: 19px;
  line-height: 1.8;
  margin: 8px 0;
}

.event-muted{
  color: var(--event-muted);
}

/* Grid de detalles */
.event-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}

@media (max-width: 720px){
  .event-grid{ grid-template-columns: 1fr; }
}

/* Lista */
.event-list{
  margin: 0;
  padding-left: 18px;
  font-size: 19px;
  line-height: 1.8;
  color: var(--event-text);
}

.event-list li{
  margin: 6px 0;
}

/* Mapa */
.event-map{
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

/* Acciones */
.event-actions{
  display: flex;
  justify-content: center;
  margin: 44px 0 90px;
}

.event-btn{
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 18px 34px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 20px;
  text-decoration: none;
  letter-spacing: .4px;

  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

/* Botón con más “onda”: glow + pulso suave + shine al hover */
.event-btn-primary{
  color: #111;
  background: linear-gradient(135deg, var(--event-accent), var(--event-accent-2));
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.10) inset;
  animation: btnPulse 2.2s ease-in-out infinite;
}

.event-btn-primary::before{
  content:"";
  position:absolute;
  top: -40%;
  left: -30%;
  width: 40%;
  height: 180%;
  background: rgba(255,255,255,.35);
  transform: rotate(20deg);
  filter: blur(0.5px);
  opacity: 0;
}

.event-btn:hover{
  transform: translateY(-3px) scale(1.045);
  filter: brightness(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}

.event-btn:hover::before{
  opacity: 1;
  animation: btnShine .85s ease forwards;
}

@keyframes btnPulse{
  0%,100%{ box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.10) inset; }
  50%{ box-shadow: 0 12px 30px rgba(0,0,0,.40), 0 0 26px rgba(255,138,0,.22), 0 0 0 1px rgba(255,255,255,.10) inset; }
}

@keyframes btnShine{
  from{ transform: translateX(0) rotate(20deg); }
  to{ transform: translateX(420%) rotate(20deg); }
}

/* Responsive */
@media (max-width: 640px){
  .event-title{ font-size: 46px; }
  .event-subtitle{ font-size: 18px; }
  .event-card p, .event-list{ font-size: 18px; }
}