/*
Theme Name: Ordesa Sobrarbe Child
Theme URI: https://ordesasobrarbe.com
Description: Child theme para el rediseño del portal turístico Ordesa Sobrarbe. Basado en Divi 5. La paleta de colores, tipografía base y presets se gestionan en el Variable Manager de Divi 5. Este archivo contiene únicamente los estilos que Divi 5 no puede resolver nativamente.
Author: Jacob Kaizen
Author URI: https://kaizenstudios.es
Version: 1.0.0
Template: Divi
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ordesa-child
*/


/* ==========================================================================
   ÍNDICE
   ==========================================================================
   1. VARIABLES CSS GLOBALES
   2. GLOBAL — Reset y ajustes base
   3. TIPOGRAFÍA — Ajustes de variable font (ejes width/opsz)
   4. ACCESIBILIDAD — Focus states, skip-to-content
   5. TOP BAR — Barra superior de utilidades
   6. HEADER / NAVEGACIÓN — Sticky, transiciones
   7. MEGA MENÚ — Estilos del mega menú nativo (Canvases)
   8. HERO — Overlays sobre imágenes de fondo
   9. TARJETAS — Hover effects, elevación
   10. FILTROS — Barra de filtros del directorio
   11. SUBFOOTER — Franja de engagement
   12. FOOTER — Pie de página técnico y línea copyright
   13. RESPONSIVE — Media queries globales
   14. FASE 2 — Mapa interactivo (preparado)
   15. FASE 2 — Sistema de favoritos (preparado)
   16. FASE 2 — Multiidioma (preparado)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES CSS GLOBALES
   --------------------------------------------------------------------------
   Estas variables complementan las del Variable Manager de Divi 5.
   Se usan para propiedades que Divi no expone nativamente (letter-spacing
   condicional, transiciones, sombras reutilizables, etc.)
   ========================================================================== */

:root {
    /* Transiciones globales */
    --os-transition-fast: 150ms ease-in-out;
    --os-transition-base: 250ms ease-in-out;
    --os-transition-slow: 400ms ease-in-out;

    /* Sombras reutilizables */
    --os-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --os-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --os-shadow-mega: 0 12px 40px rgba(0, 0, 0, 0.15);

    /* Letter-spacing para mayúsculas */
    --os-tracking-nav: 0.5px;
    --os-tracking-btn: 1px;
    --os-tracking-tag: 0.8px;

    /* Z-index layers */
    --os-z-topbar: 1000;
    --os-z-header: 999;
    --os-z-mega: 998;
    --os-z-overlay: 100;

    /* Anchuras máximas */
    --os-max-width: 1280px;
    --os-content-padding: max(5vw, 16px);

    /* Bricolage Grotesque: eje width semicondensed */
    --os-font-width-semi: 87;
    --os-font-width-normal: 100;
}


/* ==========================================================================
   2. GLOBAL — Reset y ajustes base
   ========================================================================== */

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

/* Scroll suave global excepto para quienes prefieran movimiento reducido */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mejora de renderizado tipográfico */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Imágenes responsive por defecto */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   3. TIPOGRAFÍA — Ajustes de variable font
   --------------------------------------------------------------------------
   Divi 5 carga Bricolage Grotesque desde Google Fonts pero no controla
   el eje 'wdth' (width). Estos estilos aplican el ancho semicondensed
   (87%) a los titulares hero y de sección, manteniendo el ancho normal
   (100%) para navegación y elementos UI.
   ========================================================================== */

/* Titulares hero y de sección: semicondensed */
h1,
.et_pb_module_header,
.hero-title {
    font-variation-settings: 'wdth' var(--os-font-width-semi), 'opsz' 48;
}

h2 {
    font-variation-settings: 'wdth' var(--os-font-width-semi), 'opsz' 36;
}

h3 {
    font-variation-settings: 'wdth' var(--os-font-width-normal), 'opsz' 28;
}

h4 {
    font-variation-settings: 'wdth' var(--os-font-width-normal), 'opsz' 22;
}

/* Navegación: ancho normal, tracking ampliado */
.et-menu-nav li a,
.os-topbar a {
    font-variation-settings: 'wdth' var(--os-font-width-normal), 'opsz' 16;
    letter-spacing: var(--os-tracking-nav);
    text-transform: uppercase;
}

/* Botones: ancho normal, tracking ampliado */
.et_pb_button,
.os-btn {
    letter-spacing: var(--os-tracking-btn);
    text-transform: uppercase;
}

/* Etiquetas / tags de categoría */
.os-tag {
    letter-spacing: var(--os-tracking-tag);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 500;
}


/* ==========================================================================
   4. ACCESIBILIDAD — Focus states, skip-to-content
   --------------------------------------------------------------------------
   WCAG 2.1 AA requiere focus visible con ratio de contraste mínimo 3:1
   para elementos interactivos.
   ========================================================================== */

/* Skip to content link — visible solo con teclado */
.os-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: #E8651A;
    color: #FFFFFF;
    padding: 12px 24px;
    z-index: calc(var(--os-z-topbar) + 1);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top var(--os-transition-fast);
}

