/* ============================================================
   Teatro de Lucía — hoja de estilos
   Paleta teatral: negro cálido, oro y crema.
   Los pósters se muestran COMPLETOS (object-fit: contain): recortar
   una obra de teatro le come el título, que es lo que la identifica.
   ============================================================ */

:root{
  --tinta:#14111a;
  --carbon:#1c1826;
  --carbon2:#241f30;
  --borde:rgba(217,169,79,.22);
  --oro:#d9a94f;
  --oro-claro:#f0cd84;
  --crema:#f6f1e8;
  --gris:#a89fb2;
  --rojo:#c61323;            /* rojo real de la marca (medido del logo) */
  --radio:14px;
  --radio-sm:10px;
  --sombra:0 10px 30px rgba(0,0,0,.35);
  --sombra-alta:0 18px 50px rgba(0,0,0,.5);
  --ancho:1180px;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; font-size:100%}
body{
  margin:0; background:var(--tinta); color:var(--crema);
  font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--oro); text-decoration:none}
a:hover{color:var(--oro-claro)}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.16; margin:0 0 .55em; letter-spacing:.005em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.7rem,3vw,2.5rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}

.contenedor{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px}
.salto{position:absolute; left:-9999px}
.salto:focus{left:14px; top:14px; z-index:99; background:var(--oro); color:var(--tinta); padding:10px 18px; border-radius:8px}
.kicker{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--oro); margin:0 0 14px;
}
.seccion-titulo{max-width:66ch; margin-bottom:42px}
.seccion-sub{color:var(--gris); font-size:1.05rem; margin:0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 28px; border-radius:100px; font-weight:600; font-size:.96rem;
  border:1.5px solid transparent; cursor:pointer; transition:.18s ease; font-family:var(--sans);
}
.btn-oro{background:var(--oro); color:#1a1520; border-color:var(--oro)}
.btn-oro:hover{background:var(--oro-claro); color:#1a1520; transform:translateY(-1px)}
.btn-fantasma{background:transparent; color:var(--crema); border-color:rgba(246,241,232,.32)}
.btn-fantasma:hover{border-color:var(--oro); color:var(--oro)}
.btn-llamar{background:transparent; color:var(--oro); border-color:var(--borde)}
.btn-llamar:hover{background:rgba(217,169,79,.12); color:var(--oro-claro)}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:rgba(20,17,26,.92); backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(217,169,79,.16);
}
.cabecera-int{display:flex; align-items:center; justify-content:space-between; min-height:80px; gap:20px}
.marca{display:flex; align-items:center; gap:16px; line-height:1.1}
/* el logo va a su tamaño nativo: escalarlo lo vuelve borroso */
.marca-logo{height:41px; width:auto; flex-shrink:0; border-radius:4px}
/* el nombre en tipografía grande, al lado del logo: adentro de la imagen el
   nombre es diminuto y se pierde */
.marca-texto{display:flex; flex-direction:column; gap:4px}
.marca-nombre{
  font-family:var(--serif); font-size:2rem; color:var(--crema);
  letter-spacing:.005em; line-height:1; white-space:nowrap;
}
.marca-sub{
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--oro);
  padding:0;
}
@media (max-width:620px){ .marca-sub{display:none} }
@media (max-width:520px){ .marca-nombre{font-size:1.45rem} .marca-logo{height:33px} }
.nav{display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:flex-end}
.nav a:not(.btn){color:var(--crema); font-size:.95rem}
.nav a:not(.btn):hover{color:var(--oro)}
.menu-btn{display:none; background:none; border:0; padding:8px; cursor:pointer}
.menu-btn span{display:block; width:25px; height:2px; background:var(--crema); margin:5px 0; border-radius:2px}

/* ---------- hero ---------- */
.hero{
  padding:66px 0 74px;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(217,169,79,.16), transparent 62%),
    radial-gradient(700px 380px at 6% 105%, rgba(142,43,61,.22), transparent 62%),
    var(--tinta);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{color:var(--crema)}
