/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;
  --primary-color:                #B38E2C;
  --secondary-color:              #D4AF37;
  --section-bg-color:             #f9f0ff;
  --custom-btn-bg-color:          #D4AF37;
  --custom-btn-bg-hover-color:    #B38E2C;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --border-color:                 #7fffd4;
  --link-hover-color:             #B38E2C;

  --body-font-family:             'Outfit', sans-serif;

  --h1-font-size:                 74px;
  --h2-font-size:                 46px;
  --h3-font-size:                 32px;
  --h4-font-size:                 28px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  18px;
  --btn-font-size:                14px;
  --copyright-font-size:          16px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-bold:             700;
}

body {
  background-color: var(--white-color);
  font-family: var(--body-font-family); 
}


/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

.link-fx-1 {
  color: var(--white-color);
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 6px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.link-fx-1:hover {
  color: var(--link-hover-color);
}

.link-fx-1:hover::before {
  transform: translateX(17px) scaleX(0);
  transition: transform .2s;
}

.link-fx-1:hover .icon circle {
  stroke-dashoffset: 200;
  transition: stroke-dashoffset .2s .1s;
}

.link-fx-1:hover .icon line {
  transform: rotate(-180deg);
}

.link-fx-1:hover .icon line:last-child {
  transform: rotate(180deg);
}

.link-fx-1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: right center;
  transition: transform .2s .1s;
}

.link-fx-1 .icon {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(100%) rotate(90deg);
  font-size: 32px;
}

.icon {
  --size: 1em;
  height: var(--size);
  width: var(--size);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.link-fx-1 .icon circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .2s;
}

.link-fx-1 .icon line {
  transition: transform .4s;
  transform-origin: 13px 15px;
}

.link-fx-1 .icon line:last-child {
  transform-origin: 19px 15px;
}


/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-bg {
  background-color: var(--section-bg-color);
}

.section-overlay {
  background-color: var(--dark-color);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.section-overlay + .container {
  position: relative;
}

.tab-content {
  background-color: var(--white-color);
  border-radius: var(--border-radius-medium);
  padding: 45px;
}

.nav-tabs {
  background-color: var(--section-bg-color);
  border-radius: var(--border-radius-large);
  border-bottom: 0;
  padding: 15px;
}

.nav-tabs .nav-link {
  border-radius: var(--border-radius-large);
  border: 0;
  padding: 15px 25px;
  transition: all 0.3s;
}

.nav-tabs .nav-link:first-child {
  margin-right: 15px;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover {
  background: var(--white-color);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  color: var(--primary-color);
}

.nav-tabs h5 {
  color: var(--p-color); 
  margin-bottom: 0;
}

.nav-tabs .nav-link.active h5,
.nav-tabs .nav-link:focus h5, 
.nav-tabs .nav-link:hover h5 {
  color: var(--primary-color);
}


/*---------------------------------------
  CUSTOM ICON COLOR               
-----------------------------------------*/
.custom-icon {
  color: var(--secondary-color);
}


/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
.custom-btn,
.custom-btn:focus,
.custom-btn:active,
.custom-btn:focus:active {
  background: var(--custom-btn-bg-color);
  border: 2px solid transparent;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  transition: all 0.3s;
  padding: 10px 20px;
}

.custom-btn { -webkit-tap-highlight-color: transparent; }

.custom-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  color: var(--white-color);
}

.custom-border-btn {
  background: transparent;
  border: 2px solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}

.navbar-expand-lg .navbar-nav .nav-link.custom-btn:hover,
.custom-border-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  border-color: transparent;
  color: var(--white-color);
}

.custom-btn-bg-white {
  border-color: var(--white-color);
  color: var(--white-color);
}


/*---------------------------------------
  VIDEO              
-----------------------------------------*/
.video-wrap {
  z-index: -100;
}

.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Por defecto: mostramos el video “ancho” (desktop) */
.video-desktop { display: block; }
.video-mobile  { display: none;  }

