/* =============================================
   PALETA DE COLORES - MARIACHI JUVENIL SOL
   Organizado por: Claude Code
   Fecha: 2025
   ============================================= */

:root {
    /* ===== DORADOS (Color Principal) ===== */
    --dorado-principal: #fec611;      /* Color estrella - encabezados, acentos */
    --dorado-brillante: #FEDB37;      /* Gradientes, brillos */
    --dorado-medio: #FDB931;          /* Transiciones */
    --dorado-elegante: #D4AF37;       /* Botones, detalles premium */
    --dorado-oscuro: #9f7928;         /* Sombras doradas */
    --dorado-tierra: #8A6E2F;         /* Base de gradientes */

    /* ===== AZULES (Color Secundario) ===== */
    --azul-marino: #01151f;           /* Fondo nav, textos oscuros */
    --azul-marino-claro: #0a2c3d;     /* Gradientes, hover */
    --azul-transparente: #01151fe8;   /* Overlays con transparencia */

    /* ===== CREMAS Y AMARILLOS ===== */
    --crema-claro: #fff9db;           /* Fondos suaves */
    --crema-medio: #fff4b8;           /* Líneas, bordes suaves */
    --crema-dorado: #D1B464;          /* Transiciones */
    --amarillo-palido: #FFFFAC;       /* Brillos */

    /* ===== MARRONES ===== */
    --marron-oscuro: #461309;         /* Bordes, textos fuertes */
    --marron-rojizo: #863f31;         /* Tachados, alertas suaves */
    --cafe-dorado: #5d4a1f;           /* Base gradientes */

    /* ===== NEUTROS ===== */
    --blanco: #ffffff;
    --blanco-transparente: #ffffffe8;
    --negro-texto: #0e0e0e;
    --negro-puro: #000000;

    /* ===== OVERLAYS ===== */
    --overlay: rgb(0 0 0 / 55%);
    --overlay-sections: rgb(0 0 0 / 65%);

    /* ===== ALERTAS ===== */
    --alerta-rojo: #f00000;

    /* ----- ALIAS (compatibilidad) ----- */
    --encabezado: var(--dorado-principal);
    --fondo-nav: var(--azul-marino);
    --fondo-transparent: var(--azul-transparente);
    --linea: var(--crema-medio);
    --menu-h: #010302;
    --fondo-tabla: var(--blanco-transparente);
    --tachado: var(--marron-rojizo);
    --bordes: var(--marron-oscuro);
}

/*
font-family: 'Cormorant Garamond', serif;
font-family: 'Lato', sans-serif;
font-family: 'Lobster', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
*/

/* Logo Navbar */
.navbar-header_logo img {
    max-height: 50px;
    width: auto;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
}

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

body {
    font-size: 1.6rem;
    line-height: 1.75; /* Refinado: 1.8 → 1.75 - mejora la densidad del texto y el ritmo vertical */
    color: #000000;
    font-weight: 400;
}


.intro .overlay {
    background: transparent;
}

.intro h1 {
    font-size: 5rem;
}

.h2-encabezado {
  color: #FFFFFF;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); /* Refinado: añadida sombra de texto sutil para mejorar la legibilidad */
}


.text-center {
  text-align: center;
}
.intro p {
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 400;
}

/* Ocultar toggle Bootstrap en móvil - usamos el nuevo menú full-screen */
.navbar-default .navbar-toggle {
    display: none !important;
}

@media (min-width: 768px) {
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: var(--menu-h);
        border-color: var(--linea);
    }
}

#menu.navbar-default .navbar-nav > li > a {
    text-align: center;
}

#menu a.navbar-brand {
    font-size: 2.3rem;
    padding: 14px 10px 0 14px;
    color: var(--encabezado);
}

@media (min-width: 357px) { 
    #menu a.navbar-brand {
        font-size: 2.6rem;
    }
}
@media (min-width: 480px) { 
    #menu a.navbar-brand {
        font-size: 4rem;
    }
}
@media (min-width: 768px) { 
    #menu a.navbar-brand {
        font-size: 3.5rem;
    }
}
@media (min-width: 1024px) { 
    #menu a.navbar-brand {
        font-size: 4.5rem;
    }
}

