/* ==========================================================================
   ORFIC — Orquesta Filarmónica de Celaya
   Mockup v1 · Mobile-first
   ========================================================================== */

:root{
  /* Color */
  --negro:        #08080A;
  --carbon:       #0F0F12;
  --panel:        #16161A;
  --panel-alto:   #1E1E23;
  --borde:        #2A2A31;
  --naranja:      #E04503;   /* del logotipo ORFIC */
  --naranja-luz:  #FF7703;
  --oro:          #D4A94E;
  --blanco:       #FFFFFF;
  --texto:        #C2C2C9;
  --texto-tenue:  #8A8A94;

  /* Tipografía */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --texto-ff: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;

  /* Ritmo */
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 48px; --e6: 64px; --e7: 96px;

  --ancho: 1200px;
  --header-h: 68px;
  --radio: 4px;
  --transicion: .35s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* El atributo [hidden] debe ganarle a cualquier `display` que definamos aquí.
   Sin esto, un .lightbox{display:flex} con [hidden] sigue cubriendo la pantalla
   y se come TODOS los clics del sitio, sin dar ningún error. */
[hidden]{ display:none !important; }


html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--negro);
  color:var(--texto);
  font-family:var(--texto-ff);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.sin-scroll{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:var(--display); color:var(--blanco); line-height:1.1; margin:0; letter-spacing:-.02em; }
p{ margin:0 0 var(--e2); }
:focus-visible{ outline:2px solid var(--naranja-luz); outline-offset:3px; }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--e3); }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--naranja); color:#fff; padding:var(--e2) var(--e3);
}
.saltar:focus{ left:0; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--e3);
  font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid transparent; border-radius:var(--radio);
  cursor:pointer; transition:var(--transicion); text-align:center;
}
.btn-primario{
  background:var(--naranja); color:#fff;
  box-shadow:0 6px 24px rgba(224,69,3,.28);
}
.btn-primario:hover,.btn-primario:focus{ background:var(--naranja-luz); transform:translateY(-2px); }
.btn-fantasma{ border-color:var(--borde); color:var(--blanco); background:transparent; }
.btn-fantasma:hover,.btn-fantasma:focus{ border-color:var(--naranja); color:var(--naranja-luz); }
.btn-grande{ min-height:56px; padding:0 var(--e4); font-size:.875rem; }
.btn-bloque{ display:flex; width:100%; }

/* ---------- Header ---------- */
.sitio-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  border-bottom:1px solid transparent;
}
.sitio-header.solido{
  background:rgba(8,8,10,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--borde);
}
.header-fila{ display:flex; align-items:center; justify-content:space-between; gap:var(--e2); }
.marca img{ width:150px; height:auto; }
.nav-escritorio{ display:none; }
.btn-header{ display:none; }

.hamburguesa{
  width:48px; height:48px; margin-right:-12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer;
}
.hamburguesa span{
  display:block; width:24px; height:2px; background:var(--blanco);
  transition:var(--transicion); transform-origin:center;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Menú móvil ---------- */
.menu-movil{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:99;
  background:var(--negro);
  padding:var(--e5) var(--e3) var(--e4);
  overflow-y:auto;
  opacity:0; transition:opacity .3s ease;
}
.menu-movil.abierto{ opacity:1; }
.menu-movil ul{ margin-bottom:var(--e5); }
.menu-movil li + li{ border-top:1px solid var(--borde); }
.menu-movil a{
  display:block; padding:var(--e2) 0;
  font-family:var(--display); font-weight:700; font-size:1.375rem;
  color:var(--blanco); letter-spacing:-.01em;
}
.menu-movil a:hover{ color:var(--naranja-luz); }
.menu-movil .btn{ font-size:.875rem; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + var(--e4)) 0 var(--e5);
  overflow:hidden;
}
.hero-fondo{ position:absolute; inset:0; z-index:0; }
.hero-fondo img{
  width:100%; height:100%; object-fit:cover; object-position:center 68%;
  /* la foto es telón de fondo: se desenfoca para que el texto mande */
  filter:blur(4px) saturate(.85) brightness(.78);
  transform:scale(1.12);
}
.hero-velo{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(8,8,10,.78) 0%, rgba(8,8,10,.62) 34%, rgba(8,8,10,.88) 76%, var(--negro) 100%),
    radial-gradient(110% 70% at 50% 8%, rgba(224,69,3,.20) 0%, transparent 60%);
}
.hero-interior{ position:relative; z-index:2; }