/* iPhone/phones en vertical (<= 431px): usa el recorte vertical */
@media (max-width: 480px) and (orientation: portrait) {
  .video-desktop { display: none; }
  .video-mobile  { display: block; }
}

/* Accesibilidad: si el usuario prefiere menos movimiento,
   pausamos el video (se quedará el poster) */
@media (prefers-reduced-motion: reduce) {
  .custom-video { display: none; }
}

/*---------------------------------------
  SITE HEADER              
-----------------------------------------*/
.site-header {
  background-color: var(--primary-color);
  padding-top: 12px;
  padding-bottom: 12px;
}


/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
.sticky-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-top: 0px;
}

.sticky-wrapper.is-sticky .navbar {
  background-color: var(--dark-color);
}

.navbar {
  background: transparent;
  position: absolute;  /* Se comporta normalmente en desktop */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  transition: all 0.3s ease;
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--white-color);
  font-size: var(--h5-font-size);
  font-weight: var(--font-weight-bold);
}

.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: var(--border-radius-large);
  margin: 10px;
  padding: 10px 20px;
}

.navbar-nav .nav-link {
  display: inline-block;
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover {
  color: var(--secondary-color);
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--white-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--white-color);
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}


/*---------------------------------------
  HERO        
-----------------------------------------*/
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;   /* fallback universal */
  min-height: 100svh;  /* evita saltos por barras */
  min-height: 100dvh;  /* sigue los cambios en vivo (Android moderno) */
  padding-top: 600px;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); /* margen de seguridad para barras/gestos */
}

.hero-section small {
  color: var(--white-color);
  text-transform: uppercase;
}

.hero-section .section-overlay {
  z-index: 2;
  opacity: 0.45;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  height: 100%;
}

.hero-section .container .row {
  min-height: 100%;
}

/* Teléfonos angostos o de poca altura: baja ese empuje */
@media (max-width: 370px), (max-height: 740px) {
  .hero-section{
    padding-top: clamp(240px, 24vh, 420px);
    padding-bottom: clamp(12px, 6vh, 40px); /* deja aire para el botón de abajo */
  }
}

/*---------------------------------------
  ABOUT              
-----------------------------------------*/
.about-section {
  background-color: #704010;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.about-image {
  border-radius: var(--border-radius-medium);
  display: block;
}

.about-text-wrap {
  position: relative;
}

.about-text-icon {
  background: var(--primary-color);
  border-radius: 100%;
  font-size: var(--h3-font-size);
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}

.about-text-info {
  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: var(--border-radius-medium);
  border: 1px solid rgba(209, 213, 219, 0.3);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 20px;
  padding: 35px;
}


/*---------------------------------------
  TICKET               
-----------------------------------------*/
.ticket-section {
  background-image: url('../images/nicholas-green-unsplash-blur.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 130px;
}

.ticket-form {
  background: var(--white-color);
  border-radius: var(--border-radius-medium);
  padding: 50px;
}

.ticket-form .form-check {
  position: relative;
  min-height: 52px;
  padding-left: 35px;
}

.ticket-form .form-check .form-check-label {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 12px;
  margin-left: 35px;
  width: 100%;
  height: 100%;
}


/*---------------------------------------
  ARTISTS              
-----------------------------------------*/
.artists-thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

.artists-image {
  border-radius: var(--border-radius-medium);
  display: block;
  width: 100%;
}

.artists-thumb:hover .artists-hover {
  transform: translateY(0);
  opacity: 1;
}

.artists-hover {
  background-color: var(--primary-color);
  background-color: rgba(248, 203, 46, 0.75);
  border-radius: var(--border-radius-medium);
  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  transition: all 0.5s ease;
  transform: translateY(100%);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0;
}

.artists-hover p strong {
  color: var(--white-color);
  display: inline-block;
  min-width: 180px;
  margin-right: 20px;
}

.artists-hover p a {
  color: var(--secondary-color);
}

.artists-hover p a:hover {
  color: var(--white-color);
}

.artists-hover hr {
  margin: 1.5rem 0;
}


/*---------------------------------------
  HISTORIAS              
-----------------------------------------*/
.stories-section {
  background-image: url('../images/historias9.jpg');
  background-color: #242424;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}

.testimonial-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 16px;
  padding: 28px 30px 24px;
  margin-bottom: 32px;
  color: #fff;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .3s ease, box-shadow .3s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.6);
}

.testimonial-card .quote {
  font-size: 60px;
  line-height: 0.8;
  color: #D4AF37;
  position: absolute;
  top: 12px;
  left: 20px;
  opacity: 0.4;
  pointer-events: none;
}

.testimonial-card h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #D4AF37;
}

