/* ============================================
   MAIN.CSS - agafayrider.ma
   Orden: fuentes · variables · reset · cabecera y mega-menú ·
   secciones de la home · footer · botones flotantes · cookies ·
   FAQ · páginas internas · ajustes de móvil y accesibilidad.
   ============================================ */

/* ============================================
   FUENTES LOCALES - RUTAS ABSOLUTAS
   ============================================ */

/* Playfair Display - Títulos */
@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display/playfair-display-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display/playfair-display-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display/playfair-display-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display/playfair-display-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display/playfair-display-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Lato - Textos generales */
@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato/lato-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato/lato-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato/lato-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato/lato-700italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
    --color-primary: #ff6b35;
    --color-primary-dark: #e55a2b;
    --color-primary-light: #ff8c5a;
    --color-secondary: #2a9d8f;
    --color-secondary-dark: #21867a;
    --color-accent: #f4a261;
    --color-text: #1e293b;
    --color-text-light: #64748b;
    --color-text-lighter: #94a3b8;
    --color-bg: #ffffff;
    --color-bg-light: #f8fafc;
    --color-bg-dark: #0f172a;
    --color-border: #e2e8f0;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Lato', Arial, Helvetica, sans-serif;

    --container-width: 1200px;
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;

    --header-height: 90px;
    --header-height-mobile: 70px;
}

/* ============================================
   RESET & GLOBALES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 115px; /* alto de la cabecera fija (103px) + margen */
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: 0;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-light);
}
::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

::selection {
    background: var(--color-primary);
    color: white;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   SR-ONLY
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    background: white;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.site-header.scrolled {
    padding: 0;
    box-shadow: var(--shadow-md);
}

.top-bar-superior {
    background: #FFD700;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    border-bottom: 1px solid #e6c200;
    position: relative;
    z-index: 10002;
    width: 100%;
}

.top-bar-superior-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.scrolling-container {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.scrolling-text {
    display: inline-block;
    animation: scrollRightToLeft 35s linear infinite;
    white-space: nowrap;
    color: #000000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes scrollRightToLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.scrolling-container:hover .scrolling-text {
    animation-play-state: paused;
}

.top-bar-contact {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
}

.top-bar-contact a {
    color: #000000;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    transition: var(--transition);
    font-weight: 500;
}

.top-bar-contact a:hover {
    color: var(--color-primary);
}

.main-header {
    background: white;
}

.main-header .container-full {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    height: 45px;
    width: auto;
    display: block;
}

.main-nav {
    display: flex;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.nav-menu > li > a {
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    color: #000000;
    transition: var(--transition);
    white-space: nowrap;
    padding: 5px 0;
}

.nav-menu > li > a:hover {
    color: var(--color-primary);
}

.nav-menu > li > a .menu-arrow,
.nav-menu > li > a .arrow {
    display: none !important;
}
.nav-menu > li > a::after {
    display: none !important;
}
.mega-dropdown > a::after {
    display: none !important;
}

/* ============================================
   MEGA MENU
   ============================================ */

.mega-dropdown {
    position: relative;
}

.mega-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
    z-index: 9998;
    pointer-events: auto;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 20px;
    min-width: 650px;
    max-width: 750px;
    z-index: 9999;
    border-top: 3px solid #ff6b35;
}

@media (min-width: 993px) {
    .mega-dropdown:hover > .mega-menu,
    .mega-dropdown:focus-within > .mega-menu {
        display: block;
        animation: fadeIn 0.25s ease;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mega-menu-container {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 20px;
    align-items: start;
}

.mega-menu-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-links ul li {
    margin-bottom: 4px;
}

.mega-menu-links ul li a {
    display: block;
    padding: 8px 14px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    background: transparent;
    transition: background-color 0.2s ease,
                color 0.2s ease,
                padding-left 0.2s ease;
}

.mega-menu-links ul li a:hover,
.mega-menu-links ul li a.active {
    background: #ff6b35;
    color: #ffffff;
    padding-left: 18px;
}

.mega-menu-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.image-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f6f8;
    aspect-ratio: 5 / 4;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.image-card .image-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background: #f0f0f0;
}

.image-card .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}

.image-card .image-label {
    padding: 8px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.image-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.image-card:hover .image-label {
    color: #ff6b35;
}

.weather-mega-menu .weather-mega-container {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 20px;
    align-items: start;
}

.weather-mega-menu .weather-links {
    grid-column: 1 / 2;
}

.weather-mega-menu .weather-images {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (min-width: 993px) and (max-width: 1200px) {
    .mega-menu {
        min-width: min(90vw, 700px);
        max-width: 90vw;
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    .mega-menu {
        position: static;
        min-width: 100%;
        max-width: 100%;
        padding: 12px 10px;
        background: #f8f4f0;
        border-radius: 10px;
        margin-top: 5px;
        box-shadow: none;
        border-top: none;
    }
    .mega-dropdown.active > .mega-menu {
        display: block;
    }
    .mega-menu-container {
        grid-template-columns: 30% 70%;
        gap: 12px;
    }
    .mega-menu-images {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .image-card {
        min-height: 60px;
    }
    .image-card .image-label {
        font-size: 12px;
        padding: 6px 8px;
        min-height: 34px;
    }
    .mega-menu-links ul li a {
        font-size: 13px;
        padding: 6px 10px;
    }
    .mega-dropdown::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .mega-menu {
        position: static;
        min-width: 100%;
        max-width: 100%;
        padding: 12px 10px;
        background: #f8f4f0;
        border-radius: 10px;
        margin: 5px 0 10px;
        box-shadow: none;
        border-top: none;
    }
    .mega-dropdown.active > .mega-menu {
        display: block;
        animation: slideDown 0.3s ease;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .mega-menu-container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .mega-menu-links {
        grid-column: 1 / 2;
    }
    .mega-menu-links ul li a {
        font-size: 13px;
        padding: 6px 10px;
    }
    .mega-menu-images {
        display: none;
    }
    .weather-mega-menu .weather-mega-container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .weather-mega-menu .weather-images {
        display: none;
    }
    .mega-dropdown::after {
        display: none;
    }
}

/* ============================================
   SELECTORES DESKTOP
   ============================================ */
.desktop-only {
    display: flex !important;
}

.header-selectors {
    display: flex !important;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.lang-switcher {
    position: relative;
    display: inline-block;
}

.lang-btn {
    background: #f0f0f0 !important;
    border: 1px solid #cccccc !important;
    border-radius: 30px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.lang-btn:hover {
    background: #e5e5e5 !important;
    border-color: #aaaaaa !important;
}

.lang-btn.active {
    background: #e5e5e5 !important;
    border-color: var(--color-primary) !important;
}

.currency-btn {
    background: #f0f0f0 !important;
    border: 1px solid #cccccc !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    cursor: pointer !important;
    color: #000000 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: auto !important;
    height: 26px !important;
    line-height: 1 !important;
}

.currency-btn:hover {
    background: #e5e5e5 !important;
    border-color: #aaaaaa !important;
}

.currency-btn.active {
    background: #e5e5e5 !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
}

.currency-btn .currency-arrow {
    font-size: 8px !important;
    margin-left: 2px !important;
}

.currency-arrow {
    transition: transform 0.3s ease;
    margin-left: 2px;
}

.currency-btn.active .currency-arrow {
    transform: rotate(180deg);
}

.lang-arrow {
    transition: transform 0.3s ease;
    font-size: 10px;
}

.lang-btn.active .lang-arrow {
    transform: rotate(180deg);
}

.header-contact {
    flex-shrink: 0;
}

.btn-contact {
    background: #25D366;
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: var(--transition);
    display: inline-block;
}

.btn-contact:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

.mobile-selectors {
    display: none !important;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lang-switcher-mobile {
    position: relative;
    display: inline-block;
}

.lang-btn-mobile {
    background: #f0f0f0;
    border: 1px solid #cccccc;
    border-radius: 30px;
    padding: 6px 12px;
    cursor: pointer;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-btn-mobile:hover {
    background: #e5e5e5;
}

.currency-switcher-mobile {
    position: relative;
    display: inline-block;
}

.currency-btn-mobile {
    background: #f0f0f0 !important;
    border: 1px solid #cccccc !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    cursor: pointer !important;
    color: #000000 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 26px !important;
    line-height: 1 !important;
}

.currency-btn-mobile:hover {
    background: #e5e5e5 !important;
    border-color: #aaaaaa !important;
}

.currency-btn-mobile .currency-arrow {
    font-size: 8px !important;
    margin-left: 2px !important;
}

.currency-btn-mobile.active {
    background: #e5e5e5;
    border-color: var(--color-primary);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 3px;
    background: #000000;
    border-radius: 2px;
    transition: var(--transition);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   DROPDOWNS IDIOMAS Y MONEDAS
   ============================================ */
.lang-dropdown,
.lang-dropdown-mobile,
.currency-dropdown,
.currency-dropdown-mobile {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e8e8e8 !important;
    padding: 6px 0 !important;
    z-index: 999999 !important;
    min-width: 140px !important;
    display: block !important;
}

.lang-dropdown-mobile,
.currency-dropdown-mobile {
    min-width: 120px !important;
}

.lang-dropdown.show,
.lang-dropdown-mobile.show,
.currency-dropdown.show,
.currency-dropdown-mobile.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    display: block !important;
}

.lang-dropdown a,
.lang-dropdown-mobile a,
.currency-dropdown a,
.currency-dropdown-mobile a {
    display: block !important;
    padding: 10px 18px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    border-radius: 4px !important;
    margin: 2px 6px !important;
    cursor: pointer !important;
}

.lang-dropdown a:hover,
.lang-dropdown-mobile a:hover,
.currency-dropdown a:hover,
.currency-dropdown-mobile a:hover {
    background: #ff6b35 !important;
    color: #ffffff !important;
}

.lang-btn.active,
.lang-btn-mobile.active,
.currency-btn.active,
.currency-btn-mobile.active {
    background: #e5e5e5 !important;
    border-color: #ff6b35 !important;
}

.lang-switcher,
.currency-switcher,
.lang-switcher-mobile,
.currency-switcher-mobile {
    position: relative !important;
    z-index: 10000 !important;
    display: inline-block !important;
}

/* ============================================
   SELECTOR DE IDIOMA: BANDERAS + 2 COLUMNAS
   (va después de las reglas genéricas de arriba para ganarles)
   ============================================ */
.lang-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Grid también con .show, porque .lang-dropdown.show fuerza display:block */
.lang-dropdown,
.lang-dropdown-mobile,
.lang-dropdown.show,
.lang-dropdown-mobile.show {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    padding: 8px !important;
}

.lang-dropdown,
.lang-dropdown.show {
    min-width: 300px !important;
}

.lang-dropdown-mobile,
.lang-dropdown-mobile.show {
    min-width: 250px !important;
}

.lang-dropdown a,
.lang-dropdown-mobile a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    white-space: nowrap;
}

@media (max-width: 992px) {
    /* El menú móvil se ancla al header para no salirse de la pantalla */
    .lang-switcher-mobile {
        position: static !important;
    }

    .lang-dropdown-mobile {
        top: calc(100% + 4px) !important;
        right: 10px !important;
        padding: 6px !important;
    }

    .lang-dropdown-mobile a {
        padding: 8px 10px !important;
        font-size: 12px !important;
        gap: 8px !important;
    }
}

/* ============================================
   HERO ANTIGUO (COMPATIBILIDAD)
   ============================================ */
.hero {
    height: 60vh;
    min-height: 400px;
    max-height: 600px;
    background: #1a1a2e;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero .hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero .slide.active {
    opacity: 1;
    z-index: 2;
}

.hero .slide picture,
.hero .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero .slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 3;
    pointer-events: none;
}

.hero-content-compact {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    color: #ffffff;
    width: 90%;
    max-width: 800px;
    padding: 20px;
    pointer-events: none;
}

.hero-content-compact h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.hero-content-compact p {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    margin-bottom: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero .slider-arrow,
.hero .slider-arrow-left,
.hero .slider-arrow-right,
.hero .slider-dots,
.hero .dot,
.hero .hero-scroll,
.hero .scroll-down {
    display: none !important;
}

@media (max-width: 1024px) {
    .hero { height: 55vh; min-height: 350px; max-height: 500px; }
}
@media (max-width: 768px) {
    .hero { height: 50vh; min-height: 300px; max-height: 450px; }
    .hero-content-compact h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
    .hero-content-compact p { font-size: clamp(0.85rem, 1.8vw, 1rem); }
}
@media (max-width: 480px) {
    .hero { height: 45vh; min-height: 250px; max-height: 380px; }
    .hero-content-compact h1 { font-size: clamp(1.2rem, 3.5vw, 1.6rem); margin-bottom: 5px; }
    .hero-content-compact p { font-size: clamp(0.7rem, 1.5vw, 0.85rem); }
}

/* ============================================
   SERVICIOS SECTION
   ============================================ */
.services-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

.section-title p {
    color: #64748b;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.services-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.service-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    cursor: pointer;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f5f5f5;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.service-item:hover {
    transform: translateY(-10px) translateZ(0);
    box-shadow: var(--shadow-lg);
}

.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
    transition: var(--transition);
    pointer-events: none;
}

.service-item:hover::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.3) 100%);
}

.service-item > * {
    position: relative;
    z-index: 2;
}

.service-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-primary);
    color: white;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 25px 25px;
    z-index: 2;
    color: white;
    transition: var(--transition);
}

.service-item:hover .service-details {
    transform: translateY(-5px);
}

.service-details h3 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.service-details .service-subtitle {
    font-size: clamp(0.85rem, 1vw, 1rem);
    color: var(--color-primary);
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.service-details p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 15px;
    font-size: clamp(0.85rem, 0.9vw, 0.95rem);
    max-width: 90%;
}

.service-features {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.service-features span {
    font-size: clamp(0.75rem, 0.85vw, 0.85rem);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 6px;
}

.service-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.service-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.service-price small {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

.service-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(255, 107, 53, 0.9);
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.8rem, 0.85vw, 0.85rem);
    transition: var(--transition);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.service-btn:hover {
    background: var(--color-primary);
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .services-cards {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .service-item {
        min-height: 520px;
    }

    .service-item::before {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.80) 0%,
            rgba(0, 0, 0, 0.35) 55%,
            rgba(0, 0, 0, 0.10) 100%
        );
    }

    .service-details {
        padding: 22px 20px 20px;
    }

    .service-details h3 {
        font-size: 1.4rem;
    }

    .service-details p {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .service-price {
        font-size: 1.1rem;
    }

    .service-btn {
        padding: 8px 18px;
        font-size: 0.78rem;
    }
}

/* ============================================
   ZONAS DE VUELO
   ============================================ */
.zones-preview {
    padding: 80px 0;
    background: #f8fafc;
}

.zones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.zone-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/3;
    background: #e2e8f0;
    transition: var(--transition);
}

.zone-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.zone-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zone-card:hover img {
    transform: scale(1.08);
}

.zone-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    padding: 20px;
    color: white;
    transform: translateY(100%);
    transition: var(--transition);
}

.zone-card:hover .zone-overlay {
    transform: translateY(0);
}

.zone-overlay h3 {
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    margin-bottom: 5px;
    font-weight: 700;
}

.zone-altitud {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: var(--color-primary);
    font-weight: 600;
}

.btn-small {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-primary);
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--transition);
}

.btn-small:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.zones-cta {
    text-align: center;
    margin-top: 40px;
}

.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    background: var(--color-secondary);
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .zones-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
    .zones-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
    .zone-overlay { padding: 10px; }
    .zone-overlay h3 { font-size: 0.85rem; margin-bottom: 2px; }
    .zone-altitud { font-size: 0.7rem; margin-bottom: 4px; }   /* mínimo legible en móvil */
    .btn-small { font-size: 0.72rem; padding: 4px 12px; }      /* mínimo legible en móvil */
}