.hero-kicker{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-family:var(--display); font-weight:600;
  font-size:.625rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--oro); margin:0 0 var(--e2);
}
.k-largo{ display:none; }
.k-sep{ color:var(--naranja); }
.punto{
  flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--naranja); box-shadow:0 0 0 0 rgba(224,69,3,.6);
  animation:pulso 2.4s infinite;
}
@keyframes pulso{
  0%{ box-shadow:0 0 0 0 rgba(224,69,3,.5); }
  70%{ box-shadow:0 0 0 6px rgba(224,69,3,0); }
  100%{ box-shadow:0 0 0 0 rgba(224,69,3,0); }
}

.hero-titulo{
  font-size:clamp(3rem, 15.5vw, 6rem);
  font-weight:900; text-transform:uppercase;
  letter-spacing:-.045em; line-height:.88;
  margin-bottom:var(--e2);
}
.hero-titulo .linea-1{ display:block; }
.hero-titulo .linea-2{
  display:block;
  background:linear-gradient(100deg, var(--naranja) 0%, var(--naranja-luz) 45%, var(--oro) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.125rem, 4.6vw, 1.75rem);
  color:var(--blanco); margin-bottom:var(--e3);
}
.hero-sub{ display:flex; flex-direction:column; line-height:1.35; }
.hero-sub .sep{ display:none; }

.hero-datos{
  display:grid; gap:var(--e2);
  padding:var(--e2) 0; margin-bottom:var(--e3);
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
}
.hero-datos li{ display:flex; flex-direction:column; }
.hero-datos strong{
  font-family:var(--display); font-weight:700; font-size:1rem;
  color:var(--blanco); letter-spacing:-.01em;
}
.hero-datos span{ font-size:.75rem; color:var(--texto-tenue); line-height:1.4; }

.hero-acciones{ display:grid; gap:var(--e2); margin-bottom:var(--e3); }

.cuenta{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e1); max-width:360px; }
.cuenta-item{
  background:rgba(255,255,255,.05); border:1px solid var(--borde);
  border-radius:var(--radio); padding:10px var(--e1);
  text-align:center; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.cuenta-hoy{
  grid-column:1 / -1; margin:0; padding:var(--e2);
  font-family:var(--display); font-weight:700; color:var(--naranja);
  border:1px solid var(--naranja); border-radius:var(--radio); text-align:center;
}
.cuenta .num{
  display:block; font-family:var(--display); font-weight:800;
  font-size:1.375rem; color:var(--blanco); line-height:1;
  font-variant-numeric:tabular-nums;
}
.cuenta .lbl{
  display:block; margin-top:4px;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-tenue);
}

.hero-scroll{ display:none; }

/* ---------- Secciones ---------- */
.seccion{ padding:var(--e6) 0; position:relative; }
.etiqueta{
  font-family:var(--display); font-weight:700;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--naranja); margin-bottom:var(--e2);
}
.etiqueta::before{
  content:""; display:inline-block; width:24px; height:1px;
  background:var(--naranja); vertical-align:middle; margin-right:var(--e1);
}
.titulo-seccion{
  font-size:clamp(1.875rem, 8vw, 3rem);
  font-weight:800; margin-bottom:var(--e4);
}
.sub-h3{
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-tenue); margin:var(--e4) 0 var(--e2);
}

/* ---------- Evento ---------- */
.evento{ background:var(--carbon); }
.evento-grid{ display:grid; gap:var(--e5); }
.evento-cartel img{
  width:100%; border-radius:var(--radio);
  border:1px solid var(--borde);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.evento-cartel{ margin:0; }

.ficha{ border-top:1px solid var(--borde); }
.ficha-fila{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--e2) 0; border-bottom:1px solid var(--borde);
}
.ficha-etq{
  font-family:var(--display); font-weight:700;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-tenue);
}
.ficha-val{ color:var(--blanco); font-size:.9375rem; }
.ficha-val.destacado{ color:var(--oro); font-family:var(--display); font-weight:700; font-size:1.125rem; }