.hero-sinopsis{color:var(--gris); font-size:1.06rem; max-width:58ch}
.hero-datos{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 28px}
.hero-dato{
  font-size:.85rem; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--borde); border-radius:100px; padding:8px 16px; color:var(--oro-claro);
}
/* cuando la obra se da HOY, que se vea de entrada */
.hero-dato-hoy{
  background:var(--oro); border-color:var(--oro); color:#1a1520;
  text-transform:uppercase; letter-spacing:.06em;
}
.hero-acciones{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-nota{font-size:.85rem; color:var(--gris); margin:16px 0 0}

/* precio en la tarjeta del carrusel (viene de Joinnus) */
.obra-precio{
  font-size:.9rem; font-weight:700; color:var(--oro); margin:0 0 12px;
}

/* ---------- tarifas: cantidad de entradas por tipo ---------- */
.tarifas{
  border:1px solid var(--borde); border-radius:var(--radio);
  padding:16px 18px 14px; margin:4px 0 22px;
}
.tarifas legend{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); padding:0 8px;
}
.tarifa{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--borde);
}
.tarifa:last-of-type{border-bottom:0}
.tarifa-texto{display:flex; flex-direction:column; gap:2px}
.tarifa-nom{font-size:1.15rem; font-weight:600; color:var(--crema)}
.tarifa-precio{font-size:1rem; color:var(--oro); font-weight:700}
.tarifa-cant{
  width:96px; text-align:center; font-size:1.5rem; font-weight:700;
  padding:10px 6px; border-radius:10px;
}
.tarifa-total{
  font-size:1.25rem; color:var(--crema); margin:16px 0 2px; text-align:right;
}
.tarifa-total strong{font-family:var(--serif); font-size:1.9rem; color:var(--oro)}
.tarifa-nota{font-size:.92rem; color:var(--gris); margin-top:10px; line-height:1.5}
.tarifa-otras{
  font-size:.95rem; color:var(--gris); margin-top:12px; line-height:1.5;
  border-top:1px solid var(--borde); padding-top:12px;
}
.tarifa-otras a{color:var(--oro); font-weight:700}
.tarifa[hidden]{display:none}
.tarifa.agotada{opacity:.55}
.tarifa-agotada{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris); border:1px solid var(--borde); border-radius:8px; padding:8px 12px;
  white-space:nowrap;
}

/* ---------- pantalla de pago con Yape (lo que ve el cliente al reservar) ---------- */

/* OJO: la regla de arriba no puede faltar. Varios de estos bloques tienen su
   propio display (inline-block, flex...), y eso le gana al [hidden] del
   navegador: sin esto, el QR roto o el formulario ya enviado siguen a la vista. */
[hidden]{display:none !important}