.os-skip-link:focus {
    top: 0;
    outline: none;
}

/* Focus visible global — outline naranja de acento */
*:focus-visible {
    outline: 3px solid #E8651A;
    outline-offset: 2px;
}

/* Quitar outline en click (mouse), mantener en teclado */
*:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   5. TOP BAR — Barra superior de utilidades
   --------------------------------------------------------------------------
   Barra fina sobre el menú principal. Se oculta al hacer scroll hacia
   abajo y reaparece al hacer scroll hacia arriba. El JS que controla
   este comportamiento está en assets/js/custom.js
   ========================================================================== */

.os-topbar {
    background-color: #1A1A1A;
    color: #CCCCCC;
    font-size: 0.75rem;
    line-height: 1;
    padding: 8px var(--os-content-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: var(--os-z-topbar);
    transition: transform var(--os-transition-base);
}

.os-topbar.is-hidden {
    transform: translateY(-100%);
}

.os-topbar a {
    color: #CCCCCC;
    text-decoration: none;
    transition: color var(--os-transition-fast);
}

.os-topbar a:hover,
.os-topbar a:focus-visible {
    color: #FFFFFF;
}

.os-topbar__left,
.os-topbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Separador visual entre items de la topbar */
.os-topbar__left > *:not(:last-child)::after {
    content: '|';
    margin-left: 16px;
    color: #555555;
    pointer-events: none;
}

/* Selector de idioma */
.os-lang-switch {
    display: flex;
    gap: 4px;
}

.os-lang-switch a {
    padding: 2px 6px;
    border-radius: 3px;
}

.os-lang-switch a.is-active {
    background-color: #333333;
    color: #FFFFFF;
}


/* ==========================================================================
   6. HEADER / NAVEGACIÓN — Sticky, transiciones
   --------------------------------------------------------------------------
   Divi gestiona el sticky header nativamente. Estos estilos refinan
   la transición y el comportamiento visual.
   ========================================================================== */

/* Header con fondo transparente sobre hero, sólido al hacer scroll */
.os-header--transparent {
    background-color: transparent;
    transition: background-color var(--os-transition-base);
}

.os-header--transparent.is-scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Item de menú activo — indicador naranja */
.et-menu-nav li.current-menu-item > a,
.et-menu-nav li.current-menu-ancestor > a {
    color: #E8651A !important;
    border-bottom: 2px solid #E8651A;
    padding-bottom: 2px;
}


/* ==========================================================================
   7. MEGA MENÚ — Estilos del mega menú nativo (Canvases)
   --------------------------------------------------------------------------
   Si se usa Divi Mega Pro en vez de Canvases, estos estilos se adaptan
   a las clases del plugin. La estructura visual es la misma.
   ========================================================================== */

.os-mega-menu {
    background: #FFFFFF;
    box-shadow: var(--os-shadow-mega);
    border-top: 3px solid #E8651A;
    padding: 32px var(--os-content-padding);
    max-width: var(--os-max-width);
    margin: 0 auto;
}

.os-mega-menu__columns {
    display: grid;
    gap: 32px;
}

/* 3 columnas + imagen lateral para Explora, Experiencias, Planifica */
.os-mega-menu--3col {
    grid-template-columns: 1fr 1fr 1fr 200px;
}

/* 2 columnas + bloque lateral para Asociación */
.os-mega-menu--2col {
    grid-template-columns: 1fr 1fr 240px;
}

.os-mega-menu__heading {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--os-tracking-nav);
    color: #1A1A1A;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E8E4DA;
}

.os-mega-menu__link {
    display: block;
    padding: 6px 0;
    color: #333333;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color var(--os-transition-fast), padding-left var(--os-transition-fast);
}

.os-mega-menu__link:hover {
    color: #E8651A;
    padding-left: 4px;
}

/* Imagen lateral del mega menú */
.os-mega-menu__image {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.os-mega-menu__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.os-mega-menu__cta {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
}


/* ==========================================================================
   8. HERO — Overlays sobre imágenes de fondo
   --------------------------------------------------------------------------
   Clases reutilizables para superponer texto sobre fotografía.
   Aplicar como clase CSS adicional en las secciones de Divi.
   ========================================================================== */

/* Overlay oscuro — para texto blanco sobre foto */
.os-hero-overlay-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.45) 100%
    );
    z-index: var(--os-z-overlay);
    pointer-events: none;
}

/* Overlay claro — para texto oscuro sobre foto clara */
.os-hero-overlay-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.60) 100%
    );
    z-index: var(--os-z-overlay);
    pointer-events: none;
}

/* El contenido dentro del hero debe estar sobre el overlay */
.os-hero-overlay-dark > *,
.os-hero-overlay-light > * {
    position: relative;
    z-index: calc(var(--os-z-overlay) + 1);
}