.personas li{
  display:flex; flex-direction:column;
  padding:var(--e2) 0; border-bottom:1px solid var(--borde);
}
.p-nombre{ font-family:var(--display); font-weight:700; color:var(--blanco); font-size:1rem; }
.p-cargo{ font-size:.8125rem; color:var(--texto-tenue); }

.cta-compra{
  margin-top:var(--e5); padding:var(--e4) var(--e3);
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  position:relative; overflow:hidden;
}
.cta-compra::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--naranja), var(--oro));
}
.cta-precio{ text-align:center; margin-bottom:var(--e3); }
.precio{
  display:block; font-family:var(--display); font-weight:900;
  font-size:3rem; color:var(--blanco); line-height:1;
}
.precio-nota{ font-size:.8125rem; color:var(--texto-tenue); }
.cta-pie{ margin:var(--e2) 0 0; font-size:.75rem; color:var(--texto-tenue); text-align:center; }

/* ---------- Último evento ---------- */
.cita-obra{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.125rem, 4.5vw, 1.5rem);
  color:var(--oro); margin:calc(var(--e4) * -1 + var(--e1)) 0 var(--e4);
}
.ultimo-grid{ display:grid; gap:var(--e4); }
.ultimo-cartel{ margin:0; }
.ultimo-cartel img{ width:100%; border-radius:var(--radio); border:1px solid var(--borde); }
.ultimo-cartel figcaption{
  margin-top:var(--e1); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-tenue);
}
.entrada{ font-size:1.0625rem; }
.repertorio{
  display:flex; flex-wrap:wrap; gap:var(--e1);
  margin:var(--e3) 0;
}
.repertorio li{
  padding:6px 14px; border:1px solid var(--borde); border-radius:100px;
  font-family:var(--display); font-weight:600; font-size:.75rem;
  letter-spacing:.06em; color:var(--texto); background:rgba(255,255,255,.03);
}
.creditos-dir{ font-size:.9375rem; color:var(--texto-tenue); margin:0; }
.creditos-dir strong{ color:var(--blanco); }

.sub-galeria{
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-tenue); margin:var(--e6) 0 var(--e3);
  padding-bottom:var(--e2); border-bottom:1px solid var(--borde);
}
.galeria{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e1); }
.g-item{
  position:relative; padding:0; border:0; background:var(--panel);
  border-radius:var(--radio); overflow:hidden; cursor:pointer;
  aspect-ratio:4/3;
}
.g-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .3s;
  opacity:.88;
}
.g-item:hover img,.g-item:focus img{ transform:scale(1.07); opacity:1; }
.g-item::after{
  content:""; position:absolute; inset:0;
  border:1px solid transparent; transition:border-color var(--transicion);
}
.g-item:hover::after,.g-item:focus::after{ border-color:var(--naranja); }

.video-marco{ margin-top:var(--e4); }
.video-placeholder{
  aspect-ratio:16/9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--e2);
  background:var(--panel); border:1px dashed var(--borde); border-radius:var(--radio);
  text-align:center; padding:var(--e3);
}
.video-placeholder .play{
  width:56px; height:56px; border-radius:50%;
  border:2px solid var(--naranja); position:relative;
}
.video-placeholder .play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:14px solid var(--naranja);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.video-placeholder p{ margin:0; }
.video-placeholder strong{ display:block; color:var(--blanco); font-family:var(--display); }
.video-placeholder span{ font-size:.8125rem; color:var(--texto-tenue); }

/* ---------- Próximos ---------- */
.proximos{ background:var(--carbon); }
.cards{ display:grid; gap:var(--e3); }
.card{
  display:flex; gap:var(--e3);
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:var(--e3); transition:var(--transicion);
}
.card:hover{ border-color:var(--naranja); transform:translateY(-4px); }
.card-fecha{
  flex:0 0 62px; text-align:center;
  border-right:1px solid var(--borde); padding-right:var(--e2);
}
.card-fecha .dia{
  display:block; font-family:var(--display); font-weight:900;
  font-size:2.25rem; color:var(--blanco); line-height:1;
}
.card-fecha .mes{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--naranja);
}
.card-ciclo{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-tenue); margin-bottom:4px;
}
.card-titulo{ font-size:1.25rem; margin-bottom:var(--e1); }
.card-desc{ font-size:.875rem; margin-bottom:var(--e1); }
.card-meta{ font-size:.75rem; color:var(--texto-tenue); margin-bottom:var(--e2); }
.card-link{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--naranja);
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.card-link:hover{ color:var(--naranja-luz); }
.card-link.inactivo{ color:var(--texto-tenue); pointer-events:none; border-color:var(--borde); }