/* Sin ratón (móvil, tablet) no hay hover: el nombre y el botón de la zona
   tienen que verse siempre. */
@media (hover: none) {
    .zone-overlay {
        transform: none;
    }
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about {
    padding: 80px 0;
    background: white;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;
}

.about-content h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    margin-bottom: 20px;
}

.about-content p {
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 15px;
}

.about-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.about-image img:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; gap: 30px; }
    .about-image { order: -1; }
}

/* ============================================
   GALLERY PREVIEW
   ============================================ */
.gallery-preview {
    padding: 80px 0;
    background: #f8fafc;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #e2e8f0;
    transition: var(--transition);
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-cta {
    text-align: center;
    margin-top: 40px;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.85rem, 0.9vw, 0.95rem);
    transition: var(--transition);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    margin-bottom: 15px;
}

.cta-content p {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    opacity: 0.9;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-whatsapp {
    background: #25D366;
    color: white;
    padding: 14px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.95rem, 1vw, 1.1rem);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
}

@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .btn-whatsapp {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 60px 0 20px;
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top-row {
    display: grid !important;
    grid-template-columns: 200px 1fr 200px !important;
    gap: 30px !important;
    align-items: start !important;
    padding: 0 0 30px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 20px !important;
}

.footer-col-logo {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.footer-col-logo img {
    height: 40px !important;
    width: auto !important;
}

.footer-col-links {
    text-align: center !important;
}

.footer-col-links h4 {
    color: white !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
    text-align: center !important;
}

.footer-col-contact {
    text-align: right !important;
}

.footer-col-contact h4 {
    color: white !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
}

.quick-links-horizontal {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
}

.quick-links-horizontal.second-row {
    margin-top: 0 !important;
}

.quick-links-horizontal li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.quick-links-horizontal a {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    transition: color 0.3s ease !important;
    white-space: nowrap !important;
}

.quick-links-horizontal a:hover {
    color: #ffffff !important;
}

.contact-list-horizontal {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-end !important;
}

.contact-list-horizontal li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.contact-list-horizontal img {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    display: block !important;
    background: transparent !important;
}

.contact-list-horizontal a {
    color: #94a3b8 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    white-space: nowrap !important;
}

.contact-list-horizontal a:hover {
    color: #ffffff !important;
}

.social-links {
    display: flex !important;
    gap: 12px !important;
}

.social-links a {
    background: transparent !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    border: none !important;
}

.social-links a:hover {
    transform: translateY(-3px) scale(1.1) !important;
    background: transparent !important;
}

.social-links img {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    object-fit: contain !important;
    background: transparent !important;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
}

.footer-bottom a {
    color: #94a3b8;
}

.footer-bottom a:hover {
    color: #ffffff;
}

@media (max-width: 992px) {
    .footer-top-row {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center !important;
    }
    .footer-col-logo {
        align-items: center !important;
    }
    .social-links {
        justify-content: center !important;
    }
    .footer-col-contact {
        text-align: center !important;
    }
    .contact-list-horizontal {
        align-items: center !important;
    }
    .quick-links-horizontal {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .quick-links-horizontal {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px 12px !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    .quick-links-horizontal li {
        text-align: center !important;
    }
    .quick-links-horizontal a {
        font-size: 12px !important;
        display: block !important;
    }
    .contact-list-horizontal {
        align-items: center !important;
    }
    .contact-list-horizontal li {
        justify-content: center !important;
    }
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 999;
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    animation: pulse 2s infinite;
}

.whatsapp-float a:hover {
    transform: scale(1.1);
    background-color: #128C7E;
    animation: none;
}

.whatsapp-float a img {
    width: 32px;
    height: 32px;
    display: block;
    filter: brightness(0) invert(1);
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top {
    background: #ffffff;
    position: fixed;
    left: 25px;
    bottom: 109px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99em;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all 0.3s linear;
}

.back-to-top.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top svg.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.back-to-top svg.progress-circle path {
    fill: none;
    stroke: #4169e1;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.back-to-top .arrow-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    transition: var(--transition);
    pointer-events: none;
    object-fit: contain;
}

.back-to-top:hover .arrow-icon {
    opacity: 0.8;
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background: #1a1a2e;
    color: #ffffff;
    padding: 20px 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 3px solid #ff6b35;
}

.cookie-consent.visible {
    transform: translateY(0);
}

.cookie-consent .cookie-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.cookie-consent .cookie-content {
    flex: 1;
    min-width: 280px;
}

.cookie-consent .cookie-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.cookie-consent .cookie-content p a {
    color: #ff6b35;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
}

.cookie-consent .cookie-content p a:hover {
    color: #ff8c5a;
}

.cookie-consent .cookie-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cookie-consent .cookie-btn-accept {
    background: #ff6b35;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-consent .cookie-btn-accept:hover {
    background: #e55a2b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35);
}

.cookie-consent .cookie-btn-decline {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-consent .cookie-btn-decline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

@media (max-width: 768px) {
    .cookie-consent .cookie-container {
        flex-direction: column;
        gap: 16px;
        padding: 0 16px;
    }

    .cookie-consent .cookie-content p {
        font-size: 13px;
        text-align: center;
    }

    .cookie-consent .cookie-buttons {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .cookie-consent .cookie-btn-accept,
    .cookie-consent .cookie-btn-decline {
        padding: 10px 20px;
        font-size: 13px;
        flex: 1;
        min-width: 140px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cookie-consent {
        padding: 16px 0;
    }

    .cookie-consent .cookie-content p {
        font-size: 12px;
    }

    .cookie-consent .cookie-btn-accept,
    .cookie-consent .cookie-btn-decline {
        padding: 8px 16px;
        font-size: 12px;
        min-width: 120px;
    }
}

/* ============================================
   FAQ - SISTEMA UNIFICADO
   ============================================ */

.faq-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    overflow: hidden;
}

.faq-header {
    padding: 24px 28px;
    background: #f8fafc;
    border-bottom: 2px solid #f1f5f9;
}

.faq-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Playfair Display', serif;
}

.faq-title i {
    color: #ff6b35;
    font-size: 1.4rem;
}

.faq-list {
    padding: 4px 0;
}

.faq-item {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item.active {
    background: #fafcff;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 28px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1rem;
    color: #1a1a2e;
    text-align: left;
    transition: all 0.25s ease;
    user-select: none;
}

.faq-question:hover {
    background: rgba(255, 107, 53, 0.04);
}

.faq-question:focus-visible { /* solo con teclado: el marco no sale al hacer clic */
    outline: 2px solid #ff6b35;
    outline-offset: -2px;
    border-radius: 4px;
}

.faq-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.faq-item.active .faq-number {
    background: #ff6b35;
    color: #ffffff;
}

.faq-text {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
}

.faq-arrow {
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.faq-arrow i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-arrow i {
    transform: rotate(180deg);
    color: #ff6b35;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.faq-answer.show {
    max-height: 800px;
    opacity: 1;
}

.faq-answer-content {
    padding: 0 24px 20px 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.faq-answer-marker {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #f59e0b;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 2px;
}

.faq-answer-text {
    flex: 1;
    color: #4a5568;
    line-height: 1.7;
    font-size: 0.95rem;
}

.faq-answer-text ul,
.faq-answer-text ol {
    padding-left: 20px;
    margin: 8px 0;
}

/* El reset "ul, ol { list-style: none }" quitaría las viñetas de estas listas */
.faq-answer-text ul,
.faq-compact-answer .faq-a-text ul {
    list-style: disc;
}

.faq-answer-text ol,
.faq-compact-answer .faq-a-text ol {
    list-style: decimal;
}

.faq-answer-text a {
    color: #ff6b35;
    text-decoration: none;
    font-weight: 500;
}

.faq-answer-text a:hover {
    text-decoration: underline;
}

.faq-compact-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.faq-compact-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 15px;
}

.faq-compact-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    background: #f8fafc;
}

.faq-compact-header:hover {
    background: #f1f5f9;
}

.faq-compact-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Playfair Display', serif;
}

.faq-compact-title i {
    color: #ff6b35;
    font-size: 1.3rem;
}

.faq-compact-icon {
    color: #94a3b8;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
}

.faq-compact-container.open .faq-compact-icon {
    transform: rotate(180deg);
    color: #ff6b35;
}

.faq-compact-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-compact-container.open .faq-compact-body {
    max-height: 2000px;
}

.faq-compact-item {
    border-top: 1px solid #f1f5f9;
}

.faq-compact-btn {
    width: 100%;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
    text-align: left;
    transition: all 0.3s ease;
    font-family: 'Lato', Arial, sans-serif;
    position: relative;
}

.faq-compact-btn:hover {
    background: #f8fafc;
    color: #ff6b35;
}

.faq-compact-btn .faq-q-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #ff6b35;
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-compact-btn .faq-q-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.faq-compact-btn .faq-toggle-icon {
    color: #94a3b8;
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.faq-compact-btn[aria-expanded="true"] .faq-toggle-icon {
    transform: rotate(45deg);
    color: #ff6b35;
}

.faq-compact-answer {
    padding: 0 20px 20px 54px;
    display: none;
    gap: 10px;
    align-items: flex-start;
}

.faq-compact-answer .faq-a-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fef3c7;
    color: #f59e0b;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.faq-compact-answer .faq-a-text {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.7;
    flex: 1;
}

.faq-compact-answer .faq-a-text ul,
.faq-compact-answer .faq-a-text ol {
    padding-left: 20px;
    margin: 8px 0;
}

.faq-compact-answer .faq-a-text a {
    color: #ff6b35;
    text-decoration: none;
}

.faq-compact-answer .faq-a-text a:hover {
    text-decoration: underline;
}

.faq-search-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.faq-search {
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    background: #f7fafc;
    transition: all 0.3s ease;
    font-family: 'Lato', Arial, sans-serif;
}

.faq-search:focus {
    outline: none;
    border-color: #ff6b35;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}

.faq-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 18px;
}

.faq-counter {
    text-align: center;
    color: #718096;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 10px;
    background: #f7fafc;
    border-radius: 8px;
}

.faq-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
}

.faq-filter {
    padding: 8px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 30px;
    background: transparent;
    color: #4a5568;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lato', Arial, sans-serif;
}

.faq-filter:hover {
    border-color: #ff6b35;
    color: #ff6b35;
}

.faq-filter.active {
    background: #ff6b35;
    border-color: #ff6b35;
    color: white;
}

.faq-show-all {
    display: inline-block;
    padding: 10px 28px;
    background: #ff6b35;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lato', Arial, sans-serif;
    margin-top: 20px;
}

.faq-show-all:hover {
    background: #e55a2b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

@media (max-width: 768px) {
    .faq-container { padding: 0 12px; }
    .faq-header { padding: 18px 20px; }
    .faq-title { font-size: 1.05rem; }
    .faq-question { padding: 14px 20px; font-size: 0.92rem; gap: 12px; }
    .faq-question .faq-text { font-size: 0.85rem; }
    .faq-answer-content { padding: 0 16px 16px 16px; }
    .faq-answer-text { font-size: 0.85rem; }
    .faq-number { width: 28px; height: 28px; font-size: 0.65rem; }
    .faq-answer.show { padding: 0 20px 16px 20px; }
    .faq-compact-wrapper { padding: 15px; }
    .faq-compact-header { padding: 14px 16px; }
    .faq-compact-title { font-size: 0.95rem; }
    .faq-compact-btn { padding: 12px 16px; font-size: 0.85rem; gap: 10px; }
    .faq-compact-btn .faq-q-text { font-size: 0.82rem; }
    .faq-compact-btn .faq-q-marker { width: 20px; height: 20px; font-size: 0.55rem; }
    .faq-compact-answer { padding: 0 16px 16px 46px; }
    .faq-compact-answer .faq-a-text { font-size: 0.82rem; }
    .faq-search { font-size: 14px; padding: 12px 16px 12px 42px; }
}

@media (max-width: 480px) {
    .faq-question { padding: 12px 14px; font-size: 14px; gap: 10px; }
    .faq-question .faq-number { min-width: 22px; height: 22px; line-height: 22px; font-size: 11px; }
    .faq-question .faq-text { font-size: 0.8rem; }
    .faq-answer-content { padding: 0 14px 14px 14px; }
    .faq-answer-text { font-size: 0.8rem; }
    .faq-answer-marker { width: 22px; height: 22px; font-size: 0.6rem; }
    .faq-compact-title { font-size: 0.85rem; }
    .faq-compact-btn { padding: 10px 14px; font-size: 0.8rem; gap: 8px; }
    .faq-compact-btn .faq-q-text { font-size: 0.75rem; }
    .faq-compact-answer { padding: 0 14px 14px 38px; }
    .faq-compact-answer .faq-a-text { font-size: 0.75rem; }
}

/* ============================================
   RESPONSIVE GENERAL
   ============================================ */
@media (max-width: 992px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-selectors {
        display: flex !important;
    }
    .mobile-menu-toggle {
        display: flex;
        z-index: 10001;
        position: relative;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        height: 100dvh; /* 100vh en móvil incluye la barra del navegador */
        background: #ffffff;
        padding: 80px 16px 120px; /* 120px abajo: sitio para el aviso de cookies */
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10000;
        overflow-y: auto;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        border-radius: 0;
    }

    .main-nav.active {
        right: 0;
        left: auto;
    }

    /* El fondo oscuro es un elemento aparte (.nav-overlay) y va DETRÁS del panel;
       como pseudo-elemento se pintaba encima y el menú salía gris. */
    .site-header.nav-open .nav-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        animation: fadeInOverlay 0.3s ease;
    }

    @keyframes fadeInOverlay {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .nav-menu {
        flex-direction: column;
        gap: 2px;
        padding: 0;
        margin: 0;
        width: 100%;
        flex: 1 1 100%;
    }

    .nav-menu > li {
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 10px;
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        text-decoration: none;
        border-bottom: none;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 10001;
        position: relative;
    }

    .mobile-menu-toggle span {
        width: 26px;
        height: 3px;
        background: #000000;
        border-radius: 2px;
        transition: all 0.3s ease;
        transform-origin: center;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: var(--header-height-mobile);
    }
    body {
        padding-top: 0;
    }
    .logo img {
        height: 38px;
    }
}

@media (max-width: 480px) {
    .logo img {
        height: 32px;
    }
}

@media print {
    .site-header,
    .footer,
    .hero-scroll,
    .cta-section,
    .whatsapp-float,
    .back-to-top {
        display: none !important;
    }
    body { padding-top: 0 !important; }
}

/* ============================================
   HERO BANNER
   ============================================ */

.hero-new {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 800px;
    min-height: 500px;
    overflow: hidden;
    margin-top: 0;
    background: linear-gradient(135deg, #7a4a2b, #c9824a); /* fondo mientras no hay imagen */
}

.hero-slider-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slider-new .slide-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.hero-slider-new .slide-new.active {
    opacity: 1;
    z-index: 2;
}

.hero-slider-new .slide-new picture,
.hero-slider-new .slide-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
    z-index: 3;
    pointer-events: none;
}

.hero-content-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0 40px 80px;
    gap: 40px;
}

.hero-text {
    flex: 1;
    max-width: 55%;
    color: #ffffff;
    align-self: center;
    padding-left: 0;
}

.hero-text h1 {
    font-size: clamp(2.5rem, 4.5vw, 4.2rem);
    font-family: var(--font-title, 'Playfair Display', serif);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.5px;
}

.hero-text p {
    font-size: clamp(1rem, 1.3vw, 1.4rem);
    line-height: 1.6;
    opacity: 0.92;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    max-width: 90%;
    font-weight: 300;
}

.hero-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 20px;
    padding-right: 0;
    margin-right: 0;
    width: auto;
}

.hero-thumbnails {
    display: flex;
    flex-direction: row;
    gap: 14px;
    padding-right: 0;
    margin-right: 0;
}

.hero-thumb {
    width: 200px;
    height: 300px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
}

.hero-thumb:last-child {
    border-radius: 14px 0 0 14px;
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hero-thumb:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.4);
}

.hero-thumb:hover img {
    transform: scale(1.08);
}

.hero-thumb.active {
    border-color: #ffffff;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.25), 0 8px 35px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}

.hero-thumb .thumb-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffffff;
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.hero-thumb.active .thumb-badge {
    opacity: 1;
}

.hero-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    justify-content: flex-start;
    width: 100%;
    margin-top: 12px;
    padding-left: 0;
}

.hero-nav-btn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.hero-counter {
    min-width: 60px;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    font-weight: 300;
}

@media (max-width: 1200px) {
    .hero-thumb { width: 160px; height: 240px; }
    .hero-thumbnails { gap: 12px; }
}

@media (max-width: 1024px) {
    .hero-content-new { padding: 40px 20px 30px 40px; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
    .hero-text { max-width: 100%; text-align: center; align-self: center; padding-left: 0; }
    .hero-text h1 { font-size: clamp(2rem, 4vw, 3rem); }
    .hero-text p { font-size: clamp(0.95rem, 1.2vw, 1.2rem); max-width: 100%; margin-left: auto; margin-right: auto; }
    .hero-sidebar { align-items: center; align-self: center; margin-bottom: 0; padding-right: 0; width: 100%; }
    .hero-thumb { width: 120px; height: 180px; border-radius: 12px; border-right: 3px solid rgba(255, 255, 255, 0.2); }
    .hero-thumb:last-child { border-radius: 12px; border-right: 3px solid rgba(255, 255, 255, 0.2); }
    .hero-thumbnails { gap: 10px; padding-right: 0; justify-content: center; }
    .hero-thumb .thumb-badge { width: 24px; height: 24px; font-size: 0.7rem; top: 8px; right: 8px; }
    .hero-nav-btn { width: 40px; height: 40px; font-size: 1.1rem; }
    .hero-navigation { justify-content: center; }
}

@media (max-width: 768px) {
    .hero-new { max-height: 600px; min-height: 400px; }
    .hero-content-new { padding: 20px 15px 15px 20px; flex-direction: column; justify-content: center; gap: 20px; }
    .hero-text h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
    .hero-text p { font-size: clamp(0.85rem, 1.8vw, 1rem); }
    .hero-thumb { width: 85px; height: 128px; border-radius: 10px; border-right: 3px solid rgba(255, 255, 255, 0.2); }
    .hero-thumb:last-child { border-radius: 10px; border-right: 3px solid rgba(255, 255, 255, 0.2); }
    .hero-thumbnails { gap: 8px; padding-right: 0; justify-content: center; }
    .hero-nav-btn { width: 36px; height: 36px; font-size: 1rem; }
    .hero-counter { font-size: 0.9rem; min-width: 50px; }
    .hero-thumb .thumb-badge { width: 20px; height: 20px; font-size: 0.6rem; top: 6px; right: 6px; }
    .hero-navigation { justify-content: center; }
}

@media (max-width: 480px) {
    .hero-new { max-height: 450px; min-height: 350px; }
    .hero-content-new { padding: 12px 10px 10px 12px; flex-direction: column; gap: 14px; }
    .hero-text h1 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: 8px; }
    .hero-text p { font-size: clamp(0.7rem, 1.5vw, 0.8rem); }
    .hero-thumb { width: 55px; height: 83px; border-radius: 8px; border-width: 2px; border-right: 2px solid rgba(255, 255, 255, 0.2); }
    .hero-thumb:last-child { border-radius: 8px; border-right: 2px solid rgba(255, 255, 255, 0.2); }
    .hero-thumbnails { gap: 6px; padding-right: 0; justify-content: center; }
    .hero-nav-btn { width: 30px; height: 30px; font-size: 0.8rem; }
    .hero-counter { font-size: 0.75rem; min-width: 40px; }
    .hero-thumb .thumb-badge { width: 16px; height: 16px; font-size: 0.5rem; top: 5px; right: 5px; }
    .hero-navigation { justify-content: center; }
}

/* ============================================
   HERO NEW - FIX SIN ESPACIO EN BLANCO
   ============================================ */

body {
    padding-top: 0;
}

.hero-new {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 900px !important;
    min-height: 500px !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    background: #f8fafc !important; /* fondo gris claro mientras no hay imagen */
}

@media (min-width: 1440px) {
    .hero-new {
        height: 100vh !important;
        max-height: 900px !important;
        min-height: 650px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .hero-new {
        height: 100vh !important;
        max-height: 800px !important;
        min-height: 550px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body {
        padding-top: 0;
    }
    .hero-new {
        height: 100vh !important;
        max-height: 700px !important;
        min-height: 500px !important;
    }
}

@media (max-width: 767px) {
    body {
        padding-top: 0;
    }
    .hero-new {
        height: 100vh !important;
        max-height: 600px !important;
        min-height: 400px !important;
    }
}

@media (max-width: 479px) {
    .hero-new {
        height: 100vh !important;
        max-height: 500px !important;
        min-height: 380px !important;
    }
}

.hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* ============================================
   OPTIMIZACIONES DE RENDIMIENTO
   ============================================ */

.whatsapp-float a {
    will-change: box-shadow;
}

.whatsapp-float a:hover {
    will-change: auto;
}

.hero-slider-new .slide-new {
    backface-visibility: hidden;
    transform: translateZ(0);
}

a {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* ============================================
   CONTENT-VISIBILITY - Optimización de render
   ============================================ */
.zones-preview,
.about,
.gallery-preview,
.google-reviews-section,
.faq-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* ============================================
   ESTILOS MOVIDOS DESDE INLINE
   ============================================ */

.service-item--quad {
    background-image: url('/assets/images/webp/pages/accueil/quad-card.webp');
    background-color: #5b3a24;
}

.service-item--camel {
    background-image: url('/assets/images/webp/pages/accueil/camel-card.webp');
    background-color: #7a4a2b;
}

.service-item--balloon {
    background-image: url('/assets/images/webp/pages/accueil/balloon-card.webp');
    background-color: #a8643a;
}

.google-reviews-section {
    padding: 80px 0;
    background: #ffffff;
}

.trustindex-widget-wrapper {
    min-height: 200px;
}

.faq-section {
    padding: 60px 0;
    background: #f8fafc;
}

.cookie-consent {
    display: none;
}

.cookie-consent.visible {
    display: block !important;
}

.trustindex-widget-wrapper .ti-widget .ti-star-icon-default,
.trustindex-widget-wrapper .ti-widget .ti-star-icon,
.trustindex-widget-wrapper .ti-widget .ti-review-image,
.trustindex-widget-wrapper .ti-widget .ti-profile-img,
.trustindex-widget-wrapper .ti-widget .ti-header-logo {
    display: none;
}

/* ============================================
   SEO LOCAL - CONTACTO EN FOOTER
   ============================================ */

.footer-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.footer-contact-text {
    line-height: 1.5;
}

.footer-contact-link {
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-contact-link:hover {
    color: #ffffff !important;
}

@media (max-width: 992px) {
    .footer-contact-item {
        justify-content: center !important;
        text-align: center;
    }
}

/* ============================================
   FIX HERO - CENTRADO REAL EN MÓVIL
   ============================================ */

@media (max-width: 992px) {
    .hero-content-new {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 16px;
        gap: 20px;
        height: 100%;
    }

    .hero-text {
        max-width: 100%;
        width: 100%;
        text-align: center;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero-text h1 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .hero-text p {
        margin-bottom: 0;
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-sidebar {
        margin-top: auto;
        margin-bottom: 10px;
        align-self: center;
        width: 100%;
    }

    .hero-navigation {
        justify-content: center;
        margin-top: 8px;
    }
}

@media (max-width: 767px) {
    .hero-content-new {
        justify-content: center;
        padding: 16px 14px;
        gap: 16px;
    }

    .hero-text h1 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .hero-text p {
        font-size: clamp(0.8rem, 3vw, 0.95rem);
        line-height: 1.4;
    }

    .hero-sidebar {
        margin-bottom: 6px;
    }
}

@media (max-width: 479px) {
    .hero-content-new {
        padding: 12px 10px;
        gap: 12px;
    }

    .hero-text h1 {
        font-size: clamp(1.35rem, 6.2vw, 1.5rem); /* ~23px en un móvil de 375px */
        margin-bottom: 6px;
    }

    .hero-text p {
        font-size: clamp(0.82rem, 3.6vw, 0.9rem); /* ~13,5px en un móvil de 375px */
    }
}

/* ============================================
   FIX FAQ - Modo oscuro y overrides
   ============================================ */

.faq-compact-header,
.faq-compact-header:hover {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.faq-compact-title,
h3.faq-compact-title {
    color: #1a1a2e !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.faq-compact-title i {
    color: #ff6b35 !important;
}

.faq-compact-icon,
.faq-compact-container .faq-compact-icon {
    color: #64748b !important;
}

.faq-compact-container.open .faq-compact-icon {
    color: #ff6b35 !important;
}

.faq-compact-body {
    background: #ffffff !important;
}

.faq-compact-item {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

.faq-compact-btn,
button.faq-compact-btn {
    color: #1a1a2e !important;
    background: #ffffff !important;
}

.faq-compact-btn:hover {
    background: #f8fafc !important;
    color: #ff6b35 !important;
}

.faq-compact-btn .faq-q-text,
span.faq-q-text {
    color: inherit !important;
}

.faq-compact-btn .faq-toggle-icon {
    color: #94a3b8 !important;
}

.faq-compact-btn[aria-expanded="true"] .faq-toggle-icon {
    color: #ff6b35 !important;
}

.faq-compact-answer {
    background: #ffffff !important;
}

.faq-compact-answer .faq-a-text,
span.faq-a-text {
    color: #475569 !important;
}

/* Desactivar cualquier prefers-color-scheme para el FAQ */
@media (prefers-color-scheme: dark) {
    .faq-compact-container,
    .faq-compact-header,
    .faq-compact-body,
    .faq-compact-item,
    .faq-compact-btn,
    .faq-compact-answer {
        background: #ffffff !important;
    }

    .faq-compact-header {
        background: #f8fafc !important;
    }

    .faq-compact-title,
    .faq-compact-btn,
    .faq-compact-btn .faq-q-text,
    .faq-compact-answer .faq-a-text {
        color: #1a1a2e !important;
    }

    .faq-compact-answer .faq-a-text {
        color: #475569 !important;
    }

    .faq-compact-icon {
        color: #64748b !important;
    }
}

/* ============================================
   HEADER TRANSPARENTE → SÓLIDO CON SCROLL
   SOLO EN LA HOME (.header-transparent)
   ============================================ */

/* --- ESTADO 1: ARRIBA (transparente) --- SOLO HOME --- */

header.site-header.header-transparent:not(.scrolled) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

header.site-header.header-transparent:not(.scrolled) .top-bar-superior {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

header.site-header.header-transparent:not(.scrolled) .main-header {
    background: transparent !important;
    background-color: transparent !important;
}

header.site-header.header-transparent:not(.scrolled) .top-bar-superior .scrolling-text,
header.site-header.header-transparent:not(.scrolled) .top-bar-contact a {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.6) !important;
}

header.site-header.header-transparent:not(.scrolled) .top-bar-contact a:hover {
    color: #ff6b35 !important;
}

header.site-header.header-transparent:not(.scrolled) .nav-menu > li > a {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.6) !important;
}

header.site-header.header-transparent:not(.scrolled) .nav-menu > li > a:hover {
    color: #ff6b35 !important;
}

header.site-header.header-transparent:not(.scrolled) .lang-btn,
header.site-header.header-transparent:not(.scrolled) .currency-btn,
header.site-header.header-transparent:not(.scrolled) .lang-btn-mobile,
header.site-header.header-transparent:not(.scrolled) .currency-btn-mobile {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
}

header.site-header.header-transparent:not(.scrolled) .lang-btn span,
header.site-header.header-transparent:not(.scrolled) .currency-btn span,
header.site-header.header-transparent:not(.scrolled) .lang-btn-mobile span,
header.site-header.header-transparent:not(.scrolled) .currency-btn-mobile span {
    color: #ffffff !important;
}

header.site-header.header-transparent:not(.scrolled) .lang-btn:hover,
header.site-header.header-transparent:not(.scrolled) .currency-btn:hover,
header.site-header.header-transparent:not(.scrolled) .lang-btn-mobile:hover,
header.site-header.header-transparent:not(.scrolled) .currency-btn-mobile:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

header.site-header.header-transparent:not(.scrolled) .btn-contact {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(8px);
}

header.site-header.header-transparent:not(.scrolled) .btn-contact:hover {
    background: #25D366 !important;
    color: #ffffff !important;
    border-color: #25D366 !important;
}

header.site-header.header-transparent:not(.scrolled) .mobile-menu-toggle span {
    background: #ffffff !important;
}

header.site-header.header-transparent:not(.scrolled) .logo img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)) !important;
}

/* --- ESTADO 2: SCROLL (header sólido) --- SOLO HOME --- */

header.site-header.header-transparent.scrolled {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
}

header.site-header.header-transparent.scrolled .top-bar-superior {
    background: #FFD700 !important;
    background-color: #FFD700 !important;
    border-bottom: 1px solid #e6c200 !important;
}

header.site-header.header-transparent.scrolled .top-bar-superior .scrolling-text,
header.site-header.header-transparent.scrolled .top-bar-contact a {
    color: #000000 !important;
    text-shadow: none !important;
}

header.site-header.header-transparent.scrolled .main-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

header.site-header.header-transparent.scrolled .nav-menu > li > a {
    color: #000000 !important;
    text-shadow: none !important;
}

header.site-header.header-transparent.scrolled .lang-btn,
header.site-header.header-transparent.scrolled .currency-btn,
header.site-header.header-transparent.scrolled .lang-btn-mobile,
header.site-header.header-transparent.scrolled .currency-btn-mobile {
    background: #f0f0f0 !important;
    border-color: #cccccc !important;
    color: #000000 !important;
}

header.site-header.header-transparent.scrolled .lang-btn span,
header.site-header.header-transparent.scrolled .currency-btn span,
header.site-header.header-transparent.scrolled .lang-btn-mobile span,
header.site-header.header-transparent.scrolled .currency-btn-mobile span {
    color: #000000 !important;
}

header.site-header.header-transparent.scrolled .btn-contact {
    background: #25D366 !important;
    color: #ffffff !important;
    border: none !important;
}

header.site-header.header-transparent.scrolled .mobile-menu-toggle span {
    background: #000000 !important;
}

header.site-header.header-transparent.scrolled .logo img {
    filter: none !important;
}

/* --- Transiciones suaves --- */

header.site-header,
header.site-header .top-bar-superior,
header.site-header .main-header,
header.site-header .nav-menu > li > a,
header.site-header .lang-btn,
header.site-header .currency-btn,
header.site-header .lang-btn-mobile,
header.site-header .currency-btn-mobile,
header.site-header .btn-contact,
header.site-header .logo img {
    transition: background 0.3s ease,
                background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                filter 0.3s ease !important;
}
/* ============================================
   CABECERA: QUE NADA SE SALGA NI SE DEFORME
   Entre 993 y 1270px (iPad horizontal, portátiles pequeños) el selector de
   idioma y el botón de contacto tienen que caber sin tapar el menú.
   En móviles de 320-390px el selector no debe montarse sobre el logo.
   ============================================ */
/* El logo conserva siempre su ancho. Con "max-width: 100%" (regla general de img)
   su caja se encogía cuando faltaba sitio y el selector de idioma se le montaba encima. */
.logo img {
    max-width: none;
}

/* --- Escritorio (menú horizontal) --- */
@media (min-width: 993px) {
    .nav-wrapper,
    .main-nav {
        min-width: 0;
    }

    /* Último recurso: si en algún idioma el menú no cabe, pasa a dos filas
       en vez de empujar fuera de la pantalla la moneda y el botón de contacto */
    .nav-menu {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

@media (min-width: 993px) and (max-width: 1360px) {
    .main-header .container-full {
        gap: 14px;
    }

    .nav-menu {
        column-gap: 12px;
    }

    .header-selectors {
        gap: 8px;
    }
}

@media (min-width: 993px) and (max-width: 1240px) {
    /* Idioma: solo bandera + flecha */
    .lang-btn .lang-name {
        display: none;
    }

    .lang-btn {
        padding: 8px 12px !important;
    }

    .nav-menu {
        column-gap: 10px;
    }

    .nav-menu > li > a {
        font-size: 12.5px;
    }

    .logo img {
        height: 40px;
    }
}

@media (min-width: 993px) and (max-width: 1100px) {
    /* El botón flotante de WhatsApp ya cumple esta función */
    .header-contact.desktop-only {
        display: none !important;
    }

    .main-header .container-full {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* --- Móvil y tablet (menú hamburguesa) --- */
@media (max-width: 600px) {
    /* Deja sitio al texto promocional: el email sigue en el pie de página */
    .top-bar-contact a[href^="mailto:"] {
        display: none;
    }

    .top-bar-superior-container {
        padding: 0 14px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .main-header .container-full {
        padding: 12px 14px;
        gap: 10px;
    }

    .mobile-selectors {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .lang-btn-mobile {
        padding: 6px 9px;
    }

    .currency-btn-mobile {
        padding: 4px 8px !important;
    }

    .mobile-menu-toggle {
        padding: 6px;
    }
}

@media (max-width: 350px) {
    .main-header .container-full {
        padding: 12px 10px;
        gap: 8px;
    }

    .logo img {
        height: 28px;
    }

    .currency-btn-mobile .currency-arrow {
        display: none;
    }
}

/* ============================================
   MENÚ MÓVIL (≤992px)
   Estas mismas reglas están también en línea en header.php.
   ============================================ */
.mega-menu-overview { display: none; }
.nav-overlay { display: none; }

@media (max-width: 992px) {
    /* Texto oscuro también en la home (cabecera transparente → enlaces blancos sobre panel blanco) */
    header.site-header .main-nav .nav-menu > li > a,
    header.site-header.header-transparent:not(.scrolled) .main-nav .nav-menu > li > a {
        color: #1a1a1a !important;
        text-shadow: none !important;
        white-space: normal;
    }
    header.site-header .main-nav .nav-menu > li.active > a,
    header.site-header.header-transparent:not(.scrolled) .main-nav .nav-menu > li.active > a,
    header.site-header .main-nav .nav-menu > li > a:hover,
    header.site-header.header-transparent:not(.scrolled) .main-nav .nav-menu > li > a:hover {
        color: #ff6b35 !important;
    }

    /* Botón de cerrar (X) oscuro sobre el panel blanco */
    header.site-header .mobile-menu-toggle.active span,
    header.site-header.header-transparent:not(.scrolled) .mobile-menu-toggle.active span {
        background: #1a1a1a !important;
    }

    /* Barra superior sólida mientras el menú está abierto */
    header.site-header.nav-open .top-bar-superior,
    header.site-header.header-transparent.nav-open:not(.scrolled) .top-bar-superior {
        background: #ffd700 !important;
        border-bottom: 1px solid #e6c200 !important;
    }
    header.site-header.nav-open .top-bar-superior .scrolling-text,
    header.site-header.nav-open .top-bar-contact a,
    header.site-header.header-transparent.nav-open:not(.scrolled) .top-bar-superior .scrolling-text,
    header.site-header.header-transparent.nav-open:not(.scrolled) .top-bar-contact a {
        color: #000 !important;
        text-shadow: none !important;
    }

    /* Idioma y moneda legibles sobre el panel blanco (en la home eran blanco sobre blanco) */
    header.site-header.header-transparent.nav-open:not(.scrolled) .lang-btn-mobile,
    header.site-header.header-transparent.nav-open:not(.scrolled) .currency-btn-mobile {
        background: #f0f0f0 !important;
        border-color: #cccccc !important;
        color: #000000 !important;
        backdrop-filter: none;
    }
    header.site-header.header-transparent.nav-open:not(.scrolled) .lang-btn-mobile span,
    header.site-header.header-transparent.nav-open:not(.scrolled) .currency-btn-mobile span {
        color: #000000 !important;
    }

    /* Flecha en las secciones que tienen submenú */
    .main-nav .mega-dropdown > a {
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 12px;
        padding-right: 36px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .main-nav .mega-dropdown.active > a {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 8l4-4 4 4' fill='none' stroke='%23ff6b35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* Submenú en una columna, sin imágenes y sin el resaltado de escritorio */
    .main-nav .mega-menu-container { display: block !important; }
    .main-nav .mega-menu-images { display: none !important; }
    .main-nav .mega-menu-links ul li a { font-size: 14px; padding: 10px 12px; white-space: normal; }
    .main-nav .mega-menu-links ul li a.active { background: transparent; color: #1a1a1a; padding-left: 12px; }
    .main-nav .mega-menu-links ul li a.active:hover { background: #ff6b35; color: #fff; }
    .main-nav .mega-menu-overview { display: block; }
    .main-nav .mega-menu-overview a { font-weight: 700; }
}

/* ============================================
   BANDERAS DEL SELECTOR DE MONEDA
   ============================================ */
.currency-flag {
    width: 16px;
    height: 12px;
    flex: 0 0 auto;
}

.currency-dropdown a,
.currency-dropdown-mobile a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap;
}

/* ============================================
   "REDUCIR MOVIMIENTO" (preferencia de accesibilidad del sistema)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .whatsapp-float a {
        animation: none;
    }
}


/* ============================================================
   HOME: AJUSTES DEL HERO
   (antes <style> en línea en index.php)

   Se mantiene !important porque más arriba hay reglas
   duplicadas del hero (buscar ".hero-content-new": ~líneas 2835-3050
   y ~3248 en adelante) que, si no, pisarían estas. Cuando se borren
   esas duplicadas se puede quitar el !important sin cambiar el diseño.
   ============================================================ */
.hero-content-new { align-items: stretch !important; padding: 80px 0 0 80px !important; }
.hero-text { align-self: center !important; }
.hero-sidebar { justify-content: flex-end !important; align-self: stretch !important; margin-bottom: 100px !important; padding-bottom: 0 !important; height: auto !important; gap: 16px !important; }
.hero-thumbnails { margin-bottom: 0 !important; padding-bottom: 0 !important; gap: 10px !important; }
.hero-thumb { width: 140px !important; height: 210px !important; border-radius: 10px !important; }
.hero-thumb .thumb-badge { width: 22px !important; height: 22px !important; font-size: 0.65rem !important; top: 6px !important; right: 6px !important; }
.hero-navigation { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; color: #fff !important; font-size: 1rem !important; font-weight: 500 !important; letter-spacing: 1px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.hero-nav-btn { background: rgba(255,255,255,.15) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,.2) !important; color: #fff !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 1.1rem !important; cursor: pointer !important; transition: all .3s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.hero-nav-btn:hover { background: rgba(255,255,255,.3) !important; transform: scale(1.1) !important; }
.hero-counter { min-width: 60px !important; text-align: center !important; font-size: 1rem !important; letter-spacing: 1px !important; text-shadow: 0 2px 15px rgba(0,0,0,.5) !important; font-weight: 300 !important; color: #fff !important; }
@media (max-width: 1200px) { .hero-thumb { width: 120px !important; height: 180px !important; } }
@media (max-width: 1024px) {
    /* 100px arriba = alto de la cabecera fija (93–103px), para que no tape el texto */
    .hero-content-new { align-items: center !important; justify-content: center !important; padding: 100px 20px 0 20px !important; }
    /* el bloque de texto ocupa el hueco libre y se centra en vertical */
    .hero-text { align-self: center !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
    .hero-sidebar { align-self: center !important; justify-content: flex-end !important; height: auto !important; width: 100% !important; margin-bottom: 100px !important; }
    .hero-thumbnails { justify-content: center !important; gap: 10px !important; }
    .hero-thumb { width: 100px !important; height: 150px !important; }
    .hero-navigation { justify-content: center !important; }
}
@media (max-width: 768px) {
    .hero-sidebar { margin-bottom: 80px !important; }
    .hero-thumb { width: 80px !important; height: 120px !important; }
    .hero-thumb .thumb-badge { width: 18px !important; height: 18px !important; font-size: .55rem !important; top: 5px !important; right: 5px !important; }
    .hero-nav-btn { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
    .hero-counter { font-size: .9rem !important; min-width: 50px !important; }
}
@media (max-width: 480px) {
    .hero-sidebar { margin-bottom: 60px !important; }
    .hero-thumb { width: 65px !important; height: 98px !important; border-radius: 8px !important; }
    .hero-nav-btn { width: 32px !important; height: 32px !important; font-size: .85rem !important; }
    .hero-counter { font-size: .8rem !important; min-width: 45px !important; }
}


/* ============================================================
   HOME: FRANJA DE CONFIANZA Y ARTÍCULOS DEL BLOG
   ============================================================ */
.trust-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    padding: 22px 0;
}

.trust-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.12);
    color: var(--color-primary);
    font-size: 1.1rem;
}

.trust-item strong,
.trust-item span {
    display: block;
}

.trust-item strong {
    font-size: 0.95rem;
    line-height: 1.3;
}

.trust-item span {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-text-light);
}

.blog-preview {
    padding: 80px 0;
    background: #ffffff;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.blog-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e2e8f0;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-body {
    padding: 20px;
}

.blog-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.blog-card-body h3 a:hover {
    color: var(--color-primary);
}

.blog-card-body p {
    margin-bottom: 0;
    color: var(--color-text-light);
    font-size: 0.92rem;
}

@media (max-width: 992px) {
    .trust-list { grid-template-columns: repeat(2, 1fr); }
    .blog-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .trust-bar  { padding: 16px 0; }
    .trust-list { gap: 14px 10px; }
    .trust-item { gap: 10px; }
    .trust-icon { width: 36px; height: 36px; font-size: 0.95rem; }
    .trust-item strong { font-size: 0.85rem; }
    .trust-item span   { font-size: 0.75rem; }
    .blog-preview { padding: 56px 0; }
    .blog-grid    { grid-template-columns: 1fr; }
}



/* ==========================================================================
   PÁGINAS DE PRODUCTO (vuelos)
   ========================================================================== */

/* La cabecera es fija (93-103px): el hero deja ese espacio arriba */
.product-page-wrapper { padding-top: 100px; background: #fff; }
@media (max-width: 992px) { .product-page-wrapper { padding-top: 70px; } }

/* Hero: imagen propia por vuelo (las URLs se definen en page-product.php) */
.pp-hero { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 90px 0 60px; margin-bottom: 40px; background: #1a1a2e center / cover no-repeat; }
.pp-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.pp-hero-inner { position: relative; z-index: 1; max-width: 800px; }
.pp-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-bottom: 16px; font-size: .9rem; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.pp-crumbs a { color: #fff; text-decoration: none; }
.pp-crumbs a:hover { text-decoration: underline; }
.pp-crumbs .current { font-weight: 600; }
.pp-hero-title { font-family: var(--font-title); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; color: #fff; margin: 0 0 12px; line-height: 1.2; text-shadow: 0 4px 30px rgba(0, 0, 0, .9); }
.pp-hero-title span { color: var(--color-primary); }
.pp-hero-text { font-size: 1.1rem; font-weight: 300; line-height: 1.6; margin: 0; text-shadow: 0 2px 15px rgba(0, 0, 0, .9); }
@media (max-width: 768px) {
    .pp-hero { min-height: 240px; padding: 60px 0 36px; margin-bottom: 28px; }
    .pp-hero-text { font-size: 1rem; }
}

/* Main grid */
.product-main-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 60px; }
@media (min-width: 1024px) {
    .product-main-grid { grid-template-columns: 1.4fr 1fr; gap: 40px; }
}

/* Mosaic */
.product-mosaic-gallery { display: grid; grid-template-columns: 1fr; gap: 8px; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 600px; }
@media (min-width: 768px) {
    .product-mosaic-gallery { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
}
.mosaic-main { position: relative; overflow: hidden; background: #f5f5f5; cursor: pointer; }
.mosaic-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.mosaic-main:hover img { transform: scale(1.03); }
.mosaic-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.mosaic-thumb { position: relative; overflow: hidden; background: #f5f5f5; cursor: pointer; }
.mosaic-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.mosaic-thumb:hover img { transform: scale(1.05); }
.mosaic-badge { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.75); color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.3s ease; }
.mosaic-badge:hover { background: rgba(0,0,0,0.9); }

/* Info card */
.product-info-card { background: #fff; border: 1px solid #e5e7ef; border-radius: 16px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }

/* USP */
.product-usp-list { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
@media (min-width: 480px) { .product-usp-list { grid-template-columns: 1fr 1fr; } }
.product-usp-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #475569; }
.usp-icon { font-size: 16px; flex-shrink: 0; }

/* Price */
.product-price-block { margin: 24px 0; }
.price-main { font-size: 36px; font-weight: 800; color: #1e293b; line-height: 1; }
.price-promo-hint { margin-top: 8px; font-size: 13px; color: #64748b; }
.price-promo-hint strong { color: #5B2B8C; background: #F3E8FF; padding: 2px 8px; border-radius: 4px; font-weight: 700; }

/* CTA */
.btn-primary-cta { display: block; width: 100%; padding: 16px 24px; background: var(--color-primary); color: #fff; text-align: center; text-decoration: none; border-radius: 12px; font-weight: 700; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.3s ease; margin-top: 24px; border: none; cursor: pointer; }
.btn-primary-cta:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,53,0.3); }

/* Cupón */
.product-promo-coupon { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 16px 20px; background: #5B2B8C; color: #fff; border: none; border-radius: 12px; cursor: pointer; text-align: left; transition: all 0.3s ease; font-family: inherit; }
.product-promo-coupon:hover { background: #4A1F73; transform: translateY(-2px); }
.coupon-icon { font-size: 20px; flex-shrink: 0; }
.coupon-text { flex: 1; font-size: 14px; }
.coupon-text strong { font-size: 16px; font-weight: 800; }
.coupon-code { font-weight: 700; background: rgba(255,255,255,0.15); padding: 2px 8px; border-radius: 4px; margin-left: 4px; }
.coupon-copy { opacity: 0.8; flex-shrink: 0; }

/* Delivery */
.product-delivery-box { margin-top: 24px; padding: 20px; background: #f8fafc; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.delivery-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #475569; }
.delivery-icon { font-size: 16px; flex-shrink: 0; }

/* Included */
.product-included-section { padding: 40px 0; border-top: 1px solid #f1f5f9; }
.product-included-section h2 { font-family: var(--font-title); font-size: 24px; color: #1e293b; margin: 0 0 24px; }
.product-included-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.product-included-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #475569; }
.check-icon { color: #009847; flex-shrink: 0; display: flex; }

/* Accordions */
.product-accordions { padding: 20px 0 60px; }
.product-accordion { border: 1px solid #e5e7ef; border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.product-accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-size: 16px; font-weight: 600; color: #1e293b; cursor: pointer; list-style: none; transition: background 0.2s ease; }
.product-accordion summary::-webkit-details-marker { display: none; }
.product-accordion summary:hover { background: #f8fafc; }
.product-accordion[open] summary svg { transform: rotate(180deg); }
.product-accordion summary svg { transition: transform 0.3s ease; color: #64748b; }
.accordion-content { padding: 0 24px 20px; font-size: 14px; color: #475569; line-height: 1.7; }
.features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.features-list li { display: flex; align-items: center; gap: 10px; }

/* Location */
.product-location-section { padding: 40px 0; border-top: 1px solid #f1f5f9; }
.product-location-section h2 { font-family: var(--font-title); font-size: 20px; margin: 0 0 12px; }
.product-location-section p { color: #64748b; margin-bottom: 12px; }
.link-map { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.link-map:hover { text-decoration: underline; }

.product-related-section { padding: 60px 0; background: #f8fafc; margin-top: 40px; }
.related-main-title { font-family: var(--font-title); font-size: 32px; color: #1e293b; margin: 0 0 8px; }
.related-main-subtitle { color: #64748b; font-size: 15px; margin: 0 0 32px; }

.related-carousel-wrapper { position: relative; }

.related-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 4px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.related-scroll::-webkit-scrollbar { display: none; }

.related-card {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7ef;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}
.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    border-color: transparent;
}

.related-card__img { position: relative; aspect-ratio: 4 / 3; background: #f5f5f5; overflow: hidden; }
.related-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.related-card:hover .related-card__img img { transform: scale(1.05); }

.related-card__dots { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; }
.related-card__dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.related-card__dots .dot.active { background: #fff; }

.related-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.related-card__body h3 {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #1e293b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 43px;
}
.related-card__meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.related-card__meta li { font-size: 13px; color: #64748b; }

.related-card__price { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.related-card__promo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #5B2B8C;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    width: 100%;
}
.related-card__promo small { font-weight: 500; opacity: 0.9; font-size: 11px; }
.related-card__normal { font-size: 18px; font-weight: 800; color: #1e293b; text-align: center; }

/* Flechas */
.related-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    z-index: 2;
}
.related-nav:hover { background: var(--color-primary); transform: translateY(-50%) scale(1.1); }
.related-nav-prev { left: -20px; }
.related-nav-next { right: -20px; }

@media (max-width: 1023px) {
    .related-nav { display: none; } /* en móvil y tablet se usa el scroll táctil */
}
@media (max-width: 640px) {
    .related-card { flex: 0 0 240px; }
    .related-main-title { font-size: 22px; }
    .related-card__body h3 { font-size: 15px; }
}

/* SEO */
.product-seo-links { padding: 40px 0; border-top: 1px solid #f1f5f9; }
.product-seo-links h3 { font-size: 16px; color: #1e293b; margin: 0 0 16px; }
.product-seo-links p { font-size: 14px; line-height: 2; color: #64748b; }
.product-seo-links a { color: #475569; text-decoration: none; transition: color 0.2s ease; }
.product-seo-links a:hover { color: var(--color-primary); }

/* Sticky */
.product-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e5e7ef; box-shadow: 0 -4px 20px rgba(0,0,0,0.08); padding: 12px 16px; display: none; z-index: 999; transform: translateY(100%); transition: transform 0.3s ease; }
.product-sticky-cta.is-visible { display: block; transform: translateY(0); }
.sticky-inner { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; }
.sticky-title { flex: 1; font-size: 13px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-price { font-size: 16px; font-weight: 800; color: #1e293b; white-space: nowrap; }
.sticky-btn { background: var(--color-primary); color: #fff; padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; text-transform: uppercase; }
@media (min-width: 1024px) { .product-sticky-cta { display: none !important; } }

/* Lightbox */
.product-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 100000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.product-lightbox.active { display: flex; opacity: 1; }
.lb-content { max-width: 90vw; max-height: 85vh; }
.lb-content img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.lb-close { position: absolute; top: 20px; right: 30px; background: rgba(255,255,255,0.1); color: #fff; border: none; font-size: 28px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,0.2); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: #fff; border: none; font-size: 32px; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.2); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.8); font-size: 14px; letter-spacing: 1px; }

/* Responsive */
@media (max-width: 1023px) {
    .product-info-card { padding: 24px; }
    .product-h1 { font-size: 24px; }
    .price-main { font-size: 30px; }
    .related-main-title { font-size: 24px; }
}
@media (max-width: 640px) {
    .mosaic-stack { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
    .related-main-title { font-size: 22px; }
    .related-card__body h3 { font-size: 15px; }
}

/* ==========================================================================
   WIDGET DEL TIEMPO (includes/weather-widget.php)
   ========================================================================== */
.weather-widget {
    background: var(--color-bg-light, #f8fafc);
    border-radius: var(--border-radius, 12px);
    padding: 20px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
    margin: 15px 0;
}
.weather-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.weather-header i { font-size: 1.5rem; color: var(--color-primary, #ff6b35); }
.weather-header h4 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--color-text, #1a1a2e); }
.weather-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.weather-temp { font-size: 2rem; font-weight: 700; color: var(--color-primary, #ff6b35); display: flex; align-items: center; gap: 8px; }
.weather-wind { font-size: 1rem; color: var(--color-text-light, #6b7280); }
.weather-wind i, .weather-zone i { margin-right: 5px; color: var(--color-primary, #ff6b35); }
.weather-zone { font-size: 0.85rem; color: var(--color-text-light, #6b7280); }
.weather-status {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    font-size: 0.9rem; color: var(--color-text, #1a1a2e);
}
.weather-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.weather-status-detail { color: var(--color-text-light, #6b7280); font-size: 0.8rem; }
.weather-updated { margin-top: 10px; font-size: 0.75rem; color: var(--color-text-light, #6b7280); }
.weather-error { color: var(--color-text-light, #6b7280); font-size: 0.9rem; text-align: center; padding: 10px; }
.weather-link {
    display: inline-block; margin-top: 15px;
    color: var(--color-primary, #ff6b35); text-decoration: none;
    font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;
}
.weather-link:hover { text-decoration: underline; transform: translateX(3px); }
@media (max-width: 768px) {
    .weather-content { justify-content: center; text-align: center; }
    .weather-temp { font-size: 1.7rem; }
}


/* ============================================
   MAPA DE DESPEGUES (Leaflet): ventanas emergentes, marcadores y tira de 7 días
   Lo usan paragliding-map.php y el mapa de cada página de zona.
   ============================================ */
.leaflet-popup-content-wrapper { border-radius: 10px; padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; min-width: 240px; }

.map-popup { font-family: inherit; }

.map-popup-header {
    padding: 12px 16px;
    background: var(--color-primary);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.map-popup-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-family: 'Playfair Display', serif;
}

.map-popup-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255,255,255,0.25);
    color: white;
}

.map-popup-body { padding: 15px 16px; }

.map-popup-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.map-popup-row:last-child { border-bottom: none; }
.map-popup-row strong { color: var(--color-text); }

.map-popup-desc {
    text-align: center;
    padding: 10px;
    background: var(--color-bg-light);
    font-size: 0.9rem;
    color: var(--color-text);
}

.map-popup-link {
    display: block;
    text-align: center;
    padding: 10px;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition);
}

.map-popup-link:hover { background: var(--color-primary-dark); }

.custom-marker, .wind-arrow { background: transparent; border: none; }

.marker-pin {
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0;
    background: var(--color-primary);
    border: 3px solid white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transform: rotate(-45deg);
    position: relative;
    cursor: pointer;
    transition: var(--transition);
}

.marker-pin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.marker-pin:hover { transform: rotate(-45deg) scale(1.15); }

.wind-arrow svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.map-popup-week {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--color-border);
}

.map-popup-week-title {
    display: block;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
}

.map-popup-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.map-popup-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    line-height: 1.1;
    color: var(--color-text-light);
}

.map-popup-day i {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.map-popup-day strong {
    color: var(--color-text);
    font-size: 0.72rem;
}

.flight-map {
    width: 100%;
    height: 100%;
}

.flight-map-layers {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 500;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.flight-map-layers button {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: #ffffff;
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.flight-map-layers button:hover,
.flight-map-layers button.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* Iconos */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:0 0 auto;background-color:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-arrow-left{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z'/%3E%3C/svg%3E")}
.ico-arrow-right{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z'/%3E%3C/svg%3E")}
.ico-bed{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h-8v7H3V5H1v15h2v-3h18v3h2v-9a4 4 0 0 0-4-4M7 13a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3'/%3E%3C/svg%3E")}
.ico-book-open{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5c-1.35-.85-3.8-1.5-5.5-1.5-1.65 0-3.35.3-4.75 1.05-.1.05-.15.05-.25.05-.25 0-.5-.25-.5-.5V6c.6-.45 1.25-.75 2-1 1.11-.35 2.33-.5 3.5-.5 1.95 0 4.05.4 5.5 1.5 1.45-1.1 3.55-1.5 5.5-1.5 1.17 0 2.39.15 3.5.5.75.25 1.4.55 2 1v14.6c0 .25-.25.5-.5.5-.1 0-.15 0-.25-.05-1.4-.75-3.1-1.05-4.75-1.05-1.7 0-4.15.65-5.5 1.5M12 8v11.5c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5V7c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5m1 3.5c1.11-.68 2.6-1 4.5-1 .91 0 1.76.09 2.5.28V9.23c-.87-.15-1.71-.23-2.5-.23q-2.655 0-4.5.84zm4.5.17c-1.71 0-3.21.26-4.5.79v1.69c1.11-.65 2.6-.99 4.5-.99 1.04 0 1.88.08 2.5.24v-1.5c-.87-.16-1.71-.23-2.5-.23m2.5 2.9c-.87-.16-1.71-.24-2.5-.24-1.83 0-3.33.27-4.5.8v1.69c1.11-.66 2.6-.99 4.5-.99 1.04 0 1.88.08 2.5.24z'/%3E%3C/svg%3E")}
.ico-bowl-food{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.2 11 4.1-6.5 1.7 1-3.4 5.5zm-.6 1H2v3c0 3.9 3.1 7 7 7h6c3.9 0 7-3.1 7-7v-3z'/%3E%3C/svg%3E")}
.ico-box{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18s-.41-.06-.57-.18l-7.9-4.44A.99.99 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18s.41.06.57.18l7.9 4.44c.32.17.53.5.53.88zM12 4.15l-1.89 1.07L16 8.61l1.96-1.11zM6.04 7.5 12 10.85l1.96-1.1-5.88-3.4zM5 15.91l6 3.38v-6.71L5 9.21zm14 0v-6.7l-6 3.37v6.71z'/%3E%3C/svg%3E")}
.ico-building{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3v18h6v-3.5h2V21h6V3zm2 2h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zM7 9h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zm-8 4h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zm-8 4h2v2H7zm8 0h2v2h-2z'/%3E%3C/svg%3E")}
.ico-bullseye{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-1.16-.21-2.31-.61-3.39l-1.6 1.6c.14.59.21 1.19.21 1.79a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8c.6 0 1.2.07 1.79.21L15.4 2.6C14.31 2.21 13.16 2 12 2m7 0-4 4v1.5l-2.55 2.55C12.3 10 12.15 10 12 10a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2c0-.15 0-.3-.05-.45L16.5 9H18l4-4h-3zm-7 4a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 6-6h-2a4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4z'/%3E%3C/svg%3E")}
.ico-bus{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 11H6V6h12m-1.5 11a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-9 0A1.5 1.5 0 0 1 6 15.5 1.5 1.5 0 0 1 7.5 14 1.5 1.5 0 0 1 9 15.5 1.5 1.5 0 0 1 7.5 17M4 16c0 .88.39 1.67 1 2.22V20a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h8v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4z'/%3E%3C/svg%3E")}
.ico-calendar{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V5a2 2 0 0 0-2-2m0 16H5V9h14zm0-12H5V5h14z'/%3E%3C/svg%3E")}
.ico-calendar-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V5a2 2 0 0 0-2-2m0 16H5V9h14zm0-12H5V5h14z'/%3E%3C/svg%3E")}
.ico-calendar-check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V8h14m0-5h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-2.47 8.06L15.47 10l-4.88 4.88-2.12-2.12-1.06 1.06L10.59 17z'/%3E%3C/svg%3E")}
.ico-camera{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h3l2-2h6l2 2h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m8 3a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 2a3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3'/%3E%3C/svg%3E")}
.ico-camera-retro{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4h-3.17L15 2H9L7.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H4V6h4.05l1.83-2h4.24l1.83 2H20zM12 7a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3'/%3E%3C/svg%3E")}
.ico-car{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 11 1.5-4.5h11L19 11m-1.5 5a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-11 0A1.5 1.5 0 0 1 5 14.5 1.5 1.5 0 0 1 6.5 13 1.5 1.5 0 0 1 8 14.5 1.5 1.5 0 0 1 6.5 16M18.92 6c-.2-.58-.76-1-1.42-1h-11c-.66 0-1.22.42-1.42 1L3 12v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8z'/%3E%3C/svg%3E")}
.ico-certificate{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3c-1.11 0-2 .89-2 2v10a2 2 0 0 0 2 2h8v5l3-3 3 3v-5h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4m8 2 3 2 3-2v3.5l3 1.5-3 1.5V15l-3-2-3 2v-3.5L9 10l3-1.5zM4 5h5v2H4zm0 4h3v2H4zm0 4h5v2H4z'/%3E%3C/svg%3E")}
.ico-chair{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v3h-3zM2 10h3v3H2zm15 3H7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.ico-chart-line{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16 11.78 4.24-7.33 1.73 1-5.23 9.05-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z'/%3E%3C/svg%3E")}
.ico-check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z'/%3E%3C/svg%3E")}
.ico-check-circle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E")}
.ico-chevron-down{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3E%3C/svg%3E")}
.ico-chevron-left{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z'/%3E%3C/svg%3E")}
.ico-chevron-right{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E")}
.ico-clipboard-list{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M7 8h2v4H8V9H7zm3 9v1H7v-.92L9 15H7v-1h2.25c.41 0 .75.34.75.75 0 .2-.08.39-.21.52L8.12 17zm1-13c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m6 13h-5v-2h5zm0-6h-5V9h5z'/%3E%3C/svg%3E")}
.ico-clock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8 8 8 0 0 0-8 8 8 8 0 0 0 8 8m0-18a10 10 0 0 1 10 10 10 10 0 0 1-10 10C6.47 22 2 17.5 2 12A10 10 0 0 1 12 2m.5 5v5.25l4.5 2.67-.75 1.23L11 13V7z'/%3E%3C/svg%3E")}
.ico-cloud-sun{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.74 5.47c2.36 1.03 3.61 3.56 3.18 5.99A6 6 0 0 1 18 16v.17a3 3 0 0 1 1-.17 3 3 0 0 1 3 3 3 3 0 0 1-3 3H6a4 4 0 0 1-4-4 4 4 0 0 1 4-4h.27C5 12.45 4.6 10.24 5.5 8.26a5.49 5.49 0 0 1 7.24-2.79m-.81 1.83c-1.77-.8-3.84.01-4.62 1.77-.46 1.02-.38 2.15.1 3.06A5.99 5.99 0 0 1 12 10c.7 0 1.38.12 2 .34a3.51 3.51 0 0 0-2.07-3.04m1.62-3.66c-.55-.24-1.1-.41-1.67-.52l2.49-1.3.9 2.89a7.7 7.7 0 0 0-1.72-1.07m-7.46.8c-.49.35-.92.75-1.29 1.19l.11-2.81 2.96.68c-.62.21-1.22.53-1.78.94M18 9.71c-.09-.59-.22-1.16-.41-1.71l2.38 1.5-2.05 2.23c.11-.65.13-1.33.08-2.02M3.04 11.3c.07.6.2 1.17.39 1.7l-2.37-1.5L3.1 9.28c-.1.65-.13 1.33-.06 2.02M19 18h-3v-2a4 4 0 0 0-4-4 4 4 0 0 0-4 4H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h13a1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E")}
.ico-coins{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3zm9 3a3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3M7 8a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2v-4a2 2 0 0 1-2-2z'/%3E%3C/svg%3E")}
.ico-compass{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.19 14.19 6 18l3.81-8.19L18 6m-6-4A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 8.9a1.1 1.1 0 0 0-1.1 1.1 1.1 1.1 0 0 0 1.1 1.1 1.1 1.1 0 0 0 1.1-1.1 1.1 1.1 0 0 0-1.1-1.1'/%3E%3C/svg%3E")}
.ico-concierge-bell{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19v1H3v-1l2-2v-6c0-3.1 2.03-5.83 5-6.71V4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.29c2.97.88 5 3.61 5 6.71v6zm-7 2a2 2 0 0 1-2 2 2 2 0 0 1-2-2m9.75-17.81-1.42 1.42A8.98 8.98 0 0 1 21 11h2c0-2.93-1.16-5.75-3.25-7.81M1 11h2c0-2.4.96-4.7 2.67-6.39L4.25 3.19A10.96 10.96 0 0 0 1 11'/%3E%3C/svg%3E")}
.ico-crown{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 16 3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z'/%3E%3C/svg%3E")}
.ico-envelope{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m20 8-8 5-8-5V6l8 5 8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E")}
.ico-exclamation-triangle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z'/%3E%3C/svg%3E")}
.ico-external-link-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z'/%3E%3C/svg%3E")}
.ico-facebook{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.04c-5.5 0-10 4.49-10 10.02 0 5 3.66 9.15 8.44 9.9v-7H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.9h-2.33v7a10 10 0 0 0 8.44-9.9c0-5.53-4.5-10.02-10-10.02'/%3E%3C/svg%3E")}
.ico-fire{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.6.6 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27'/%3E%3C/svg%3E")}
.ico-flag-checkered{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.4 6H20v10h-7l-.4-2H7v7H5V4h9zm-.4 8h2v-2h2v-2h-2V8h-2v2l-1-2V6h-2v2H9V6H7v2h2v2H7v2h2v-2h2v2h2v-2l1 2zm-3-4V8h2v2zm3 0h2v2h-2z'/%3E%3C/svg%3E")}
.ico-gift{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.06 1.93C7.17 1.92 5.33 3.74 6.17 6H3a2 2 0 0 0-2 2v2a1 1 0 0 0 1 1h9V8h2v3h9a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2h-3.17C19 2.73 14.6.42 12.57 3.24L12 4l-.57-.78c-.63-.89-1.5-1.28-2.37-1.29M9 4c.89 0 1.34 1.08.71 1.71S8 5.89 8 5a1 1 0 0 1 1-1m6 0c.89 0 1.34 1.08.71 1.71S14 5.89 14 5a1 1 0 0 1 1-1M2 12v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-8h-9v8h-2v-8z'/%3E%3C/svg%3E")}
.ico-graduation-cap{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17z'/%3E%3C/svg%3E")}
.ico-handshake{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 6h3l3.29-3.3a1 1 0 0 1 1.42 0l2.58 2.59a1 1 0 0 1 0 1.41L19 9h-8v2a1 1 0 0 1-1 1 1 1 0 0 1-1-1V8a2 2 0 0 1 2-2m-6 5v4l-2.29 2.29a1 1 0 0 0 0 1.41l2.58 2.59a1 1 0 0 0 1.42 0L11 17h4a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-1h-7v1a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9Z'/%3E%3C/svg%3E")}
.ico-headset{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c-5 0-9 4-9 9v7a3 3 0 0 0 3 3h3v-8H5v-2a7 7 0 0 1 7-7 7 7 0 0 1 7 7v2h-4v8h4v1h-7v2h6a3 3 0 0 0 3-3V10c0-5-4.03-9-9-9'/%3E%3C/svg%3E")}
.ico-hiking{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 8.67H19V23h-1.53V12.6c-.8-.16-1.55-.46-2.26-.89s-1.31-.93-1.82-1.51l-.62 3.07 2.23 2.2V23h-2v-6l-2.24-2.2L8.89 23H6.73S9.86 7.22 9.89 7.09c.11-.48.33-.85.7-1.09.37-.27.74-.4 1.12-.4q.585 0 1.08.27c.34.17.6.42.79.74l1.06 1.63c.29.54.68 1.01 1.17 1.39s1.05.67 1.66.87zM8.55 5.89 7.4 5.65c-.57-.15-1.09-.03-1.56.29-.46.32-.74.76-.84 1.34l-.81 3.98c-.03.29.03.55.19.79s.37.37.62.41l2.21.43zM13 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.89 2-2-.89-2-2-2'/%3E%3C/svg%3E")}
.ico-home{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E")}
.ico-hotel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 21V10l7.5-5 7.5 5v11h-5v-7H5v7zM24 2v19h-7V8.93l-1-.66V6h-2v.93l-4-2.66V2zm-3 12h-2v2h2zm0-4h-2v2h2zm0-4h-2v2h2z'/%3E%3C/svg%3E")}
.ico-info-circle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E")}
.ico-landmark{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 1 2 6v2h19V6m-5 4v7h3v-7M2 22h19v-3H2m8-9v7h3v-7m-9 0v7h3v-7z'/%3E%3C/svg%3E")}
.ico-leaf{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8'/%3E%3C/svg%3E")}
.ico-location-arrow{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4.5 20.29l.71.71L12 18l6.79 3 .71-.71z'/%3E%3C/svg%3E")}
.ico-location-dot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7'/%3E%3C/svg%3E")}
.ico-lock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2m6-9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5 5 5 0 0 1 5 5v2zm-6-5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3'/%3E%3C/svg%3E")}
.ico-map-location-dot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c3.31 0 6 2.66 6 5.95C18 12.41 12 19 12 19S6 12.41 6 7.95C6 4.66 8.69 2 12 2m0 4a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2m8 13c0 2.21-3.58 4-8 4s-8-1.79-8-4c0-1.29 1.22-2.44 3.11-3.17l.64.91C6.67 17.19 6 17.81 6 18.5c0 1.38 2.69 2.5 6 2.5s6-1.12 6-2.5c0-.69-.67-1.31-1.75-1.76l.64-.91C18.78 16.56 20 17.71 20 19'/%3E%3C/svg%3E")}
.ico-map-marked-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 15a3 3 0 0 1 3 3 3 3 0 0 1-3 3 2.99 2.99 0 0 1-2.83-2H14v-2h1.17c.41-1.17 1.52-2 2.83-2m0 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m0-9a1.43 1.43 0 0 0 1.43-1.43 1.43 1.43 0 1 0-2.86 0A1.43 1.43 0 0 0 18 8m0-5.43a4 4 0 0 1 4 4C22 9.56 18 14 18 14s-4-4.44-4-7.43a4 4 0 0 1 4-4M8.83 17H10v2H8.83A2.99 2.99 0 0 1 6 21a3 3 0 0 1-3-3c0-1.31.83-2.42 2-2.83V14h2v1.17c.85.3 1.53.98 1.83 1.83M6 17a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1M6 3a3 3 0 0 1 3 3c0 1.31-.83 2.42-2 2.83V10H5V8.83A2.99 2.99 0 0 1 3 6a3 3 0 0 1 3-3m0 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m5 14v-2h2v2zm-4-6H5v-2h2z'/%3E%3C/svg%3E")}
.ico-map-marker-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7'/%3E%3C/svg%3E")}
.ico-mountain{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 6-3.75 5 2.85 3.8-1.6 1.2C9.81 13.75 7 10 7 10l-6 8h22z'/%3E%3C/svg%3E")}
.ico-mug-hot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h18v-2H2M20 8h-2V5h2m0-2H4v10a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2'/%3E%3C/svg%3E")}
.ico-paper-plane{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m2 21 21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E")}
.ico-parachute-box{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.2 10.95 12 23 2.78 10.96l.09-.08c.21-.21.46-.38.71-.52l7.15 9.33L8.58 13l.66-1.19L12 20.38l2.73-8.58.67 1.2-2.13 6.69 7.14-9.34c.25.15.49.29.69.5zM5 9c1.5 0 2.81.86 3.5 2.1A3.97 3.97 0 0 1 12 9c1.5 0 2.8.85 3.5 2.09A3.93 3.93 0 0 1 19 9c1.09 0 2.09.42 2.81 1.14C20.94 5.5 16.88 2 12 2c-4.91 0-8.97 3.5-9.84 8.17C2.89 9.45 3.89 9 5 9'/%3E%3C/svg%3E")}
.ico-paw{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.35 3c1.18-.17 2.43 1.12 2.79 2.9.36 1.77-.29 3.35-1.47 3.53-1.17.18-2.43-1.11-2.8-2.89-.37-1.77.3-3.35 1.48-3.54m7.15 0c1.19.19 1.85 1.77 1.5 3.54-.38 1.78-1.63 3.07-2.81 2.89-1.19-.18-1.84-1.76-1.47-3.53.36-1.78 1.61-3.07 2.78-2.9M3 7.6c1.14-.49 2.69.4 3.5 1.95.76 1.58.5 3.24-.63 3.73s-2.67-.39-3.46-1.96S1.9 8.08 3 7.6m18 0c1.1.48 1.38 2.15.59 3.72s-2.33 2.45-3.46 1.96-1.39-2.15-.63-3.73C18.31 8 19.86 7.11 21 7.6m-1.67 10.78c.04.94-.68 1.98-1.54 2.37-1.79.82-3.91-.88-5.9-.88s-4.13 1.77-5.89.88c-1-.49-1.69-1.79-1.56-2.87.18-1.49 1.97-2.29 3.03-3.38 1.41-1.41 2.41-4.06 4.42-4.06 2 0 3.06 2.61 4.41 4.06 1.11 1.22 2.96 2.25 3.03 3.88'/%3E%3C/svg%3E")}
.ico-phone{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.28-.28.67-.36 1.02-.25 1.12.37 2.32.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02z'/%3E%3C/svg%3E")}
.ico-pinterest{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.04 21.54c.96.29 1.93.46 2.96.46a10 10 0 0 0 10-10A10 10 0 0 0 12 2 10 10 0 0 0 2 12c0 4.25 2.67 7.9 6.44 9.34-.09-.78-.18-2.07 0-2.96l1.15-4.94s-.29-.58-.29-1.5c0-1.38.86-2.41 1.84-2.41.86 0 1.26.63 1.26 1.44 0 .86-.57 2.09-.86 3.27-.17.98.52 1.84 1.52 1.84 1.78 0 3.16-1.9 3.16-4.58 0-2.4-1.72-4.04-4.19-4.04-2.82 0-4.48 2.1-4.48 4.31 0 .86.28 1.73.74 2.3.09.06.09.14.06.29l-.29 1.09c0 .17-.11.23-.28.11-1.28-.56-2.02-2.38-2.02-3.85 0-3.16 2.24-6.03 6.56-6.03 3.44 0 6.12 2.47 6.12 5.75 0 3.44-2.13 6.2-5.18 6.2-.97 0-1.92-.52-2.26-1.13l-.67 2.37c-.23.86-.86 2.01-1.29 2.7z'/%3E%3C/svg%3E")}
.ico-plane-arrival{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 19h19v2h-19zm7.18-5.73 4.35 1.16 5.31 1.42c.8.21 1.62-.26 1.84-1.06.21-.79-.26-1.62-1.06-1.84l-5.31-1.42-2.76-9.03-1.93-.5v8.28L5.15 8.95l-.93-2.32-1.45-.39v5.17l1.6.43z'/%3E%3C/svg%3E")}
.ico-plane-departure{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 19h19v2h-19zm19.57-9.36c-.21-.8-1.04-1.28-1.84-1.06L14.92 10 8 3.57l-1.91.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 1.82 3.16.77 1.33 1.6-.42 5.31-1.43 4.35-1.16L21 11.5c.81-.24 1.28-1.06 1.07-1.86'/%3E%3C/svg%3E")}
.ico-rocket{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.13 22.19-1.63-3.83c1.57-.58 3.04-1.36 4.4-2.27zM5.64 12.5l-3.83-1.63 6.1-2.77C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39S16.66.269 11 5.93c-2.19 2.19-3.5 4.6-4.35 6.71-.28.75-.09 1.57.46 2.13l2.13 2.12c.55.56 1.37.74 2.12.46A19.1 19.1 0 0 0 18.07 13c5.66-5.66 3.54-10.61 3.54-10.61m-7.07 7.07c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0c.77.78.78 2.05 0 2.83s-2.05.78-2.83 0m-5.66 7.07-1.41-1.41zM6.24 22l3.64-3.64c-.34-.09-.67-.24-.97-.45L4.83 22zM2 22h1.41l4.77-4.76-1.42-1.41L2 20.59zm0-2.83 4.09-4.08c-.21-.3-.36-.62-.45-.97L2 17.76z'/%3E%3C/svg%3E")}
.ico-route{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 10H5L3 8l2-2h6V3l1-1 1 1v1h6l2 2-2 2h-6v2h6l2 2-2 2h-6v6a2 2 0 0 1 2 2H9a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.ico-seedling{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22v-2s5-2 10-2 10 2 10 2v2zm9.3-12.9c-1.2-3.9-7.3-3-7.3-3s.2 7.8 5.9 6.6C9.5 9.8 8 9 8 9c2.8 0 3 3.4 3 3.4V17h2v-4.2s0-3.9 3-4.9c0 0-2 3-2 5 7 .7 7-8.9 7-8.9s-8.9-1-9.7 5.1'/%3E%3C/svg%3E")}
.ico-share-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08'/%3E%3C/svg%3E")}
.ico-shield-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 17-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9m-6-8L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5z'/%3E%3C/svg%3E")}
.ico-shopping-bag{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13a5 5 0 0 1-5-5h2a3 3 0 0 0 3 3 3 3 0 0 0 3-3h2a5 5 0 0 1-5 5m0-10a3 3 0 0 1 3 3H9a3 3 0 0 1 3-3m7 3h-2a5 5 0 0 0-5-5 5 5 0 0 0-5 5H5c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2'/%3E%3C/svg%3E")}
.ico-signal{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4h-5v16h5zm-7 5H9v11h5zm-7 5H2v6h5z'/%3E%3C/svg%3E")}
.ico-snowflake{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m20.79 13.95-2.33.62-2-1.13v-2.88l2-1.13 2.33.62.52-1.93-1.77-.47.46-1.77-1.93-.52-.62 2.33-2 1.13L13 7.38V5.12l1.71-1.71L13.29 2 12 3.29 10.71 2 9.29 3.41 11 5.12v2.26L8.5 8.82l-2-1.13-.58-2.33L4 5.88l.47 1.77-1.77.47.52 1.93 2.33-.62 2 1.13v2.89l-2 1.13-2.33-.62-.52 1.93 1.77.47L4 18.12l1.93.52.62-2.33 2-1.13L11 16.62v2.26l-1.71 1.71L10.71 22 12 20.71 13.29 22l1.41-1.41-1.7-1.71v-2.26l2.5-1.45 2 1.13.62 2.33 1.88-.51-.47-1.77 1.77-.47zM9.5 10.56 12 9.11l2.5 1.45v2.88L12 14.89l-2.5-1.45z'/%3E%3C/svg%3E")}
.ico-star{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E")}
.ico-sun{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3.55 19.09 1.41 1.41 1.8-1.79-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71 1.8 1.79 1.41-1.41-1.79-1.8M20.45 5l-1.41-1.4-1.8 1.79 1.42 1.42M13 1h-2v3h2M6.76 5.39 4.96 3.6 3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2'/%3E%3C/svg%3E")}
.ico-taxi{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 11 1.5-4.5h11L19 11m-1.5 5a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-11 0A1.5 1.5 0 0 1 5 14.5 1.5 1.5 0 0 1 6.5 13 1.5 1.5 0 0 1 8 14.5 1.5 1.5 0 0 1 6.5 16M18.92 6c-.2-.58-.76-1-1.42-1H15V3H9v2H6.5c-.66 0-1.22.42-1.42 1L3 12v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8z'/%3E%3C/svg%3E")}
.ico-temperature-high{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 13V5a3 3 0 0 0-6 0v8a5 5 0 1 0 6 0m-3-9a1 1 0 0 1 1 1v3h-2V5a1 1 0 0 1 1-1'/%3E%3C/svg%3E")}
.ico-thermometer-half{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 13V5a3 3 0 0 0-6 0v8a5 5 0 1 0 6 0m-3-9a1 1 0 0 1 1 1v3h-2V5a1 1 0 0 1 1-1'/%3E%3C/svg%3E")}
.ico-ticket-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.58 16.8 12 14.5l-3.58 2.3 1.08-4.12L6.21 10l4.25-.26L12 5.8l1.54 3.94 4.25.26-3.29 2.68M20 12a2 2 0 0 1 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2 2 2 0 0 1-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 1-2-2'/%3E%3C/svg%3E")}
.ico-toolbox{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16h-2v-1H8v1H6v-1H2v5h20v-5h-4zm2-8h-3V6c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v4h4v-2h2v2h8v-2h2v2h4v-4c0-1.1-.9-2-2-2m-5 0H9V6h6z'/%3E%3C/svg%3E")}
.ico-tools{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21.71 20.29-1.42 1.42a1 1 0 0 1-1.41 0L7 9.85A3.8 3.8 0 0 1 6 10a4 4 0 0 1-3.78-5.3l2.54 2.54.53-.53 1.42-1.42.53-.53L4.7 2.22A4 4 0 0 1 10 6a3.8 3.8 0 0 1-.15 1l11.86 11.88a1 1 0 0 1 0 1.41M2.29 18.88a1 1 0 0 0 0 1.41l1.42 1.42a1 1 0 0 0 1.41 0l5.47-5.46-2.83-2.83M20 2l-4 2v2l-2.17 2.17 2 2L18 8h2l2-4Z'/%3E%3C/svg%3E")}
.ico-traffic-light{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9a2 2 0 0 1-2-2 2 2 0 0 1 2-2c1.11 0 2 .89 2 2a2 2 0 0 1-2 2m0 5a2 2 0 0 1-2-2 2 2 0 0 1 2-2c1.11 0 2 .89 2 2a2 2 0 0 1-2 2m0 5a2 2 0 0 1-2-2 2 2 0 0 1 2-2c1.11 0 2 .89 2 2a2 2 0 0 1-2 2m8-9h-3V8.86c1.72-.45 3-2 3-3.86h-3V4a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v1H4c0 1.86 1.28 3.41 3 3.86V10H4c0 1.86 1.28 3.41 3 3.86V15H4c0 1.86 1.28 3.41 3 3.86V20a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.14c1.72-.45 3-2 3-3.86h-3v-1.14c1.72-.45 3-2 3-3.86'/%3E%3C/svg%3E")}
.ico-tree{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 21v-3H3l5-5H5l5-5H7l5-5 5 5h-3l5 5h-3l5 5h-7v3z'/%3E%3C/svg%3E")}
.ico-twitter{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.2 4.2 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.52 8.52 0 0 1-5.33 1.84q-.51 0-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23'/%3E%3C/svg%3E")}
.ico-umbrella-beach{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.13 14.56 1.43-1.43L21 19.57 19.57 21zm4.29-5.73 2.86-2.86C16.33 2 9.93 2 6 5.95c3.91-1.3 8.29-.25 11.42 2.88M5.95 6C2 9.93 2 16.33 5.97 20.28l2.86-2.86C5.7 14.29 4.65 9.91 5.95 6m.02-.04-.01.01C5.58 9 7.13 12.85 10.26 16L16 10.26c-3.14-3.13-7-4.68-10.03-4.3'/%3E%3C/svg%3E")}
.ico-user-shield{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5zm0 4a3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3m5.13 12A9.7 9.7 0 0 1 12 20.92 9.7 9.7 0 0 1 6.87 17c-.34-.5-.63-1-.87-1.53 0-1.65 2.71-3 6-3s6 1.32 6 3c-.24.53-.53 1.03-.87 1.53'/%3E%3C/svg%3E")}
.ico-user-tie{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4m4 10.54c0 1.06-.28 3.53-2.19 6.29L13 15l.94-1.88c-.62-.07-1.27-.12-1.94-.12s-1.32.05-1.94.12L11 15l-.81 4.83C8.28 17.07 8 14.6 8 13.54c-2.39.7-4 1.96-4 3.46v4h16v-4c0-1.5-1.6-2.76-4-3.46'/%3E%3C/svg%3E")}
.ico-users{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9 3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3 3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3 3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65 2.56.34 4.45 1.51 4.45 2.9z'/%3E%3C/svg%3E")}
.ico-utensils{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4'/%3E%3C/svg%3E")}
.ico-water{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12h2v2h-2c-1.38 0-2.74-.35-4-1-2.5 1.3-5.5 1.3-8 0-1.26.65-2.63 1-4 1H2v-2h2c1.39 0 2.78-.47 4-1.33 2.44 1.71 5.56 1.71 8 0 1.22.86 2.61 1.33 4 1.33m0-6h2v2h-2c-1.38 0-2.74-.35-4-1-2.5 1.3-5.5 1.3-8 0-1.26.65-2.63 1-4 1H2V6h2c1.39 0 2.78-.47 4-1.33 2.44 1.71 5.56 1.71 8 0C17.22 5.53 18.61 6 20 6m0 12h2v2h-2c-1.38 0-2.74-.35-4-1-2.5 1.3-5.5 1.3-8 0-1.26.65-2.63 1-4 1H2v-2h2c1.39 0 2.78-.47 4-1.33 2.44 1.71 5.56 1.71 8 0 1.22.86 2.61 1.33 4 1.33'/%3E%3C/svg%3E")}
.ico-whatsapp{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2m.01 1.67c2.2 0 4.26.86 5.82 2.42a8.23 8.23 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23-1.48 0-2.93-.39-4.19-1.15l-.3-.17-3.12.82.83-3.04-.2-.32a8.2 8.2 0 0 1-1.26-4.38c.01-4.54 3.7-8.24 8.25-8.24M8.53 7.33c-.16 0-.43.06-.66.31-.22.25-.87.86-.87 2.07 0 1.22.89 2.39 1 2.56.14.17 1.76 2.67 4.25 3.73.59.27 1.05.42 1.41.53.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18s.21-1.07.15-1.18c-.07-.1-.23-.16-.48-.27-.25-.14-1.47-.74-1.69-.82-.23-.08-.37-.12-.56.12-.16.25-.64.81-.78.97-.15.17-.29.19-.53.07-.26-.13-1.06-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.12-.24-.01-.39.11-.5.11-.11.27-.29.37-.44.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.11-.56-1.35-.77-1.84-.2-.48-.4-.42-.56-.43-.14 0-.3-.01-.47-.01'/%3E%3C/svg%3E")}
.ico-wifi{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 21 3.6-4.8c-1-.75-2.25-1.2-3.6-1.2s-2.6.45-3.6 1.2zm0-18C7.95 3 4.21 4.34 1.2 6.6L3 9c2.5-1.88 5.62-3 9-3s6.5 1.12 9 3l1.8-2.4C19.79 4.34 16.05 3 12 3m0 6c-2.7 0-5.19.89-7.2 2.4l1.8 2.4C8.1 12.67 9.97 12 12 12s3.9.67 5.4 1.8l1.8-2.4C17.19 9.89 14.7 9 12 9'/%3E%3C/svg%3E")}
.ico-wind{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10a1 1 0 0 1-1-1 1 1 0 0 1 1-1h8a2 2 0 0 0 2-2 2 2 0 0 0-2-2c-.55 0-1.05.22-1.41.59a.973.973 0 0 1-1.42 0c-.39-.39-.39-1.03 0-1.42C9.9 2.45 10.9 2 12 2a4 4 0 0 1 4 4 4 4 0 0 1-4 4zm15 2a1 1 0 0 0 1-1 1 1 0 0 0-1-1c-.28 0-.53.11-.71.29a.996.996 0 0 1-1.41 0c-.38-.39-.38-1.02 0-1.41C17.42 8.34 18.17 8 19 8a3 3 0 0 1 3 3 3 3 0 0 1-3 3H5a1 1 0 0 1-1-1 1 1 0 0 1 1-1zm-1 6H4a1 1 0 0 1-1-1 1 1 0 0 1 1-1h14a3 3 0 0 1 3 3 3 3 0 0 1-3 3c-.83 0-1.58-.34-2.12-.88-.38-.39-.38-1.02 0-1.41a.996.996 0 0 1 1.41 0c.18.18.43.29.71.29a1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E")}
.ico-question-circle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10'/%3E%3C/svg%3E")}
.ico-play{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}
.ico-plus{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E")}
.ico-sync-alt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18a6 6 0 0 1-6-6c0-1 .25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12a8 8 0 0 0 8 8v3l4-4-4-4m0-11V1L8 5l4 4V6a6 6 0 0 1 6 6c0 1-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12a8 8 0 0 0-8-8'/%3E%3C/svg%3E")}
.ico-birthday-cake{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6a2 2 0 0 0 2-2c0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03a2 2 0 0 0 2 2m4.6 10-1.07-1.08L14.45 16c-1.3 1.29-3.58 1.3-4.89 0L8.5 14.92 7.4 16a3.47 3.47 0 0 1-4.4.39V21a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4.61a3.467 3.467 0 0 1-4.4-.39M18 9h-5V7h-2v2H6a3 3 0 0 0-3 3v1.54c0 1.08.88 1.96 1.96 1.96.54 0 1.04-.2 1.38-.57L8.5 12.8l2.11 2.13c.74.74 2.03.74 2.77 0l2.12-2.13 2.15 2.13c.35.37.85.57 1.38.57 1.08 0 1.97-.88 1.97-1.96V12a3 3 0 0 0-3-3'/%3E%3C/svg%3E")}
.ico-images{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-11-4 2.03 2.71L16 11l4 5H8M2 6v14a2 2 0 0 0 2 2h14v-2H4V6'/%3E%3C/svg%3E")}
.ico-close{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")}

/* ============================================
   ICONOS SVG EN LINEA (los que no estan en el set .ico-xxx)
   ============================================ */
.ico-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.trust-icon .ico { width: 1.3em; height: 1.3em; }
.contact-list-horizontal .contact-icon { width: 20px; height: 20px; flex-shrink: 0; display: block; color: #fff; }
.whatsapp-float a .whatsapp-icon { width: 32px; height: 32px; display: block; color: #fff; }
.back-to-top svg.arrow-icon { position: absolute; width: 24px; height: 24px; color: #4169e1; pointer-events: none; }
.faq-arrow i, .faq-compact-icon i, .faq-toggle-icon i { display: inline-flex; align-items: center; }
.price-on-request { font-weight: 700; }

/* Menú con 9 enlaces individuales: compactar en pantallas medianas */
@media (min-width: 993px) {
    .main-nav { margin-left: 18px; }
}
@media (min-width: 993px) and (max-width: 1320px) {
    .nav-menu { gap: 11px; }
    .header-selectors .lang-btn .lang-name { font-size: 13px; }
    .lang-btn { padding-left: 10px; padding-right: 10px; flex-shrink: 0; }
    .header-contact .btn-contact { padding-left: 16px; padding-right: 16px; }
}