/**
 * Layouts del Header
 * Variavista Business Theme
 * 
 * @package Variavista
 * @version 2.7.0
 */

/* ========================================
   LOGO Y ELEMENTOS BÁSICOS
   ======================================== */

/* Logo - Las reglas responsive están en main.css */
.logo-main-img,
.logo-animated-img {
    display: inline-block !important;
    transition: opacity 0.3s ease;
}

/* FORZAR IMÁGENES DEL MEGAMENÚ - MOSTRAR COMPLETAS */
.mega-menu-dropdown img,
.mega-menu-card img,
nav .mega-menu-dropdown img,
header nav img:not(.header-logo):not(.custom-logo) {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Alpine.js - Ocultar elementos hasta que Alpine esté listo */
[x-cloak] {
    display: none !important;
}

/* ========================================
   LAYOUTS DEL HEADER
   ======================================== */

/* 🏢 CLÁSICO: Logo Izq | Menú Centro | CTA Der */
.header-layout-default {
    justify-content: space-between;
}
.header-layout-default > div:nth-child(1) { order: 1; } /* Logo */
.header-layout-default > nav { order: 2; flex: 1; justify-content: center; } /* Menú */
.header-layout-default > div:nth-child(3) { order: 3; } /* CTA */

/* 🎯 LOGO CENTRO: Menú dividido Izq/Der */
.header-layout-logo_center {
    justify-content: center;
}
.header-layout-logo_center > div:nth-child(1) { order: 2; margin: 0 2rem; } /* Logo centro */
.header-layout-logo_center > nav { order: 1; flex: 1; justify-content: flex-start; } /* Menú izq */
.header-layout-logo_center > div:nth-child(3) { order: 3; flex: 1; justify-content: flex-end; display: flex; } /* CTA der */

/* ━ MINIMALISTA: Logo Izq | Menú Der */
.header-layout-minimal {
    justify-content: space-between;
}
.header-layout-minimal > div:nth-child(1) { order: 1; } /* Logo */
.header-layout-minimal > nav { order: 2; } /* Menú */
.header-layout-minimal > div:nth-child(3) { display: none; } /* CTA oculto */

/* 📍 CENTRADO TOTAL: Todo centrado */
.header-layout-all_center {
    justify-content: center;
    flex-direction: column;
    padding: 1.5rem 0;
    height: auto !important;
}
.header-layout-all_center > div:nth-child(1) { order: 1; margin-bottom: 1rem; } /* Logo */
.header-layout-all_center > nav { order: 2; margin-bottom: 0.5rem; } /* Menú */
.header-layout-all_center > div:nth-child(3) { order: 3; } /* CTA */

/* ⚡ SPLIT: Logo/Menú Izq | CTA Der */
.header-layout-split {
    justify-content: space-between;
}
.header-layout-split > div:nth-child(1) { order: 1; margin-right: 2rem; } /* Logo */
.header-layout-split > nav { order: 2; flex: 1; } /* Menú */
.header-layout-split > div:nth-child(3) { order: 3; } /* CTA */

/* 📚 APILADO: Logo arriba | Menú abajo */
.header-layout-stacked {
    flex-direction: column;
    padding: 1rem 0;
    height: auto !important;
}
.header-layout-stacked > div:nth-child(1) { order: 1; margin-bottom: 1rem; } /* Logo */
.header-layout-stacked > div:nth-child(2) { 
    order: 2; 
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-layout-stacked > nav { order: 1; } /* Menú */
.header-layout-stacked > div:nth-child(3) { order: 2; } /* CTA */

/* 📏 COMPACTO: Todo en línea pegado */
.header-layout-compact {
    justify-content: flex-start;
    gap: 1rem !important;
}
.header-layout-compact > div:nth-child(1) { order: 1; } /* Logo */
.header-layout-compact > nav { order: 2; } /* Menú */
.header-layout-compact > div:nth-child(3) { order: 3; margin-left: auto; } /* CTA */

/* 📑 SIDEBAR STYLE: Logo arriba | Todo vertical */
.header-layout-sidebar {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 0;
    height: auto !important;
}
.header-layout-sidebar > div:nth-child(1) { order: 1; margin-bottom: 1.5rem; } /* Logo */
.header-layout-sidebar > nav { order: 2; margin-bottom: 1rem; } /* Menú */
.header-layout-sidebar > div:nth-child(3) { order: 3; } /* CTA */