/* ---------- Orquesta ---------- */
.orquesta-grid{ display:grid; gap:var(--e4); }
.orquesta-foto{ margin:0; }
.orquesta-foto img{ width:100%; border-radius:var(--radio); border:1px solid var(--borde); }
.nota-pendiente{
  font-size:.75rem; color:var(--texto-tenue); font-style:italic;
  border-left:2px solid var(--borde); padding-left:var(--e2);
}
.orquesta-links{ display:flex; flex-wrap:wrap; gap:var(--e1); }
.orquesta-links .btn{ min-height:44px; font-size:.6875rem; padding:0 var(--e2); }

/* ---------- Apoyo ---------- */
.apoyo{ background:var(--carbon); }
.apoyo-caja{
  text-align:center; padding:var(--e5) var(--e3);
  border:1px solid var(--borde); border-radius:var(--radio);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(224,69,3,.14) 0%, transparent 65%),
    var(--panel);
}
.apoyo-titulo{ font-size:clamp(1.5rem, 6.5vw, 2.25rem); margin-bottom:var(--e2); }
.apoyo-caja p{ max-width:56ch; margin-inline:auto; }
.apoyo-acciones{ display:grid; gap:var(--e2); margin-top:var(--e4); }

/* ---------- Footer ---------- */
.sitio-footer{ background:var(--negro); border-top:1px solid var(--borde); padding-top:var(--e6); }
.footer-grid{ display:grid; gap:var(--e5); }
.footer-marca img{ width:150px; height:auto; }
.footer-lema{
  margin-top:var(--e3); font-size:.8125rem; line-height:1.6;
  color:var(--texto-tenue);
}
.footer-col h3{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--naranja); margin-bottom:var(--e2);
}
.footer-col li{ margin-bottom:var(--e1); font-size:.9375rem; }
.footer-col a:hover{ color:var(--naranja-luz); }
.footer-contacto li{ line-height:1.6; color:var(--texto-tenue); }

.footer-instituciones{
  margin-top:var(--e6); padding:var(--e4) var(--e3);
  border-top:1px solid var(--borde);
}
.footer-instituciones p{
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-tenue); margin-bottom:var(--e2);
}
.footer-instituciones ul{ display:grid; gap:var(--e1); }
.footer-instituciones li{ font-size:.875rem; color:var(--texto); }