.container_logo {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

@media (min-width: 768px) { 
    .container_logo {
        display: block;
        margin-bottom: 0;
    }
    .container > .navbar-collapse {
        margin:0;
    }
}
.navbar-header {
    display: flex;
}
.header_logo img {
    margin:0 auto;
}

.navbar-collapse {
    background-color: var(--fondo-transparent);
}

@media (min-width: 768px) {

    .navbar-collapse {
        background-color: unset;
    }

    .navbar-collapse .navbar-nav li:nth-child(1){
        display: none;
    } 
    .navbar > .container .navbar-brand {
        margin: 0;
    }
}

@media (min-width: 1024px) { 
    .navbar-collapse .navbar-nav li:nth-child(1){
        display: block;
    }
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, #menu.navbar-default .navbar-nav > li > a:hover {
    color: var(--linea) !important;
    background-color: transparent;
}
.on {
    padding: 10px 0 0 0 !important;
    background-color: var(--fondo-nav)!important;
}
@media (min-width: 768px) { 
    .on {
        padding: 8px 0 10px 0 !important;
    }
    
}
header .intro-text {
    padding-top: 156px;
    padding-bottom: 90px;
    text-align: center;
}

.header-subtitle {
    color: #fff !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: none;
    margin: 100px 0 5px;
}

@media (min-width: 768px) {
    .header-subtitle {
        font-size: 46px;
        letter-spacing: 4px;
    }
}

@media (min-width: 992px) {
    .header-subtitle {
        font-size: 50px;
    }
}

/*** BOTONES HEADER NORMALIZADOS ***/
.header-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-header-primary,
.btn-header-secondary {
    padding: 16px 35px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
    font-family: 'Lato', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Botón primario - Contratar */
.btn-header-primary {
    background: var(--dorado-principal);
    color: var(--azul-marino);
    border: 2px solid var(--dorado-principal);
    box-shadow: 0 4px 20px rgba(254, 198, 17, 0.4);
}

.btn-header-primary:hover {
    background: transparent;
    color: var(--dorado-principal);
    border-color: var(--dorado-principal);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(254, 198, 17, 0.5);
}

/* Botón secundario - Planes y Precios */
.btn-header-secondary {
    background: transparent;
    color: var(--blanco);
    border: 2px solid var(--blanco);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.btn-header-secondary:hover {
    background: var(--blanco);
    color: var(--azul-marino);
    border-color: var(--blanco);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
}

/* Responsive para móviles */
@media (max-width: 480px) {
    .header-buttons {
        gap: 15px;
    }

    .btn-header-primary,
    .btn-header-secondary {
        padding: 14px 28px;
        font-size: 16px;
        width: 100%;
        max-width: 250px;
    }
}
/*** FIN BOTONES HEADER NORMALIZADOS ***/


.header_logo img {
    max-width: 75%;
    padding: 1rem 0;
}

@media (min-width: 768px) {
    .header_logo img {
        max-width: 55%;
    }
}

@media (min-width: 992px) {
    .header_logo img {
        max-width: 42%;
    }
}

@media (min-width: 1200px) {
    .header_logo img {
        max-width: 35%;
    }
}


/*********** nosotros *************/


.nosotros {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nosotros_img {
    margin-bottom: 3rem;
}

.nosotros_texto {
    margin-bottom: 5rem;
}

.linea_nosotros {
    width: 14rem;
}


@media (min-width: 768px) { 
    .nosotros {
        position: relative;
        justify-content: unset;
        align-items: unset;
    }

    .linea_nosotros {
        width: 16.7rem;
    }
    .nosotros_img {
        position: absolute;
        margin-left: 3.5%;
    }

    .nosotros_texto {
        background-color: rgba(244, 241, 226, 0.65); /* Refinado: rgb(244 241 226 / 62%) → rgba con opacidad 0.65 - formato estándar y valor pulido */
        backdrop-filter: blur(2px); /* Refinado: añadido para un efecto de vidrio esmerilado sobre la imagen de fondo */
        margin-top: 48rem;
        margin-left: 18rem;
        padding: 2rem .5rem 0 .5rem;
        border-radius: 1.5rem;
        -webkit-border-radius: 1.5rem;
        -moz-border-radius: 1.5rem;
        -ms-border-radius: 1.5rem;
        -o-border-radius: 1.5rem;
    }
}


@media (min-width: 1000px) { 
    .nosotros {
        position: unset;
    }

    .nosotros_img {
        position: unset;
    }

    .nosotros_texto {
        background-color: unset;
        margin-top: unset;
        margin-left: unset;
        padding: unset;
        border-radius: unset;
        -webkit-border-radius: unset;
        -moz-border-radius: unset;
        -ms-border-radius: unset;
        -o-border-radius: unset;
    }
}


@media (min-width: 1000px) { 
    .nosotros {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.3rem;
    }

    .nosotros_img {
        margin: 0;
    }

    .nosotros_texto {
        background-color: unset;
        margin-top: unset;
        margin-left: unset;
        padding: unset;
        border-radius: unset;
        -webkit-border-radius: unset;
        -moz-border-radius: unset;
        -ms-border-radius: unset;
        -o-border-radius: unset;
    }
}


@media (min-width: 768px) { 
    #about {
        padding: 10rem 0 7rem 0;
    }
}

#about p {
    margin: 0;
}


@media (min-width: 768px) { 
    .nosotros {
        flex-direction: row;
    }
}

/*********** CTA NOSOTROS (Glassmorphism) *************/
.cta-nosotros {
    margin-top: 35px;
    text-align: center;
}

.btn-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--azul-marino);
    color: var(--dorado-principal);
    padding: 18px 40px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--dorado-principal);
    font-family: 'Lato', sans-serif;
    box-shadow: 0 8px 24px rgba(1, 21, 31, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-cta-whatsapp::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(254, 198, 17, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.btn-cta-whatsapp:hover::before {
    left: 100%;
}

.btn-cta-whatsapp:hover {
    background: var(--dorado-principal);
    border-color: var(--dorado-principal);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(254, 198, 17, 0.35);
    color: var(--azul-marino);
    text-decoration: none;
}

.btn-cta-whatsapp i {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.btn-cta-whatsapp:hover i {
    transform: scale(1.15);
}

/* Responsive */
@media (max-width: 768px) {
    .cta-nosotros {
        margin-top: 25px;
    }
    
    .btn-cta-whatsapp {
        padding: 14px 30px;
        font-size: 16px;
        width: 100%;
        max-width: 280px;
    }
    
    .btn-cta-whatsapp i {
        font-size: 22px;
    }
}

@media (min-width: 1000px) {
    .cta-nosotros {
        text-align: left;
    }
}
/*********** FIN CTA NOSOTROS *************/

/*********** fin nosotros *************/



  /******* PRECIOS ********/
  
  

  #team .overlay {
    display: flex;
    justify-content: center;
    padding: 7rem 0 8rem 0;
    /* outline: var(--marco5); */
    width: 100%;
    background: var(--overlay);
  }

  @media (min-width: 768px) { 
    #team .overlay {
        padding-bottom: 4.2rem;
      }
  }

  #team .hr {
    margin: 0 auto;
    height: 2px;
    width: 70px;
    background: #aaff00;
}

.container-precios {
    padding: 0;
    max-width: 117rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

@media (min-width: 768px) { 

    .encabezado-precios {
        grid-column: 1/3;
    }
    
    .tablas-precios {
        grid-column: 1/3;
    }
}
     

.encabezado-precios {
    width: 90%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.precios-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--azul-marino) 0%, var(--azul-marino-claro) 100%);
    color: var(--dorado-principal);
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.precios-titulo-principal {
    font-size: 28px;
    color: var(--blanco);
    line-height: 1.4;
    margin-bottom: 30px;
}

.precios-titulo-principal strong {
    color: var(--dorado-principal);
}

.precios-info-card {
    width: 100%;
    background: linear-gradient(145deg, var(--blanco) 0%, var(--crema-claro) 100%);
    border-radius: 20px;
    padding: 0;
    margin: 10px 0 30px;
    box-shadow: 0 10px 40px rgba(1, 21, 31, 0.2);
    overflow: hidden;
    border: 1px solid rgba(254, 198, 17, 0.3);
}

.precios-info-header {
    background: linear-gradient(135deg, var(--azul-marino) 0%, var(--azul-marino-claro) 100%);
    padding: 18px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.precios-info-header i {
    font-size: 22px;
    color: var(--dorado-principal);
}

.precios-info-header span {
    color: var(--dorado-principal);
    font-size: 16px;
    font-weight: 600;
}

.encabezado-precios .precios-ul {
    background: transparent;
    padding: 25px 30px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.encabezado-precios .precios-ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--azul-marino);
    text-align: left;
    font-weight: 500;
    font-size: 15px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.encabezado-precios .precios-ul li:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(1, 21, 31, 0.1);
}

.encabezado-precios .precios-ul li i {
    font-size: 16px;
    color: var(--azul-marino);
    background: linear-gradient(135deg, var(--dorado-principal) 0%, var(--dorado-elegante) 100%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.precios-descripcion {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 8px 0;
}

.precios-descripcion strong {
    color: var(--dorado-principal);
}

@media (max-width: 576px) {
    .precios-titulo-principal {
        font-size: 22px;
    }

    .encabezado-precios .precios-ul {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .precios-info-header {
        padding: 15px 20px;
    }

    .precios-info-header span {
        font-size: 14px;
    }
}

/* SEGUNDA PARTE PRECIOS */

.tablas-precios {
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}
  

  @media (min-width: 768px) { 
    .tablas-precios {
        flex-direction: row;
        column-gap: 3rem;
        justify-content: center;
        flex-wrap: wrap;
    }
  }
 
  @media (min-width: 1024px) { 
    .tablas-precios {
        justify-content: space-evenly;
        column-gap: unset;
    }
  }
    .team {
    width: 90%;
  }

  @media (min-width: 480px) { 
    .team {
        width: 85%;
      }
  }
  @media (min-width: 576px) { 
    .team {
        width: 76%;
      }
  }

  @media (min-width: 768px) { 
    .team {
        width: 45%;
      }
  }

  
  @media (min-width: 1024px) { 
    .team {
        width: 29%;
      }

  }

  #team .thumbnail {
    background: var(--fondo-tabla);
    /* width: 92%; */
    margin: 0 auto;
    padding: 0;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Refinado: añadida sombra sutil para dar profundidad */
}

#team .thumbnail .team-img::before {
    border-radius: 2rem 2rem 0 0;
    -webkit-border-radius: 2rem 2rem 0 0;
    -moz-border-radius: 2rem 2rem 0 0;
    -ms-border-radius: 2rem 2rem 0 0;
    -o-border-radius: 2rem 2rem 0 0;
}

/* Contenedor de imagen con fondo gradiente (tonos de cinta) */
#team .thumbnail .team-img {
    background: radial-gradient(ellipse farthest-corner at right bottom,
        var(--dorado-brillante) 0%,
        var(--dorado-medio) 8%,
        var(--dorado-oscuro) 30%,
        var(--dorado-tierra) 40%,
        transparent 80%),
      radial-gradient(ellipse farthest-corner at left top,
        var(--blanco) 0%,
        var(--amarillo-palido) 8%,
        var(--crema-dorado) 25%,
        var(--cafe-dorado) 62.5%,
        var(--cafe-dorado) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    position: relative;
}

/* Imagen reducida con bordes y sombra */
#team .thumbnail .team-img img {
    transform: scale(0.85);
    border-radius: 1.5rem;
    box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover sutil */
@media (hover: hover) {
    #team .team:hover .thumbnail .team-img img {
        transform: scale(0.88);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
    }
}