.testimonial-card p {
  margin: 0;
  color: #f0f0f0;
  line-height: 1.5;
}

/* Bordes más suaves + brillo sutil en hover */
.testimonial-card{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212,175,55,0.22);
}
.testimonial-card:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

/* Comillas con degradado oro */
.testimonial-card .quote{
  background: linear-gradient(135deg, #B38E2C, #D4AF37);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .75;
}

/* Títulos con subrayado dorado corto */
.testimonial-card h3{
  position: relative; display: inline-block; padding-bottom: 4px;
}
.testimonial-card h3::after{
  content:""; position:absolute; left:0; right:40%;
  bottom: -2px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, #B38E2C, #D4AF37, #B38E2C);
  opacity:.9;
}

#section_4 { position: relative; overflow: hidden; }
#section_4 .bg-kenburns{
  position: absolute; inset: -8%;
  background: url('../images/historias9_optimized.webp') center/cover no-repeat;
  z-index: 0; pointer-events: none;
  animation: kb-zoom 8s ease-in-out infinite alternate;
  filter: saturate(1.05) contrast(1.02) brightness(1.02);
}
/* overlay para legibilidad */
#section_4 .bg-kenburns::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.25));
}
#section_4 .container{ position: relative; z-index: 1; }

@keyframes kb-zoom{
  0%   { transform: scale(1) translate3d(0,0,0); }
  100% { transform: scale(1.03) translate3d(.5%, -.5%, 0); }
}

@media (prefers-reduced-motion: reduce){
  #section_4 .bg-kenburns{ animation: none; }
}


/* Overlay oscuro que sí queda encima del fondo animado */
#section_4 { position: relative; overflow: hidden; }

#section_4 .bg-kenburns{
  position: absolute;
  inset: -8%;
  z-index: 0;            /* fondo más atrás */
}

#section_4::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                    /* overlay por encima del fondo */
  pointer-events: none;
}

#section_4 .container{
  position: relative;
  z-index: 2;                    /* texto por encima del overlay */
}

#section_4 .testimonial-card h3,
#section_4 .testimonial-card p { text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Vidrio más oscuro y nítido */
#section_4 .testimonial-card{
  background: rgba(8,8,8,.45);          /* antes .05 -> mucho más legible */
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}

/* Más contraste de tipografía dentro de la card */
#section_4 .testimonial-card h3{ 
  color:#fff; 
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
#section_4 .testimonial-card p{ 
  color:#f8f8f8; 
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}

#section_4 h2 {
  color: #fff;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.55),   /* sombra base */
    0 0 8px rgba(212,175,55,0.35); /* glow dorado */
}

@media (max-width: 991.98px){
  .stories-section{ background-position: 83% 50%; }
  #section_4 .bg-kenburns{ background-position: 83% 50%; }
}

@media (hover: none){
  #section_4 .testimonial-card{
    transform: none !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.5); /* fija */
    transition: box-shadow .2s ease;
  }
  #section_4 .testimonial-card:active{
    transform: scale(.995);      /* micro-press */
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
  }
}


/*---------------------------------------
  CUSTOM FORM               
-----------------------------------------*/
.custom-form .form-control {
  color: var(--p-color);
  margin-bottom: 24px;
  padding-top: 13px;
  padding-bottom: 13px;
  outline: none;
}

.custom-form button[type="submit"] {
  background: var(--custom-btn-bg-color);
  border: none;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-medium);
  transition: all 0.3s;
  margin-bottom: 0;
}