.footer-legal{
  padding:var(--e3); border-top:1px solid var(--borde);
  display:grid; gap:var(--e1);
}
.footer-legal p{ margin:0; font-size:.75rem; color:var(--texto-tenue); }
.credito a{ color:var(--naranja); }
.credito a:hover{ color:var(--naranja-luz); }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,4,6,.96);
  display:flex; align-items:center; justify-content:center;
  padding:var(--e5) var(--e2);
  opacity:0; transition:opacity .25s ease;
}
.lightbox.abierto{ opacity:1; }
.lb-figura{ margin:0; max-width:100%; max-height:100%; text-align:center; }
.lb-figura img{
  max-width:100%; max-height:74vh; width:auto; margin-inline:auto;
  border-radius:var(--radio);
}
.lb-figura figcaption{
  margin-top:var(--e2); font-size:.8125rem; color:var(--texto-tenue);
  letter-spacing:.06em;
}
.lb-cerrar{
  position:absolute; top:var(--e2); right:var(--e2);
  width:48px; height:48px; font-size:2rem; line-height:1;
  background:none; border:0; color:var(--blanco); cursor:pointer;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; font-size:2.25rem; line-height:1;
  background:rgba(255,255,255,.06); border:1px solid var(--borde); border-radius:50%;
  color:var(--blanco); cursor:pointer; transition:var(--transicion);
}
.lb-nav:hover{ background:var(--naranja); border-color:var(--naranja); }
.lb-prev{ left:var(--e1); }
.lb-sig{ right:var(--e1); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ==========================================================================
   480px — móvil grande
   ========================================================================== */
@media (min-width:480px){
  .hero-datos{ grid-template-columns:repeat(3,1fr); gap:var(--e3); }
  .hero-acciones{ grid-auto-flow:column; justify-content:start; }
  .hero-acciones .btn{ min-width:200px; }
  .apoyo-acciones{ grid-auto-flow:column; justify-content:center; }
  .galeria{ grid-template-columns:repeat(3,1fr); }
  .footer-instituciones ul{ grid-auto-flow:column; justify-content:start; gap:var(--e4); }
  .footer-legal{ grid-template-columns:1fr auto; align-items:center; }
}

/* ==========================================================================
   768px — tablet
   ========================================================================== */
@media (min-width:768px){
  :root{ --header-h:80px; }
  .contenedor{ padding-inline:var(--e5); }
  .seccion{ padding:var(--e7) 0; }
  .marca img{ width:180px; }
  .btn-header{ display:inline-flex; }
  .hero{ padding-bottom:var(--e7); justify-content:flex-end; }
  .hero-titulo{ letter-spacing:-.05em; }
  .hero-kicker{ font-size:.6875rem; gap:var(--e1); margin-bottom:var(--e3); }
  .hero-sub{ display:block; }
  .hero-sub .sep{ display:inline; color:var(--naranja); padding-inline:.45em; }
  .k-corto{ display:none; }
  .k-largo{ display:inline; }
  .hero-datos{ padding:var(--e3) 0; margin-bottom:var(--e4); }
  .hero-acciones{ margin-bottom:var(--e4); }
  .cuenta .num{ font-size:1.5rem; }
  .cta-compra{ padding:var(--e4); }
  .ultimo-grid{ grid-template-columns:280px 1fr; gap:var(--e5); align-items:start; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .orquesta-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:var(--e5); }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-marca{ grid-column:1 / -1; }
  .galeria{ gap:var(--e2); }
  .personas li{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--e2); }
  .p-cargo{ text-align:right; }
  .ficha-fila{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:var(--e3); }
  .ficha-val{ text-align:right; }
}

/* ==========================================================================
   1024px — escritorio
   ========================================================================== */
@media (min-width:1024px){
  .hamburguesa{ display:none; }
  .nav-escritorio{ display:block; }
  .nav-escritorio ul{ display:flex; gap:var(--e4); }
  .nav-escritorio a{
    font-family:var(--display); font-weight:600;
    font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--texto); padding:var(--e1) 0; position:relative;
    transition:color var(--transicion);
  }
  .nav-escritorio a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
    background:var(--naranja); transition:width var(--transicion);
  }
  .nav-escritorio a:hover{ color:var(--blanco); }
  .nav-escritorio a:hover::after,.nav-escritorio a.activo::after{ width:100%; }
  .nav-escritorio a.activo{ color:var(--blanco); }

  .hero-interior{ max-width:820px; }
  .hero-scroll{
    display:block; position:absolute; z-index:2;
    left:50%; bottom:var(--e3); transform:translateX(-50%);
    width:24px; height:40px; border:1px solid var(--borde); border-radius:100px;
  }
  .hero-scroll span{
    position:absolute; left:50%; top:9px; width:3px; height:7px;
    background:var(--naranja); border-radius:2px; transform:translateX(-50%);
    animation:baja 1.8s infinite;
  }
  @keyframes baja{ 0%{opacity:0;transform:translate(-50%,-4px);} 40%{opacity:1;} 100%{opacity:0;transform:translate(-50%,14px);} }

  .evento-grid{ grid-template-columns:.85fr 1fr; gap:var(--e7); align-items:start; }
  .evento-cartel{ position:sticky; top:calc(var(--header-h) + var(--e3)); }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .galeria{ grid-template-columns:repeat(4,1fr); }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; }
  .footer-marca{ grid-column:auto; }
  .titulo-seccion{ margin-bottom:var(--e5); }
  .lb-prev{ left:var(--e5); }
  .lb-sig{ right:var(--e5); }
}

/* ==========================================================================
   1200px — wide
   ========================================================================== */
@media (min-width:1200px){
  .hero-titulo{ font-size:7rem; }
  .hero-interior{ max-width:900px; }
}

/* ==========================================================================
   COMPRA · checkout · orden · legal
   ========================================================================== */