.pago{
  background:var(--carbon2); border:1px solid var(--borde);
  border-radius:var(--radio); padding:28px 26px;
}
.pago-listo{font-family:var(--serif); font-size:1.4rem; color:var(--oro-claro); margin-bottom:10px}
.pago-resumen{font-size:1.05rem; color:var(--crema); line-height:1.5; margin-bottom:8px}
.pago-eti{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); margin:24px 0 6px;
}
.pago-monto{font-family:var(--serif); font-size:2.8rem; line-height:1; color:var(--oro); font-weight:700}
.pago-qr{text-align:center; margin:20px 0 6px}
.pago-qr img{width:240px; height:auto; background:#fff; border-radius:12px; padding:10px; display:inline-block}
.pago-qr-nota{font-size:1rem; color:var(--gris); margin-top:12px; line-height:1.5}
.pago-numero{
  font-family:"Courier New",monospace; font-size:1.7rem; font-weight:700;
  letter-spacing:.06em; color:var(--crema); margin-bottom:14px;
}
.pago-cierre{font-size:1rem; color:var(--gris); line-height:1.7; margin-top:18px}
.pago-cierre a{color:var(--oro); font-weight:700}

/* En el celular, el orden es: cuánto pagar, el número para copiar y recién
   después el QR. Un código en la misma pantalla no se puede escanear, así que
   para quien reserva desde el celular el camino corto es copiar el número. */
@media (max-width:820px){
  .pago{display:flex; flex-direction:column}
  .pago-cobro-monto{order:1}
  .pago-cobro-num{order:2}
  .pago-cobro-qr{order:3}
  .pago-cierre-bloque{order:4}
  .pago-qr img{width:200px}
}

/* distintivo para las obras de teatro infantil */
.etiqueta-cat{
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:#1a1520; background:var(--oro);
  border-radius:100px; padding:4px 12px; margin-bottom:10px;
}
/* en las obras de adultos queda el hueco, para que los titulos alineen */
.etiqueta-cat.invisible{visibility:hidden}

/* ============ reserva con Yape ============ */
.reserva-grid{display:grid; grid-template-columns:1fr 1fr; gap:38px; margin-top:34px; align-items:start}
@media (max-width:860px){ .reserva-grid{grid-template-columns:1fr; gap:28px} }

.reserva-form{
  display:flex; flex-direction:column; gap:6px;
  background:var(--carbon2); border:1px solid var(--borde);
  border-radius:var(--radio); padding:26px;
}
/* Tipografia generosa a proposito: esta seccion existe para gente mayor o con
   poca practica digital, asi que los textos van mas grandes que en el resto. */
.reserva-form label{font-size:1rem; font-weight:600; color:var(--oro-claro); margin-top:14px}
.reserva-form label:first-of-type{margin-top:0}
.reserva-form input, .reserva-form select, .reserva-form textarea{
  width:100%; padding:14px 16px; font:inherit; font-size:1.05rem;
  background:var(--carbon); color:var(--crema);
  border:1px solid var(--borde); border-radius:var(--radio-sm);
}
.reserva-form input:focus, .reserva-form select:focus, .reserva-form textarea:focus{
  outline:2px solid var(--oro); outline-offset:1px; border-color:var(--oro);
}
.reserva-form textarea{resize:vertical; font-size:1rem}
.reserva-form .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.reserva-form .btn{margin-top:24px; align-self:flex-start; font-size:1.05rem; padding:14px 28px}
.reserva-aviso{margin:16px 0 0; font-size:1rem; line-height:1.6; min-height:1.3em}
.reserva-aviso.ok{color:var(--oro-claro)}
.reserva-aviso.error{color:#f0938f}
.reserva-aviso a{color:var(--oro); font-weight:700}

.reserva-pasos h3{font-size:1.3rem; margin:0 0 18px; color:var(--crema)}
.reserva-pasos ol{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:15px}
.reserva-pasos li{color:var(--gris); line-height:1.7; font-size:1.05rem}
.reserva-nota{margin-top:26px; font-size:1rem; color:var(--gris); line-height:1.7}
.reserva-nota a{color:var(--oro)}

/* marco del póster: NO se recorta */
.poster-marco{
  background:var(--carbon); border:1px solid var(--borde); border-radius:var(--radio);
  padding:14px; box-shadow:var(--sombra-alta);
}
.poster-marco img{width:100%; height:auto; border-radius:var(--radio-sm)}

/* ---------- carrusel ---------- */
.carrusel{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 22px; scrollbar-width:thin; scrollbar-color:var(--oro) transparent;
}
.carrusel:focus-visible{outline:2px solid var(--oro); outline-offset:4px}
.carrusel::-webkit-scrollbar{height:7px}
.carrusel::-webkit-scrollbar-thumb{background:rgba(217,169,79,.45); border-radius:10px}
.carrusel::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
.obra-card{
  flex:0 0 clamp(260px, 30%, 340px); scroll-snap-align:start;
  background:var(--carbon); border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column;
  transition:.2s ease;
}
.obra-card:hover{transform:translateY(-4px); box-shadow:var(--sombra); border-color:rgba(217,169,79,.45)}
.obra-card figure{
  margin:0; background:#0d0b12;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* Sin marco de proporción fija: la tarjeta se adapta a la imagen. Así el póster
   nunca queda como una franja dentro de un marco vacío, sea vertical u horizontal.
   Los pósters se muestran COMPLETOS (nada de recortar el título de la obra). */
.obra-card figure img{width:100%; height:auto; display:block}
.obra-cuerpo{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.obra-cuerpo h3{margin-bottom:.3em; font-size:1.22rem}
.obra-cuerpo .obra-fechas{font-size:.88rem; color:var(--oro-claro); font-weight:600; margin-bottom:.7em}
.obra-cuerpo p{font-size:.93rem; color:var(--gris); flex:1; margin-bottom:18px}
.obra-cuerpo .btn{width:100%}

/* ---------- calendario ---------- */
.seccion{padding:84px 0}
.seccion-alt{background:var(--carbon)}
.cal-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:52px; align-items:start}
.subtitulo{font-size:1.3rem; margin-bottom:22px; color:var(--oro)}

.lista-funciones li{
  display:flex; align-items:center; gap:18px; padding:15px 0;
  border-bottom:1px solid rgba(217,169,79,.14);
}
.lista-funciones li:first-child{padding-top:0}
.fecha-caja{
  flex:0 0 62px; text-align:center; background:var(--carbon2);
  border:1px solid var(--borde); border-radius:var(--radio-sm); padding:9px 4px;
}
.fecha-dia{display:block; font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--crema)}
.fecha-mes{display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oro); margin-top:3px}
.funcion-datos{flex:1; min-width:0}
.funcion-titulo{display:block; font-weight:600; color:var(--crema); font-size:.98rem}
.funcion-hora{display:block; font-size:.85rem; color:var(--gris)}
.funcion-compra{font-size:.87rem; font-weight:600; white-space:nowrap}

.mes-cabecera{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.mes-titulo{margin:0; font-size:1.3rem; color:var(--crema); text-transform:capitalize}
.mes-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--borde);
  background:transparent; color:var(--oro); font-size:1.3rem; cursor:pointer; line-height:1;
}
.mes-btn:hover{background:rgba(217,169,79,.12)}
.mes-dias,.mes-grilla{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.mes-dias span{
  text-align:center; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris); padding-bottom:6px;
}
.dia{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:.9rem; color:var(--gris); background:transparent;
  border:1px solid transparent; font-family:var(--sans);
}
.dia.vacio{visibility:hidden}
.dia.con-funcion{
  background:rgba(217,169,79,.14); border-color:var(--borde);
  color:var(--oro-claro); font-weight:700; cursor:pointer;
}
.dia.con-funcion:hover{background:rgba(217,169,79,.28)}
.dia.elegido{background:var(--oro); border-color:var(--oro); color:#1a1520}
.dia.hoy{border-color:var(--oro); color:var(--crema)}
.mes-leyenda{margin:18px 0 0; font-size:.82rem; color:var(--gris); display:flex; align-items:center; gap:9px}
.mes-leyenda i{width:13px; height:13px; border-radius:4px; background:rgba(217,169,79,.16); border:1px solid var(--borde)}
.mes-detalle{margin-top:20px}
.mes-detalle:empty{display:none}
.detalle-titulo{font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--oro); margin-bottom:12px}
.detalle-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px dashed rgba(217,169,79,.16); font-size:.94rem;
}

