/**
 * Add any custom CSS here.
 *
 * This file will be loaded after all other theme stylesheets.
 */

/* =========================================
   RED ONE SECURITY - HEADER MEJORADO
   ========================================= */

/* -----------------------------------------
   1. VARIABLE ANIMADA (sin cambios)
   ----------------------------------------- */
@property --redone-compact {
    inherits: false;
    initial-value: 0;
}

/* -----------------------------------------
   2. CONTENEDOR STICKY (más específico)
   ----------------------------------------- */
header.wp-block-template-part:has(.redone-header) {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* -----------------------------------------
   3. CONTENEDOR PRINCIPAL (TU CLASE)
   ----------------------------------------- */
.redone-header {
    /* La variable y la animación base */
    --redone-compact: 0;
    background-color: transparent !important; /* Se mantiene */
    border-radius: 0;
    
    /* Padding base para escritorio */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;

    /* Animaciones al hacer scroll */
    animation: 
        redone-header-compact linear both,
        redone-header-width linear both,
        redone-header-radius linear both;
    animation-timeline: scroll();
    animation-range: 0 150px;
}

/* -----------------------------------------
   4. CAPA DE FONDO (Pseudo-elemento)
   ----------------------------------------- */
.redone-header::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background: rgba(18, 3, 5, 0.25);*/
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 0;

    animation: redone-background linear both;
    animation-timeline: scroll();
    animation-range: 0 150px;
}

/* -----------------------------------------
   5. CONTENIDO DEL HEADER
   ----------------------------------------- */
.redone-header > * {
    position: relative;
    z-index: 1;
}

/* -----------------------------------------
   6. LOGO (ajustado)
   ----------------------------------------- */
.redone-header .wp-block-site-logo {
    animation: redone-logo linear both;
    animation-timeline: scroll();
    animation-range: 0 150px;
}

/* =========================================
   ANIMACIONES (sin cambios)
   ========================================= */
@keyframes redone-header-compact {
    from { --redone-compact: 0; }
    to { --redone-compact: 1; }
}

@keyframes redone-header-width {
    from { margin-inline: 0; }
    to { margin-inline: 10rem; }
}

@keyframes redone-header-radius {
    from { border-radius: 0; }
    to { border-radius: 20px; }
}

@keyframes redone-background {
    from { opacity: 0; border-radius: 0; }
    to { opacity: 1; border-radius: 20px; }
}

@keyframes redone-logo {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.8); opacity: 0.5; }
}
/* =========================================
   RESPONSIVE: COMPORTAMIENTO EN MÓVIL
   ========================================= */

@media (max-width: 768px) {

    /* 1. Anular la animación de ancho en móvil */
    .redone-header {
        animation-name: 
            redone-header-compact,
            /* redone-header-width,  <-- LO ELIMINAMOS */
            redone-header-radius;
        /* El padding lo controlamos nosotros abajo */
    }

    /* 2. Padding fijo y más pequeño para móvil */
    .redone-header {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin-inline: 0 !important; /* Evita que se separe de los bordes */
    }

    /* 3. El fondo siempre visible en móvil (opcional) */
    .redone-header::before {
        opacity: 1 !important;
        border-radius: 0 !important; /* Sin bordes redondeados en móvil */
        animation: none !important; /* Anulamos la animación del fondo */
    }

    /* 4. Logo sin animación o con otra escala en móvil */
    .redone-header .wp-block-site-logo {
        animation: none !important; /* O crea una animación específica para móvil */
        transform: scale(0.9); /* Un tamaño más razonable */
        opacity: 1;
    }
}

/* =========================================
   MENÚ MÓVIL - OFF-CANVAS DESDE LA DERECHA
   ANCHO REDUCIDO (70%)
   ========================================= */