.custom-form button[type="submit"]:hover,
.custom-form button[type="submit"]:focus {
  background: var(--custom-btn-bg-hover-color);
  border-color: transparent;
}


/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/

.site-footer-top {
  background-color: var(--secondary-color);
  margin-bottom: 50px;
  padding: 8px 0;
}

.site-footer-bottom {
  margin-top: 12px;
  border-top: 1px solid rgba(212,175,55,.15);
}

.site-footer-title {
  color: var(--primary-color); 
}

.site-footer-link,
.copyright-text {
  color: var(--white-color);
}

.site-footer-links {
  padding-left: 0;
  display: flex;
  gap: 10px;
}

.site-footer-links a {
    color: #fff;
    text-decoration: none;
}

.site-footer-link-item {
  list-style: none;
  margin-right: 15px;
}

.copyright-text {
  font-size: var(--copyright-font-size);
}

/* ===== CTA Panel (Sección 5 - Claro) ===== */
.cta-panel-light{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  color: #222;
}

.cta-panel-light h2{ color:#111; }
.cta-panel-light .lead{ color:#444; }

/* Bullets */
.cta-panel-light .cta-bullets{
  max-width: 520px;
  margin: 0 auto 6px;
}
.cta-panel-light .cta-bullets li{
  display: flex; align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #333;
}
.cta-panel-light .cta-bullets i{
  color: var(--secondary-color); /* dorado */
  font-size: 1.15rem;
  line-height: 1;
}

/* Responsive */
@media (max-width: 575.98px){
  .cta-panel-light{ padding: 24px 20px; }
  .cta-panel-light .cta-bullets{ max-width: 100%; }
}

/* ==== Contact Section con mármol y parallax === */
#section_5 {
  position: relative;
  overflow: hidden; /* asegura que el layer no se desborde */
  color: #111;      /* texto oscuro por defecto */
  background-color: #f7f7f7;
}

/* capa del fondo con parallax */
#section_5 .contact-parallax {
  position: absolute;
  inset: -8%; /* ocupa exactamente toda la sección */
  z-index: 0;
  background: url('../images/marmol2_optimized.webp') center/cover no-repeat;
  background-position: 0% 50%;
  background-size: 115% auto;      /* un 10% más grande para cubrir el desplazamiento */
  pointer-events: none;
}

/* overlay para suavizar vetas del mármol */
#section_5::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1); /* blanquecino translúcido */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: 1;
  pointer-events: none;
}

/* en móvil */
@media (max-width: 991.98px){
  #section_5 .contact-parallax{
    inset: -8%;
    background-size: 200% auto;
  }
}

/* contenido por encima del parallax y overlay */
#section_5 .container {
  position: relative;
  z-index: 2;
}

/* texto */
#section_5 h2 {
  color: #111;
  font-weight: 700;
}

#section_5 p {
  color: #333;
}

.site-footer { padding-bottom: 12px; }    /* era 30px → 20px → ahora 12px */

.social-icon-link{
  position: relative;
  overflow: hidden;
}
.social-icon-link::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.4) 60%, rgba(255,255,255,0) 80%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.social-icon-link:hover::after{ transform: translateX(120%); }

.site-footer h2 {
    font-weight: bold;
    font-size: 1.25rem;  /* ajustado */
    margin: 0;            /* sin margen adicional */
    white-space: nowrap;
}

.site-footer {
    background-color: #222;
    color: #fff;
    padding-bottom: 12px; /* ajustado */
}

.site-footer .social-icon-link {
    color: #fff;
    font-size: 1.5rem;
}

.site-footer-top .row {
  align-items: center; /* Asegura que los elementos se alineen correctamente */
}

/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
  margin: 0;
  padding: 0;
}

.social-icon-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.social-icon-link {
  background: var(--secondary-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--copyright-font-size);
  display: block;
  margin-right: 10px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 36px;
  transition: background 0.2s, color 0.2s;
}

.social-icon-link:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.social-icon-link span {
  display: block;
}