/* ---------- contacto ---------- */
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.ficha-lista li{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(217,169,79,.14)}
.ficha-eti{
  flex:0 0 108px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--oro); padding-top:3px;
}
.ficha-val{color:var(--crema)}
.redes a{display:inline-block; margin-right:16px; font-size:.92rem}
.contacto-acciones{
  background:var(--carbon); border:1px solid var(--borde); border-radius:var(--radio);
  padding:32px 30px; box-shadow:var(--sombra);
}
.contacto-acciones h3{margin-bottom:.5em}
.contacto-acciones p{color:var(--gris); font-size:.97rem}
.acciones{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 18px}
.nota-chat{font-size:.86rem; margin:0}
.nota-chat strong{color:var(--oro-claro)}

.video{margin:56px auto 0; max-width:780px}
.video-marco{
  position:relative; aspect-ratio:16/9; border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--borde); background:#0d0b12;
}
.video-marco iframe{width:100%; height:100%; border:0; display:block}
.video-tapa{
  position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
  background:linear-gradient(135deg,rgba(20,17,26,.94),rgba(142,43,61,.55));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  font-family:var(--sans); color:var(--crema);
}
.video-play{
  width:74px; height:74px; border-radius:50%; background:var(--oro); color:#1a1520;
  display:grid; place-items:center; font-size:1.5rem; padding-left:5px;
}
.video-texto{font-size:.94rem; letter-spacing:.06em; text-transform:uppercase}
.video-tapa:hover .video-play{background:var(--oro-claro)}