@media (max-width: 768px) {
    /* Contenedor del menú desplegado */
    .wp-block-navigation__responsive-container.is-menu-open {
        width: 70% !important;           /* Ajusta a 60% o 70% según prefieras */
        right: 0 !important;             /* Fijado a la derecha */
        left: auto !important;           /* Anula el left por defecto */
        /* Mejoras estéticas */
        /*box-shadow: -8px 0 20px rgba(0, 0, 0, 0.25);*/
        /* Si el menú tiene padding interno, puedes reducirlo */
        padding: 2rem 1.5rem !important;
    }

    /* Opcional: si quieres que el contenido del menú ocupe todo el ancho */
    .wp-block-navigation__responsive-container.is-menu-open 
    .wp-block-navigation__responsive-container-content {
        padding: 2rem 0 !important;
        width: 100% !important;
    }

    /* Para que el overlay (fondo oscuro) siga cubriendo toda la pantalla,
       no es necesario modificarlo, pero si quieres darle un efecto de desenfoque,
       puedes añadir: */
    .wp-block-navigation__responsive-container.is-menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        /*background: rgba(0, 0, 0, 0.5);*/
        z-index: -1;
        /* El fondo ya lo gestiona WordPress, esto es solo por si quieres personalizarlo */
    }
}
.wp-block-navigation__responsive-container {
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.wp-block-navigation__responsive-container.is-menu-open {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* =========================================
   AJUSTES PARA PANTALLAS HORIZONTALES
   (tablets y móviles en landscape)
   ========================================= */
/* =========================================
   AJUSTE PARA RANGO 768px - 1024px EN HORIZONTAL
   ========================================= */

/*@media (min-width: 768px) and (max-width: 1024px)  {*/
	@media (hover: none) and (pointer: coarse) {	

    /* 1. Header más compacto */
    .redone-header {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* 2. Logo más pequeño */
    .redone-header .wp-block-site-logo img {
        max-height: 100px !important;
        width: auto !important;
    }

    /* 3. Forzar que el botón hamburguesa esté visible */
    .redone-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* 4. Ocultar el menú expandido (para que no se vea el desborde) */
    .redone-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    /* 5. Ajustar el off-canvas (cuando está abierto) */
    .wp-block-navigation__responsive-container.is-menu-open {
        width: 70% !important; /* Un poco más angosto que en vertical */
        right: 0 !important;
        left: auto !important;
        /*padding: 2rem !important;*/
		padding: 1.5rem !important;
        border-radius: 0 !important;
        box-shadow: -8px 0 20px rgba(0, 0, 0, 0.25);
    }

    /* 6. Ajustar los ítems del menú dentro del off-canvas */
    .wp-block-navigation__responsive-container.is-menu-open 
    .wp-block-navigation__responsive-container-content {
        padding: 2.5rem 0 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open 
    .wp-block-navigation-item a {
        font-size: 1rem !important;
        padding: 0.5rem 0 !important;
    }
}



/* =========================================
   ANIMACIONES ON SCROLL - RED ONE
   ========================================= */

/* -----------------------------------------
   ESTADO INICIAL (oculto)
   ----------------------------------------- */
[class*="animate-"] {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* -----------------------------------------
   ESTADO VISIBLE (cuando .is-visible se añade)
   ----------------------------------------- */
[class*="animate-"].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* -----------------------------------------
   EFECTOS ESPECÍFICOS
   ----------------------------------------- */

/* --- Clase base para todos los elementos animados --- */
.animate-on-scroll {
    /* Transición suave para todos los efectos */
    transition: opacity 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity; /* Sugerencia para el navegador */
}

/* --- EFECTO: Fade In --- */
.fade-in {
    opacity: 0;
}
.fade-in.is-visible {
    opacity: 1;
}

/* --- EFECTO: Slide Left --- */
.slide-left {
    opacity: 0;
    transform: translateX(-4rem);
}
.slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- EFECTO: Slide Right --- */
.slide-right {
    opacity: 0;
    transform: translateX(2rem);
}
.slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- EFECTO: Scroll Up (aparece desde abajo) --- */
.scroll-up {
    opacity: 0;
    transform: translateY(4rem);
}
.scroll-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- EFECTO: Scroll Down (aparece desde arriba) --- */
.scroll-down {
    opacity: 0;
    transform: translateY(-4rem);
}
.scroll-down.is-visible {
    opacity: 1;
    transform: translateY(0);
}