.social-icon-link span:hover::before{
  animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg);
  }
}


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (max-width: 991px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 30px;
  }

  h4 {
    font-size: 24px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  @media screen and (max-width: 991px) {
  .section-padding {
    
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
  
  .navbar {
    background-color: var(--dark-color);
  }

  .navbar-expand-lg .navbar-nav {
    padding-bottom: 30px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
  }

  .hero-section {
    padding-top: 150px;
    min-height: 100vh;
  }

  /* Hero video base */
  .hero-section .custom-video{
    object-fit: cover;
    width:100%; height:100%;
  }

  .ticket-section {
    padding-top: 130px;
  }

  .ticket-form {
    padding: 30px;
  }
}

@media screen and (max-width: 767px) {
  .custom-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
}


@media screen and (max-width: 480px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 18px;
  }
}

@media screen and (max-width: 391px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 18px;
  }

  p {
    font-size: 15px;
  }

}

/* Móvil en vertical: centra el contenido y reduce paddings */
@media (max-height: 933px) and (orientation: portrait) {
  .hero-section{
    height: 100svh;                 /* usa la altura visual real del viewport */
    padding-top: 620px;              /* menos espacio arriba */
  }

  .hero-section small{
    font-size: 12px;
  }

}

/* Móvil en vertical: centra el contenido y reduce paddings (más compactos)*/
@media (max-height: 845px) and (orientation: portrait) {
  .hero-section{
    height: 100svh;                 /* usa la altura visual real del viewport */
    padding-top: 550px;              /* menos espacio arriba */
  }

  .hero-section small{
    font-size: 12px;
  }

}

/* Móvil en vertical: centra el contenido y reduce paddings (más compactos todavía)*/
@media (max-height: 668px) and (orientation: portrait) {
  .hero-section{
    height: 100svh;                 /* usa la altura visual real del viewport */
    padding-top: 400px;              /* menos espacio arriba */
  }

  .hero-section small{
    font-size: 12px;
  }

}

/* Móvil en horizontal: centra el contenido y reduce paddings */
@media (max-height: 431px) and (orientation: landscape) {
  .hero-section{
    height: 100svh;                 /* usa la altura visual real del viewport */
    padding-top: 220px;              /* menos espacio arriba */
  }

  .hero-section small{
    font-size: 12px;
  }

}

/* Móvil en horizontal: centra el contenido y reduce paddings (más compactos))*/
@media (max-height: 391px) and (orientation: landscape) {
  .hero-section{
    height: 100svh;                 /* usa la altura visual real del viewport */
    padding-top: 175px;              /* menos espacio arriba */
  }

  .hero-section small{
    font-size: 12px;
  }

}

/* Móvil en horizontal: centra el contenido y reduce paddings (más compactos todavía))*/
@media (max-height: 361px) and (orientation: landscape) {
  .hero-section{
    height: 100svh;                 /* usa la altura visual real del viewport */
    padding-top: 160px;              /* menos espacio arriba */
  }

  .hero-section small{
    font-size: 12px;
  }

}

/* Tamaños y transiciones del logo y la barra */
.navbar {
  transition: padding 400ms ease;
  padding-top: 18px; 
  padding-bottom: 18px;
}

.brand-logo {
  height: 120px;                 /* tamaño grande en top */
  transition: height 400ms ease, transform 400ms ease, opacity 400ms ease;
  will-change: height, transform;
}

/* Cuando se hace scroll en desktop, reducimos el tamaño y cambiamos el fondo */
@media (min-width: 992px) {
  .navbar.scrolled {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: var(--dark-color); /* fade al negro */
  }
}

@media (max-width: 991.98px) {
  .navbar {
    position: fixed;  /* Fija la navbar en la parte superior */
    background-color: var(--dark-color); /* Fondo negro para móvil */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding-top: 8px;  /* Espacio ajustado */
    padding-bottom: 8px;
    transition: all 0.3s ease;
  }

  /* El logo en móvil no cambia de tamaño al hacer scroll */
  .navbar .brand-logo {
    height: 50px; /* Tamaño fijo en móvil */
  }

  /* Botón hamburguesa visible */
  .navbar-toggler {
    border: none;
    padding: 5px;
  }

  .navbar-toggler-icon {
    background-color: var(--white-color);
  }
}