.alert, .icono {
    color: #f00000;
    margin: 0;
    padding: 0 0.7rem 0 0;
    font-size: 1.7rem;
}

.fa-sack-dollar {
    padding: 0 0.7rem 0 0;
}

.fa-check, .li-y{
    color: rgb(0, 0, 0);
    font-weight: 600;
}

.tachado {
    text-decoration: line-through;
    color: var(--tachado);
}


  #team img {
    width:100%;
  }

  #team .thumbnail .team-img:before {
    border: 0.3rem solid rgb(52 51 50 / 38%);
  }

  #team .thumbnail .cinta {
    width: 100%;
    height: 4.5rem;
    background: radial-gradient(ellipse farthest-corner at right bottom, var(--dorado-brillante) 0%, var(--dorado-medio) 8%, var(--dorado-oscuro) 30%, var(--dorado-tierra) 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, var(--blanco) 0%, var(--amarillo-palido) 8%, var(--crema-dorado) 25%, var(--cafe-dorado) 62.5%, var(--cafe-dorado) 100%);
    }

  @media (min-width: 480px) { 
    #team .thumbnail .cinta {
        height: 5.5rem;
      }
  }



  #team .precios-titulo .h3 {
    font-size: 3rem;
    font-weight: bold;
    color: #0e0e0e;
    font-family: 'Cormorant Garamond', serif;
    text-transform: uppercase;
    padding: 2rem 0 1.2rem 0;
    margin: 0;
} 


.listado-descripcion ul {
    color: #0e0e0e;
    margin: 1rem 10%;
    text-align: left;
  }

  .listado-descripcion ul li {
    padding: .5rem;
  }


  
  #team .thumbnail .caption h3 {
    text-transform: uppercase;
    font-family: 'Lobster', sans-serif;
    font-size: 3.8rem;
    color: #0e0e0e;
    letter-spacing: .08rem;
}


#team .thumbnail .caption span {
  color: red;
  font-weight: bold;
}
#team .thumbnail .caption p {
    color: #0e0e0e;
    padding: .5rem;
    margin: 0;
}



  .btn-2 {
    background: linear-gradient(0deg, rgb(138 137 137) 0%, rgb(255 255 255) 100%);
    border: none;
    padding: 16px;
    margin: 18px 0;
    border-radius: 5px;
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    letter-spacing: .5px;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Refinado: añadida transición para suavizar el efecto hover */
    will-change: box-shadow; /* Refinado: añadido para optimizar rendimiento de la animación */
}

.btn-2:hover {
    box-shadow: 4px 4px 6px 0 rgba(255,255,255,.4), -4px -4px 6px 0 rgba(116, 125, 136, .45), inset -4px -4px 6px 0 rgba(255,255,255,.15), inset 4px 4px 6px 0 rgba(0, 0, 0, .3); /* Refinado: valores de opacidad de sombra suavizados para un efecto menos duro */
}

.precios-boton {
    background: radial-gradient(ellipse farthest-corner at right bottom, var(--dorado-brillante) 0%, var(--dorado-medio) 8%, var(--dorado-oscuro) 30%, var(--dorado-tierra) 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, var(--blanco) 0%, var(--amarillo-palido) 8%, var(--crema-dorado) 25%, var(--cafe-dorado) 62.5%, var(--cafe-dorado) 100%);
  }


  .footer-price {
    padding: 7rem 0;
  }

  /* Bloque de recargo fin de semana - Diseño refinado */
  .weekend-surcharge {
    background: linear-gradient(135deg, rgba(255, 249, 219, 0.85) 0%, rgba(255, 244, 184, 0.65) 100%);
    border: 1.5px solid rgba(254, 198, 17, 0.35);
    border-radius: 1.2rem;
    padding: 1.6rem 1.8rem;
    margin: 1.8rem auto 1.2rem auto;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    max-width: 88%;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.06),
      0 4px 16px rgba(254, 198, 17, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Sutil brillo interno */
  .weekend-surcharge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
  }

  .weekend-surcharge:hover {
    transform: translateY(-2px);
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 8px 24px rgba(254, 198, 17, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border-color: rgba(254, 198, 17, 0.45);
  }

  /* Icono refinado con detalles */
  .weekend-icon {
    background: linear-gradient(135deg, var(--dorado-principal) 0%, var(--dorado-oscuro) 50%, var(--dorado-elegante) 100%);
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
      0 3px 8px rgba(254, 198, 17, 0.35),
      0 1px 3px rgba(0, 0, 0, 0.12),
      inset 0 -2px 4px rgba(0, 0, 0, 0.1),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
    position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .weekend-surcharge:hover .weekend-icon {
    transform: rotate(8deg) scale(1.05);
  }

  .weekend-icon i {
    color: var(--azul-marino);
    font-size: 2.4rem;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.3));
  }

  /* Contenedor de texto */
  .weekend-text {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 1;
  }

  /* Título h4 refinado */
  .weekend-title {
    color: var(--marron-oscuro);
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 .4rem 0;
    padding: 0;
    line-height: 1.1;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
  }

  /* Monto destacado con mejor jerarquía */
  .weekend-amount {
    color: var(--negro-texto);
    font-size: 2.6rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-family: 'Lobster', sans-serif;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
  }

  /* Días con mejor legibilidad */
  .weekend-days {
    color: var(--marron-rojizo);
    font-weight: 600;
    margin: .5rem 0 0 0;
    padding: 0;
    line-height: 1.2;
    font-family: 'Lato', sans-serif;
    opacity: 0.95;
  }

  /* Responsive refinado */
  @media (min-width: 480px) {
    .weekend-surcharge {
      padding: 1.8rem 2rem;
      gap: 2rem;
    }

    .weekend-icon {
      width: 5.6rem;
      height: 5.6rem;
    }

    .weekend-icon i {
      font-size: 2.6rem;
    }

    .weekend-title {
      font-size: 1.2rem;
    }

    .weekend-amount {
      font-size: 2.8rem;
    }

    .weekend-days {
      font-size: 1.4rem;
    }
  }

  @media (min-width: 768px) {
    .weekend-surcharge {
      max-width: 86%;
      padding: 2rem 2.2rem;
    }

    .weekend-icon {
      width: 6rem;
      height: 6rem;
    }

    .weekend-icon i {
      font-size: 2.8rem;
    }

    .weekend-amount {
      font-size: 3rem;
    }
  }
  /* Fin bloque de recargo fin de semana */

  /******* FIN PRECIOS ********/

 
  #repertorio .section-title {
    background: #444 url(../img/overlays/3.webp) center center no-repeat fixed;
    background-size: cover;
    margin-bottom: 50px;
}

 /************** REPERTORIO ***************/
 .descripcion {
    padding: 25px;
  }
  #repertorio .overlay h2 { 
    color: var(--fondo-tabla);
  }

  .contenedor-reper {
    max-width: 117rem;
    margin: 0 auto;
  }
  .bloques-reper {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 3.5rem;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .bloques-reper-texto {
    padding: 2rem;
    display: flex;
  flex-direction: column;
  text-align: center;
  }
  
  .tablas-reper {
    font-family: "Droid Serif";
    font-size: 35px;
    font-weight: bold;
    color: #141414;
    margin-top: 10px;
  }
  
  .canciones {
    border: 3px solid #d4d4d4;
    width: 30rem;
    text-align: center;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    box-shadow: 0px 8px 15px -3px rgba(0, 0, 0, 0.12); /* Refinado: Sombra más suave y difusa para un efecto más moderno */
    background:linear-gradient(to right, #0e232e 0%,#f2eed0 25%,#f5f4ef 51%,#f2eed0 75%,#0e232e 100%);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Refinado: Añadida transición para futuras interacciones */
  }
  
  @media (min-width: 375px) { 
    .canciones {
      width: 32rem;
    }
  }
  @media (min-width: 480px) { 
    .canciones {
      width: 40rem;
    }
  }
  @media (min-width: 768px) { 
    .canciones {
      width: 35rem;
    }
  }



  .canciones li {
    font-weight: bold;
  }

  /* 2 */
  .btn-2 {
    background: linear-gradient(0deg, rgb(138, 137, 137) 0%, rgb(255, 255, 255) 100%);
    border: none;
    padding: 16px;
    margin: 20px 0;
    border-radius: 5px;
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    letter-spacing: 0.5px;
  }
  
  .btn-2:before {
    height: 0%;
    width: 2px;
  }
  
  .btn-2:hover {
    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.4), -4px -4px 6px 0 rgba(116, 125, 136, 0.45), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.15), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.3); /* Refinado: valores de opacidad de sombra suavizados para un efecto menos duro */
  }
  
  /************** FIN REPERTORIO ***************/
  



  /******* GALERIA ********/


  .nivo-lightbox-image img {
    display: unset;
  }


  .nivo-lightbox-effect-slideUp.nivo-lightbox-open .nivo-lightbox-wrap, .nivo-lightbox-effect-slideDown.nivo-lightbox-open .nivo-lightbox-wrap {
    -webkit-transform: scale(1.18)!important ; /* Refinado: 1.25 → 1.18 - escala de apertura del lightbox más sutil y menos agresiva */
    -moz-transform: scale(1.18) !important;
    -ms-transform: scale(1.18) !important;
    transform: scale(1.18) !important;
    -o-transform: scale(1.18) !important;
}


