:root {
    --color-primary: #ff6c3d;
}
.menu-ppal {
    background: var(--color-dark);
}

/* Ocultar botón/menú "Agregar al calendario" en el single de eventos */
.tribe-events .tribe-events-c-subscribe,
.tribe-events .tribe-events-c-subscribe__container,
.tribe-events .tribe-events-c-subscribe-dropdown,
.tribe-events .tribe-events-subscribe {
  display: none !important;
}

#noticias-teatro h2::after,
#noticias-teatro .badge.bg-primary.text-decoration-none.hover-badge {
  display: none !important;
}

.mapa-google .ratio > iframe { 
  width:100%; height:100%; display:block; 
}

.teatro-rrss__list{list-style:none;display:flex;flex-wrap:wrap;gap:16px;padding:0;margin:0}
.teatro-rrss__item a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;text-decoration:none;transition:all .3s ease}
.teatro-rrss__item i{font-size:1.9rem;color:var(--color-light);transition:color .3s ease}
.teatro-rrss__item a:hover i{color:#ff6600}

#hero-historia .hero-slide { background-attachment: fixed; }
#historia-detalle p { text-align: justify; line-height: 1.7; }
#historiaFilters .nav-link { color: #555; font-weight: 500; }
#historiaFilters .nav-link.active,
#historiaFilters .nav-link:hover { color: var(--bs-primary); text-decoration: underline; }
.historia-item img { transition: transform .3s ease; }
.historia-item:hover img { transform: scale(1.05); }

#hero-ticket .hero-slide { background-attachment: fixed; }
#info-ticket h3 { margin-top: 2rem; }
#info-ticket ul li { margin-bottom: .5rem; }
#info-ticket .text-primary { font-weight: 600; }

.page-id-196 h2::after, .section-title h1::after {
    content: '';
    display: block;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    margin: 15px 0 20px;
}

.page-id-200 h2::after, .section-title h1::after {
    content: '';
    display: block;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    margin: 15px 0 20px;
}

.page-id-208 h2::after, .section-title h1::after {
    content: '';
    display: block;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    margin: 15px 0 20px;
}

/* Estilos genérico-teatro */

/* ===== Teatro Single (estilo GAM actualizado) ===== */
.teatro-single .ts-hero-bg{
  height:60vh; min-height:380px; width:100%;
  background-size:cover; background-position:center;
}
.teatro-single .ts-hero:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.teatro-single .ts-pill{
  display:inline-block; font-size:.8rem; font-weight:600;
  background:#111; color:var(--color-light); padding:.25rem .6rem; border-radius:999px;
}

.teatro-single .ts-sticky{ position:sticky; top:90px; }
.teatro-single .ts-box{
  background:#f6f5f4; border:1px solid #e8e6e4;
  border-radius:0;     /* ortogonal */
}
.teatro-single .ts-chip{
  display:inline-block; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.06em; background:#111; color:var(--color-light); padding:.2rem .5rem; border-radius:999px;
}
.teatro-single .ts-details li + li{ margin-top:.4rem; }
.teatro-single .ts-pre{ white-space:pre-line; }
.teatro-single .ts-rich p{ margin-bottom:.6rem; }

/* Cartas relacionadas (quitar redondeo) */
.teatro-single #related-events .card,
.teatro-single #related-events .card img,
.teatro-single #related-events .ratio,
.teatro-single .ts-thumb{
  border-radius:0 !important;  /* ortogonal */
}

/* Caja “Descuentos” igual a “Valores” */
.teatro-single .ts-box .ts-chip{
  display:inline-block; font-weight:600; letter-spacing:.02em;
  padding:.25rem .5rem; border:1px solid #ddd; border-radius:999px;
  text-transform:uppercase; font-size:.75rem;
}
.teatro-single .ts-rich p{margin-bottom:.5rem;}

/* Responsivo */
@media (max-width: 991.98px){
  .teatro-single .ts-hero-bg{ height:46vh; min-height:300px; }
  .teatro-single .ts-sticky{ position:static; }
}

.tribe-events-nav-pagination.mt-5 {
  /*display: none !important;*/
}

/* Galería post-contenido */
.teatro-single .ts-gallery-grid img{ display:block; width:100%; height:auto; }

/* Galería post-contenido (a prueba de lazy/opacidades) */
.teatro-single .ts-gallery-grid .ts-thumb{
  display:block;
  width:100%;
  aspect-ratio: 3 / 2;             /* relación 3:2; puedes usar 16/9 si prefieres */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
}

/* ===== Lightbox Teatro (fix z-index/visibility) ===== */
.tslb{
  position:fixed; inset:0; background:rgba(0,0,0,.92);
  opacity:0; visibility:hidden; transition:opacity .2s ease;
  z-index:999999; /* MUY arriba */
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,3vw,24px)
}
.tslb.is-open{opacity:1; visibility:visible}

