:root{ --header-h:96px; }

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0; height:100%;
  overflow-x:hidden;
  font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', serif;
}

/* ===== HERO ===== */
.hero-wrap{
  position:relative;
  height:calc(var(--vh, 1svh) * 130);
  min-height:120vh;
  overflow:hidden;
  background:#000;
  margin-top:0;
}
@media (max-width:780px){
  .hero-wrap{ height:calc(var(--vh, 1svh) * 115); min-height:110vh; }
}
.hero-slide{ position:absolute !important; inset:0; margin:0 !important; padding:0 !important; opacity:0 !important; transition:opacity .8s ease; }
.hero-slide.active{ opacity:1 !important; z-index:1 }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.hero-word {
    visibility: hidden;
}

#hero-text-block {
    position: absolute; 
    top: 50%; 
    left: 0; 
    transform: translateY(-50%); 
    padding: 2rem 4rem; 
    color: white; 
    z-index: 10;
}
#hero-text-block h1 {
    font-weight: 600; 
    text-transform: uppercase; 
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
#hero-text-block .hero-word { display: block; }
#word-salud { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
#word-caracter { font-size: clamp(1.4rem, 3vw, 1.8rem); }
#word-excelencia { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }

/* --- Estilos Redes Sociales Hero (Escritorio) --- */
#hero-social-links {
    position: absolute;
    bottom: clamp(1.5rem, 5vh, 3rem); /* Espacio desde abajo (Posición "baja") */
    right: clamp(1rem, 4vw, 2.5rem); /* Espacio desde la derecha */
    z-index: 10;
    display: flex;
    flex-direction: row; /* Apilados horizontalmente */
    gap: 0.75rem; /* Espacio entre botones */
    align-items: center; /* Alinear verticalmente */
    transition: transform 0.5s ease-out; /* <-- Para animación scroll */
}

#hero-social-links.is-at-top {
    /* Sube 80px. Ajusta este valor si es necesario */
    transform: translateY(-80px); 
}

.social-link {
    display: inline-flex; 
    align-items: center;  
    justify-content: center; 
    gap: 0.65rem;          /* Espacio icono-texto */
    padding: 0.75rem 1rem; 
    background-color: rgba(25, 25, 25, 0.6); 
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(0.9rem, 2vw, 1rem);
    text-decoration: none;
    border-radius: 0.375rem; 
    backdrop-filter: blur(4px); 
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    min-width: 160px; /* Ancho mínimo */
}

.social-link svg {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    flex-shrink: 0;
    fill: currentColor;
}