/* ---------- banda de redes sociales ---------- */
.seguinos{
  background:linear-gradient(135deg, rgba(198,19,35,.20), rgba(217,169,79,.16));
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
  padding:42px 0;
}
.seguinos-int{display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap}
.seguinos-eti{
  font-family:var(--serif); font-size:clamp(1.35rem,2.3vw,1.75rem);
  color:var(--crema); margin:0; white-space:nowrap;
}
.seguinos-redes{display:flex; gap:13px; flex-wrap:wrap; justify-content:center}
.red-pill{
  display:inline-flex; align-items:center; gap:10px; padding:12px 22px;
  border-radius:100px; border:1px solid var(--borde); background:rgba(20,17,26,.55);
  color:var(--crema); font-weight:600; font-size:.94rem; transition:.18s ease;
}
.red-pill svg{width:19px; height:19px; flex-shrink:0}
.red-pill:hover{background:var(--oro); border-color:var(--oro); color:#1a1520; transform:translateY(-2px)}
.red-usuario{opacity:.6; font-weight:500; font-size:.86rem}
.red-pill:hover .red-usuario{opacity:.75}

/* ---------- mapa ---------- */
.mapa{margin:0 auto 0; max-width:1000px}
.mapa-cabecera{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:18px;
}
.mapa-cabecera .kicker{margin-bottom:8px}
.mapa-dir{
  font-family:var(--serif); font-size:1.28rem; color:var(--crema); margin:0;
}
.mapa-acciones{display:flex; gap:12px; flex-wrap:wrap}
.mapa-marco{
  border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden;
  background:var(--carbon); box-shadow:var(--sombra); height:440px;
}
.mapa-marco iframe{width:100%; height:100%; border:0; display:block}
/* el mapa de Google trae fondo claro: no se le fuerza el tema oscuro */

/* ---------- pie ---------- */
.pie{background:#0f0d14; border-top:1px solid rgba(217,169,79,.16); padding:48px 0 24px; font-size:.9rem; color:var(--gris)}
.pie-int{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
.pie-nombre{font-family:var(--serif); font-size:1.3rem; color:var(--crema); margin:0 0 6px}
.pie-dir{margin:0}
.pie nav{display:flex; gap:24px; flex-wrap:wrap}
.pie-legal{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:34px;
  padding-top:20px; border-top:1px solid rgba(217,169,79,.14); font-size:.8rem;
}
.pie-legal p{margin:0}
.pie-credito a{color:var(--gris); text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{gap:18px}
  .hero-grid{gap:40px}
  .cal-grid{grid-template-columns:1fr; gap:44px}
}
@media (max-width:960px){
  .menu-btn{display:block}
  .nav{
    position:fixed; inset:80px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--carbon); border-bottom:1px solid var(--borde);
    padding:12px 24px 26px; box-shadow:var(--sombra); display:none;
  }
  .nav.abierto{display:flex}
  .nav a:not(.btn){padding:15px 0; border-bottom:1px solid rgba(217,169,79,.14); font-size:1rem}
  .nav a.btn{margin-top:18px; align-self:flex-start; padding:13px 28px}
  .hero{padding:40px 0 56px}
  .hero-grid,.contacto-grid{grid-template-columns:1fr}
  .contacto-grid{gap:34px}
  .obra-card{flex:0 0 min(78%, 320px)}
}
@media (max-width:620px){
  .seccion{padding:58px 0}
  .marca-nombre{font-size:1.2rem}
  .ficha-lista li{flex-direction:column; gap:4px}
  .ficha-eti{flex:none}
  .lista-funciones li{gap:13px}
  .hero-acciones .btn{width:100%}
  .pie-legal{flex-direction:column; gap:8px}
}

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