.tslb-stage{
  position:relative; max-width:92vw; max-height:86vh;
  display:flex; align-items:center; justify-content:center
}
.tslb-img{
  max-width:100%; max-height:86vh; object-fit:contain; background:#111;
  box-shadow:0 12px 28px rgba(0,0,0,.35); border-radius:0;
  display:block !important; opacity:1 !important; visibility:visible !important;
}

/* Botones SIEMPRE clicables (fixed sobre el overlay) */
.tslb-btn{
  position:fixed; appearance:none; border:0; background:rgba(0,0,0,.35);
  color:var(--color-light); width:44px; height:44px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; font-size:26px; line-height:1; z-index:1000000
}
.tslb-btn:hover{background:rgba(255,255,255,.18)}
.tslb-close{top:12px; right:12px; font-size:30px}
.tslb-prev{left:12px; top:50%; transform:translateY(-50%)}
.tslb-next{right:12px; top:50%; transform:translateY(-50%)}

.tslb-count{
  position:fixed; bottom:10px; left:0; right:0;
  text-align:center; color:var(--color-light); font-size:.9rem; opacity:.9; z-index:1000000
}

/* Hero: oscurecer imagen de fondo sin tocar el inline style */
.hero-slide{
  position: relative;
  color: var(--color-light);                 /* por si en alguna página no está forzado */
}
.hero-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  /* ajusta el .55 a gusto (0=transparente, 1=negro sólido) */
  background: rgba(0,0,0,.55);
  z-index: 0;
}
.hero-slide > *{
  position: relative;
  z-index: 1;                  /* asegura texto por encima del overlay */
}

/* === 1) Más espacio para el contenido del hero === */
#hero .hero-slide{
  /* alto cómodo y centrado vertical */
  min-height: 68vh;
  display: flex;
  align-items: center;
  /* padding superior/inf. para separar del borde */
  padding-block: clamp(32px, 8vh, 120px);
}

/* margen interno lateral para que no “choque” con las flechas */
#hero .hero-slide > .container{
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
}

/* por si necesitas un poquito más de aire en el bloque de texto */
#hero .hero-slide .col-lg-6{
  padding: clamp(8px, 1.5vw, 24px);
}

/* Opcional: reduce el área clickeable de las flechas en desktop
   (por defecto Bootstrap usa 15% del ancho) */
@media (min-width: 768px){
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next{
    width: 60px;              /* área más compacta */
  }
  #heroCarousel .carousel-control-prev{ left: 12px; }
  #heroCarousel .carousel-control-next{ right: 12px; }
}

/* === 2) Ocultar flechas en móvil === */
@media (max-width: 767.98px){
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next{
    display: none !important;
  }
}

#agenda-finis {
  background-image: url(http://teatro.local/wp-content/uploads/2025/11/Teatro_Finis_Terrae_01.jpg) !important;
}

/* === MENÚ CONTEXTUAL – DESKTOP === */
#menu-menu-principal {
  position: relative;
}

#menu-menu-principal .nav-item {
  position: relative;
}

#menu-menu-principal .MegaMenu {
  display: none;
  position: absolute;
  top: 100%; /* debajo del item principal */
  left: 0;
  background-color: #212529; /* Gris oscuro */
  border: 1px solid #212529;
  padding: 1rem 1.5rem;
  z-index: 1000;
  min-width: 250px;
}

/* Mostrar el MegaMenu al pasar el mouse */
#menu-menu-principal .nav-item:hover .MegaMenu {
  display: block;
}

/* Opcional: resetear estilos dentro del contenido */
#menu-menu-principal .MegaMenu a {
  display: block;
  color: var(--color-light) !important;
  text-decoration: none;
  margin-bottom: .5rem;
  font-weight: 700 !important;
}

#menu-menu-principal .MegaMenu a:hover {
  color: #e2401f !important; /* Naranjo */
}

#menu-menu-principal .MegaMenu a:hover {
  text-decoration: underline;
}