.volver{
  display:inline-block; margin-bottom:var(--e3);
  font-family:var(--display); font-weight:600; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue);
}
.volver:hover{ color:var(--naranja-luz); }

.aviso{
  padding:var(--e2) var(--e3); border-radius:var(--radio);
  border:1px solid var(--borde); font-size:.9375rem; margin-bottom:var(--e3);
}
.aviso-ok{   border-color:#2E7D4F; background:rgba(46,125,79,.14);  color:#8FE0AF; }
.aviso-alto{ border-color:#8A3324; background:rgba(138,51,36,.16);  color:#FFB4A2; }
.aviso-neutro{ color:var(--texto); }

.btn-agotado{
  background:var(--panel-alto); color:var(--texto-tenue);
  border-color:var(--borde); cursor:not-allowed;
}

/* ---------- Página del evento ---------- */
.compra{ padding:calc(var(--header-h) + var(--e5)) 0 var(--e6); }
.compra-grid{ display:grid; gap:var(--e5); }
.compra-titulo{
  font-size:clamp(1.875rem, 8vw, 3.25rem); font-weight:800;
  margin-bottom:var(--e3);
}
.compra-datos{
  display:grid; gap:var(--e2);
  padding:var(--e3) 0; margin-bottom:var(--e4);
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
}
.compra-datos li{ display:flex; flex-direction:column; gap:2px; }
.cd-etq{
  font-family:var(--display); font-weight:700; font-size:.625rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-tenue);
}
.cd-val{ color:var(--blanco); font-size:.9375rem; line-height:1.5; }
.compra-cartel{ margin:0 0 var(--e3); }
.compra-cartel img{ width:100%; border-radius:var(--radio); border:1px solid var(--borde); }
.compra-descripcion{ font-size:.9375rem; }

.panel-caja{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:var(--e3); position:relative; overflow:hidden;
}
.panel-caja::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--naranja), var(--oro));
}
.panel-titulo{ font-size:1.25rem; margin-bottom:var(--e3); }

.tipo{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--e2); padding:var(--e2) 0; border-bottom:1px solid var(--borde);
}
.tipo-agotado{ opacity:.5; }
.tipo-info{ display:flex; flex-direction:column; gap:2px; flex:1 1 55%; }
.tipo-nombre{ font-family:var(--display); font-weight:700; color:var(--blanco); }
.tipo-desc{ font-size:.75rem; color:var(--texto-tenue); }
.tipo-precio{ font-family:var(--display); font-weight:700; color:var(--oro); font-size:1.125rem; }
.tipo-etiqueta{
  font-family:var(--display); font-weight:700; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue);
}
.tipo-quedan{
  flex-basis:100%; font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--naranja);
}

.contador{ display:flex; align-items:center; gap:2px; }
.cnt-btn{
  width:44px; height:44px; flex:0 0 44px;
  background:var(--panel-alto); border:1px solid var(--borde); color:var(--blanco);
  font-size:1.25rem; line-height:1; cursor:pointer; border-radius:var(--radio);
  transition:var(--transicion);
}
.cnt-btn:hover{ border-color:var(--naranja); color:var(--naranja-luz); }
.contador input{
  width:56px; height:44px; text-align:center;
  background:transparent; border:1px solid var(--borde); border-radius:var(--radio);
  color:var(--blanco); font-family:var(--display); font-weight:700; font-size:1.125rem;
  -moz-appearance:textfield; appearance:textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.panel-total{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:var(--e3) 0; margin-bottom:var(--e2);
}
.panel-total span{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-tenue);
}
.panel-total strong{
  font-family:var(--display); font-weight:900; font-size:2rem; color:var(--blanco);
}
.panel-nota{ margin:var(--e2) 0 0; font-size:.75rem; color:var(--texto-tenue); }
.panel-confianza{ margin-top:var(--e3); display:grid; gap:var(--e1); }
.panel-confianza li{
  font-size:.8125rem; color:var(--texto-tenue); padding-left:var(--e3); position:relative;
}
.panel-confianza li::before{
  content:"✓"; position:absolute; left:0; color:var(--naranja); font-weight:700;
}

/* ---------- Checkout ---------- */
.checkout{ padding:calc(var(--header-h) + var(--e5)) 0 var(--e6); }
.checkout-grid{ display:grid; gap:var(--e5); }
.checkout-titulo{ font-size:clamp(1.75rem, 7vw, 2.5rem); margin-bottom:var(--e3); }