.nivo-lightbox-theme-default .nivo-lightbox-title-wrap {
    top: calc(100vh - 42%)!important;
}
 
@media (min-width: 667px) { 
    .nivo-lightbox-theme-default .nivo-lightbox-title-wrap {
        top: calc(100vh - 40%)!important;
    }
}

@media (min-width: 854px) { 
    .nivo-lightbox-theme-default .nivo-lightbox-title-wrap {
        top: calc(100vh - 37%)!important;
    }
}

@media (min-width: 950px) { 
    .nivo-lightbox-theme-default .nivo-lightbox-title-wrap {
        top: calc(100vh - 35%)!important;
    }
}


  /******* FIN GALERIA ********/



/******* OVERLAY VIDEOS ********/


#section-videos .section-title {
	background: #444 url(../img/overlays/2.webp) center center no-repeat fixed;
	background-size: cover;
}

#section-videos .overlay h2 {
  color: rgb(255, 255, 255);
}
.section-title .overlay {
  padding: 7rem 2rem;
  background: var(--overlay-sections);
}
@media (min-width: 768px) { 
  .section-title .overlay {
      padding: 7rem 5rem;
  }
}
@media (min-width: 1024px) { 
  .section-title .overlay {
      padding: 7rem 8rem;
  }
}
@media (min-width: 1280px) { 
  .section-title .overlay {
      padding: 7rem 32rem;
  }
}

/******* FIN OVERLAY VIDEOS ********/


/*******  VIDEOS ********/


.row.videos {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.row.videos h2 {
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--azul-marino);
    margin-bottom: 0.5rem;
}

@media (min-width: 480px) {
    .row.videos h2 {
        font-size: 3.4rem;
    }
}

@media (min-width: 768px) {
    .row.videos h2 {
        font-size: 3.8rem;
    }
}

@media (min-width: 576px) { 
  .row.videos {
      margin: 0;
  }
}

.linea_video {
    width: 8rem;
    height: 3px;
    border: none;
    margin: 1rem auto 3rem;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--dorado-elegante) 20%,
        var(--dorado-brillante) 50%,
        var(--dorado-elegante) 80%,
        transparent 100%
    );
    border-radius: 2px;
}

.contenido_videos {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2rem;
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow:
        0 8px 32px rgba(1, 21, 31, 0.1),
        0 2px 8px rgba(1, 21, 31, 0.05);
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contenido_videos:hover {
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow:
        0 20px 50px rgba(1, 21, 31, 0.12),
        0 8px 20px rgba(212, 175, 55, 0.1);
    transform: translateY(-4px);
}

.contenido_videos:last-of-type {
  margin-bottom: 6rem;
}
.contenedor_video {
  aspect-ratio: 9/16;
  position: relative;
  /* outline: var(--marco); */
  margin: 60px auto;
  max-width: 300px;
}


@media (max-width: 768px) {
    .contenedor_video {
        margin: 35px auto;
      }
  }

.contenedor_video:last-child {
    margin-bottom: 0;
}

.contenedor_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.8rem;
    overflow: hidden;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--azul-marino), var(--azul-marino)) padding-box,
        linear-gradient(
            145deg,
            var(--dorado-brillante) 0%,
            var(--dorado-elegante) 50%,
            var(--dorado-oscuro) 100%
        ) border-box;
    box-shadow:
        0 8px 25px rgba(1, 21, 31, 0.2),
        0 0 0 1px rgba(212, 175, 55, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contenido_videos:hover .contenedor_video iframe {
    box-shadow:
        0 12px 35px rgba(1, 21, 31, 0.25),
        0 0 20px rgba(212, 175, 55, 0.15);
}

/* Móviles - ajuste de padding */
@media (max-width: 480px) {
    .contenido_videos {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

    .texto_video .texto_titulo {
        font-size: 2rem;
    }

    .texto_video p {
        font-size: 1.4rem;
    }
}

@media (min-width: 820px) {
    .contenido_videos {
        display: grid;
        grid-template-columns: 320px 1fr;
        column-gap: 3rem;
        align-items: center;
        padding: 3rem;
    }

    .contenedor_video {
        max-width: 100%;
        margin: 0;
    }

    .contenido_videos:has(.video2) {
        grid-template-columns: 1fr 320px;
    }

    .video2 {
        grid-column: 2 / 3;
        width: 320px;
    }

    .tex2 {
        grid-row: 1/2;
        grid-column: 1 / 2;
    }

    .texto_video {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .texto_video h3 {
        margin: 0;
    }
}

@media (min-width: 991px) {
    .col-md-6 {
        width: unset;
    }

    .contenido_videos {
        grid-template-columns: 350px 1fr;
        padding: 3.5rem;
    }

    .contenido_videos:has(.video2) {
        grid-template-columns: 1fr 350px;
    }

    .video2 {
        width: 350px;
    }
}

@media (min-width: 1200px) {
    .contenido_videos {
        grid-template-columns: 380px 1fr;
        column-gap: 4rem;
        padding: 4rem;
    }

    .contenido_videos:has(.video2) {
        grid-template-columns: 1fr 380px;
    }

    .video2 {
        width: 380px;
  }
}

.texto_video {
    text-align: center;
}

.texto_video .texto_titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--azul-marino);
    margin: 2rem 0 1rem;
    position: relative;
    padding-bottom: 1rem;
}

.texto_video .texto_titulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--dorado-elegante) 20%,
        var(--dorado-brillante) 50%,
        var(--dorado-elegante) 80%,
        transparent 100%
    );
    border-radius: 2px;
}