/* Vista móvil: el MegaMenu siempre visible (no flotante) */
@media (max-width: 991.98px) {
  #menu-menu-principal .MegaMenu {
    position: static;
    display: block;
    border: none;
    padding: 0;
    background: none;
  }
}

.elemento-secundario-menu {
  font-weight: 700 !important;
}

a { 
  color: #e2401f;
}

#galeria-historia .nav-link.active,
#galeria-historia .nav-link:hover,
#control-tab.nav-link,
#regulacion-tab.nav-link {
  color: #e2401f !important;
}

#iluminacion-tab.nav-link,
#sonido-tab.nav-link {
  color: #e2401f !important;
}

.next.page-link,
.page-link {
  color: #e2401f !important;
}

#toggleSidemenu,
.navbar-toggler-icon {
  color: #e2401f !important;
}

.navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* === Ajuste final del hero del evento === */

.teatro-single .ts-hero {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

.teatro-single .ts-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(0.7);
  z-index: 1;
}

.teatro-single .ts-hero-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  padding: 2.5rem 3rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  max-width: 720px;
  margin: 0 auto;          /* centra el bloque horizontalmente */
  transform: translateY(50px); /* lo baja para que quede pegado al cuerpo */
}

/* Alineación izquierda para la línea decorativa bajo el título */
.teatro-single .ts-hero-card h1 {
  margin-bottom: 1rem;
  color: #111;
  text-align: left;
  position: relative;
}

.teatro-single .ts-hero-card h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #e2401f;
  margin-top: 10px;
  margin-left: 0; /* pegado a la izquierda */
  border-radius: 2px;
}

.teatro-single .ts-hero-card p.lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

/* En móvil, más compacto y con menor desplazamiento */
@media (max-width: 767.98px) {
  .teatro-single .ts-hero-card {
    padding: 1.5rem;
    transform: translateY(20px);
  }
}

/* === Ajuste fino del hero en single de Teatro === */
.teatro-single .ts-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.teatro-single .ts-hero-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  color: #222;
  padding: 2rem 2.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  border-radius: 0;
  max-width: 100%;
  margin: 0; /* elimina centrado general */
  transform: none; /* quita el desplazamiento artificial */
}

/* Alinea con la columna izquierda */
.teatro-single .ts-hero .container > .row > .col-12 {
  max-width: 66.6667%; /* igual a col-lg-8 */
}

/* Mueve el bloque hacia abajo, visualmente “pegado” al cuerpo */
.teatro-single .ts-hero {
  padding-bottom: 0;
}
.teatro-single .ts-hero-card {
  bottom: -7rem;
}

/* Línea decorativa izquierda */
.teatro-single .ts-hero-card h1 {
  margin-bottom: 1rem;
  color: #111;
  text-align: left;
  position: relative;
}
.teatro-single .ts-hero-card h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #e2401f;
  margin-top: 10px;
  border-radius: 2px;
}

/* Adaptación en móviles */
@media (max-width: 991.98px) {
  .teatro-single .ts-hero .container > .row > .col-12 {
    max-width: 100%;
  }
  .teatro-single .ts-hero-card {
    margin-bottom: 0;
    padding: 1.5rem;
    /*height: 650px;*/
    margin-bottom: 200px;
  }
  .single-tribe_events .g-5 {
    --bs-gutter-x: 0 !important;
  }
  .hero-slide .lead.text-light.mb-3 {
    display: none;
  }
}
/*
#hero .hero-slide {
  background-size: cover;
  background-position: top;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  padding-block: clamp(32px, 8vh, 120px);
  position: relative;
}*/
#hero .hero-slide {
  background-size: cover;
  background-position: center;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  position: relative;
}
#hero .hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 0;
}
#hero .hero-slide > .container {
  position: relative;
  z-index: 2;
}
#hero .ts-pill {
  background-color: #111;
  color: var(--color-light);
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
}

.share-buttons {
  display: none !important;
}

.page-link.current {
  color: var(--color-light) !important;
}

.formulario-teatro #wpforms-333-field_1-container legend {
  font-family: "Roboto", sans-serif !important;
  color: var(--color-gray) !important;
}

/* ===== Hero Teatro – estilo tipo Noticias UFT (2 columnas) ===== */

#hero.hero-teatro {
  color: var(--color-light);
}