.reloj{
  padding:var(--e2) var(--e3); margin-bottom:var(--e4);
  border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--panel); font-size:.875rem; color:var(--texto);
}
.reloj strong{ color:var(--blanco); font-family:var(--display); font-variant-numeric:tabular-nums; }
.reloj-urgente{ border-color:var(--naranja); color:var(--naranja-luz); }
.reloj-vencido{ border-color:#8A3324; color:#FFB4A2; }

.campo-grupo{ border:0; padding:0; margin:0 0 var(--e4); }
.campo-grupo legend{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--naranja);
  padding:0; margin-bottom:var(--e3);
}
.campo{ display:block; margin-bottom:var(--e3); }
.campo-etq{
  display:block; margin-bottom:6px;
  font-size:.8125rem; font-weight:500; color:var(--blanco);
}
.opcional{ color:var(--texto-tenue); font-weight:400; }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="file"]{
  width:100%; min-height:48px; padding:0 var(--e2);
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  color:var(--blanco); font-family:var(--texto-ff); font-size:1rem;
  transition:border-color var(--transicion);
}
.campo input[type="file"]{ padding:12px var(--e2); font-size:.875rem; }
.campo input:focus{ border-color:var(--naranja); outline:none; }
.campo input::placeholder{ color:#6A6A74; }
.campo-ayuda{ display:block; margin-top:6px; font-size:.75rem; color:var(--texto-tenue); }

.metodo{
  display:flex; gap:var(--e2); align-items:flex-start;
  padding:var(--e3); margin-bottom:var(--e2);
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  cursor:pointer; transition:var(--transicion);
}
.metodo:hover{ border-color:var(--texto-tenue); }
.metodo:has(input:checked){ border-color:var(--naranja); background:var(--panel-alto); }
.metodo input{ margin-top:4px; width:20px; height:20px; accent-color:var(--naranja); flex:0 0 auto; }
.metodo-cuerpo{ display:flex; flex-direction:column; gap:4px; }
.metodo-nombre{ font-family:var(--display); font-weight:700; color:var(--blanco); }
.metodo-desc{ font-size:.8125rem; color:var(--texto-tenue); line-height:1.5; }

.acepto{
  display:flex; gap:var(--e2); align-items:flex-start;
  margin-bottom:var(--e4); font-size:.875rem;
}
.acepto input{ margin-top:3px; width:20px; height:20px; accent-color:var(--naranja); flex:0 0 auto; }
.acepto a{ color:var(--naranja); text-decoration:underline; }

.resumen-caja{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:var(--e3);
}
.resumen-titulo{ font-size:1.125rem; margin-bottom:var(--e3); }
.resumen-evento{ display:flex; flex-direction:column; gap:2px; padding-bottom:var(--e3); border-bottom:1px solid var(--borde); }
.resumen-evento strong{ font-family:var(--display); color:var(--blanco); font-size:1.0625rem; }
.resumen-evento span{ font-size:.8125rem; color:var(--texto-tenue); }
.resumen-items{ padding:var(--e2) 0; }
.resumen-items li{ display:flex; justify-content:space-between; gap:var(--e2); padding:6px 0; font-size:.9375rem; }
.ri-monto{ color:var(--blanco); }
.resumen-total{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:var(--e2); border-top:1px solid var(--borde);
}
.resumen-total span{ font-size:.8125rem; color:var(--texto-tenue); }
.resumen-total strong{ font-family:var(--display); font-weight:900; font-size:1.75rem; color:var(--blanco); }

/* ---------- Orden ---------- */
.orden{ padding:calc(var(--header-h) + var(--e5)) 0 var(--e6); }
.orden-caja{ max-width:640px; }
.orden-folio{
  font-family:var(--display); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-tenue);
}
.orden-folio strong{ color:var(--naranja); }