/* Colores de marca */
.social-link.social-whatsapp { background-color: #25D366; }
.social-link.social-email    { background-color: #007BFF; }
.social-link.social-instagram { background-color: #E1306C; }
.social-link.social-facebook  { background-color: #1877F2; }
.social-link.social-youtube   { background-color: #FF0000; }

.social-link:hover {
    background-color: rgba(255, 255, 255, 0.95); 
    color: #3D3D3D; 
    transform: translateY(-4px) scale(1.03); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- INICIO MODIFICACIÓN: Estilos MÓVIL (v5 - Solo Iconos) --- */
@media (max-width: 768px) {
    #hero-text-block { padding: 1rem 1.5rem; }
    #word-salud { font-size: 0.9rem; }
    #word-caracter { font-size: 1.1rem; }
    #word-excelencia { font-size: 1.3rem; }

    #hero-social-links {
        right: 0;
        left: 0;
        justify-content: center; /* Centramos los botones en móvil */
        bottom: 2rem;
        gap: 0.75rem; /* <-- Espacio entre iconos */
        padding: 0 1rem; 
        flex-wrap: wrap; 
        transition: none;
    }
   
    #hero-social-links.is-at-top {
        transform: none; /* No sube en móvil */
    }

    .social-link {
        padding: 0.75rem;     /* <-- MODIFICADO: 12px padding (cuadrado) */
        font-size: 0.85rem;
        min-width: 0; 
        flex-grow: 0;           /* <-- MODIFICADO: No crecer */
        flex-basis: auto;       /* <-- MODIFICADO: Ancho auto */
        gap: 0;                 /* <-- MODIFICADO: Sin gap interno */
    }

    /* --- NUEVO: Ocultar texto en móvil --- */
    .social-link span {
        display: none;
    }
}
/* --- FIN MODIFICACIÓN: Estilos MÓVIL (v5 - Solo Iconos) --- */


.overlay-fijo{
  position:fixed;
  top: var(--header-h);
  left:0; right:0;
  z-index:4500;
  padding: clamp(10px, 2vw, 12px);
  text-align:center;
  color:#212529;
  background:rgba(248, 249, 250, 0.85);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family:Arial, sans-serif;
  transition: transform .6s ease-in-out, opacity .6s ease-in-out;
}
.overlay-fijo.is-hidden{ opacity:0; transform:translateY(-200%); pointer-events:none; }

/* ===== ESTILOS PARA LA NUEVA SECCIÓN DE PREVIEWS ===== */
.preview-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transition: all 0.3s ease-in-out;
    display: block;
}
.preview-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.preview-card .slide-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 0.4s ease;
}
.preview-card .slide-img.active {
    opacity: 1;
}
.preview-card:hover .slide-img.active {
    transform: scale(1.05);
}
.preview-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: white;
    z-index: 2; /* Para que esté sobre las imágenes */
}
.preview-card-title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.preview-card-subtitle {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ======================================================== */
/* ===== INICIO: CSS PARA SHOWS SECTION RESPONSIVE v2 ===== */
/* ======================================================== */

/* Estilos base (aplicados siempre, sobrescritos por media query) */
.shows-section-final {
    position: relative;
    background-color: #f0f0f0; /* Fallback */
    color: white; /* Color texto móvil por defecto */
    text-align: center; /* Centrado móvil por defecto */
}

/* Estilos específicos para MÓVIL (hasta 1160px) */
@media (max-width: 1160px) {
    .shows-section-final {
        background-image: url('/img/banner-show-movil.jpg'); /* Imagen móvil */
        background-size: cover;
        background-position: center center; /* Centrar imagen móvil */
        min-height: 65vh; /* Altura mínima adaptable */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4rem 1rem; /* Padding vertical y horizontal */
    }
    .shows-section-final::before { /* Velo oscuro */
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.55); /* Opacidad velo */
        z-index: 1;
    }
    .shows-text-content-wrapper { /* Contenedor texto móvil */
        position: relative; /* Sobre el velo */
        z-index: 2;
        max-width: 600px; /* Ancho máximo texto */
    }
    /* Ocultar elementos de layout desktop en móvil */
    .shows-desktop-banner-structure { display: none; }
}

/* Estilos específicos para DESKTOP (1161px en adelante) */
@media (min-width: 1161px) {
    .shows-section-final {
        background-image: none; /* Quitar fondo del wrapper principal */
        color: inherit; /* Heredar color del body */
        text-align: left; /* Alinear texto a la izquierda */
        min-height: 0; /* Quitar altura mínima */
        padding: 0; /* Quitar padding */
        display: block; /* Volver a layout normal */
    }
    .shows-section-final::before {
         display: none; /* Ocultar velo */
    }
    /* Mostrar estructura banner desktop */
    .shows-desktop-banner-structure {
        display: block; /* Mostrar */
        position: relative;
        width: 100%;
        padding-top: 33.33%; /* Aspect ratio 3:1 */
    }
    .shows-desktop-banner-structure img { /* Imagen del banner desktop */
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Contenedor del texto en desktop (superpuesto al banner) */
    .shows-text-content-wrapper {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center; /* Centrar verticalmente */
        z-index: 2; /* Sobre la imagen */
    }
    /* Contenedor interno para padding y ancho */
    .shows-text-inner-container {
       max-width: 7xl; /* 1280px */
       margin-left: auto;
       margin-right: auto;
       padding-left: 1rem; /* px-4 */
       padding-right: 1rem; /* px-4 */
       width: 100%;
    }
    @media (min-width: 640px) { /* sm: */
        .shows-text-inner-container { padding-left: 1.5rem; padding-right: 1.5rem; }
    }
    @media (min-width: 1024px) { /* lg: */
        .shows-text-inner-container { padding-left: 2rem; padding-right: 2rem; }
    }
    /* Wrapper final del texto para limitar ancho y añadir padding top */
    .shows-text-final-wrapper {
        width: 50%; /* Ocupa mitad izquierda */
        max-width: 36rem; /* max-w-lg */
        padding-top: 2rem; /* lg:pt-8 */
    }
}
/* ====================================================== */
/* ===== FIN: CSS PARA SHOWS SECTION RESPONSIVE v2 ===== */
/* ====================================================== */