.texto_video p {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    color: var(--negro-texto);
    line-height: 1.7;
}

/* En desktop, texto alineado a la izquierda */
@media (min-width: 820px) {
    .texto_video {
        text-align: left;
    }

    .texto_video .texto_titulo::after {
        left: 0;
        transform: none;
        background: linear-gradient(
            90deg,
            var(--dorado-elegante) 0%,
            var(--dorado-brillante) 50%,
            transparent 100%
        );
    }
}



/******* FIN VIDEOS ********/



  .centrar-flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px;
  }
  

  .footer {
    position: relative;
  }
  
  footer h3 {
    color: black;
  }
  
  footer .image {
    margin: 0 auto;
    width: 265px;
    object-fit: cover;
  }
  
  .contacto-redes .instagram {
    padding: 40px;
  }
  
  .contacto-redes img {
    width: 80px;
    margin: 0 auto;
  }
  
  .enlace-redes {
    background-image: url('../img/carbon_fibre.webp');
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    flex-wrap: wrap;
    gap: 4rem;
    background-color: var(--menu-h);
    padding: 20px;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08); /* Refinado: añadido borde sutil para definir la sección sobre la textura */
  }
  
 
  .red-social h3, .red-social span {
    color: white;
  }
  
/* ============================================
   FOOTER CRÉDITOS - Premium Elegante
   ============================================ */
.creditos {
    background: linear-gradient(
        180deg,
        var(--azul-marino) 0%,
        #010d14 100%
    );
    position: relative;
    padding: 0 !important;
}

/* Línea dorada superior decorativa */
.creditos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--dorado-oscuro) 15%,
        var(--dorado-brillante) 50%,
        var(--dorado-oscuro) 85%,
        transparent 100%
    );
}

.contenedor-creditos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 3rem 2rem;
    max-width: 120rem;
    margin: 0 auto;
}

.creditos .diseno {
    text-align: center;
    flex: 1;
}

/* Nombre Mariachi 2000 - Destacado */
.creditos .diseno:first-child p:first-child {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--dorado-elegante);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

/* Derechos reservados - Badge sutil */
.creditos .diseno:first-child p:last-child {
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Separadores verticales */
.creditos .diseno:first-child,
.creditos .diseno:last-child {
    position: relative;
}

.creditos .diseno:first-child::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 5rem;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--dorado-elegante) 50%,
        transparent 100%
    );
}

.creditos .diseno:last-child::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 5rem;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--dorado-elegante) 50%,
        transparent 100%
    );
}

/* Diseño por - Sección */
.creditos .diseno:last-child p {
    font-family: 'Lato', sans-serif;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.creditos .diseno img {
    width: 180px;
    height: auto;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.creditos .diseno a:hover img {
    opacity: 1;
    filter: brightness(1.1);
}

/* ─────────────────────────────────────────────
   RESPONSIVE CRÉDITOS
   ───────────────────────────────────────────── */
@media (max-width: 992px) {
    .contenedor-creditos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .creditos .diseno:first-child::after,
    .creditos .diseno:last-child::before {
        display: none;
    }

    .creditos .diseno {
        flex: unset;
    }

    .creditos .enlaces-legales {
        order: 3;
        width: 100%;
        border-top: 1px solid rgba(212, 175, 55, 0.15);
        padding-top: 2rem;
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .contenedor-creditos {
        flex-direction: column;
        gap: 2rem;
        padding: 2.5rem 1.5rem;
    }

    .creditos .diseno:first-child p:first-child {
        font-size: 2.2rem;
    }

    .creditos .enlaces-legales {
        order: unset;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}

@media (max-width: 550px) {
    .contenedor-creditos {
        padding: 2rem 1rem;
    }

    .creditos .diseno:first-child {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        width: 100%;
    }

    .creditos .diseno:first-child p:first-child {
        font-size: 2rem;
    }

    .creditos .diseno img {
        width: 160px;
    }
}
/* ============================================
   FIN FOOTER CRÉDITOS
   ============================================ */
  .division {
    text-align: center;
    color: white;
    font-size: 24px;
    padding: 30px;
  }
  
  .division.uno {
    padding: 0 0 30px 0;
  }
  
  .division p {
    margin: 0;
    font-family: "Droid Serif";
    font-size: 30px;
    font-weight: bold;
  }
  
  
  /************ FIN FOOTER ************/
  



  /***  BOTON UP ***/
  
  #button-up {
    width: 4rem;
    height: 4rem;
    background-color: var(--fondo-nav);
    color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    font-size: 2.3rem;
    cursor: pointer;
    position: fixed;
    bottom: 11rem;
    right: 1.4rem;
    z-index: 200;
    border: .4rem solid transparent;
    transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); /* Refinado: 300ms → 350ms, ease → curva Material - transición más deliberada y suave */
    -webkit-transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    will-change: transform, border-color; /* Refinado: añadido para optimizar el rendimiento de la animación */
}

#button-up:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    border-color: rgba(0, 1, 2, 0.5);
}

  /***  FIN BOTON UP ***/
  
  /***  BOTON WHATSAPP ***/

/* .wcs_button.wcs_button_circle {
    background-color: var(--fondo-nav);
    
    box-shadow: 0 0 0 0 #075E54;
    animation: sombra-boton 2.5s infinite;
    -webkit-animation: sombra-boton 2.5s infinite;
} */

/* Posición del botón de WhatsApp - SIEMPRE VISIBLE */
.pulse-what {
  position: fixed !important;
  bottom: 21px;
  right: 8px;
  z-index: 1000;
}

/**  FIN BOTON WHATSAPP ***/




/*** BOTON LLAMADA Ocultar para todas las pantallas excepto moviles ***/

/* Posición del botón de llamada - Solo visible en móviles por defecto */
.pulse-wr {
  display: none;
}

.boton-llamada, .boton-whatsapp {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

/* Efecto hover para desktop */
@media (hover: hover) {
    .boton-llamada:hover, .boton-whatsapp:hover {
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
}

/* Animación de ondas expansivas en el CONTENEDOR PADRE */
.pulse-what, .pulse-wr {
    position: relative;
}

/* Ondas para WhatsApp - Usando colores de la paleta del proyecto */
.pulse-what::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(254, 198, 17, 0.7); /* #fec611 */
    animation: pulse-gold 2.5s infinite;
    pointer-events: none;
}

/* Ondas para Llamada - Usando colores de la paleta del proyecto */
.pulse-wr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 214, 71, 0.7); /* #ffd647 */
    animation: pulse-gold-light 2.5s infinite;
    pointer-events: none;
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(254, 198, 17, 0.7);
    }
    70% {
        box-shadow: 0 0 0 25px rgba(254, 198, 17, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(254, 198, 17, 0);
    }
}

@keyframes pulse-gold-light {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 214, 71, 0.7);
    }
    70% {
        box-shadow: 0 0 0 25px rgba(255, 214, 71, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 214, 71, 0);
    }
}

/* Imágenes de los botones */
.boton-llamada img, .boton-whatsapp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Efecto de levitación sutil */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