.estado{ padding:var(--e4) 0 var(--e3); }
.estado h1{ font-size:clamp(1.5rem, 6.5vw, 2.25rem); margin-bottom:var(--e2); }
.estado-ok h1{ color:#8FE0AF; }
.estado-alto h1{ color:#FFB4A2; }

.lista-boletos{ margin:var(--e3) 0; }
.lista-boletos li{
  display:flex; gap:var(--e2); justify-content:space-between; align-items:center;
  padding:var(--e2) 0; border-bottom:1px solid var(--borde); font-size:.875rem;
}
.lb-codigo{ font-family:var(--display); font-weight:700; color:var(--oro); letter-spacing:.06em; }

.banco{ margin:var(--e3) 0; border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden; }
.banco-fila{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--e2);
  padding:var(--e2) var(--e3); border-bottom:1px solid var(--borde);
  background:var(--panel);
}
.banco-fila:last-child{ border-bottom:0; }
.banco-fila span{
  flex:0 0 110px; font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-tenue);
}
.banco-fila strong{ font-family:var(--display); color:var(--blanco); font-size:1rem; }
.banco-fila .clabe{ letter-spacing:.08em; font-size:1.125rem; }
.banco-monto strong{ color:var(--oro); font-size:1.5rem; }
.btn-copiar{
  min-height:36px; padding:0 var(--e2);
  background:transparent; border:1px solid var(--borde); border-radius:var(--radio);
  color:var(--texto); font-size:.75rem; cursor:pointer; transition:var(--transicion);
}
.btn-copiar:hover{ border-color:var(--naranja); color:var(--naranja-luz); }
.btn-copiar.copiado{ border-color:#2E7D4F; color:#8FE0AF; }

.subir{ margin-top:var(--e3); }
.orden-nota{ font-size:.8125rem; color:var(--texto-tenue); margin-top:var(--e3); }

.orden-detalle{ margin-top:var(--e5); padding-top:var(--e3); border-top:1px solid var(--borde); }
.orden-detalle h2{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-tenue); margin-bottom:var(--e2);
}
.od-evento{ font-size:.875rem; line-height:1.7; }
.od-evento strong{ color:var(--blanco); }
.od-items li{ display:flex; justify-content:space-between; padding:6px 0; font-size:.875rem; }
.od-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:var(--e2); border-top:1px solid var(--borde);
}
.od-total strong{ font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--blanco); }

/* ---------- Video del último concierto ---------- */
.video-marco video{
  width:100%; aspect-ratio:16/9; display:block;
  border-radius:var(--radio); border:1px solid var(--borde); background:#000;
}
.video-pie{ margin-top:var(--e1); font-size:.75rem; color:var(--texto-tenue); }

/* ---------- Legal ---------- */
.legal{ padding-top:calc(var(--header-h) + var(--e5)); }
.legal-caja{ max-width:70ch; }
.legal-cuerpo{ font-size:1rem; line-height:1.8; margin-bottom:var(--e4); }

@media (min-width:768px){
  .checkout-grid{ grid-template-columns:1fr 340px; gap:var(--e5); align-items:start; }
  .checkout-resumen{ position:sticky; top:calc(var(--header-h) + var(--e3)); }
  .banco-fila span{ flex-basis:140px; }
}
@media (min-width:1024px){
  .compra-grid{ grid-template-columns:1fr 400px; gap:var(--e7); align-items:start; }
  .compra-panel{ position:sticky; top:calc(var(--header-h) + var(--e3)); }
  .checkout-grid{ grid-template-columns:1fr 380px; gap:var(--e7); }
}

/* ---------- Plano de la sala (venta por zona) ---------- */
.zona-color{
  display:inline-block; width:11px; height:11px; border-radius:2px;
  vertical-align:baseline; margin-right:7px;
  border:1px solid rgba(255,255,255,.35);
}
.tipo-nombre{ display:flex; align-items:center; }

.plano-sala{ margin-top:var(--e5); }
.plano-titulo{
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-tenue); margin-bottom:var(--e2);
  padding-bottom:var(--e2); border-bottom:1px solid var(--borde);
}
.plano-nota{ font-size:.875rem; color:var(--texto); margin-bottom:var(--e3); }
.plano-marco{ display:block; }
.plano-item{
  width:100%; aspect-ratio:auto; background:#fff;
  padding:var(--e2); border-radius:var(--radio);
}
.plano-item img{ width:100%; height:auto; object-fit:contain; opacity:1; }
.plano-item:hover img{ transform:none; }
.plano-pie{
  margin-top:var(--e1); font-size:.75rem; color:var(--texto-tenue); text-align:center;
}