/* ==========================================================================
   9. TARJETAS — Hover effects, elevación
   --------------------------------------------------------------------------
   Comportamiento hover para tarjetas de contenido (alojamientos,
   experiencias, pueblos). Se aplica como clase CSS en el módulo.
   ========================================================================== */

.os-card {
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--os-shadow-card);
    transition: box-shadow var(--os-transition-base), transform var(--os-transition-base);
}

.os-card:hover {
    box-shadow: var(--os-shadow-card-hover);
    transform: translateY(-4px);
}

.os-card__image {
    overflow: hidden;
}

.os-card__image img {
    transition: transform var(--os-transition-slow);
}

.os-card:hover .os-card__image img {
    transform: scale(1.05);
}


/* ==========================================================================
   10. FILTROS — Barra de filtros del directorio
   --------------------------------------------------------------------------
   Estilos para la barra de filtros de alojamientos, restaurantes, etc.
   Se implementará cuando se construya el directorio.
   ========================================================================== */

.os-filters {
    background-color: #C4AD82;
    padding: 12px var(--os-content-padding);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border-radius: 4px;
}

.os-filters__select,
.os-filters__input {
    background: #FFFFFF;
    border: 1px solid #E8E4DA;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.875rem;
    color: #333333;
    min-height: 44px; /* Accesibilidad: target táctil mínimo */
}

.os-filters__toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1A1A1A;
    font-weight: 600;
    font-size: 0.875rem;
}


/* ==========================================================================
   11. SUBFOOTER — Franja de engagement
   ========================================================================== */

.os-subfooter {
    background-color: #F5F3EE;
    padding: 60px var(--os-content-padding);
}

.os-subfooter__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    max-width: var(--os-max-width);
    margin: 0 auto;
}

.os-subfooter__block h3 {
    margin-bottom: 8px;
}

.os-subfooter__block p {
    margin-bottom: 16px;
    color: #6B6B5E;
}


/* ==========================================================================
   12. FOOTER — Pie de página técnico y línea copyright
   ========================================================================== */

.os-footer {
    background-color: #1A1A1A;
    color: #9B9B8E;
    padding: 60px var(--os-content-padding);
}

.os-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 32px;
    max-width: var(--os-max-width);
    margin: 0 auto;
}

.os-footer a {
    color: #9B9B8E;
    text-decoration: none;
    transition: color var(--os-transition-fast);
}

.os-footer a:hover {
    color: #FFFFFF;
}

.os-footer__heading {
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--os-tracking-nav);
    margin-bottom: 16px;
}

/* Línea de copyright */
.os-copyright {
    background-color: #111111;
    padding: 12px var(--os-content-padding);
    font-size: 0.75rem;
    color: #666666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.os-copyright a {
    color: #888888;
    text-decoration: none;
    transition: color var(--os-transition-fast);
}

.os-copyright a:hover {
    color: #CCCCCC;
}


/* ==========================================================================
   13. RESPONSIVE — Media queries globales
   --------------------------------------------------------------------------
   Breakpoints alineados con Divi 5:
   - Tablet: max-width 980px
   - Móvil: max-width 767px
   ========================================================================== */

@media (max-width: 980px) {
    /* Top bar: reducir a idioma + búsqueda */
    .os-topbar__left {
        display: none;
    }

    /* Mega menú: columnas se apilan */
    .os-mega-menu--3col,
    .os-mega-menu--2col {
        grid-template-columns: 1fr;
    }

    /* Mega menú: ocultar imagen lateral en tablet */
    .os-mega-menu__image {
        display: none;
    }

    /* Subfooter: 1 columna */
    .os-subfooter__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Footer: 2 columnas en tablet */
    .os-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    /* Top bar: solo idioma */
    .os-topbar {
        justify-content: flex-end;
        padding: 6px var(--os-content-padding);
    }

    /* Footer: 1 columna en móvil */
    .os-footer__grid {
        grid-template-columns: 1fr;
    }

    /* Copyright: stack vertical */
    .os-copyright {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    /* Filtros: wrap en columna */
    .os-filters {
        flex-direction: column;
    }

    .os-filters__toggle {
        margin-left: 0;
        justify-content: center;
    }
}


/* ==========================================================================
   14. FASE 2 — Mapa interactivo
   --------------------------------------------------------------------------
   Estilos para popups, marcadores custom, controles del mapa.
   Se completará cuando se implemente el mapa interactivo.
   ========================================================================== */

/* Preparado — no eliminar esta sección */


/* ==========================================================================
   15. FASE 2 — Sistema de favoritos "Mi Viaje"
   --------------------------------------------------------------------------
   Estilos para botones de favorito, panel de favoritos, badges.
   Se completará cuando se implemente el sistema de favoritos.
   ========================================================================== */

/* Preparado — no eliminar esta sección */


/* ==========================================================================
   16. FASE 2 — Multiidioma
   --------------------------------------------------------------------------
   Estilos para selector de idioma custom, flags, ajustes RTL si aplica.
   Se completará cuando se implemente el sistema multiidioma.
   ========================================================================== */

/* Preparado — no eliminar esta sección */