.pulse-what, .pulse-wr {
    animation: float 3s ease-in-out infinite;
}

/* DESACTIVADO TEMPORALMENTE PARA VER LAS ONDAS
.boton-llamada, .boton-whatsapp {
    animation: shadow-float 3s ease-in-out infinite;
}
*/

  /* Mostrar solo en pantallas moviles */
  @media (max-width: 764px) {
    
    .pulse-wr {
      display: block !important;
      position: fixed;
      bottom: 21px;
      left: 8px;
      z-index: 1000;
    }
    .bton.btn-lg.llamar {
      display: block;
    }
    .bton.btn-lg {
      display: none;
    }
  }

  @media (min-width: 765px) {
    .pulse-wr {
      display: none;
    }
    .bton.btn-lg.llamar {
      display: none;
    }
    .bton.btn-lg {
      display: block;
    }
    .bton.btn-lg i {
      font-size: 25px;
    }
  }
  /** FIN BOTON LLAMADA ***/

  /*** BOTON LLAMADA EN MENU DESKTOP ***/
  
  /* Ocultar por defecto en móviles */
  .menu-call-button {
    display: none;
  }
  
  /* Mostrar solo en desktop */
  @media (min-width: 768px) {
    .menu-call-button {
      display: block;
    }
    
    .btn-call-menu {
      background: linear-gradient(135deg, var(--dorado-principal) 0%, var(--dorado-elegante) 100%);
      color: var(--azul-marino) !important;
      padding: 8px 20px !important;
      border-radius: 25px;
      font-weight: 700;
      text-transform: uppercase;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-block;
      margin: 0 !important;
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;
      letter-spacing: 0.5px;
    }

    .btn-call-menu:hover {
      background: linear-gradient(135deg, #1a0f00 0%, #2d1a00 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5), 0 0 40px rgba(254, 198, 17, 0.2);
      border-color: var(--dorado-principal);
      color: var(--dorado-principal) !important;
      text-shadow: 0 0 10px rgba(254, 198, 17, 0.5);
    }
    
    .btn-call-menu i {
      margin-right: 6px;
      font-size: 14px;
      animation: ring 2s ease-in-out infinite;
    }
    
    /* Animación sutil del icono de teléfono */
    @keyframes ring {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(-10deg); }
      20% { transform: rotate(10deg); }
      30% { transform: rotate(-10deg); }
      40% { transform: rotate(10deg); }
      50% { transform: rotate(0deg); }
      100% { transform: rotate(0deg); }
    }
    
    /* Ajustes cuando el menú está fijo (scrolled) */
    .on .btn-call-menu {
      background: linear-gradient(135deg, #fec611 0%, #D4AF37 100%);
    }
    
    /* Efecto de pulso opcional para llamar la atención */
    .btn-call-menu::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background: rgba(254, 198, 17, 0.3);
      border-radius: 25px;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.5s ease;
    }
    
    .btn-call-menu:hover::before {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0;
    }
  }
  
  /* Ajuste para pantallas más grandes */
  @media (min-width: 1024px) {
    .btn-call-menu {
      padding: 10px 25px !important;
      font-size: 15px;
    }
    
    .btn-call-menu i {
      font-size: 16px;
    }
  }
  
  /*** FIN BOTON LLAMADA EN MENU DESKTOP ***/


  .fa-circle-exclamation.alert::before{
    content: "\f06a";
}


/* ============================================
   GALERÍA PREMIUM - Glassmorphism + Layout Featured
   Mariachi 2000 - Versión refinada
   ============================================ */

/* ─────────────────────────────────────────────
   FILTROS - Diseño Tab elegante
   ───────────────────────────────────────────── */
.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding: 0.5rem;
    background: rgba(1, 21, 31, 0.03);
    border-radius: 6rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.gallery-filter {
    padding: 1rem 2rem;
    border: none;
    background: transparent;
    color: var(--azul-marino);
    border-radius: 5rem;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.gallery-filter:hover {
    background: rgba(254, 198, 17, 0.1);
    color: var(--azul-marino);
}

.gallery-filter.active {
    background: var(--azul-marino);
    color: var(--dorado-principal);
    box-shadow: 0 4px 20px rgba(1, 21, 31, 0.25);
}

/* ─────────────────────────────────────────────
   GRID - Layout uniforme
   ───────────────────────────────────────────── */
.modern-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: 1.8rem;
    padding: 1rem 0 3rem;
}

/* ─────────────────────────────────────────────
   ITEMS DE GALERÍA
   ───────────────────────────────────────────── */
.modern-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    aspect-ratio: 4/3;
    cursor: pointer;
    border: 1px solid rgba(212, 175, 55, 0.08);
    box-shadow: 0 4px 20px rgba(1, 21, 31, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-gallery__item:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow:
        0 20px 40px rgba(1, 21, 31, 0.12),
        0 0 0 1px rgba(212, 175, 55, 0.2);
}

.modern-gallery__item.hidden {
    display: none;
}

/* Imagen */
.modern-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-gallery__item:hover img {
    transform: scale(1.08);
}

/* ─────────────────────────────────────────────
   OVERLAY - Glassmorphism elegante
   ───────────────────────────────────────────── */
.modern-gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(1, 21, 31, 0.75) 0%,
        rgba(1, 21, 31, 0.2) 50%,
        transparent 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2rem;
}

.modern-gallery__item:hover .modern-gallery__overlay {
    opacity: 1;
}

/* Icono de expand */
.modern-gallery__icon {
    width: 5.5rem;
    height: 5.5rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dorado-elegante);
    box-shadow: 0 8px 25px rgba(1, 21, 31, 0.2);
    transform: translateY(20px) scale(0.8);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.modern-gallery__item:hover .modern-gallery__icon {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modern-gallery__icon i {
    font-size: 2rem;
    color: var(--azul-marino);
    transition: transform 0.3s ease;
}

.modern-gallery__item:hover .modern-gallery__icon i {
    transform: scale(1.1);
}

/* ─────────────────────────────────────────────
   BADGE DE CATEGORÍA
   ───────────────────────────────────────────── */
.modern-gallery__badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    padding: 0.5rem 1.2rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 5rem;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--azul-marino);
    border: 1px solid rgba(212, 175, 55, 0.2);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.35s ease;
    z-index: 2;
}

.modern-gallery__item:hover .modern-gallery__badge {
    opacity: 1;
    transform: translateY(0);
}

/* Colores por categoría */
.modern-gallery__item.vino-tinto .modern-gallery__badge {
    background: rgba(139, 69, 89, 0.9);
    color: var(--blanco);
    border-color: rgba(139, 69, 89, 0.5);
}

.modern-gallery__item.negro .modern-gallery__badge {
    background: rgba(30, 30, 30, 0.9);
    color: var(--blanco);
    border-color: rgba(60, 60, 60, 0.5);
}