/* Anular reglas genéricas del hero para este caso */
/*
#hero.hero-teatro .hero-slide {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: auto;
  padding: 0;
  background: none;
  overflow: hidden;
}
*/
/* Anula el overlay global oscuro en este hero 
#hero.hero-teatro .hero-slide::before {
  content: none;
}
*/
/* Columna izquierda: bloque negro sin transparencia 
#hero.hero-teatro .hero-overlay {
  width: 40%;                
  background: #000;          
  display: flex;
  align-items: center;       
}
*/
/* Container interno: que no limite el ancho 
#hero.hero-teatro .hero-overlay .container {
  max-width: 100%;
  padding: 2.5rem 3rem;
}
*/
/* Bloque de contenido: columna con espaciamiento 
#hero.hero-teatro .hero-content {
  margin-left: 2em;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
*/
#hero.hero-teatro .agenda-title {
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
}

/* Limitar largo del texto para que no “crezca” infinito */
#hero.hero-teatro .hero-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 12;      /* ajusta 5–8 según gusto */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
  font-size: 14px;
}

/* Fechas más compactas */
#hero.hero-teatro .hero-fechas {
  max-height: 4.5rem;
  overflow: hidden;
}

/* Columna derecha: imagen ocupando todo el ancho libre con 16:9 */
#hero.hero-teatro .hero-image {
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;       /* AQUÍ se asegura 16:9 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Botón del hero teatro: sólo al ancho del texto */
#hero.hero-teatro .hero-content .hero-btn {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap;
  padding-inline: 2rem;
}

#hero.hero-teatro .hero-btn.btn,
#hero.hero-teatro a.hero-btn {
  width: auto !important;
}

/* ===== Responsivo ===== */

/* Tablets */
@media (max-width: 991.98px) {
  #hero.hero-teatro .hero-overlay .container {
    padding: 2rem 1.75rem;
  }
  #hero.hero-teatro .hero-excerpt {
    -webkit-line-clamp: 5;
  }
}

/* Móviles: bloque negro arriba, imagen abajo */
@media (max-width: 767.98px) {
  #hero.hero-teatro .hero-slide {
    flex-direction: column;
  }

  #hero.hero-teatro .hero-overlay,
  #hero.hero-teatro .hero-image {
    width: 100%;
  }

  #hero.hero-teatro .hero-overlay .container {
    padding: 1.75rem 1.25rem 2.25rem;
  }
}

/* ===============================================
   RESET TOTAL DEL HERO GENÉRICO SOLO EN MÓVIL
   PARA PERMITIR EL LAYOUT TEATRO COMO DEBE SER
   =============================================== */
@media (max-width: 864px) {

  /* Elimina cualquier min-height heredado del hero global */
  #hero.hero-teatro .hero-slide {
      min-height: unset !important;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  /* La imagen realmente debe ocupar lo que corresponde */
  #hero.hero-teatro .hero-image {
      order: -1 !important;
      width: 100% !important;
      aspect-ratio: 16 / 9 !important; /* 864:1080 ≈ 0.8 */
      height: auto !important;
      min-height: 0 !important;
      background-size: cover !important;
      background-position: center top !important;
  }

  /* El bloque negro debajo */
  #hero.hero-teatro .hero-overlay {
      width: 100% !important;
      background: #000 !important;
      padding: 0 !important;
      display: block !important;
  }

  #hero.hero-teatro .hero-overlay .container {
      padding: 1.5rem 1.25rem 2rem !important;
  }

  /* Ajuste del contenido */
  #hero.hero-teatro .hero-content {
      margin: 0 !important;
      gap: 1rem !important;
  }

  /* Desactivar overlay oscuro global */
  #hero.hero-teatro .hero-slide::before {
      content: none !important;
  }
}

.ts-icons-row {
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.ts-icon-item {
    transition: transform .2s ease;
}

.ts-icon-item:hover {
    transform: scale(1.1);
}

#wpforms-submit-333 {
  background-color: var(--color-primary);
}

#menu-menu-principal a {
  color: var(--color-primary) !important;
}

#menu-menu-principal a:hover {
  color: var(--color-light) !important;
}

#menu-menu-principal .MegaMenu a
{
    display: block;
    color: var(--color-primary) !important;
    text-decoration: none;
    margin-bottom: .5rem;
    font-weight: 400 !important;
}

#menu-menu-principal .MegaMenu a:hover
{
    display: block;
    color: var(--color-light) !important;
    text-decoration: none;
}

h2 span.bi {
    display: none;
}
/*#hero.hero-teatro .hero-overlay
{
    background: var(--color-primary) !important;
}*/