/* ==========================================================================
   MUTADOR STUDIO - CORE CSS (Estructura, Menú y Scroll)
   ==========================================================================
   
   TABLA DE CONTENIDO:
   01. Reset y Configuración Base
   02. Tipografía de Interfaz (UI)
   03. Navegación Principal (Header y Logo)
   04. Menú Overlay Fullscreen (Asimétrico, Lato y Efecto Stroke)
   05. Animación de Botón Hamburguesa a "X"
   06. Footer Reveal (Efecto Revelación)
   07. SOBRESCRITURAS PARA OFFCANVAS DE BOOTSTRAP 5 (CORREGIDO)
08 lenis
09 addon image y video mut

 sm, md, lg, xl, and xxl.
Example: <div class="px-3 px-sm-0"> (Padding 
-axis is 3 on mobile, 0 on small and larger).
{propiedad}: p para padding.
{lados}: t (top), b (bottom), s (start/left), e (end/right), x (izquierda y derecha), y (arriba y abajo), o en blanco para los 4 lados.
{tamaño}: De 0 (0px) a 5 (

p-sm-3: Aplica un padding de nivel 3 (

 por defecto) en todos los lados solo desde dispositivos sm en adelante.
pt-sm-4: Aplica padding superior (top) nivel 4 desde sm.
px-sm-2: Aplica padding horizontal (left y right) nivel 2 desde
   ========================================================================== */

/* ==========================================================================
   01. RESET Y CONFIGURACIÓN BASE
   ========================================================================== */
::-webkit-scrollbar { display: none; }
html { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    scroll-behavior: auto !important; 
}

body {
    background-color: transparent !important; 
    color: #111111;
}

/* Desktop */
.vh-50 {
    height: 50vh !important;
}
.min-vh-50 {
    min-height: 50vh !important;
}


a {
    color:rgba(0,0,0,0.5);
    text-decoration: none;
}
footer a {
    color:rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

p {
    margin-bottom: 0.5rem !important;
   
}

/* Móvil */
@media (max-width: 768px) {
    .pb-m { padding: 5vh 0px !important; }
    .vh-50 {
        height: auto !important;
        min-height: 400px;
    }
    .min-vh-50 {
        min-height: auto !important;
    }
}

#btn-menu-mobile.abierto {
   z-index: 999999!important;
}

#btn-menu-mobile {
    position: relative;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* ==========================================================================
   02. TIPOGRAFÍA DE INTERFAZ (UI)
   ========================================================================== */
.texto-ui, .texto-ui a {
    font-size: 0.65rem !important; 
    letter-spacing: 0.15em; 
    text-transform: uppercase;
}

/* ==========================================================================
   03. NAVEGACIÓN PRINCIPAL (HEADER Y LOGO)
   ========================================================================== */


/* ESCALADO FLUIDO BURGUER Y LOGO */
.icono-menu { transition: color 0.4s ease; width: clamp(24px, 3vw, 36px); height: auto; }
.icono-menu,
.icono-menu * {
    pointer-events: none;
}
.header-logo__img { width: clamp(90px, 12vw, 150px); height: auto; transition: width 0.3s ease; }

/* --- GESTIÓN DE LOGOS SVG --- */
#logodark { display: block; }
#logolight { display: none !important; } 

.header-inverso .nav-enlace, .header-inverso .icono-menu { color: #FFFFFF !important; }
.header-inverso #logodark { display: none !important; }
.header-inverso #logolight { display: block !important; }


/* ==========================================================================
   04. MENÚ OVERLAY FULLSCREEN (ESTILOS BASE)
   ========================================================================== */


/* ==========================================================================
   05. ANIMACIÓN DE BOTÓN HAMBURGUESA A "X"
   ========================================================================== */
.linea-1, .linea-2 {
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: center; transform-box: fill-box; 
}
#btn-menu-mobile.abierto .linea-1 { transform: translateY(7px) rotate(45deg); }
#btn-menu-mobile.abierto .linea-2 { transform: translateY(-7px) rotate(-45deg); }
#btn-menu-mobile.abierto { color: #FFFFFF !important; }
#btn-menu-mobile.abierto .linea-1, 
#btn-menu-mobile.abierto .linea-2 { stroke: #FFFFFF !important; }

/* ==========================================================================
   06. FOOTER REVEAL (EFECTO REVELACIÓN)
   ========================================================================== */
#main-content {
    background-color: #f8f9fa;
    width: 100vw;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.footer-reveal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    padding: 3% 0px;
}

/* ==========================================================================
   07. SOBRESCRITURAS PARA OFFCANVAS DE BOOTSTRAP 5 (CORREGIDO)
   ========================================================================== */





/* ==========================================================================
   08.lenis
   ========================================================================== */
/* ==========================================================================
   LENIS - REGLAS BASE RECOMENDADAS PARA EVITAR ATASCOS EN MÓVIL
   ========================================================================== */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Optimización para que la animación del header sea acelerada por hardware */
#header {
  will-change: transform;
}

/* ==========================================================================
09 addon video mut
   ========================================================================== */
div.mut-video-player { width: 100%; overflow: hidden}
div.mut-video-player video{ width: 100%; overflow: hidden}

/* addon image randoom. Esto hace que cualquier etiqueta <img> dentro de tu addon sea responsiva */
.sppb-addon-wrapper.addon-root-mut-imagenrandom{overflow: hidden}
.mut-simple img, 
.mut-galeria-item img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block; /* Evita pequeños márgenes extraños en la parte inferior */
    border-radius: 8px; /* Opcional: si quieres bordes redondeados */
}