.modern-gallery__item.mixto .modern-gallery__badge {
    background: rgba(212, 175, 55, 0.9);
    color: var(--azul-marino);
    border-color: var(--dorado-elegante);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .modern-gallery {
        grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .gallery-filters {
        gap: 0.4rem;
        padding: 0.4rem;
        border-radius: 1.2rem;
    }

    .gallery-filter {
        padding: 0.8rem 1.4rem;
        font-size: 1.1rem;
    }

    .modern-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .modern-gallery__item {
        border-radius: 1.2rem;
    }

    .modern-gallery__icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .modern-gallery__icon i {
        font-size: 1.6rem;
    }

    .modern-gallery__badge {
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
        top: 1rem;
        left: 1rem;
    }
}

@media (max-width: 540px) {
    .gallery-filters {
        width: 100%;
        border-radius: 1rem;
        justify-content: center;
    }

    .gallery-filter {
        padding: 0.7rem 1.2rem;
        font-size: 1rem;
    }

    .modern-gallery {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .modern-gallery__item {
        border-radius: 1rem;
    }

    .modern-gallery__overlay {
        padding-bottom: 1.5rem;
    }

    .modern-gallery__icon {
        width: 4rem;
        height: 4rem;
    }

    .modern-gallery__icon i {
        font-size: 1.4rem;
    }
}

/* ─────────────────────────────────────────────
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .modern-gallery__item,
    .modern-gallery__item img,
    .modern-gallery__overlay,
    .modern-gallery__icon,
    .modern-gallery__badge,
    .gallery-filter {
        transition-duration: 0.1s !important;
    }
}

/* ============================================
   FIN GALERÍA PREMIUM
   ============================================ */

/* ============================================
   ENLACES LEGALES FOOTER
   ============================================ */
.enlaces-legales {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.enlaces-legales a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.enlaces-legales a::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--dorado-elegante, #D4AF37);
}

.enlaces-legales a:nth-child(1)::before {
    content: '\f3ed';
}

.enlaces-legales a:nth-child(2)::before {
    content: '\f15c';
}

.enlaces-legales a:nth-child(3)::before {
    content: '\f2ed';
}

.enlaces-legales a:hover {
    background: var(--dorado-elegante, #D4AF37);
    border-color: var(--dorado-elegante, #D4AF37);
    color: var(--azul-marino, #01151f);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.enlaces-legales a:hover::before {
    color: var(--azul-marino, #01151f);
}

@media (max-width: 576px) {
    .enlaces-legales {
        gap: 1rem;
    }

    .enlaces-legales a {
        padding: 0.7rem 1.2rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 400px) {
    .enlaces-legales {
        flex-direction: column;
        gap: 0.8rem;
    }

    .enlaces-legales a {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================
   FIN ENLACES LEGALES FOOTER
   ============================================ */

/* ============================================
   COOKIE BANNER - Diseño Card Flotante
   Mariachi Juvenil Sol
   ============================================ */

.cookie-banner {
    display: none;
    position: fixed;
    z-index: 10001;
    bottom: 20px;
    left: 20px;
    right: 20px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cookie-banner.show {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner__card {
    background: var(--azul-marino, #01151f);
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    margin: 0 auto;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(212, 175, 55, 0.2);
    position: relative;
    overflow: hidden;
}

.cookie-banner__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--dorado-elegante, #D4AF37),
        var(--dorado-brillante, #FEDB37),
        var(--dorado-elegante, #D4AF37));
}

.cookie-banner__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.cookie-banner__header i {
    font-size: 2.2rem;
    color: var(--dorado-elegante, #D4AF37);
}

.cookie-banner__header span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

.cookie-banner__body p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1.5rem 0;
}

.cookie-banner__body a {
    color: var(--dorado-elegante, #D4AF37);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.cookie-banner__body a:hover {
    color: var(--dorado-brillante, #FEDB37);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: 0.8rem;
}

.cookie-btn {
    flex: 1;
    padding: 1rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cookie-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.cookie-btn--solid {
    background: var(--dorado-elegante, #D4AF37);
    color: var(--azul-marino, #01151f);
}

.cookie-btn--solid:hover {
    background: var(--dorado-brillante, #FEDB37);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* Responsive */
@media (min-width: 500px) {
    .cookie-banner {
        left: 20px;
        right: auto;
        max-width: 400px;
    }
}

@media (max-width: 400px) {
    .cookie-banner__card {
        padding: 1.5rem;
    }

    .cookie-btn {
        padding: 0.9rem 1rem;
        font-size: 1.2rem;
    }
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transition-duration: 0.1s !important;
    }

    .cookie-btn {
        transition-duration: 0.1s !important;
    }
}

/* ============================================
   FIN COOKIE BANNER
   ============================================ */


/* ============================================
   MENÚ MÓVIL FULL-SCREEN OVERLAY
   Mariachi 2000 - Premium Mobile Navigation
   Paleta: Solo variables CSS del proyecto
   ============================================ */

/* Ocultar toggle de bootstrap en móvil */
.desktop-only-toggle {
    display: none !important;
}

/* ─────────────────────────────────────────────
   BOTÓN HAMBURGUESA
   ───────────────────────────────────────────── */
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--dorado-principal);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    z-index: 10002;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-toggle:hover {
    background: rgba(254, 198, 17, 0.1);
}

.mobile-menu-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(254, 198, 17, 0.25);
}

.hamburger-box {
    width: 22px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 22px;
    height: 2px;
    background-color: var(--dorado-principal);
    border-radius: 2px;
    position: absolute;
    transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger-inner::before {
    content: '';
    top: -7px;
}

.hamburger-inner::after {
    content: '';
    bottom: -7px;
}

/* Animación a X */
.mobile-menu-toggle.is-active .hamburger-inner {
    background-color: transparent;
}

.mobile-menu-toggle.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* ─────────────────────────────────────────────
   OVERLAY FULL SCREEN
   ───────────────────────────────────────────── */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    pointer-events: none;
    overflow: hidden;
}

.mobile-menu-overlay.is-open {
    pointer-events: all;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fondo glassmorphism sutil */
.mobile-menu-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        160deg,
        rgba(1, 21, 31, 0.75) 0%,
        rgba(10, 44, 61, 0.70) 50%,
        rgba(1, 21, 31, 0.75) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.mobile-menu-overlay.is-open .mobile-menu-bg {
    transform: translateY(0);
}

/* ─────────────────────────────────────────────
   CONTENIDO DEL MENÚ (Scrolleable)
   ───────────────────────────────────────────── */
.mobile-menu-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 55px 24px 25px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s;
}

.mobile-menu-overlay.is-open .mobile-menu-content {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────────
   LOGO
   ───────────────────────────────────────────── */
.mobile-menu-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease 0.35s;
    flex-shrink: 0;
}

.mobile-menu-overlay.is-open .mobile-menu-logo {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-logo img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(254, 198, 17, 0.25);
}

.mobile-menu-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.mobile-menu-brand span {
    font-family: 'Lobster', cursive;
    font-size: 2rem;
    color: var(--dorado-principal);
}

.mobile-menu-brand span:last-child {
    font-size: 1.7rem;
    color: var(--blanco);
}

/* ─────────────────────────────────────────────
   NAVEGACIÓN
   ───────────────────────────────────────────── */
.mobile-menu-nav {
    width: 100%;
    max-width: 340px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.mobile-menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-nav li {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--delay);
}

.mobile-menu-overlay.is-open .mobile-menu-nav li {
    opacity: 1;
    transform: translateX(0);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(254, 198, 17, 0.12);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.mobile-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--dorado-brillante) 0%, var(--dorado-elegante) 100%);
    transform: scaleY(0);
    transition: transform 0.25s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
    background: rgba(254, 198, 17, 0.06);
    border-color: rgba(254, 198, 17, 0.3);
    transform: translateX(6px);
    text-decoration: none;
}

.mobile-nav-link:hover::before,
.mobile-nav-link:focus::before {
    transform: scaleY(1);
}

.nav-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(254, 198, 17, 0.12) 0%, rgba(212, 175, 55, 0.08) 100%);
    border-radius: 10px;
    margin-right: 14px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.nav-icon i {
    font-size: 1.6rem;
    color: var(--dorado-principal);
    transition: transform 0.25s ease;
}

.mobile-nav-link:hover .nav-icon {
    background: linear-gradient(135deg, var(--dorado-principal) 0%, var(--dorado-elegante) 100%);
}

.mobile-nav-link:hover .nav-icon i {
    color: var(--azul-marino);
    transform: scale(1.1);
}

.nav-text {
    flex: 1;
    font-family: 'Lato', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--blanco);
    letter-spacing: 0.3px;
}

.nav-arrow {
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.25s ease;
}

.nav-arrow i {
    font-size: 1.2rem;
    color: var(--dorado-principal);
}

.mobile-nav-link:hover .nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ─────────────────────────────────────────────
   CTAs DE CONTACTO (Solo paleta del proyecto)
   ───────────────────────────────────────────── */
.mobile-menu-cta {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease 0.45s;
    flex-shrink: 0;
}

.mobile-menu-overlay.is-open .mobile-menu-cta {
    opacity: 1;
    transform: translateY(0);
}

.cta-call,
.cta-whatsapp {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Botón Llamar - Dorado */
.cta-call {
    background: linear-gradient(135deg, var(--dorado-principal) 0%, var(--dorado-elegante) 100%);
    color: var(--azul-marino);
}

.cta-call i {
    font-size: 2rem;
    margin-bottom: 6px;
    animation: ring-phone 2.5s ease-in-out infinite;
}

@keyframes ring-phone {
    0%, 60%, 100% { transform: rotate(0deg); }
    5%, 15% { transform: rotate(-10deg); }
    10%, 20% { transform: rotate(10deg); }
}

.cta-call span {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta-call small {
    font-size: 1.1rem;
    opacity: 0.85;
    margin-top: 2px;
}

.cta-call:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(254, 198, 17, 0.35);
    text-decoration: none;
    color: var(--azul-marino);
}

/* Botón WhatsApp - Usando crema/dorado de la paleta */
.cta-whatsapp {
    background: linear-gradient(135deg, var(--crema-claro) 0%, var(--crema-medio) 100%);
    color: var(--azul-marino);
    border: 1px solid var(--dorado-elegante);
}

.cta-whatsapp i {
    font-size: 2.2rem;
    margin-bottom: 6px;
    color: var(--azul-marino);
}

.cta-whatsapp span {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
    text-decoration: none;
    color: var(--azul-marino);
    background: linear-gradient(135deg, var(--crema-medio) 0%, var(--dorado-principal) 100%);
}

/* ─────────────────────────────────────────────
   REDES SOCIALES
   ───────────────────────────────────────────── */
.mobile-menu-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease 0.55s;
    margin-top: auto;
    padding-top: 10px;
}

.mobile-menu-overlay.is-open .mobile-menu-social {
    opacity: 1;
    transform: translateY(0);
}

.social-label {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(254, 198, 17, 0.15);
    border-radius: 50%;
    color: var(--dorado-principal);
    font-size: 1.6rem;
    transition: all 0.25s ease;
}

.social-icons a:hover {
    background: var(--dorado-principal);
    border-color: var(--dorado-principal);
    color: var(--azul-marino);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(254, 198, 17, 0.3);
}

/* ─────────────────────────────────────────────
   DECORACIONES
   ───────────────────────────────────────────── */
.mobile-menu-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
}

.mobile-menu-overlay.is-open .decoration-circle {
    opacity: 1;
}

.decoration-circle--1 {
    width: 250px;
    height: 250px;
    top: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(254, 198, 17, 0.06) 0%, transparent 70%);
}

.decoration-circle--2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
}

.decoration-line {
    position: absolute;
    background: linear-gradient(90deg, transparent 0%, rgba(254, 198, 17, 0.08) 50%, transparent 100%);
    height: 1px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease 0.5s;
}

.mobile-menu-overlay.is-open .decoration-line {
    opacity: 1;
}

.decoration-line--1 {
    top: 20%;
    transform: rotate(-3deg);
}

.decoration-line--2 {
    bottom: 25%;
    transform: rotate(2deg);
}

/* ─────────────────────────────────────────────
   BODY STATE
   ───────────────────────────────────────────── */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ─────────────────────────────────────────────
   OCULTAR EN DESKTOP
   ───────────────────────────────────────────── */
@media (min-width: 768px) {
    .mobile-menu-toggle,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────
   AJUSTES POR ALTURA DE PANTALLA
   ───────────────────────────────────────────── */

/* Pantallas muy bajas (ej: iPhone SE landscape, Galaxy Fold) */
@media (max-height: 580px) {
    .mobile-menu-content {
        padding: 45px 20px 15px;
        justify-content: flex-start;
    }

    .mobile-menu-logo {
        margin-bottom: 16px;
    }

    .mobile-menu-logo img {
        width: 40px;
        height: 40px;
    }

    .mobile-menu-brand span {
        font-size: 1.7rem;
    }

    .mobile-menu-brand span:last-child {
        font-size: 1.4rem;
    }

    .mobile-menu-nav {
        margin-bottom: 14px;
    }

    .mobile-nav-link {
        padding: 10px 12px;
        margin-bottom: 4px;
    }

    .nav-icon {
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }

    .nav-icon i {
        font-size: 1.4rem;
    }

    .nav-text {
        font-size: 1.4rem;
    }

    .mobile-menu-cta {
        margin-bottom: 14px;
    }

    .cta-call,
    .cta-whatsapp {
        padding: 12px 10px;
    }

    .cta-call i,
    .cta-whatsapp i {
        font-size: 1.7rem;
        margin-bottom: 4px;
    }

    .cta-call span,
    .cta-whatsapp span {
        font-size: 1.1rem;
    }

    .cta-call small {
        font-size: 1rem;
    }

    .mobile-menu-social {
        gap: 8px;
        padding-top: 6px;
    }

    .social-icons {
        gap: 12px;
    }

    .social-icons a {
        width: 36px;
        height: 36px;
        font-size: 1.4rem;
    }

    .social-label {
        font-size: 1rem;
    }
}

/* Pantallas bajas intermedias */
@media (max-height: 680px) and (min-height: 581px) {
    .mobile-menu-content {
        padding: 50px 22px 20px;
    }

    .mobile-menu-logo {
        margin-bottom: 18px;
    }

    .mobile-menu-nav {
        margin-bottom: 16px;
    }

    .mobile-nav-link {
        padding: 12px 14px;
        margin-bottom: 5px;
    }

    .mobile-menu-cta {
        margin-bottom: 16px;
    }

    .cta-call,
    .cta-whatsapp {
        padding: 14px 10px;
    }
}

/* Pantallas angostas */
@media (max-width: 340px) {
    .mobile-menu-content {
        padding: 45px 16px 15px;
    }

    .mobile-menu-nav,
    .mobile-menu-cta {
        max-width: 100%;
    }

    .mobile-nav-link {
        padding: 12px;
    }

    .nav-icon {
        width: 34px;
        height: 34px;
        margin-right: 10px;
    }

    .nav-text {
        font-size: 1.5rem;
    }

    .cta-call span,
    .cta-whatsapp span {
        font-size: 1.1rem;
    }
}

/* ─────────────────────────────────────────────
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu-bg,
    .mobile-menu-content,
    .mobile-menu-logo,
    .mobile-menu-nav li,
    .mobile-menu-cta,
    .mobile-menu-social,
    .mobile-nav-link,
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after,
    .decoration-circle,
    .decoration-line {
        transition-duration: 0.1s !important;
    }

    .cta-call i {
        animation: none;
    }
}

/* ============================================
   FIN MENÚ MÓVIL FULL-SCREEN OVERLAY
   ============================================ */