.navbar.scrolled .brand-logo {
  height: 50px;                 /* tamaño reducido en scroll */
}

/* Opcional: ajusta el texto para que no se vea enorme con el logo pequeño */
.navbar-brand span {
  transition: font-size 400ms ease, opacity 400ms ease;
  font-size: 1.05rem;
}
.navbar.scrolled .navbar-brand span {
  font-size: 0.95rem;
}

/* Por si quieres aún más “suavidad” sin saltos visuales */
@media (prefers-reduced-motion: reduce) {
  .navbar, .brand-logo, .navbar-brand span {
    transition: none;
  }
}

.navbar {
  transition: padding 260ms ease-out 40ms;
  transform: translateZ(0); /* fuerza a usar la GPU */
}

.navbar .container {
  align-items: center;  /* asegura el centro vertical del contenido */
}

.navbar-brand {
  display: flex;
  align-items: center;
  line-height: 0;
  will-change: transform;
}

.brand-logo {
  display: block;
  backface-visibility: hidden;
  transition: height 260ms ease-out; /* transición más suave */
  will-change: transform;  /* optimización para cambios futuros */
}


/* === Gold animated headline === */
:root{
  --gold:       #D4AF37;  /* tu dorado base */
  --gold-light: #F5E6A1;  /* reflejo claro */
  --gold-deep:  #B38E2C;  /* dorado más oscuro */
}

.gold-text-animate{
  /* degradado con franja blanca para “destello” */
  background: linear-gradient(120deg,
              var(--gold-deep) 0%,
              var(--gold) 18%,
              #ffffff 38%,
              var(--gold-light) 52%,
              var(--gold) 70%,
              var(--gold-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent; /* iOS/Safari */
  color: transparent;
  animation: goldShine 7.5s ease-in-out infinite;
}

@keyframes goldShine{
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

/* Respeto a usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .gold-text-animate{ animation: none; }
}

@media (min-width: 667px) {
  .navbar {
    background-color: transparent; /* inicio */
    transition: background-color 0.4s ease, padding 200ms ease;
  }
}

/* Móviles en landscape y tablets: navbar y menú oscuros cuando se despliega */
@media (max-width: 991.98px) {
  .navbar.navbar-dark-bg {
    background-color: var(--dark-color);
    transition: background-color 0.4s ease;
  }
}


/* Unificamos radios y estilos */
:root {
  --panel-radius: 16px; /* elige el radio que quieras usar en ambos */
}

/* Panel de texto (tu overlay) */
.services-info {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--panel-radius);
  padding: 30px;
}

/* Tarjeta contenedora de la imagen: mismo radio, y oculta desborde para que se “recorte” la foto */
.about-card {
  border-radius: var(--panel-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* La imagen llena la tarjeta con recorte elegante */
.about-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta y llena */
  transform: scale(1.001); /* evita líneas de 1px en bordes por subpíxeles */
  border-radius: var(--panel-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Solo igualamos alturas a partir de LG; en móvil se apilan normal */
@media (min-width: 992px) {
  .row.align-items-stretch > [class*="col-"] { display: flex; }
  .services-info, .about-card { width: 100%; } /* hacen fill de la columna */
}

/* Contenedor relativo */
.about-section {
  position: relative;
  overflow: hidden; /* oculta bordes del layer */
  min-height: 100vh;
}

/* Capa de fondo que “se mueve” */
.about-parallax {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-image: url('../images/bg2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translateY(0);
  pointer-events: none;
}

/* Contenido por encima del fondo */
.about-section .container {
  position: relative;
  z-index: 1;
}

/* ===== How-to grid matching ===== */
#section_3 {
  --stack-gap: 16px;      /* separación entre las dos horizontales */
  --left-height: 680px;   /* altura objetivo de la tarjeta vertical (ajústala al ojo) */
}

/* El contenedor de las dos horizontales a la derecha */
#section_3 .stack-2 {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--stack-gap);
  height: 100%;
}

/* Izquierda: fijamos altura de la tarjeta vertical */
@media (min-width: 992px) {
  #section_3 .artists-left .artists-thumb,
  #section_3 .artists-left .artists-image-wrap {
    height: var(--left-height);
  }
}

/* Derecha: cada horizontal ocupa la mitad menos la mitad del gap */
@media (min-width: 992px) {
  #section_3 .artists-right .artists-thumb,
  #section_3 .artists-right .artists-image-wrap {
    height: calc((var(--left-height) - var(--stack-gap)) / 2);
  }
}

/* La imagen siempre llena y recorta bonito */
#section_3 .artists-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reducimos el margen inferior por defecto de cada card en esta sección */
#section_3 .artists-thumb { margin-bottom: 0; }

/* Un poco menos de “aire” arriba del título y sección */
#section_3.section-padding { padding-top: 40px; }
#section_3 h2 { margin-top: 0; }

/* ===== Mobile / tablet: usar ratios para que todo fluya natural ===== */
@media (max-width: 991.98px) {
  /* volvemos a alturas auto y usamos aspect-ratio */
  #section_3 .artists-left .artists-image-wrap,
  #section_3 .artists-right .artists-image-wrap {
    height: auto;
    aspect-ratio: 16 / 9;  /* si quieres la vertical más alta en móvil, pon 4/5 solo a la izquierda */
  }
  #section_3 .artists-left .artists-image-wrap { aspect-ratio: 4 / 5; }
}

/* El card recorta todo con el mismo radio */
#section_3 .artists-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-medium);
}

/* Evita radios dobles: el recorte lo hace .artists-thumb */
#section_3 .artists-image-wrap,
#section_3 .artists-image {
  border-radius: 0 !important;
}

/* Panel con blur + gradiente y borde superior suave (fade) */
#section_3 .artists-thumb.caption-bottom .artists-hover {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  padding: 28px 30px;
  display: flex;
  align-items: flex-end;
  text-align: left;

  @media (max-width: 991.98px){
    padding: 18px 20px;
  }

  @media (max-width: 415px){
    padding: 10px 11px;
  }

  /* Texto siempre legible */
  color: #fff;
  /* contraste extra sin “halo” exagerado */
  text-shadow: 0 1px 2px rgba(0,0,0,.5);

  /* Blur real del fondo */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Gradiente que se funde hacia arriba para evitar “borde duro” */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0.00) 100%
  );

  /* Suavizado del borde superior vía máscara (funciona en Chrome/Firefox/Safari) */
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);

  /* Animación de entrada */
  transform: translateY(18%);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;

  /* El radio inferior coincide con el card */
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  z-index: 1;
}

/* Mostrar overlay al hover */
#section_3 .artists-thumb.caption-bottom:hover .artists-hover {
  transform: translateY(0);
  opacity: 1;
}

/* Imagen se oscurece levemente para dar contraste al texto */
#section_3 .artists-thumb.caption-bottom .artists-image-wrap img {
  transition: filter .28s ease, transform .28s ease;
}
#section_3 .artists-thumb.caption-bottom:hover .artists-image-wrap img {
  filter: brightness(.88) saturate(1.05);
  transform: scale(1.01);
}

/* Tipografía del caption */
#section_3 .artists-thumb.caption-bottom .artists-hover h3 {
  margin: 0 0 0px;
  color: #fff;
  line-height: 1.15;
  position: relative;
  display: inline-block;
  padding-right: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Subrayado dorado sutil bajo el h3 */
#section_3 .artists-thumb.caption-bottom .artists-hover h3::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, #B38E2C, #D4AF37, #B38E2C);
  opacity: .95;
  border-radius: 2px;
}

/* Texto del párrafo con buen contraste */
#section_3 .artists-thumb.caption-bottom .artists-hover p {
  margin: 0;
  color: #fff;
  opacity: .98;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  #section_3 .artists-thumb.caption-bottom .artists-hover,
  #section_3 .artists-thumb.caption-bottom .artists-image-wrap img {
    transition: none;
  }
}

/* 1) Promueve a capa propia y fija el origen: evita el “brinco” */
#section_3 .artists-thumb .artists-image-wrap {
  overflow: hidden;              /* por si no lo tenía */
  transform: translateZ(0);      /* capa GPU */
  will-change: transform;
}

#section_3 .artists-thumb .artists-image-wrap img {
  display: block;                /* elimina baseline gaps */
  backface-visibility: hidden;   /* evita re-render raros en WebKit */
  transform-origin: 50% 50%;     /* ancla el zoom al centro */
  will-change: transform, filter;
  transition: transform .25s ease-out, filter .25s linear;  /* ease-out = sin rebote visual */
}

/* 2) Ajusta el zoom un pelín más bajo para reducir “jitter” de subpíxeles */
#section_3 .artists-thumb.caption-bottom:hover .artists-image-wrap img {
  transform: scale(1.010); /* antes 1.01; prueba 1.006–1.01 según se sienta */
}

/* 3) El overlay también en capa propia (evita pelearse con la imagen) */
#section_3 .artists-thumb.caption-bottom .artists-hover {
  will-change: transform, opacity;
  transform: translateZ(0) translateY(18%);
  transition: opacity .28s ease-out, transform .28s ease-out;
}

.artists-thumb { filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }

/* Fondo oscuro elegante con textura sutil */
.section-dark {
  background-color: #0b0b0b; /* negro profundo */
  background-image: 
    radial-gradient(rgba(255, 215, 0, 0.06) 1px, transparent 1px), /* puntitos dorados muy suaves */
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25)); /* degrade sutil */
  background-size: 40px 40px, 100% 100%;
  background-blend-mode: overlay;
  color: #fff;
  position: relative;
  min-height: 100vh;
}

/* Opcional: un "brillo dorado" sutil en la parte superior */
.section-dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(to bottom, rgba(212,175,55,0.15), transparent);
  pointer-events: none;
}

#section_3 h2{
  color:#fff; 
  position:relative; 
  display:inline-block; 
  padding-bottom:10px;
}

#section_3 h2::after {
  content:""; 
  position:absolute; 
  left:0; right:0; bottom:0; 
  height:3px;
  border-radius:2px; 

  background:linear-gradient(
    90deg,
    #B38E2C 0%,
    #D4AF37 25%,
    #fff9d9 50%,   /* franja clara que se mueve */
    #D4AF37 75%,
    #B38E2C 100%
  );
  background-size:200% 100%;
  animation: goldBarShine 8s linear infinite;
}

@keyframes goldBarShine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce){
  #section_3 h2::after{ animation:none; }
}

/* En pantallas táctiles: el overlay puede abrirse con tap */
@media (hover: none) {
  #section_3 .artists-thumb .artists-hover {
    transform: translateY(100%); /* oculto por defecto */
    opacity: 0;
  }
  #section_3 .artists-thumb.active .artists-hover {
    transform: translateY(0);    /* visible al activar */
    opacity: 1;
  }
}

/* Icono info en móviles con Bootstrap Icons */
@media (hover: none) {
  #section_3 .artists-thumb::after {
    content: "\f430"; /* bi-info-circle */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.25);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity .3s ease;
  }

  /* Cuando el overlay está visible → ocultar icono */
  #section_3 .artists-thumb:hover::after,
  #section_3 .artists-thumb:focus-within::after {
    opacity: 0;
  }
}

.thanks-title{
  color: var(--secondary-color);
  font-size: 50px;
}

.thanks-wrap {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 48px 16px;
}

.thanks-wrap p { 
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
  opacity: 0.8;
}

.card-dark {
  max-width: 760px; width: 100%;
  background: #111; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.8);
  padding: clamp(20px, 4vw, 40px);
  text-align: center;
}