/* ===== PANACA - estilos migrados desde 3.Home liviano/Index.html ===== */
#ubicacion{scroll-margin-top:110px;}
#horarios{scroll-margin-top:110px;}

        

        /* ============================================
           FUENTES LOCALES PANACA
           TITULOS: POLENO
           TEXTOS: EUCLID
        ============================================ */
        @font-face{font-family:'Poleno';src:url(../assets/fonts/poleno-500.woff2) format('woff2'),url(../assets/fonts/poleno-500.woff) format('woff');font-weight:500;font-style:normal;font-display:swap;}

        @font-face{font-family:'Euclid';src:url(../assets/fonts/euclid-400.woff2) format('woff2'),url(../assets/fonts/euclid-400.woff) format('woff');font-weight:400;font-style:normal;font-display:swap;}
        @font-face{font-family:'Euclid';src:url(../assets/fonts/euclid-500.woff2) format('woff2'),url(../assets/fonts/euclid-500.woff) format('woff');font-weight:500;font-style:normal;font-display:swap;}
        @font-face{font-family:'Euclid';src:url(../assets/fonts/euclid-600.woff2) format('woff2'),url(../assets/fonts/euclid-600.woff) format('woff');font-weight:600;font-style:normal;font-display:swap;}
        @font-face{font-family:'Euclid';src:url(../assets/fonts/euclid-700.woff2) format('woff2'),url(../assets/fonts/euclid-700.woff) format('woff');font-weight:700;font-style:normal;font-display:swap;}

        /* Alias para compatibilidad con el CSS existente */
        @font-face{font-family:'EuclidBold';src:url(../assets/fonts/euclid-700.woff2) format('woff2'),url(../assets/fonts/euclid-700.woff) format('woff');font-weight:700;font-style:normal;font-display:swap;}
/* ============================================
           VARIABLES CSS - Paleta PANACA OFICIAL
        ============================================ */
        :root {
            /* ========== PALETA OFICIAL PANACA ========== */
            
            /* Flor Cayena (Rojos) */
            --color-red: #E21B1B;
            --color-red-light: #EF6A60;
            --color-red-medium: #F04E30;
            --color-red-dark: #D1001C;
            
            /* Tonos Amarillos */
            --color-yellow: #F5B122;
            --color-yellow-light: #FFC557;
            --color-yellow-bright: #FFCE34;
            --color-yellow-dark: #D38F01;
            --color-yellow-deep: #EB7200;
            --color-orange: #E65301;
            --color-orange-dark: #DF3B01;
            
            /* Tonos Verde */
            --color-green: #629B3D;
            --color-green-light: #9AC67D;
            --color-green-medium: #448E5B;
            --color-green-dark: #166D35;
            --color-green-deep: #023D1B;
            
            /* Tonos Palma (Verde oliva) */
            --color-palma: #AAA733;
            --color-palma-light: #C6C163;
            --color-palma-dark: #808000;
            --color-palma-deep: #474503;
            
            /* Tonos Azul */
            --color-blue: #2F5289;
            --color-blue-light: #A9E4FC;
            --color-blue-medium: #1B325E;
            --color-blue-dark: #102437;
            
            /* Tonos Mar (Turquesa) */
            --color-mar: #1691B7;
            --color-mar-light: #41BBD8;
            --color-mar-dark: #006994;
            --color-mar-deep: #083D77;
            
            /* Tonos Café */
            --color-cafe: #934932;
            --color-cafe-light: #CD853F;
            --color-cafe-dark: #7F3A1F;
            --color-cafe-deep: #3D1C11;
            
            /* Tonos Coco */
            --color-coco: #AF8E6D;
            --color-coco-light: #D8BFAB;
            --color-coco-dark: #826644;
            --color-coco-deep: #654321;
            
            /* Tonos Arena */
            --color-arena: #F5DEB3;
            --color-arena-light: #FAF0E6;
            --color-arena-dark: #D8C798;
            --color-arena-deep: #C2B280;
            
            /* Colores de interfaz */
            --color-black: #000000;
            --color-white: #ffffff;
            --color-cream: #FAF0E6;
            --color-cream-dark: #F5DEB3;
            --color-gray: #EBEAE7;
            --color-gray-light: #f5f5f5;
            --color-text: #000000;
            --color-text-light: #666666;
            --color-text-muted: #999999;
            --color-brown: #934932;
            
            /* Fuentes PANACA */
            --font-heading: 'Poleno', 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
            --font-body: 'Euclid', 'Inter', 'Segoe UI', Arial, sans-serif;
            --font-body-bold: 'EuclidBold', 'Inter', 'Segoe UI', Arial, sans-serif;
            
            /* Espaciado */
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2.5rem;
            --spacing-xl: 4rem;
            
            /* Sombras PANACA - más pronunciadas */
            --shadow-panaca: 0 0 10px 2px rgba(128,128,128,0.5);
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.12);
            --shadow-md: 0 4px 20px rgba(0,0,0,0.18);
            --shadow-lg: 0 8px 40px rgba(0,0,0,0.22);
            --shadow-hover: 0 15px 30px rgba(0,0,0,0.2);
            
            /* Transiciones PANACA */
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --transition-panaca: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            
            /* Alturas */
            --topbar-height: 44px;
            --header-height: 70px;
            
            /* Clip-paths Zigzag PANACA (Estilo Montaña) */
            --clip-zigzag-bottom: polygon(0 0, 100% 0, 100% 100%, 95% 91%, 87% 98%, 81% 88%, 76% 96%, 70% 88%, 66% 96%, 61% 91%, 57% 98%, 51% 90%, 47% 96%, 42% 90%, 38% 96%, 33% 87%, 30% 98%, 23% 92%, 17% 94%, 13% 90%, 9% 97%, 4% 94%, 0 100%);
            --clip-zigzag-top: polygon(0% 100%, 0 18%, 6% 38%, 14% 12%, 20% 34%, 31% 8%, 40% 27%, 49% 12%, 56% 29%, 67% 10%, 75% 21%, 83% 0, 92% 24%, 100% 0, 100% 100%);
            
            /* Clip-paths para Botones PANACA (Estilo Orgánico/Recortado) */
            --btn-path-1: polygon(100% 100%, 99% 83%, 100% 13%, 94% 0%, 9% 1%, 1% 9%, 0% 77%, 1% 85%, 0% 100%);
            --btn-path-2: polygon(100% 99%, 98% 0, 94% 5%, 0% 2%, 2% 100%, 25% 96%);
            --btn-path-3: polygon(100% 97%, 100% 1%, 70% 3%, 0% 2%, 1% 100%, 21% 97%, 73% 100%);
            --btn-path-4: polygon(100% 96%, 100% 1%, 15% 0, 0 2%, 1% 75%, 0 100%, 96% 100%);
        }

        /* ============================================
           RESET Y BASE
        ============================================ */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            font-family: var(--font-body);
            color: var(--color-text);
            background-color: var(--color-cream);
            line-height: 1.6;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            position: relative;
        }

        /* ============================================
           SEO & ACCESIBILIDAD
        ============================================ */
        
        /* Noscript Content - SEO para buscadores */
        .noscript-content {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            font-family: var(--font-body);
            line-height: 1.6;
        }

        .noscript-content h1 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--color-red);
        }

        .noscript-content h2 {
            font-size: 1.2rem;
            margin: 1.5rem 0 0.5rem;
            color: var(--color-black);
        }

        .noscript-content p, .noscript-content li {
            margin-bottom: 0.5rem;
        }
        
        /* Skip Link - Accesibilidad */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-red);
            color: white;
            padding: 1rem 2rem;
            text-decoration: none;
            font-weight: 700;
            z-index: 99999;
            border-radius: 0 0 8px 8px;
            transition: top 0.3s ease;
        }

        .skip-link:focus {
            top: 0;
            outline: 3px solid var(--color-yellow);
        }

        /* Breadcrumb SEO */
        .breadcrumb {
            background: var(--color-white);
            padding: 0.5rem 0;
            font-size: 0.8rem;
            border-bottom: 1px solid var(--color-gray);
        }

        .breadcrumb__list {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            list-style: none;
            flex-wrap: wrap;
        }

        .breadcrumb__item a {
            color: var(--color-text-light);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .breadcrumb__item a:hover {
            color: var(--color-red);
            text-decoration: underline;
        }

        .breadcrumb__separator {
            color: var(--color-text-muted);
        }

        .breadcrumb__item--active span {
            color: var(--color-red);
            font-weight: 600;
        }

        /* Visually Hidden - para texto SEO accesible */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Focus visible para accesibilidad */
        :focus-visible {
            outline: 3px solid var(--color-yellow);
            outline-offset: 2px;
        }

        /* Reducir animaciones para usuarios que lo prefieren */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            html {
                scroll-behavior: auto;
            }
        }

        body.modal-open {
            overflow: hidden;
        }

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

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: none;
        }

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

        /* ============================================
           TOP BAR - Banner promocional ESTILO PANACA
        ============================================ */
        .topbar {
            background: var(--color-red);
            color: var(--color-white);
            padding: 0 0;
            padding-bottom: 0.45rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            overflow: visible;
            width: 100%;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Borde zigzag inferior PANACA */
        .topbar::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 20px;
            background: var(--color-red);
            clip-path: var(--clip-zigzag-bottom);
            z-index: 999;
        }

        .topbar.topbar--hidden {
            /* sin efecto - topbar ya no esta fijo arriba */
        }

        .topbar__content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
            text-align: center;
            overflow: hidden;
        }

        .topbar__text {
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            font-family: var(--font-heading);
        }

        .topbar__text strong {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.3rem 0.8rem;
            font-weight: 700;
            display: inline-block;
            font-family: var(--font-body-bold);
            clip-path: var(--btn-path-4);
        }

        /* Countdown Timer en topbar */
        .topbar__inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .topbar__promo {
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            font-family: var(--font-heading);
            display: flex;
            align-items: center;
            gap: 0.4rem;
            white-space: nowrap;
        }

        .topbar__promo strong {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.3rem 0.8rem;
            font-weight: 700;
            display: inline-block;
            font-family: var(--font-body-bold);
            clip-path: var(--btn-path-4);
        }

        /* Ofertas laterales del topbar */
        .topbar__offer {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-heading);
            font-size: 0.8rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .topbar__offer-badge {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.35rem 0.7rem;
            font-weight: 800;
            font-size: 0.85rem;
            font-family: var(--font-heading);
            clip-path: var(--btn-path-4);
            display: inline-block;
            line-height: 1;
        }

        .topbar__offer-text {
            font-size: 0.7rem;
            opacity: 0.95;
            font-weight: 500;
            line-height: 1.2;
            max-width: 130px;
            white-space: normal;
        }

        .topbar__offer--right {
            text-align: left;
        }

        .topbar__offer--right .topbar__offer-badge {
            background: var(--color-yellow);
            color: var(--color-black);
        }

        .topbar__divider {
        @media (min-width:1024px){ .topbar__trust{ display:flex !important; } }
        .topbar__content{ position:relative; }
        .topbar__trust{ display:none; position:absolute; right:1.5rem; top:50%; transform:translateY(-50%); align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:700; letter-spacing:0.3px; color:#fff; opacity:0.9; white-space:nowrap; font-family:var(--font-heading); }
            width: 1px;
            height: 28px;
            background: rgba(255,255,255,0.25);
            flex-shrink: 0;
        }

        .topbar__countdown {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .topbar__countdown-unit {
            background: rgba(0,0,0,0.25);
            border-radius: 6px;
            padding: 4px 8px;
            min-width: 46px;
            text-align: center;
            line-height: 1;
        }

        .topbar__countdown-number {
            font-size: 1.15rem;
            font-weight: 800;
            font-family: var(--font-heading);
            display: block;
        }

        .topbar__countdown-label {
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.85;
            display: block;
            margin-top: 2px;
        }

        .topbar__countdown-sep {
            font-size: 1.1rem;
            font-weight: 700;
            opacity: 0.6;
        }

        /* ============================================
           HEADER - Sticky con toggle integrado ESTILO PANACA
        ============================================ */
        .header {
            background: var(--color-white);
            height: var(--header-height);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow-panaca);
            overflow: hidden;
            width: 100%;
            transition: top 0.3s ease;
        }.mapa-info h3 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--color-red);
            margin-bottom: var(--spacing-md);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .mapa-lugares {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .mapa-lugar {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--color-white);
            padding: 1.1rem;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-panaca);
            cursor: pointer;
            clip-path: var(--btn-path-2);
            border-left: 3px solid transparent;
        }

        .mapa-lugar:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow-md);
            border-left-color: var(--color-yellow);
        }

        .mapa-lugar__number {
            width: 32px;
            height: 32px;
            background: var(--color-red);
            color: var(--color-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            flex-shrink: 0;
            clip-path: var(--btn-path-4);
        }

        .mapa-lugar__number--green {
            background: var(--color-green-dark);
        }

        .mapa-lugar__number--purple {
            background: #006994;
        }

        .mapa-lugar__number--yellow {
            background: var(--color-yellow);
            color: var(--color-black);
        }

        .mapa-lugar__number--blue {
            background: var(--color-blue-dark);
        }

        .mapa-lugar__info h4 {
            font-weight: 700;
            font-size: 0.95rem;
            margin-bottom: 0.15rem;
        }

        .mapa-lugar__info p {
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        .mapa-lugar__badge {
            margin-left: auto;
            font-size: 0.7rem;
            padding: 0.3rem 0.6rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            clip-path: var(--btn-path-4);
        }

        .mapa-lugar__badge--gratis {
            background: var(--color-green-dark);
            color: var(--color-white);
        }

        .mapa-lugar__badge--presentacion {
            background: var(--color-red);
            color: var(--color-white);
        }

        .mapa-visual {
            position: relative;
        }

        .mapa-visual{ align-self: start; }

        .mapa-visual__image {
            width: 100%;
            border-radius: 18px;
            box-shadow: var(--shadow-lg);
            background: var(--color-white);
            padding: 1.05rem;
        }

        .mapa-visual__image img {
            width: 100%;
            border-radius: 12px;
            /* Mucho más grande: ocupa la mayor parte del banner */
            height: clamp(360px, 55vw, 680px);
            max-height: 72vh;
            object-fit: contain;
            display: block;
        }

        .mapa-recorrido {
            margin-top: var(--spacing-lg);
            background: var(--color-white);
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
        }

        .mapa-recorrido h4 {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            color: var(--color-red);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .mapa-recorrido__steps {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem 1rem;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .mapa-recorrido__step {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.85rem;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.04);
            color: var(--color-text);
            font-size: 0.85rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .mapa-recorrido__icon {
            font-size: 1.15rem;
            line-height: 1;
        }

        /* Flecha automática entre pasos */
        .mapa-recorrido__step:not(:last-child)::after {
            content: "→";
            margin-left: 0.85rem;
            color: var(--color-text-muted);
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .mapa-recorrido__steps {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.6rem;
            }

            .mapa-recorrido__step {
                width: 100%;
                justify-content: flex-start;
                white-space: normal;
            }

            .mapa-recorrido__step:not(:last-child)::after {
                content: "";
                margin: 0;
            }
        }
.mapa-download {
            margin-top: var(--spacing-md);
            text-align: center;
        }

        .mapa-download__btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.9rem;
            transition: all var(--transition-normal);
            border: none;
            cursor: pointer;
        }

        .mapa-download__btn:hover {
            background: var(--color-red-dark);
            transform: translateY(-2px);
        }

        .mapa-download__btn svg {
            width: 20px;
            height: 20px;
        }

        /* ============================================
           PRICING SECTION - Comparación de Precios
        ============================================ */
        .pricing-section {
            padding: var(--spacing-xl) 0;
        }

        .pricing-header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .pricing-badge {
            display: inline-block;
            background: var(--color-blue-dark);
            color: var(--color-white);
            padding: 0.6rem 1.6rem;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: var(--font-heading);
            text-transform: uppercase;
            margin-bottom: var(--spacing-md);
            clip-path: var(--btn-path-4);
        }

        .pricing-title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 5vw, 3.5rem);
            text-transform: uppercase;
            margin-bottom: var(--spacing-sm);
            letter-spacing: 1px;
        }

        .pricing-title span {
            color: var(--color-red);
            background: var(--color-yellow);
            padding: 0.1rem 0.5rem;
            clip-path: var(--btn-path-4);
        }

        .pricing-subtitle {
            font-size: 1.1rem;
            color: var(--color-text-light);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .pricing-comparison {
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 2rem;
            margin-bottom: var(--spacing-lg);
            flex-wrap: wrap;
        }

        .pricing-card {
            background: var(--color-white);
            overflow: hidden;
            box-shadow: var(--shadow-panaca);
            width: 280px;
            position: relative;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-1);
        }

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

        .pricing-card--turista {
            opacity: 0.85;
        }
        .pricing-card__ribbon {
            position: absolute;
            top: 15px;
            right: -35px;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.4rem 3rem;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: var(--font-heading);
            transform: rotate(45deg);
        }

        .pricing-card__header {
            padding: 1.5rem;
            text-align: center;
            background: var(--color-gray-light);
        }
        .pricing-card__type {
            font-size: 0.9rem;
            font-weight: 600;
            display: block;
            margin-bottom: 0.5rem;
        }

        .pricing-card__title {
            font-family: var(--font-heading);
            font-size: 1.3rem;
            text-transform: uppercase;
        }

        .pricing-card__body {
            padding: 2rem 1.5rem;
            text-align: center;
        }

        .pricing-card__price {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 0.25rem;
            margin-bottom: 0.5rem;
        }

        .pricing-card__currency {
            font-size: 1.5rem;
            font-weight: 700;
            margin-top: 0.5rem;
        }

        .pricing-card__amount {
            font-family: var(--font-heading);
            font-size: 4rem;
            line-height: 1;
        }

        .pricing-card--turista .pricing-card__amount {
            text-decoration: line-through;
            opacity: 0.6;
        }

        .pricing-card__period {
            font-size: 1rem;
            font-weight: 600;
            margin-top: 0.5rem;
            opacity: 0.7;
        }

        .pricing-card__equivalent {
            font-size: 1rem;
            color: var(--color-text-light);
            margin-bottom: 1rem;
        }

        .pricing-card__equivalent--highlight {
            color: var(--color-red);
            font-weight: 700;
            font-size: 1.3rem;
        }

        .pricing-card__bonus {
            background: var(--color-yellow);
            padding: 0.85rem 1rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            clip-path: var(--btn-path-4);
        }

        .pricing-card__footer {
            padding: 1rem 1.5rem;
            background: var(--color-gray-light);
            text-align: center;
            font-size: 0.9rem;
            color: var(--color-text-light);
        }

        .pricing-card__footer--highlight {
            background: var(--color-red);
            color: var(--color-white);
        }

        .pricing-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pricing-arrow__content {
            background: var(--color-yellow);
            padding: 1rem 1.5rem;
            text-align: center;
            width: 110px;
            height: 110px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-panaca);
            clip-path: var(--btn-path-1);
        }

        .pricing-arrow__label {
            font-size: 0.65rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .pricing-arrow__amount {
            font-family: var(--font-heading);
            font-size: 2rem;
            color: var(--color-red);
        }

        /* Premium comparison */
        .pricing-premium {
            background: var(--color-white);
            padding: 2rem;
            max-width: 700px;
            margin: 0 auto var(--spacing-lg);
            box-shadow: var(--shadow-panaca);
            border: 3px solid var(--color-yellow);
            clip-path: var(--btn-path-2);
        }

        .pricing-premium__header {
            text-align: center;
            margin-bottom: 1rem;
        }

        .pricing-premium__header h3 {
            font-family: var(--font-heading);
            font-size: 1.3rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .pricing-premium__header p {
            font-size: 0.9rem;
            color: var(--color-text-light);
        }

        .pricing-premium__prices {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .pricing-premium__price {
            text-align: center;
        }

        .pricing-premium__label {
            font-size: 0.85rem;
            display: block;
            margin-bottom: 0.25rem;
        }

        .pricing-premium__value {
            font-weight: 700;
            font-size: 1.1rem;
        }

        .pricing-premium__value--strike {
            text-decoration: line-through;
            opacity: 0.6;
        }

        .pricing-premium__value--highlight {
            color: var(--color-red);
            font-size: 1.3rem;
        }

        /* Notice box - ESTILO PANACA */
        .pricing-notice {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            background: var(--color-cream);
            border: 3px solid var(--color-yellow);
            padding: 1.5rem;
            max-width: 800px;
            margin: 0 auto var(--spacing-lg);
            clip-path: var(--btn-path-2);
        }

        .pricing-notice__icon {
            width: 48px;
            height: 48px;
            background: var(--color-yellow);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            clip-path: var(--btn-path-4);
        }

        .pricing-notice__icon svg {
            width: 28px;
            height: 28px;
            stroke: #000;
            stroke-width: 2;
            fill: none;
        }

        .pricing-notice__content h4 {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
            letter-spacing: 0.5px;
        }

        .pricing-notice__content p {
            font-size: 0.95rem;
            color: var(--color-text);
            line-height: 1.5;
        }

        .pricing-cta {
            text-align: center;
        }

        .pricing-cta__btn {
            background: var(--color-red);
            color: var(--color-white);
            padding: 1.35rem 3.5rem;
            font-size: 1.2rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: none;
            cursor: pointer;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-1);
        }

        .pricing-cta__btn:hover {
            background: var(--color-red-dark);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 10px 30px rgba(226, 27, 27, 0.4);
        }

        .pricing-cta__note {
            margin-top: var(--spacing-sm);
            font-size: 0.9rem;
            color: var(--color-text-light);
        }

        /* ============================================
           TICKETS
        ============================================ */
        .tickets-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-lg);
            max-width: 900px;
            margin: 0 auto;
        }

        .ticket-card {
            background: var(--color-white);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: all var(--transition-normal);
            border: 2px solid transparent;
        }

        .ticket-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
            border-color: var(--color-red);
        }

        .ticket-card--featured {
            border: 3px solid var(--color-red);
        }

        .ticket-card__header {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .ticket-card__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-normal);
        }

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

        .ticket-card__badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.5rem 1.2rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            font-family: var(--font-heading);
            clip-path: var(--btn-path-1);
        }

        .ticket-card__badge--gold {
            background: var(--color-yellow);
            color: var(--color-black);
            clip-path: var(--btn-path-4);
        }

        .ticket-card__kids {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.5rem 1rem;
            font-size: 0.7rem;
            font-weight: 700;
            font-family: var(--font-heading);
            clip-path: var(--btn-path-3);
        }

        .ticket-card__content {
            padding: var(--spacing-md);
        }

        .ticket-card__title {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            margin-bottom: var(--spacing-sm);
            text-transform: uppercase;
            background: var(--color-yellow);
            display: inline-block;
            padding: 0.35rem 1rem;
            clip-path: var(--btn-path-4);
        }

        .ticket-card__description {
            font-size: 0.9rem;
            color: var(--color-text-light);
            margin-bottom: var(--spacing-md);
            line-height: 1.5;
        }

        .ticket-card__features {
            list-style: none;
            margin-bottom: var(--spacing-md);
        }

        .ticket-card__feature {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .ticket-card__feature svg {
            width: 18px;
            height: 18px;
            stroke: var(--color-red);
            stroke-width: 2;
            fill: none;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .ticket-card__divider {
            height: 1px;
            background: var(--color-gray);
            margin: var(--spacing-md) 0;
        }

        /* Precios */
        .price-box {
            margin-bottom: var(--spacing-md);
        }

        .price-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .price-label {
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            min-width: 85px;
            color: var(--color-text-light);
        }

        .price-amount {
            font-family: var(--font-heading);
            font-size: 1.2rem;
        }

        .price-amount--strike {
            text-decoration: line-through;
            color: var(--color-text-muted);
        }

        .price-amount--highlight {
            font-size: 2rem;
            color: var(--color-red);
        }
        .price-kids {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-yellow);
            padding: 0.5rem 0.75rem;
            margin-top: var(--spacing-sm);
        }

        .price-kids svg {
            width: 18px;
            height: 18px;
            stroke: var(--color-black);
            stroke-width: 2;
            fill: none;
        }

        .price-kids span {
            font-size: 0.85rem;
            font-weight: 700;
        }

        .discount-banner {
            background: var(--color-yellow);
            padding: var(--spacing-sm);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: var(--spacing-md) 0;
        }

        .discount-banner svg {
            width: 20px;
            height: 20px;
            stroke: var(--color-black);
            stroke-width: 2;
            fill: none;
        }

        .discount-banner span {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .ticket-card__cta {
            width: 100%;
            background: var(--color-red);
            color: var(--color-white);
            padding: 1rem;
            font-size: 1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all var(--transition-normal);
            border: none;
        }

        .ticket-card__cta:hover {
            background: var(--color-red-dark);
        }

        /* ============================================
           TESTIMONIOS - ESTILO PANACA
        ============================================ */

        /* Google badge y botón en testimonios */
        .testimonio--google {
            border-left-color: #4285F4;
        }
        .testimonio__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.75rem;
        }
        .testimonio__google-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--color-text-light);
        }
        .testimonio__google-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: conic-gradient(from 90deg, #DB4437 0 25%, #F4B400 0 50%, #0F9D58 0 75%, #4285F4 0 100%);
        }
        .testimonio__btn {
            width: 100%;
            margin-top: 1rem;
            text-decoration: none;
        }
        .testimonios-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-lg);
        }

        .testimonio {
            background: var(--color-white);
            padding: var(--spacing-lg);
            box-shadow: var(--shadow-panaca);
            transition: all var(--transition-panaca);
            border-left: 4px solid var(--color-yellow);
            clip-path: var(--btn-path-2);
        }

        .testimonio:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            border-left-color: var(--color-red);
        }

        .testimonio__stars {
            display: flex;
            gap: 0.25rem;
            margin-bottom: var(--spacing-sm);
        }

        .testimonio__stars svg {
            width: 20px;
            height: 20px;
            fill: var(--color-yellow);
            stroke: var(--color-yellow);
        }

        .testimonio__text {
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: var(--spacing-md);
            font-style: italic;

            /* Limitar texto a ~8 renglones (con ...). */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 8;
            overflow: hidden;
        }

        .testimonio__author {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .testimonio__avatar {
            width: 45px;
            height: 45px;
            background: var(--color-red);
            color: var(--color-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            clip-path: var(--btn-path-4);
        }

        .testimonio__name {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .testimonio__location {
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        /* ============================================
           FAQ
        ============================================ */
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Tarjeta FAQ estilo PANACA: recorte orgánico + sombra + franja roja */
        .faq-item {
            position: relative;
            background: var(--color-white);
            box-shadow: var(--shadow-panaca);
            cursor: pointer;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-2);
            overflow: hidden;
        }

        /* Franja roja izquierda (como la referencia) */
        .faq-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            background: var(--color-red);
        }

        .faq-item:hover {
            transform: translateY(-4px) rotate(-0.15deg);
            box-shadow: var(--shadow-hover);
        }

        .faq-item__question {
            padding: 1.25rem 1.5rem 1.25rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .faq-item__question h3 {
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.2px;
        }

        /* Flecha con “badge” irregular PANACA */
        .faq-item__question svg {
            width: 28px;
            height: 28px;
            stroke: var(--color-red);
            stroke-width: 2.5;
            fill: none;
            flex-shrink: 0;
            padding: 6px;
            background: rgba(226, 27, 27, 0.10);
            clip-path: var(--btn-path-4);
            transition: transform var(--transition-fast), background var(--transition-fast), stroke var(--transition-fast);
        }

        .faq-item.active .faq-item__question svg {
            transform: rotate(180deg);
            background: var(--color-red);
            stroke: var(--color-white);
        }

        .faq-item__answer {
            max-height: 0;
            overflow: hidden;
            padding: 0;
            transition: max-height var(--transition-normal), padding 0.2s;
        }

        .faq-item.active .faq-item__answer {
            max-height: 500px;
            padding: 0;
        }

        .faq-item__answer p {
            padding: 0 1.5rem 1.25rem 1.25rem;
            font-size: 0.9rem;
            color: var(--color-text-light);
            line-height: 1.6;
            border-top: 1px solid var(--color-gray);
            margin-left: 0;
        }

        /* Responsive: una columna */
        @media (max-width: 768px) {
            .faq-grid {
                grid-template-columns: 1fr;
            }
        }

/* ============================================
           CTA FINAL
        ============================================ */
        .cta-final {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: var(--color-white);
            text-align: center;
            padding: var(--spacing-xl) 0;
        }

        .cta-final__badges {
            display: flex;
            justify-content: center;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
            margin-bottom: var(--spacing-md);
        }

        .cta-final__badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            font-size: 0.85rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
        }

        .cta-final__badge--red {
            background: var(--color-red);
            clip-path: var(--btn-path-1);
        }

        .cta-final__badge--yellow {
            background: var(--color-yellow);
            color: var(--color-black);
            clip-path: var(--btn-path-4);
        }

        .cta-final__title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 4vw, 3rem);
            margin-bottom: var(--spacing-sm);
            text-transform: uppercase;
        }

        .cta-final__title span {
            color: var(--color-yellow);
        }

        .cta-final__subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: var(--spacing-lg);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-final__button {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--color-red);
            color: var(--color-white);
            padding: 1.35rem 3.5rem;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all var(--transition-panaca);
            border: none;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            clip-path: var(--btn-path-1);
        }

        .cta-final__button:hover {
            background: var(--color-red-dark);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 10px 30px rgba(226, 27, 27, 0.4);
        }

        .cta-final__urgency {
            margin-top: var(--spacing-md);
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* ============================================
           FOOTER - ESTILO PANACA VERDE OSCURO
        ============================================ */
        .site-footer {
            background: linear-gradient(180deg, var(--color-green-dark) 0%, #1c2414 100%);
            color: #fff;
            padding: 0;
            font-family: var(--font-body);
            position: relative;
            overflow: visible;
            margin-top: 20px;
        }
        
        /* Borde zigzag superior PANACA */
        .site-footer::before {
            content: '';
            position: absolute;
            top: -18px;
            left: 0;
            right: 0;
            height: 22px;
            background: linear-gradient(180deg, var(--color-green-dark) 0%, var(--color-green-dark) 100%);
            clip-path: var(--clip-zigzag-top);
            z-index: 3;
        }

        .footer__main {
            padding: 4.5rem 0 3rem;
        }

        .footer__grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
            gap: 3rem;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .footer__brand {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .footer__logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        
        /* Logo PANACA (imagen) */
        .footer__logo-img {
            height: 38px;
            width: auto;
            display: block;
        }
.footer__logo-text {
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: 2px;
            color: #fff;
            font-family: var(--font-heading);
        }

        .footer__logo-dot {
            width: 12px;
            height: 12px;
            background: var(--color-yellow);
            border-radius: 50%;
        }

        .footer__tagline {
            font-size: 1rem;
            line-height: 1.6;
            color: rgba(255,255,255,0.9);
            max-width: 280px;
        }

        .footer__social {
            display: flex;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }

        .footer__social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: rgba(255,255,255,0.15);
            border-radius: 0;
            color: #fff;
            transition: all var(--transition-panaca);
        }

        .footer__social-link:hover {
            background: var(--color-yellow);
            color: var(--color-black);
            transform: translateY(-3px) rotate(-2deg);
        }

        .footer__social-link svg {
            width: 20px;
            height: 20px;
        }

        .footer__column {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .footer__title {
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            margin-bottom: 0.5rem;
            font-family: var(--font-heading);
        }

        .footer__links {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        .footer__link {
            font-size: 0.95rem;
            color: rgba(255,255,255,0.85);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer__link:hover {
            color: var(--color-yellow);
            padding-left: 5px;
        }

        .footer__cta-column {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .footer__cta-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.5rem;
            font-family: var(--font-heading);
        }

        .footer__cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem 1.75rem;
            font-size: 0.9rem;
            font-weight: 700;
            border-radius: 0;
            transition: all var(--transition-panaca);
            text-align: center;
            border: none;
            cursor: pointer;
            font-family: var(--font-heading);
            text-transform: uppercase;
        }

        .footer__cta-btn--primary {
            background: var(--color-yellow);
            color: var(--color-black);
            clip-path: var(--btn-path-4);
        }

        .footer__cta-btn--primary:hover {
            background: #D38F01;
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 25px rgba(245, 177, 34, 0.4);
        }

        .footer__cta-btn--secondary {
            background: rgba(255,255,255,0.15);
            color: #fff;
            border: 2px solid rgba(255,255,255,0.4);
            clip-path: var(--btn-path-2);
        }

        .footer__cta-btn--secondary:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-3px) scale(1.03);
        }

        .footer__contact-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.9);
        }

        .footer__contact-item svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin-top: 2px;
            color: #fff;
        }

        .footer__divider {
            height: 1px;
            background: rgba(255,255,255,0.2);
            margin: 0;
        }

        /* Footer SEO Content Block */
        .footer__seo-content {
            padding: 2rem 0;
            border-top: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.15);
        }

        .footer__seo-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .footer__seo-block h3 {
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            color: rgba(255,255,255,0.9);
            margin-bottom: 0.5rem;
        }

        .footer__seo-block p {
            font-size: 0.8rem;
            line-height: 1.5;
            color: rgba(255,255,255,0.6);
        }

        .footer__seo-block p strong {
            color: rgba(255,255,255,0.8);
        }

        .footer__seo-keywords {
            padding-top: 1rem;
            border-top: 1px solid rgba(255,255,255,0.05);
        }

        .footer__seo-keywords p {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.4);
            line-height: 1.4;
        }

        /* Planifica tu visita — plegable con <details> */
        .ai-content {
            background: var(--color-cream, #faf8f4);
            padding: 3rem 0 2.5rem;
            color: var(--color-text, #3e3e3e);
            font-size: 0.92rem;
            line-height: 1.7;
        }

        .ai-box {
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 16px;
            background: var(--color-white, #fff);
            overflow: hidden;
        }

        .ai-box summary {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1.1rem 1.5rem;
            font-family: var(--font-heading);
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-green-dark, #005844);
            cursor: pointer;
            list-style: none;
            user-select: none;
            transition: background 0.2s;
        }
        .ai-box summary::-webkit-details-marker { display: none; }

        .ai-box summary::before {
            content: '▸';
            font-size: 1.1rem;
            transition: transform 0.25s ease;
            flex-shrink: 0;
        }
        .ai-box[open] summary::before {
            transform: rotate(90deg);
        }

        .ai-box summary:hover {
            background: rgba(0,88,68,0.04);
        }

        .ai-box summary .ai-box__hint {
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 0.82rem;
            color: var(--color-text-light, #999);
        }

        .ai-box__inner {
            padding: 0 1.5rem 1.5rem;
        }

        .ai-content__grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .ai-content__section {
            background: var(--color-cream, #faf8f4);
            border-radius: 12px;
            padding: 1.25rem;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .ai-content__section h3 {
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-green-dark, #005844);
            margin-bottom: 0.6rem;
        }

        .ai-content__section p {
            margin-bottom: 0.5rem;
            color: var(--color-text-light, #6d6d6d);
        }

        .ai-content__section ul,
        .ai-content__section ol {
            padding-left: 1.25rem;
            margin-bottom: 0.5rem;
        }

        .ai-content__section li {
            margin-bottom: 0.35rem;
            color: var(--color-text-light, #6d6d6d);
        }

        .ai-content__section strong {
            color: var(--color-text, #3e3e3e);
        }

        .ai-content__data {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 0.3rem 1rem;
            font-size: 0.85rem;
        }

        .ai-content__data dt {
            font-weight: 600;
            color: var(--color-green-dark, #005844);
        }

        .ai-content__data dd {
            color: var(--color-text-light, #6d6d6d);
            margin: 0;
        }

        .ai-content__citation {
            margin-top: 1.25rem;
            padding-top: 0.75rem;
            border-top: 1px solid rgba(0,0,0,0.06);
            font-size: 0.78rem;
            color: var(--color-text-light, #999);
            font-style: italic;
            text-align: center;
        }

        /* Desktop: abierto por defecto via JS, pero no forzar con CSS */
        @media (max-width: 768px) {
            .ai-content { padding: 2rem 0 1.5rem; }
            .ai-content__grid { grid-template-columns: 1fr; gap: 1rem; }
            .ai-box summary { padding: 1rem 1.2rem; font-size: 0.95rem; }
            .ai-box__inner { padding: 0 1.2rem 1.2rem; }
            .ai-content__data { grid-template-columns: 1fr; }
            .ai-content__data dt { margin-top: 0.4rem; }
        }

        /* ============================================
           GUÍAS Y BLOG - Enlazado interno SEO
        ============================================ */
        .guias-section {
            padding: var(--spacing-xl) 0;
            background: var(--color-cream);
        }
        .guias-section .section-header {
            margin-bottom: var(--spacing-lg);
        }
        .guias-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        .guia-card {
            background: #fff;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            clip-path: var(--btn-path-4);
        }
        .guia-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(0,0,0,0.14);
        }
        .guia-card__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 120px;
            background: var(--color-green-dark);
            color: var(--color-yellow);
            font-size: 2.8rem;
        }
        .guia-card__body {
            padding: 1.2rem 1.4rem 1.5rem;
        }
        .guia-card__tag {
            display: inline-block;
            background: var(--color-yellow);
            color: var(--color-brown);
            padding: 0.2rem 0.6rem;
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: var(--font-heading);
            margin-bottom: 0.5rem;
        }
        .guia-card__title {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            color: var(--color-brown);
            margin-bottom: 0.5rem;
            line-height: 1.3;
        }
        .guia-card__excerpt {
            font-size: 0.88rem;
            color: var(--color-text-light);
            line-height: 1.55;
            margin-bottom: 1rem;
        }
        .guia-card__link {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--color-green-dark);
            font-weight: 700;
            font-size: 0.85rem;
            text-decoration: none;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.2s;
        }
        .guia-card__link:hover {
            color: var(--color-red);
        }
        .guia-card__link svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 2.5;
            fill: none;
            transition: transform 0.2s;
        }
        .guia-card__link:hover svg {
            transform: translateX(3px);
        }
        /* Artículos expandibles inline */
        .guia-article {
            max-width: 900px;
            margin: 2rem auto 0;
            background: #fff;
            padding: 2rem 2.5rem;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
        }
        .guia-article summary {
            font-family: var(--font-heading);
            font-size: 1.15rem;
            color: var(--color-brown);
            cursor: pointer;
            padding: 0.8rem 0;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid var(--color-cream);
        }
        .guia-article summary::after {
            content: "+";
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-green-dark);
            transition: transform 0.2s;
        }
        .guia-article[open] summary::after {
            content: "−";
        }
        .guia-article__content {
            padding: 1.2rem 0;
            font-size: 0.92rem;
            line-height: 1.7;
            color: var(--color-text);
        }
        .guia-article__content h4 {
            font-family: var(--font-heading);
            color: var(--color-brown);
            margin: 1.2rem 0 0.4rem;
            font-size: 1rem;
        }
        .guia-article__content a {
            color: var(--color-green-dark);
            font-weight: 600;
            text-decoration: underline;
        }
        .guia-article__content a:hover {
            color: var(--color-red);
        }
        @media (max-width: 768px) {
            .guias-grid {
                grid-template-columns: 1fr;
                max-width: 420px;
            }
            .guia-article {
                padding: 1.2rem 1rem;
                margin-top: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .footer__seo-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }

        .footer__bottom {
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            flex-wrap: wrap;
            gap: 1rem;
            background: rgba(0,0,0,0.1);
        }

        .footer__copyright {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.8);
        }

        .footer__legal {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .footer__legal-link {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.8);
            transition: color 0.3s ease;
        }

        .footer__legal-link:hover {
            color: #fff;
        }

        .footer__badges {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .footer__badge {
            height: 40px;
            opacity: 0.9;
            transition: opacity 0.3s ease;
        }

        .footer__badge:hover {
            opacity: 1;
        }

        /* Sección de Seguridad y Confianza */
        .footer__security {
            background: rgba(0,0,0,0.15);
            padding: 2rem;
        }

        .footer__security-inner {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .footer__security-title {
            text-align: center;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.7);
            font-weight: 600;
        }

        .footer__security-badges {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .footer__security-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 1.5rem;
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
        }

        .footer__security-badge:hover {
            background: rgba(255,255,255,0.15);
            transform: translateY(-3px);
        }

        .footer__security-badge img {
            height: 40px;
            width: auto;
            object-fit: contain;
        }

        .footer__security-badge span {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.8);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
        }

        /* Badge especial - Sitio Oficial */
        .footer__official-badge {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1.25rem;
            background: #fff;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .footer__official-badge svg {
            width: 24px;
            height: 24px;
            color: #166d35;
        }

        .footer__official-badge-text {
            display: flex;
            flex-direction: column;
        }

        .footer__official-badge-text strong {
            font-size: 0.85rem;
            color: #1a1a2e;
            font-weight: 700;
        }

        .footer__official-badge-text span {
            font-size: 0.65rem;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Pasarela Azul destacada */
        .footer__azul-badge {
            background: #fff;
            padding: 1rem 2rem;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .footer__azul-badge img {
            height: 35px;
        }

        .footer__azul-badge span {
            font-size: 0.65rem;
            color: #333;
            font-weight: 500;
        }

        /* Tarjetas de pago */
        .footer__payment-methods {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 1rem 0;
        }

        .footer__payment-card {
            height: 32px;
            opacity: 0.9;
        }

        .footer__payment-card:hover {
            opacity: 1;
        }

        /* Footer Responsive 1024px */
        @media (max-width: 1024px) {
            .footer__grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 2.5rem;
            }

            .footer__brand {
                grid-column: 1 / -1;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 2rem;
                border-bottom: 1px solid rgba(255,255,255,0.2);
            }

            .footer__tagline {
                display: none;
            }

            .footer__security-badges {
                gap: 1.5rem;
            }

            .footer__security-badge {
                padding: 0.75rem 1rem;
            }

            .footer__cta-column {
                grid-column: 1 / -1;
                flex-direction: row;
                justify-content: center;
                gap: 1rem;
                padding-top: 1.5rem;
                border-top: 1px solid rgba(255,255,255,0.2);
            }
        }

        /* Footer Responsive 768px */
        @media (max-width: 768px) {
            .footer__main {
                padding: 3rem 0 2rem;
            }

            .footer__grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
                padding: 0 1.5rem;
            }

            .footer__brand {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .footer__tagline {
                display: block;
            }

            .footer__cta-column {
                flex-direction: column;
            }

            .footer__bottom {
                flex-direction: column;
                text-align: center;
                gap: 1.5rem;
                padding: 1.5rem;
            }

            .footer__legal {
                justify-content: center;
            }

            .footer__badges {
                justify-content: center;
            }

            .footer__security {
                padding: 1.5rem 1rem;
            }

            .footer__security-badges {
                gap: 1rem;
            }

            .footer__security-badge {
                padding: 0.75rem 1rem;
            }

            .footer__security-badge img {
                height: 30px;
            }

            .footer__official-badge {
                padding: 0.5rem 1rem;
            }
        }

        /* Footer Responsive 480px */
        @media (max-width: 480px) {
            .footer__grid {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 0 1rem;
            }

            .footer__brand {
                border-bottom: none;
                padding-bottom: 0;
            }

            .footer__column {
                padding-bottom: 1.5rem;
                border-bottom: 1px solid rgba(255,255,255,0.2);
            }

            .footer__cta-column {
                border-top: none;
                padding-top: 0;
            }

            .footer__cta-btn {
                width: 100%;
            }

            .footer__legal {
                flex-direction: column;
                gap: 0.75rem;
            }

            .footer__security-badges {
                flex-direction: column;
                gap: 1rem;
            }

            .footer__security-badge {
                width: 100%;
                max-width: 280px;
            }

            .footer__payment-methods {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
        }

        /* ============================================
           STICKY CTA MOBILE
        ============================================ */
        .sticky-cta {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--color-white);
            padding: var(--spacing-sm);
            box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
            z-index: 100;
        }

        .sticky-cta__content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-sm);
            max-width: 1400px;
            margin: 0 auto;
        }

        .sticky-cta__text {
            font-size: 0.85rem;
        }

        .sticky-cta__text strong {
            color: var(--color-red);
            font-size: 1.2rem;
        }

        .sticky-cta__button {
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            font-size: 0.9rem;
            white-space: nowrap;
            cursor: pointer;
            border: none;
        }

        /* ============================================
           MODAL DE COMPRA - Rediseño completo
        ============================================ */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-y: auto;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: var(--color-white);
            width: 100%;
            max-width: 900px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            border-radius: 8px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .modal__close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 36px;
            height: 36px;
            background: var(--color-red);
            color: var(--color-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.3rem;
            border: none;
            z-index: 10;
            transition: transform var(--transition-fast);
        }

        .modal__close:hover {
            transform: scale(1.1);
        }

        /* Header del modal */
        .modal__header {
            background: #395542;
            color: var(--color-white);
            padding: 0.75rem 2rem;
            text-align: center;
            border-bottom: 4px solid #F1C400;
        }

        .modal__header-title {
            font-family: var(--font-heading);
            font-size: 1.25rem;
            margin-bottom: 0.15rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .modal__header-subtitle {
            font-size: 0.8rem;
            opacity: 0.9;
        }

        /* Contenedor principal del modal */
        .modal__body {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            padding: 1rem;
            align-items: start;
        }

        /* Sección de productos */
        .modal__products {
            padding: 0.75rem;
            background: var(--color-gray-light);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .modal__products-title {
            font-family: var(--font-heading);
            font-size: 1rem;
            text-transform: uppercase;
            margin-bottom: 0.25rem;
            color: var(--color-black);
        }

        .modal__product {
            background: var(--color-white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: box-shadow var(--transition-fast);
        }

        .modal__product:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.12);
        }

        .modal__product-header {
            display: flex;
            align-items: stretch;
        }

        .modal__product-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .modal__product-info {
            flex: 1;
            padding: 0.4rem 0.75rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .modal__product-title {
            font-family: var(--font-heading);
            font-size: 0.85rem;
            margin-bottom: 0.15rem;
            text-transform: uppercase;
            color: var(--color-black);
        }

        .modal__product-desc {
            font-size: 0.7rem;
            color: var(--color-text-light);
            line-height: 1.3;
        }

        .modal__product-desc strong {
            color: var(--color-red);
        }

        .modal__product-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.4rem 0.75rem;
            background: var(--color-gray-light);
            border-top: 1px solid var(--color-gray);
        }

        .modal__product-prices {
            display: flex;
            flex-direction: column;
        }

        .modal__product-price--strike {
            font-size: 0.75rem;
            text-decoration: line-through;
            color: var(--color-text-muted);
        }

        .modal__product-price--current {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--color-red);
        }

        .modal__product-qty {
            display: flex;
            align-items: center;
            gap: 0;
            background: var(--color-white);
            border-radius: 3px;
            overflow: hidden;
            border: 2px solid #E4002B;
        }

        /* Compact product layout */
        .modal__product-compact {
            background: #473729;
            color: #fff;
            padding: 0.5rem 1.6rem;
            clip-path: var(--btn-path-4);
            border: none;
            border-radius: 0;
        }
        .modal__compact-name {
            font-family: var(--font-heading);
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #fff;
            display: block;
        }
        .modal__compact-desc {
            font-size: 0.65rem;
            color: rgba(255,255,255,0.65);
            display: block;
        }
        .modal__product-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.35rem 0.75rem;
            background: #fff;
            border-bottom: 1px solid var(--color-gray);
        }
        .modal__product-row:last-of-type {
            border-radius: 0 0 12px 4px;
            border-bottom: none;
            margin-bottom: 0;
        }
        .modal__row-info {
            min-width: 70px;
        }
        .modal__row-type {
            font-family: var(--font-heading);
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            display: block;
        }
        .modal__row-age {
            font-size: 0.6rem;
            color: #888;
            display: block;
        }
        .modal__row-prices {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            min-width: 70px;
            margin-right: 0.5rem;
        }

        .modal__qty-btn {
            width: 30px;
            height: 30px;
            background: #E4002B;
            color: var(--color-white);
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            border-radius: 2px;
            transition: background var(--transition-fast);
            font-weight: 700;
        }

        .modal__qty-btn:hover {
            background: var(--color-red-dark);
        }

        .modal__qty-input {
            width: 36px;
            height: 30px;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 700;
            border: none;
            background: var(--color-white);
        }

        /* Sección de checkout */
        .modal__checkout {
            padding: 1.25rem;
            background: var(--color-gray-light);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .modal__checkout-title {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .modal__date-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .modal__date-label {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .modal__date-input {
            width: 100%;
            padding: 0.875rem 1rem;
            font-size: 1rem;
            border: 2px solid var(--color-gray);
            border-radius: 6px;
            font-family: inherit;
            transition: border-color var(--transition-fast);
        }

        .modal__date-input:focus {
            outline: none;
            border-color: var(--color-red);
        }

        .modal__discount-banner {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.6rem 1.6rem;
            text-align: center;
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            clip-path: var(--btn-path-4);
            border: none;
            box-shadow: none;
            border-radius: 0;
        }

        .modal__summary {
            background: var(--color-gray-light);
            padding: 1rem;
            border-radius: 6px;
        }

        .modal__subtotal {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .modal__subtotal span {
            color: var(--color-red);
        }

        .modal__hint {
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        .modal__buy-btn {
            background: #E4002B;
            color: #fff;
            padding: 0.85rem 2rem;
            font-family: var(--font-heading);
            font-size: 1.05rem;
            font-weight: 800;
            border: none;
            border-radius: 0;
            cursor: pointer;
            transition: all var(--transition-normal);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            clip-path: var(--btn-path-4);
            box-shadow: none;
        }

        .modal__buy-btn:hover {
            background: #c50024;
            filter: brightness(1.1);
        }

        .modal__buy-btn:active {
            filter: brightness(0.9);
        }

        .modal__security {
            text-align: center;
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        /* Tarjeta promocional Cumpleaños en modal */
        /* Tarjeta promocional Cumpleaños en modal - Estilo PANACA */
        .modal__cumple-promo {
            background: var(--color-white);
            border: 2px solid var(--color-yellow);
            padding: 1rem;
            margin-top: 1rem;
            position: relative;
            overflow: visible;
            clip-path: var(--btn-path-1);
        }
        .modal__cumple-promo::before {
            content: '🎂';
            position: absolute;
            top: -12px;
            left: 12px;
            font-size: 1.4rem;
            background: var(--color-white);
            padding: 0 0.3rem;
        }
        .modal__cumple-promo-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.4rem;
        }
        .modal__cumple-promo-icon {
            display: none;
        }
        .modal__cumple-promo-tag {
            background: var(--color-red);
            color: white;
            font-family: var(--font-heading);
            font-size: 0.6rem;
            font-weight: 700;
            padding: 0.25rem 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            clip-path: var(--btn-path-3);
        }
        .modal__cumple-promo-title {
            font-family: var(--font-heading);
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-green-dark);
            margin: 0 0 0.3rem;
            text-transform: uppercase;
        }
        .modal__cumple-promo-desc {
            font-family: var(--font-body);
            font-size: 0.72rem;
            color: var(--color-text);
            line-height: 1.4;
            margin: 0 0 0.6rem;
        }
        .modal__cumple-promo-includes {
            display: flex;
            flex-wrap: wrap;
            gap: 0.3rem;
            margin-bottom: 0.75rem;
        }
        .modal__cumple-promo-item {
            background: var(--color-cream);
            font-family: var(--font-body);
            font-size: 0.6rem;
            color: var(--color-text);
            padding: 0.25rem 0.5rem;
            font-weight: 600;
            clip-path: var(--btn-path-2);
        }
        .modal__cumple-promo-btn {
            display: block;
            width: 100%;
            background: var(--color-red);
            color: var(--color-white);
            font-family: var(--font-heading);
            font-size: 0.8rem;
            font-weight: 700;
            padding: 0.65rem 1rem;
            border: none;
            cursor: pointer;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-4);
        }
        .modal__cumple-promo-btn:hover {
            background: var(--color-red-dark);
            transform: scale(1.03);
        }

        /* Travesía not available notice */
        .modal__travesia-notice {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            background: #FFF3E0;
            border: 1px solid #FFE0B2;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-top: 0.6rem;
        }

        .modal__travesia-notice-icon {
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .modal__travesia-notice p {
            font-size: 0.78rem;
            color: #5D4037;
            line-height: 1.45;
            margin: 0;
        }

        /* Date selected badge in modal */
        .modal__date-selected-badge {
            display: inline-block;
            margin-top: 0.4rem;
            padding: 0.25rem 0.6rem;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .modal__date-selected-badge--alta {
            background: #FFF3E0;
            color: #E65100;
        }

        .modal__date-selected-badge--puntual {
            background: #FFEBEE;
            color: #C62828;
        }

        .modal__date-selected-badge--regular {
            background: #E8F5E9;
            color: #2E7D32;
        }

        /* Clickable calendar days */
        .panaca-cal__day--alta,
        .panaca-cal__day--puntual,
        .panaca-cal__day--regular {
            cursor: pointer;
        }

        .panaca-cal__day--alta:active,
        .panaca-cal__day--puntual:active,
        .panaca-cal__day--regular:active {
            transform: scale(0.92);
        }

        .panaca-cal__day--selected {
            box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 3px var(--color-red) !important;
        }

        .panaca-cal__day--closed {
            cursor: default;
        }

        /* ============================================
           BOTONES GENERALES
        ============================================ */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            transition: all var(--transition-normal);
            cursor: pointer;
            border: none;
        }

        .btn--primary {
            background: var(--color-red);
            color: var(--color-white);
        }

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

        /* ============================================
           RESPONSIVE
        ============================================ */
        @media (max-width: 1024px) {
            /* Nuevo RD responsive 1024px */
            .nuevo-rd__features {
                grid-template-columns: repeat(2, 1fr);
            }

            /* Banner frecuente responsive */
            .frecuente-banner {
                flex-direction: column;
                text-align: center;
                padding: 1.5rem;
            }

            .gratis-grid {
                grid-template-columns: 1fr;
                max-width: 450px;
                margin: 0 auto;
            }

            .travesia {
                grid-template-columns: 1fr;
            }

            .travesia__image {
                order: -1;
            }

            .travesia__content {
                padding-right: 0;
            }

            .tickets-grid {
                grid-template-columns: 1fr;
                max-width: 450px;
            }

            .testimonios-grid {
                grid-template-columns: 1fr;
                max-width: 450px;
                margin: 0 auto;
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }

            /* Ajustar posición de flechas en tablet */
            .hero__arrow--prev {
                right: calc(var(--spacing-lg) + 150px);
            }

            .hero__arrow--next {
                right: calc(var(--spacing-lg) + 95px);
            }
        }

        @media (max-width: 768px) {
            :root {
                --header-height: 60px;
            }

            /* Header toggle responsive 768px */
            .header__toggle {
                padding: 0.35rem 0.75rem;
                gap: 0.35rem;
            }

            .header__toggle-label {
                display: none;
            }

            .header__toggle-btn {
                padding: 0.35rem 0.6rem;
                font-size: 0.7rem;
            }

            .header__lang {
                padding: 0.35rem 0.5rem;
            }

            .header__lang-current {
                font-size: 0.75rem;
            }

            .header__cta {
                padding: 0.5rem 0.75rem;
                font-size: 0.7rem;
            }

            /* Nav Menu responsive 768px */
            .nav-menu__container {
                flex-direction: column;
                gap: 0;
            }

            .nav-menu__link {
                padding: 0.65rem 1rem;
                font-size: 0.75rem;
            }

            .nav-menu__link svg {
                width: 14px;
                height: 14px;
            }

            .nav-menu__highlights {
                width: 100%;
                justify-content: center;
                padding: 0.5rem;
                gap: 0.5rem;
                border-top: 1px solid rgba(255,255,255,0.1);
            }

            .nav-menu__highlight {
                padding: 0.4rem 0.75rem;
                font-size: 0.7rem;
            }

            /* Grupos Section responsive 768px */
            .grupos-stats {
                gap: 2rem;
            }

            .grupos-stat__number {
                font-size: 2.5rem;
            }

            .grupos-cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .grupos-card__image {
                height: 180px;
            }

            .grupos-card__title {
                font-size: 1.1rem;
            }

            .grupos-card__desc {
                font-size: 0.8rem;
            }

            .grupos-card__features {
                display: none;
            }

            .grupos-cta-section {
                flex-direction: column;
                text-align: center;
                padding: 1.5rem;
            }

            .grupos-cta-info h3 {
                font-size: 1.25rem;
            }

            .grupos-ctas {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }

            .grupos-cta {
                width: 100%;
                max-width: 350px;
            }

            /* Location responsive 768px */
            .location-content {
                grid-template-columns: 1fr;
                gap: var(--spacing-lg);
            }

            .location-map {
                min-height: 350px;
            }

            .location-map iframe {
                min-height: 350px;
            }

            .location-details {
                grid-template-columns: 1fr;
            }

            .location-title {
                font-size: 1.8rem;
            }

            /* Horarios responsive 768px */
            .horarios-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .horario-card--featured {
                transform: none;
            }

            .horario-card--featured:hover {
                transform: translateY(-5px);
            }

            .horarios-notice {
                flex-direction: column;
                text-align: center;
            }

            /* Restaurante responsive 768px */
            .restaurante-content {
                grid-template-columns: 1fr;
                gap: var(--spacing-lg);
            }

            .restaurante-menu__grid {
                grid-template-columns: 1fr;
            }

            .restaurante-gallery {
                order: -1;
            }

            .restaurante-gallery__main img {
                height: 250px;
            }

            /* Mapa responsive */
            @media (max-width: 900px){
                /* Mantener el mapa a una sola columna (full ancho) */
                .mapa-content{ grid-template-columns: 1fr; gap: var(--spacing-lg); }
            }
            @media (max-width: 640px){
                .mapa-content{ grid-template-columns: 1fr; }
                .mapa-visual{ order: 0; }
            }

            .mapa-visual {
                order: -1;
            }

            .mapa-recorrido__steps {
                justify-content: center;
            }

            /* Nuevo RD responsive 768px */
            .nuevo-rd__features {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }

            .nuevo-rd__feature {
                padding: 1.5rem 1rem;
            }

            .nuevo-rd__feature-icon {
                font-size: 2rem;
            }

            .nuevo-rd__title {
                font-size: 1.8rem;
            }

            .nuevo-rd__subtitle {
                font-size: 1rem;
            }

            .nuevo-rd__quote {
                padding: 1rem;
            }

            /* Banner frecuente responsive 768px */
            .frecuente-banner__icon {
                font-size: 2.5rem;
            }

            .frecuente-banner__content h3 {
                font-size: 1.25rem;
            }

            /* Gratis repeat box responsive */
            .gratis-repeat-box {
                padding: 1.5rem;
            }

            .gratis-repeat-box__header h4 {
                font-size: 1.1rem;
            }

            .topbar__text {
                font-size: 0.7rem;
                padding: 0 var(--spacing-sm);
            }

            .header__logo-text {
                font-size: 1.8rem;
            }

            .header__cta {
                padding: 0.5rem 1rem;
                font-size: 0.75rem;
            }

            .hero {
                height: 70vh;
                min-height: 450px;
            }

            .hero__content {
                padding: var(--spacing-md);
                padding-bottom: 5px;
            }

            .hero__title {
                font-size: 1.8rem;
            }

            .hero__description {
                font-size: 0.9rem;
                margin-bottom: var(--spacing-md);
            }

            .hero__ctas {
                flex-direction: column;
                gap: 0.5rem;
            }

            .hero__cta {
                width: 100%;
                justify-content: center;
                padding: 0.75rem 1.5rem;
                font-size: 0.85rem;
            }

            .hero__controls {
                left: 50%;
                transform: translateX(-50%);
                right: auto;
                bottom: var(--spacing-md);
            }

            /* Flechas en móvil: centradas verticalmente, en los extremos */
            .hero__arrow {
                top: 50%;
                transform: translateY(-50%);
                bottom: auto;
                width: 45px;
                height: 45px;
                background: var(--color-green-dark);
            }

            .hero__arrow--prev {
                left: 10px;
                right: auto;
                clip-path: var(--btn-path-3);
            }

            .hero__arrow--next {
                right: 10px;
                left: auto;
                clip-path: var(--btn-path-1);
            }

            .hero__arrow svg {
                width: 18px;
                height: 18px;
            }

            /* Barra de progreso visible en móvil */
            .hero__progress {
                height: 3px;
            }

            /* Dots responsive */
            .hero__dots {
                gap: 6px;
            }

            .hero__dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }

            .travesia__features {
                grid-template-columns: 1fr;
            }

            .sticky-cta {
                display: block;
            }

            body {
                padding-bottom: 80px;
            }

            /* Modal responsive para tablet/móvil */
            .modal-overlay {
                padding: 10px;
                align-items: flex-start;
            }

            .modal {
                max-height: none;
                margin: 10px 0;
                border-radius: 8px;
            }

            .modal__body {
                grid-template-columns: 1fr;
                padding: 1rem;
                gap: 1rem;
            }

            .modal__products {
                padding: 1rem;
            }

            .modal__checkout {
                padding: 1rem;
                border-top: 1px solid var(--color-gray);
            }

            .modal__product-image {
                width: 80px;
                height: 80px;
            }

            .modal__product-info {
                padding: 0.5rem 0.75rem;
            }

            .modal__product-title {
                font-size: 0.95rem;
            }

            .modal__product-footer {
                flex-wrap: wrap;
                gap: 0.75rem;
            }

            /* Info box gratis responsive */
            .gratis-info-box {
                flex-direction: column;
                text-align: center;
                padding: 1.25rem;
            }

            .gratis-info-box__icon {
                margin: 0 auto;
            }

            /* Pasos responsive 768px */
            /* Topbar responsive 768px - Layout compacto 2 filas */
            .topbar__content {
                padding: 0.4rem var(--spacing-sm);
            }

            .topbar__text {
                font-size: 0.7rem;
                text-align: center;
            }

            .topbar__inner {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                flex-wrap: wrap;
            }

            .topbar__promo {
                font-size: 0.75rem;
            }

            .topbar__promo strong {
                padding: 0.2rem 0.5rem;
                font-size: 0.7rem;
            }

            .topbar__offer-badge {
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }

            .topbar__toggle {
                justify-content: center;
            }

            .topbar__toggle-label {
                display: none;
            }

            /* Travesia Hero responsive 768px */
            .travesia-hero__stats {
                gap: 1rem;
                padding: 1rem;
            }

            .travesia-hero__stat-number {
                font-size: 2.2rem;
            }

            .travesia-hero__stat-label {
                font-size: 0.75rem;
            }

            .travesia-hero__reasons-grid {
                grid-template-columns: 1fr;
            }

            .travesia-hero__btn {
                padding: 1rem 2rem;
                font-size: 1rem;
                width: 100%;
            }

            .travesia-hero__quote {
                padding: 1rem;
            }

            .travesia-hero__quote p {
                font-size: 1rem;
            }

            /* Fiesta responsive 768px */
            .fiesta-content {
                grid-template-columns: 1fr;
                gap: var(--spacing-lg);
            }

            .fiesta-image {
                order: -1;
                max-width: 400px;
                margin: 0 auto;
            }

            .fiesta-image img {
                height: 350px;
            }

            .fiesta-info {
                text-align: center;
            }

            .fiesta-title {
                font-size: 2rem;
            }

            .fiesta-features {
                grid-template-columns: 1fr 1fr;
                text-align: left;
            }

            /* Pricing responsive 768px */
            .pricing-comparison {
                flex-direction: column;
                align-items: center;
            }

            .pricing-card {
                width: 100%;
                max-width: 320px;
            }

            .pricing-arrow {
                transform: rotate(90deg);
                margin: -1rem 0;
            }

            .pricing-premium {
                padding: 1rem;
            }

            .pricing-premium__prices {
                flex-direction: column;
                gap: 1rem;
            }

            .pricing-notice {
                flex-direction: column;
                text-align: center;
            }

            .pricing-notice__icon {
                margin: 0 auto;
            }

            .pricing-cta__btn {
                width: 100%;
                padding: 1rem 2rem;
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            /* Topbar responsive 480px - Ultra compacto */
            .topbar {
                padding: 0.35rem 0.3rem;
            }

            .topbar__inner {
                gap: 0.4rem;
            }

            .topbar__offer-badge {
                font-size: 0.65rem;
                padding: 0.2rem 0.4rem;
            }

            .topbar__promo {
                font-size: 0.6rem;
            }

            .topbar__promo strong {
                padding: 0.15rem 0.4rem;
                font-size: 0.58rem;
            }

            .topbar__countdown {
                gap: 3px;
            }

            .topbar__countdown-unit {
                min-width: 32px;
                padding: 2px 4px;
            }

            .topbar__countdown-number {
                font-size: 0.85rem;
            }

            .topbar__countdown-label {
                font-size: 0.45rem;
            }

            .topbar__countdown-sep {
                font-size: 0.75rem;
            }

            .topbar__offer-badge {
                font-size: 0.6rem;
                padding: 0.15rem 0.35rem;
            }

            .topbar__offer-text {
                font-size: 0.48rem;
                max-width: 60px;
                line-height: 1.1;
            }

            /* Header toggle responsive 480px */
            .header__container {
                padding: 0 0.5rem;
                gap: 0.25rem;
            }

            .header__logo img {
                height: 24px;
            }

            .header__toggle {
                padding: 0.2rem 0.4rem;
                border-width: 1px;
                gap: 0.15rem;
                flex-shrink: 1;
            }

            .header__toggle-btn {
                padding: 0.25rem 0.4rem;
                font-size: 0.6rem;
            }

            .header__actions {
                gap: 0.25rem;
            }

            .header__lang {
                padding: 0.25rem 0.35rem;
            }

            .header__lang-current {
                font-size: 0.65rem;
            }

            .header__lang svg {
                width: 10px;
                height: 10px;
            }

            .header__cta {
                padding: 0.4rem 0.65rem;
                font-size: 0.6rem;
                letter-spacing: 0;
            }

            .header__cart {
                display: none;
            }

            /* Nav Menu responsive 480px */
            .nav-menu__container {
                padding: 0;
                flex-direction: column;
            }

            .nav-menu__list {
                width: 100%;
                justify-content: space-around;
            }

            .nav-menu__link {
                padding: 0.5rem 0.5rem;
                font-size: 0.6rem;
                flex-direction: column;
                gap: 0.2rem;
            }

            .nav-menu__link svg {
                width: 16px;
                height: 16px;
            }

            .nav-menu__highlights {
                padding: 0.4rem 0.5rem;
                gap: 0.4rem;
            }

            .nav-menu__highlight {
                padding: 0.35rem 0.6rem;
                font-size: 0.6rem;
                border-width: 1px;
            }

            /* Grupos Section responsive 480px */
            .grupos-stats {
                gap: 1rem;
            }

            .grupos-stat__number {
                font-size: 2rem;
            }

            .grupos-stat__label {
                font-size: 0.7rem;
            }

            .grupos-cards {
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
            }

            .grupos-card__image {
                height: 140px;
            }

            .grupos-card__badge {
                padding: 0.2rem 0.5rem;
                font-size: 0.6rem;
                top: 0.5rem;
                right: 0.5rem;
            }

            .grupos-card__content {
                padding: 0.75rem;
            }

            .grupos-card__icon {
                font-size: 1.75rem;
                margin-bottom: 0.5rem;
            }

            .grupos-card__title {
                font-size: 0.9rem;
            }

            .grupos-card__desc {
                font-size: 0.7rem;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .grupos-cta-section {
                padding: 1rem;
            }

            .grupos-cta-info h3 {
                font-size: 1.1rem;
            }

            .grupos-cta-info p {
                font-size: 0.85rem;
            }

            .grupos-cta {
                padding: 0.875rem 1.5rem;
                font-size: 0.8rem;
            }

            /* Hero responsive 480px */
            .hero {
                height: 65vh;
                min-height: 380px;
            }

            .hero__content {
                padding: 1rem;
                padding-bottom: 5px;
            }

            .hero__content-inner {
                max-width: 100%;
            }

            .hero__tag {
                font-size: 0.55rem;
                padding: 0.3rem 0.6rem;
                top: var(--spacing-md);
                left: 10px;
            }

            .hero__title {
                font-size: 1.4rem;
                line-height: 1.1;
                margin-bottom: 0.5rem;
                letter-spacing: 1px;
            }

            .hero__description {
                font-size: 0.8rem;
                margin-bottom: 0.75rem;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .hero__ctas {
                flex-direction: column;
                gap: 0.4rem;
            }

            .hero__cta {
                width: 100%;
                padding: 0.65rem 0.75rem;
                font-size: 0.75rem;
                justify-content: center;
            }

            /* Flechas del carousel 480px - ESTILO PANACA */
            .hero__arrow {
                width: 38px;
                height: 38px;
            }

            .hero__arrow--prev {
                left: 8px;
            }

            .hero__arrow--next {
                right: 8px;
            }

            .hero__arrow svg {
                width: 16px;
                height: 16px;
            }

            /* Controls/Dots del carousel 480px */
            .hero__controls {
                bottom: 0.75rem;
            }

            .hero__dots {
                gap: 5px;
            }

            .hero__dot {
                width: 8px;
                height: 8px;
            }

            /* Secciones generales 480px */
            .section {
                padding: var(--spacing-md) 0;
            }

            .container {
                padding: 0 0.75rem;
            }

            .section-badge {
                font-size: 0.7rem;
                padding: 0.35rem 0.6rem;
            }

            .section-title {
                font-size: 1.4rem;
            }

            .section-subtitle {
                font-size: 0.85rem;
            }

            /* Location responsive 480px */
            .location-title {
                font-size: 1.3rem;
            }

            .location-description {
                font-size: 1rem;
            }

            .location-detail {
                padding: 0.875rem;
            }

            .location-map {
                min-height: 280px;
            }

            .location-map iframe {
                min-height: 280px;
            }

            .location-cta {
                width: 100%;
                justify-content: center;
                padding: 0.875rem 1.5rem;
            }

            /* Horarios responsive 480px - inherited from 768px */

            .horario-card__header h3 {
                font-size: 1rem;
            }

            .horario-card__body {
                padding: 1rem;
            }

            .horario-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }

            .horarios-notice {
                padding: 1rem;
            }

            .horarios-notice__icon {
                font-size: 1.5rem;
            }

            /* Restaurante responsive 480px */
            .restaurante-highlight {
                flex-direction: column;
                text-align: center;
            }

            .restaurante-bar__items {
                flex-direction: column;
            }

            .restaurante-gallery__grid {
                grid-template-columns: 1fr;
            }

            .restaurante-gallery__main img {
                height: 200px;
            }

            .restaurante-gallery__grid img {
                height: 120px;
            }

            /* Mapa responsive 480px */
            .mapa-lugar {
                padding: 0.75rem;
            }

            .mapa-lugar__badge {
                display: none;
            }

            .mapa-recorrido__steps {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .mapa-recorrido__arrow {
                display: none;
            }

            .mapa-download__btn {
                width: 100%;
                justify-content: center;
            }

            /* Nuevo RD responsive 480px */
            .nuevo-rd__features {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .nuevo-rd__feature {
                display: flex;
                align-items: center;
                gap: 1rem;
                text-align: left;
                padding: 1.25rem 1rem;
            }
            
            .nuevo-rd__feature,
            .nuevo-rd__feature:nth-child(2),
            .nuevo-rd__feature:nth-child(3),
            .nuevo-rd__feature:nth-child(4) {
                clip-path: var(--btn-path-2);
            }

            .nuevo-rd__feature-icon {
                font-size: 1.75rem;
                margin-bottom: 0;
            }

            .nuevo-rd__title {
                font-size: 1.5rem;
            }

            .nuevo-rd__badge {
                font-size: 0.8rem;
                padding: 0.4rem 1rem;
            }

            /* Banner frecuente responsive 480px */
            .frecuente-banner {
                padding: 1.25rem;
            }

            .frecuente-banner__icon {
                font-size: 2rem;
            }

            .frecuente-banner__content h3 {
                font-size: 1.1rem;
            }

            .frecuente-banner__content p {
                font-size: 0.9rem;
            }

            /* Gratis repeat box responsive 480px */
            .gratis-repeat-box {
                padding: 1.25rem;
            }

            .gratis-repeat-box__header {
                flex-direction: column;
                gap: 0.5rem;
            }

            .gratis-repeat-box__header h4 {
                font-size: 1rem;
            }

            .gratis-repeat-box p {
                font-size: 0.95rem;
            }

            .hero {
                height: 65vh;
                min-height: 400px;
            }

            .hero__title {
                font-size: 1.5rem;
            }

            .hero__tag {
                font-size: 0.65rem;
                padding: 0.4rem 0.8rem;
                top: var(--spacing-md);
                left: 12px;
            }

            .hero__description {
                font-size: 0.85rem;
                line-height: 1.5;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .gratis-card__price {
                font-size: 2.5rem;
            }

            .price-amount--highlight {
                font-size: 1.6rem;
            }

            /* Flechas más pequeñas en pantallas muy pequeñas */
            .hero__arrow {
                width: 36px;
                height: 36px;
            }

            .hero__arrow svg {
                width: 16px;
                height: 16px;
            }

            .hero__arrow--prev {
                left: 8px;
            }

            .hero__arrow--next {
                right: 8px;
            }

            /* Modal responsive para móvil pequeño */
            .modal__header {
                padding: 0.6rem 1rem;
            }

            .modal__header-title {
                font-size: 1rem;
            }

            .modal__header-subtitle {
                font-size: 0.7rem;
            }

            .modal__products-title {
                font-size: 0.9rem;
            }

            .modal__product-image {
                width: 50px;
                height: 50px;
            }

            .modal__product-title {
                font-size: 0.8rem;
            }

            .modal__product-desc {
                font-size: 0.65rem;
            }

            .modal__product-price--current {
                font-size: 0.85rem;
            }

            .modal__qty-btn {
                width: 28px;
                height: 28px;
                font-size: 0.9rem;
            }

            .modal__qty-input {
                width: 38px;
                height: 32px;
                font-size: 0.9rem;
            }

            .modal__checkout-title {
                font-size: 1rem;
            }

            .modal__buy-btn {
                padding: 0.875rem 1.5rem;
                font-size: 1rem;
            }

            .travesia-hero__title {
                font-size: 1.4rem;
            }

            .travesia-hero__subtitle {
                font-size: 0.9rem;
            }

            .travesia-hero__stats {
                flex-direction: column;
                gap: 1rem;
            }

            .travesia-hero__stat {
                padding: 1rem;
            }

            .travesia-hero__stat-number {
                font-size: 2rem;
            }

            .travesia-hero__ctas {
                flex-direction: column;
                gap: 0.5rem;
            }

            .travesia-hero__cta {
                width: 100%;
                padding: 0.75rem;
                font-size: 0.85rem;
            }

            /* CTA Final responsive móvil */
            .cta-final {
                padding: var(--spacing-lg) 0;
            }

            .cta-final__title {
                font-size: 1.3rem;
            }

            .cta-final__subtitle {
                font-size: 0.9rem;
            }

            .cta-final__badges {
                flex-direction: column;
                gap: 0.5rem;
            }

            .cta-final__button {
                width: 100%;
                padding: 0.875rem;
                font-size: 0.9rem;
            }

            /* FAQ responsive móvil */
            .faq-item__question {
                font-size: 0.95rem;
                padding: 1rem;
            }

            .faq-item__answer {
                font-size: 0.9rem;
            }
            .faq-item.active .faq-item__answer {
                padding: 0;
            }

            /* Pricing responsive móvil */
            .pricing-title {
                font-size: 1.4rem;
            }

            .pricing-subtitle {
                font-size: 0.9rem;
            }

            .pricing-card__title {
                font-size: 1.1rem;
            }

            .pricing-card__price {
                font-size: 2.25rem;
            }

            /* Pasos responsive 480px */
            /* Travesia Hero responsive 480px */
            .travesia-hero__title {
                font-size: 2rem;
            }

            .travesia-hero__subtitle {
                font-size: 1rem;
            }

            .travesia-hero__stats {
                gap: 0.75rem;
                padding: 0.75rem;
            }

            .travesia-hero__stat-number {
                font-size: 1.8rem;
            }

            .travesia-hero__stat-label {
                font-size: 0.7rem;
            }

            .travesia-hero__reason {
                padding: 0.75rem;
            }

            .travesia-hero__reason-icon {
                font-size: 1.2rem;
            }

            .travesia-hero__reason h4 {
                font-size: 0.85rem;
            }

            .travesia-hero__reason p {
                font-size: 0.75rem;
            }

            /* Fiesta responsive 480px */
            .fiesta-title {
                font-size: 1.6rem;
            }

            .fiesta-description {
                font-size: 1rem;
            }

            .fiesta-features {
                grid-template-columns: 1fr;
            }

            .fiesta-feature {
                padding: 0.875rem;
            }

            .fiesta-image img {
                height: 280px;
            }

            /* Pricing responsive 480px */
            .pricing-title {
                font-size: 1.8rem;
            }

            .pricing-subtitle {
                font-size: 0.95rem;
            }

            .pricing-card__amount {
                font-size: 3rem;
            }

            .pricing-arrow__content {
                width: 80px;
                height: 80px;
                padding: 0.75rem;
            }

            .pricing-arrow__amount {
                font-size: 1.5rem;
            }

            .pricing-notice {
                padding: 1rem;
            }

            .pricing-notice__icon {
                width: 40px;
                height: 40px;
            }

            .pricing-notice__icon svg {
                width: 22px;
                height: 22px;
            }

            .pricing-notice__content h4 {
                font-size: 1rem;
            }

            .pricing-notice__content p {
                font-size: 0.85rem;
            }
        }

        /* Móviles muy pequeños - 360px */
        @media (max-width: 360px) {
            .topbar__text {
                font-size: 0.55rem;
            }

            .header__logo img {
                height: 20px;
            }

            .header__toggle {
                padding: 0.15rem 0.3rem;
                flex-shrink: 1;
            }

            .header__toggle-btn {
                padding: 0.2rem 0.3rem;
                font-size: 0.55rem;
            }

            .header__actions {
                gap: 0.15rem;
            }

            .header__lang {
                display: none;
            }

            .header__cta {
                padding: 0.3rem 0.5rem;
                font-size: 0.55rem;
            }

            /* Nav Menu responsive 360px */
            .nav-menu__link {
                padding: 0.4rem 0.35rem;
                font-size: 0.5rem;
            }

            .nav-menu__link svg {
                width: 14px;
                height: 14px;
            }

            .nav-menu__highlights {
                padding: 0.3rem 0.25rem;
                gap: 0.25rem;
            }

            .nav-menu__highlight {
                padding: 0.25rem 0.4rem;
                font-size: 0.5rem;
            }

            /* Grupos Section responsive 360px */
            .grupos-stats {
                gap: 0.75rem;
                flex-wrap: wrap;
            }

            .grupos-stat {
                flex: 1 1 40%;
            }

            .grupos-stat__number {
                font-size: 1.75rem;
            }

            .grupos-stat__label {
                font-size: 0.6rem;
            }

            .grupos-cards {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .grupos-card__image {
                height: 160px;
            }

            .grupos-card__icon {
                font-size: 1.5rem;
            }

            .grupos-card__title {
                font-size: 1rem;
            }

            .grupos-card__desc {
                font-size: 0.75rem;
            }

            .grupos-cta-info h3 {
                font-size: 1rem;
            }

            .grupos-cta {
                font-size: 0.75rem;
                padding: 0.75rem 1rem;
            }

            .hero {
                min-height: 340px;
            }

            .hero__content {
                padding: 0.75rem;
                padding-bottom: 5px;
            }

            .hero__tag {
                font-size: 0.5rem;
                padding: 0.25rem 0.5rem;
                top: var(--spacing-sm);
                left: 8px;
            }

            .hero__title {
                font-size: 1.2rem;
            }

            .hero__description {
                font-size: 0.7rem;
                -webkit-line-clamp: 2;
            }

            .hero__cta {
                padding: 0.55rem 0.6rem;
                font-size: 0.65rem;
            }

            .hero__arrow {
                width: 28px;
                height: 28px;
            }

            .hero__arrow svg {
                width: 12px;
                height: 12px;
            }

            .hero__dot {
                width: 6px;
                height: 6px;
            }

            .section-title {
                font-size: 1.2rem;
            }

            .section-subtitle {
                font-size: 0.8rem;
            }

            .horario-card__header h3 {
                font-size: 0.85rem;
            }

            .horario-card__icon {
                font-size: 1.5rem;
            }
        }

        /* ============================================
           WHATSAPP FLOATING BUTTON
        ============================================ */
        .whatsapp-float {
            position: fixed;
            bottom: 100px;
            right: 25px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
        }

        .whatsapp-float__btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .whatsapp-float__btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
            border-radius: 50%;
        }

        .whatsapp-float__btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
        }

        .whatsapp-float__btn svg {
            width: 32px;
            height: 32px;
            fill: #fff;
            position: relative;
            z-index: 1;
        }

        .whatsapp-float__pulse {
            position: absolute;
            width: 60px;
            height: 60px;
            background: rgba(37, 211, 102, 0.3);
            border-radius: 50%;
            animation: whatsapp-pulse 2s infinite;
        }

        @keyframes whatsapp-pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.8);
                opacity: 0;
            }
        }

        .whatsapp-float__tooltip {
            background: #fff;
            color: #333;
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            font-size: 0.85rem;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.3s ease;
            pointer-events: none;
            position: absolute;
            right: 75px;
            top: 50%;
            transform: translateY(-50%) translateX(20px);
        }

        .whatsapp-float__tooltip::after {
            content: '';
            position: absolute;
            right: -8px;
            top: 50%;
            transform: translateY(-50%);
            border: 8px solid transparent;
            border-left-color: #fff;
        }

        .whatsapp-float:hover .whatsapp-float__tooltip {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

        .whatsapp-float__badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #E21B1B;
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 3px 6px;
            border-radius: 10px;
            z-index: 2;
            animation: badge-bounce 2s infinite;
        }

        @keyframes badge-bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* Social icons in header */
        .header__social {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-right: 1rem;
        }

        .header__social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(0,0,0,0.05);
            color: #333;
            transition: all 0.3s ease;
        }

        .header__social-link:hover {
            background: var(--color-primary);
            color: #fff;
            transform: translateY(-2px);
        }

        .header__social-link svg {
            width: 16px;
            height: 16px;
        }

        /* Mobile WhatsApp adjustments */
        @media (max-width: 768px) {
            .whatsapp-float {
                /* Más arriba en mobile para no tapar el texto del hero/video */
                bottom: 170px !important;
                right: 15px;
            }

            .whatsapp-float__btn {
                width: 55px;
                height: 55px;
            }

            .whatsapp-float__btn svg {
                width: 28px;
                height: 28px;
            }

            .whatsapp-float__pulse {
                width: 55px;
                height: 55px;
            }

            .whatsapp-float__tooltip {
                display: none;
            }

            .header__social {
                display: none;
            }
        }

        /* Extra ajuste en pantallas muy pequeñas */
        @media (max-width: 420px) {
            .whatsapp-float { bottom: 190px !important; }
        }

        /* WhatsApp expanded state */
        .whatsapp-float.expanded .whatsapp-float__menu {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .whatsapp-float__menu {
            position: absolute;
            bottom: 75px;
            right: 0;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 30px rgba(0,0,0,0.15);
            padding: 1rem;
            min-width: 280px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .whatsapp-float__menu-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 0.75rem;
        }

        .whatsapp-float__menu-avatar {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 1.1rem;
        }

        .whatsapp-float__menu-info h4 {
            font-size: 0.95rem;
            font-weight: 700;
            color: #333;
            margin: 0;
        }

        .whatsapp-float__menu-info p {
            font-size: 0.8rem;
            color: #25D366;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .whatsapp-float__menu-info p::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #25D366;
            border-radius: 50%;
        }

        .whatsapp-float__menu-text {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }

        .whatsapp-float__menu-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.75rem;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .whatsapp-float__menu-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
        }

        .whatsapp-float__menu-btn svg {
            width: 20px;
            height: 20px;
        }

        .whatsapp-float__close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background: #f5f5f5;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            color: #999;
            transition: all 0.3s ease;
        }

        .whatsapp-float__close:hover {
            background: #eee;
            color: #333;
        }

        /* ============================================
           CLASES DE UTILIDAD PANACA
           Reutilizables en cualquier parte del documento
        ============================================ */
        
        /* Botones estilo PANACA - Ligeramente torcidos */
        .btn-panaca {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem 1.75rem;
            font-weight: 700;
            font-size: 0.95rem;
            text-align: center;
            border-radius: 0;
            cursor: pointer;
            transition: all var(--transition-panaca);
            text-decoration: none;
            border: none;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .btn-panaca--red {
            background: var(--color-red);
            color: var(--color-white);
            clip-path: var(--btn-path-1);
        }
        
        .btn-panaca--red:hover {
            background: var(--color-red-dark);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 25px rgba(226, 27, 27, 0.4);
        }
        
        .btn-panaca--yellow {
            background: var(--color-yellow);
            color: var(--color-black);
            clip-path: var(--btn-path-4);
        }
        
        .btn-panaca--yellow:hover {
            background: #D38F01;
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 25px rgba(245, 177, 34, 0.4);
        }
        
        .btn-panaca--green {
            background: var(--color-green-dark);
            color: var(--color-white);
            clip-path: var(--btn-path-3);
        }
        
        .btn-panaca--green:hover {
            background: #023D1B;
            transform: translateY(-3px) scale(1.03);
        }
        
        .btn-panaca--blue {
            background: var(--color-blue-dark);
            color: var(--color-white);
            clip-path: var(--btn-path-2);
        }
        
        .btn-panaca--blue:hover {
            background: #102437;
            transform: translateY(-3px) scale(1.03);
        }
        
        /* Tarjetas estilo PANACA */
        .card-panaca {
            background: var(--color-white);
            box-shadow: var(--shadow-panaca);
            transition: all var(--transition-panaca);
            border-radius: 0;
        }
        
        .card-panaca:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: var(--shadow-hover);
        }
        
        /* Badges estilo PANACA - con clip-path orgánico */
        .badge-panaca {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.6rem 1.4rem;
            font-size: 0.85rem;
            font-weight: 700;
            border-radius: 0;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            clip-path: var(--btn-path-4);
        }
        
        .badge-panaca--red {
            background: var(--color-red);
            color: var(--color-white);
            clip-path: var(--btn-path-1);
        }
        
        /* Títulos estilo PANACA */
        .title-panaca {
            font-family: var(--font-heading);
            color: var(--color-brown);
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .title-panaca span {
            color: var(--color-red);
        }
        
        /* Separadores zigzag PANACA */
        .panaca-separator {
            position: relative;
            height: 20px;
            background: inherit;
        }
        
        .panaca-separator--top {
            clip-path: var(--clip-zigzag-top);
        }
        
        .panaca-separator--bottom {
            clip-path: var(--clip-zigzag-bottom);
        }
        
        /* Texto destacado estilo PANACA */
        .highlight-panaca {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.25rem 0.75rem;
            display: inline-block;
            font-weight: 700;
            clip-path: var(--btn-path-4);
        }
        
        /* Sección con fondo verde oscuro PANACA */
        .section-panaca-green {
            background: var(--color-green-dark);
            color: var(--color-white);
        }
        
        /* Sección con fondo azul oscuro PANACA */
        .section-panaca-blue {
            background: var(--color-blue-dark);
            color: var(--color-white);
        }

    
/* ============================================
   PANACA STYLE OVERRIDES - Component refresh
   (Toggle / CTAs / Repeat box / Travesía stats / Fiesta card / Recorrido sugerido)
   Only affects the components requested by the user.
============================================ */

/* 1) Header toggle (Ver precios) - más PANACA (recorte + tipografía + borde) */
.header__toggle{
    background: linear-gradient(135deg, var(--color-cream) 0%, #ffffff 100%);
    border: 3px solid var(--color-red);
    border-radius: 0;
    clip-path: var(--btn-path-2);
    box-shadow: var(--shadow-sm);
    padding: 0.55rem 1.1rem;
    transform: rotate(-0.3deg);
}
.header__toggle-label{
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-black);
    font-size: 0.75rem;
}
.header__toggle-btn{
    border-radius: 0;
    background: rgba(0,0,0,0.04);
    border: 2px solid transparent;
    clip-path: var(--btn-path-4);
    transition: all var(--transition-fast);
}
.header__toggle-btn:hover{
    background: rgba(226, 27, 27, 0.12);
}
.header__toggle-btn.active{
    background: var(--color-red);
    color: var(--color-white);
    border-color: var(--color-red);
    box-shadow: 0 6px 18px rgba(226, 27, 27, 0.35);
    clip-path: var(--btn-path-1);
}

/* 2) CTA rojo grande debajo de tarjetas (¿Listo para vivir...?) - recorte + borde zigzag */
.gratis-cta-main{
    border-radius: 0;
    clip-path: var(--btn-path-1);
    border: 4px solid rgba(245, 177, 34, 0.85);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: visible;
}
.gratis-cta-main::after{
    content:'';
    position:absolute;
    left:0; right:0;
    bottom:-10px;
    height:22px;
    background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
    clip-path: var(--clip-zigzag-bottom);
    opacity: 0.95;
}
.gratis-cta-main__btn{
    border-radius: 0;
    clip-path: var(--btn-path-4);
    background: var(--color-yellow);
    color: var(--color-black);
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
    transition: all var(--transition-panaca);
}
.gratis-cta-main__btn:hover{
    transform: translateY(-3px) scale(1.03) rotate(-0.3deg);
    background: #D38F01;
}

/* 3) Caja “puedes venir gratis…” - más PANACA (badge + recorte + zigzag suave) */
.gratis-repeat-box{
    border-radius: 0;
    clip-path: var(--btn-path-2);
    border: 4px solid var(--color-yellow);
    background: linear-gradient(135deg, var(--color-cream) 0%, #ffffff 100%);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: visible;
}
.gratis-repeat-box::before{
    content:'';
    position:absolute;
    left:0; right:0;
    top:-12px;
    height:22px;
    background: linear-gradient(135deg, var(--color-cream) 0%, #ffffff 100%);
    clip-path: var(--clip-zigzag-top);
    opacity: 0.95;
}
.gratis-repeat-box__header h4{
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-black);
}
.gratis-repeat-box__ctas .gratis-repeat-box__link{
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(245, 177, 34, 0.18);
    padding: 0.65rem 1rem;
    clip-path: var(--btn-path-2);
}

/* 4) Stats Travesía - banda con “recorte” y borde amarillo */
.travesia-hero__stats{
    border-top: 4px solid var(--color-yellow);
    border-bottom: 4px solid var(--color-yellow);
    clip-path: var(--btn-path-2);
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    transform: rotate(-0.2deg);
}
.travesia-hero__stat-number{
    text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* 5) Tarjeta imagen Fiesta (la foto grande) - menos “redondeado moderno”, más PANACA */
.fiesta-image{
    border-radius: 0;
    clip-path: var(--btn-path-3);
    border: 4px solid rgba(245, 177, 34, 0.75);
    box-shadow: var(--shadow-lg);
}
.fiesta-image__overlay{
    padding-top: 2.25rem;
}
.fiesta-image__text{
    background: rgba(0,0,0,0.55);
    display: inline-block;
    padding: 0.5rem 1rem;
    clip-path: var(--btn-path-4);
}

/* 6) Recorrido sugerido (card blanca en mapa) - PANACA card */
.mapa-recorrido{
    border-radius: 0;
    clip-path: var(--btn-path-2);
    border-left: 6px solid var(--color-red);
    box-shadow: var(--shadow-md);
}
.mapa-recorrido h4{
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-red);
}
.mapa-recorrido__step{
    font-family: var(--font-body);
    font-weight: 600;
}



/* 7) WhatsApp floating button - estilo orgánico PANACA (clip-path irregular) */
.whatsapp-float__btn{
    width: 58px !important;
    height: 58px !important;
    border-radius: 0 !important;
    clip-path: polygon(100% 96%, 100% 1%, 15% 0, 0 2%, 1% 75%, 0 100%, 96% 100%) !important;
    transform: none !important;
    border: none !important;
    background: #25D366 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.whatsapp-float__btn::before{
    display: none !important;
}

.whatsapp-float__btn svg{
    width: 30px !important;
    height: 30px !important;
    fill: #fff !important;
}

.whatsapp-float__btn:hover{
    transform: scale(1.06) !important;
    box-shadow: none !important;
}

/* Ocultar pulse, badge y tooltip para look limpio */
.whatsapp-float__pulse{
    display: none !important;
}

.whatsapp-float__badge{
    display: none !important;
}

.whatsapp-float__tooltip{
    display: none !important;
}

.whatsapp-float__menu-btn svg{ width: 18px !important; height: 18px !important; fill: currentColor !important; }

/* Menú sin recortes (más limpio) */
.whatsapp-float__menu{
    border-radius: 14px !important;
    clip-path: none !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}



/* ============================================
   PANACA STYLE OVERRIDES - Component refresh (v4)
   (Mapa card + Descargar PDF + Horarios cards + Horarios notice + Grupos cards + Grupos CTA)
   Only affects the components requested by the user.
============================================ */

/* MAPA: contenedor del SVG */
.mapa-visual__image{
    border-radius: 0 !important;
    padding: 1.25rem !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-cream-dark) 100%) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 4px solid rgba(245, 177, 34, 0.85) !important;
    clip-path: var(--btn-path-2);
    position: relative;
    overflow: hidden;
}
.mapa-visual__image::before{
    content:'';
    position:absolute;
    top:-10px; left:0; right:0;
    height:22px;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-cream-dark) 100%);
    clip-path: var(--clip-zigzag-top);
    opacity: 0.95;
    pointer-events:none;
}
.mapa-visual__image svg{
    display:block;
    width:100%;
    height:auto;
}

/* BOTÓN: Descargar mapa (PNG) */
.mapa-download__btn{
    border-radius: 0 !important;
    clip-path: var(--btn-path-1);
    padding: 0.95rem 2.1rem !important;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: var(--shadow-md) !important;
    border: 3px solid rgba(245, 177, 34, 0.85);
}
.mapa-download__btn:hover{
    transform: translateY(-3px) scale(1.02) rotate(-0.15deg);
}

/* HORARIOS: tarjetas */
.horario-card{
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% 97%, 97% 100%, 3% 100%, 0 97%);
    box-shadow: var(--shadow-panaca) !important;
    border: 2px solid rgba(0,0,0,0.06);
    overflow: hidden;
}
.horario-card:hover{
    transform: translateY(-6px) rotate(-0.12deg) !important;
    box-shadow: var(--shadow-hover) !important;
}
.horario-card__header{
    border-radius: 18px 18px 0 0 !important;
    clip-path: none !important;
    overflow: hidden;
}
.horario-card__badge{
    border-radius: 0 !important;
    clip-path: var(--btn-path-4);
    padding: 0.35rem 0.9rem !important;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.horario-card__cta{
    border-radius: 0 !important;
    clip-path: var(--btn-path-1);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.horario-card__discover{
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* HORARIOS: aviso “¡Planifica y ahorra!” */
.horarios-notice{
    border-radius: 0 !important;
    clip-path: var(--btn-path-2);
    background: linear-gradient(135deg, #FAF0E6 0%, var(--color-cream) 100%) !important;
    border: 3px solid rgba(245, 177, 34, 0.95) !important;
    border-left: 8px solid var(--color-red) !important;
    box-shadow: var(--shadow-md) !important;
}
.horarios-notice__content h4{
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-red) !important;
}
.horarios-notice__content p{
    color: var(--color-text) !important;
}

/* GRUPOS: tarjetas (look panaca, menos “SaaS redondeado”) */
.grupos-card{
    border-radius: 0 !important;
    clip-path: none !important;
    border: 2px solid rgba(245, 177, 34, 0.25) !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.28) !important;
    position: relative;
    overflow: hidden;
}
.grupos-card::after{
    content:'';
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--color-red);
    opacity: 0.9;
    pointer-events:none;
}
.grupos-card__image{
    border-radius: 0 !important;
}
.grupos-card__content{
    padding-bottom: 2.2rem !important; /* para que respire con la línea roja inferior */
}

/* Botón “Descubrir más” dentro de cards de grupos */
.grupos-section .btn-discover{
    border-radius: 0 !important;
    clip-path: var(--btn-path-2);
    border: 3px solid rgba(226, 27, 27, 0.55) !important;
    background: transparent !important;
    color: var(--color-red) !important;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.grupos-section .btn-discover:hover{
    background: rgba(226, 27, 27, 0.12) !important;
    transform: translateY(-2px) scale(1.02) rotate(-0.15deg) !important;
}

/* GRUPOS: CTA final (barra grande con botones) */
.grupos-cta-section{
    border-radius: 0 !important;
    clip-path: var(--btn-path-2);
    border: 3px solid rgba(245, 177, 34, 0.35) !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,0.30) !important;
    position: relative;
    overflow: hidden;
}
.grupos-cta-section::before{
    content:'';
    position:absolute;
    top:-10px; left:0; right:0;
    height:22px;
    background: rgba(255,255,255,0.06);
    clip-path: var(--clip-zigzag-top);
    opacity: 0.85;
    pointer-events:none;
}
.grupos-cta-info h3{
    font-family: var(--font-heading) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.grupos-cta{
    border-radius: 0 !important;
    clip-path: var(--btn-path-1);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 1rem 2.4rem !important;
}
.grupos-cta--primary{
    border: 3px solid rgba(255,255,255,0.18) !important;
}
.grupos-cta--secondary{
    clip-path: var(--btn-path-4);
    border: 3px solid rgba(0,0,0,0.12) !important;
}


        /* ============================================
           HOTFIX v11 - HORARIOS: TARJETAS 100% CUADRADAS (ARRIBA Y ABAJO)
           - Quita clip-path y cualquier redondeo/recorte
           - Asegura que el bloque inferior (footer/acciones) también quede cuadrado
           Solo afecta la sección #horarios
        ============================================ */
        #horarios .horario-card{
            border-radius: 0 !important;
            clip-path: none !important;
            overflow: hidden !important;
        }

        /* Bloques internos */
        #horarios .horario-card__header,
        #horarios .horario-card__body,
        #horarios .horario-card__bottom,
        #horarios .horario-card__footer,
        #horarios .horario-card__actions{
            border-radius: 0 !important;
            clip-path: none !important;
        }

        /* Botones / links inferiores (evita “panzas” o esquinas redondeadas) */
        #horarios .horario-card__cta,
        #horarios .horario-card__discover,
        #horarios .horario-card__actions .horario-card__cta,
        #horarios .horario-card__actions .horario-card__discover{
            border-radius: 0 !important;
            clip-path: none !important;
        }

        /* Featured también cuadrado */
        #horarios .horario-card--featured{
            border-radius: 0 !important;
            clip-path: none !important;
        }
        #horarios .horario-card--featured .horario-card__header,
        #horarios .horario-card--featured .horario-card__bottom,
        #horarios .horario-card--featured .horario-card__footer,
        #horarios .horario-card--featured .horario-card__actions{
            border-radius: 0 !important;
            clip-path: none !important;
        }



        /* ============================================
           PANACA OVERRIDES — SEGURIDAD / PAGO (más estilo PANACA)
           (Solo afecta la sección .footer__security)
        ============================================ */
        .footer__security{
            position: relative;
            padding: 2.5rem 1.25rem 2.25rem;
            background: linear-gradient(180deg, var(--color-green-deep) 0%, var(--color-green-dark) 100%);
            border-top: 6px solid rgba(255,255,255,0.08);
            overflow: visible;
        }
        /* Borde zigzag superior estilo PANACA */
        .footer__security::before{
            content:'';
            position:absolute;
            top:-18px;
            left:0;
            right:0;
            height:22px;
            background: linear-gradient(180deg, var(--color-green-deep) 0%, var(--color-green-deep) 100%);
            clip-path: var(--clip-zigzag-top);
            z-index: 2;
        }
        /* Textura sutil (sin colores fuera de paleta: solo blancos con opacidad) */
        .footer__security::after{
            content:'';
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0 2px, transparent 3px) 0 0/48px 48px,
                radial-gradient(circle at 70% 65%, rgba(255,255,255,0.05) 0 2px, transparent 3px) 0 0/60px 60px;
            opacity: .75;
            pointer-events:none;
            z-index: 0;
        }
        .footer__security-inner{ position: relative; z-index: 3; }

        .footer__security-title{
            font-family: var(--font-heading);
            font-size: 0.95rem;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.92);
            display:flex;
            align-items:center;
            justify-content:center;
            gap:.6rem;
            text-shadow: 0 2px 10px rgba(0,0,0,0.25);
            margin-bottom: .25rem;
        }
        .footer__security-title::before{
            content:'🔒';
            font-size: 1rem;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
        }

        .footer__security-badges{
            gap: 1rem;
        }

        /* Tarjetas/badges estilo PANACA: recortados, más “hecho a mano”, menos “tech” */
        .footer__security-badge{
            border-radius: 0 !important;
            background: rgba(255,255,255,0.08);
            border: 2px solid rgba(255,255,255,0.16);
            box-shadow: 0 10px 28px rgba(0,0,0,0.22);
            clip-path: var(--btn-path-2);
            padding: 1rem 1.35rem;
            min-width: 170px;
        }
        .footer__security-badge:hover{
            transform: translateY(-2px);
            border-color: rgba(255,197,87,0.65); /* amarillo de paleta */
            background: rgba(255,255,255,0.10);
        }
        .footer__security-badge span{
            font-family: var(--font-heading);
            font-size: 0.72rem;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.92);
        }

        /* Badge “Sitio Oficial” */
        .footer__official-badge{
            border-radius: 0 !important;
            background: var(--color-arena-light);
            border: 3px solid var(--color-yellow);
            clip-path: var(--btn-path-4);
            box-shadow: 0 12px 30px rgba(0,0,0,0.22);
            padding: 0.9rem 1.3rem;
        }
        .footer__official-badge svg{
            color: var(--color-green-dark);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
        }
        .footer__official-badge-text strong{
            font-family: var(--font-heading);
            letter-spacing: 1px;
        }
        .footer__official-badge-text span{
            font-family: var(--font-body);
        }

        /* “AZUL” destacado: que no parezca un widget aparte */
        .footer__azul-badge{
            background: rgba(255,255,255,0.10) !important;
            border: 2px solid rgba(255,255,255,0.18) !important;
            clip-path: var(--btn-path-1);
        }
        .footer__azul-badge svg{
            filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
        }

        /* Método de pago: línea más PANACA (recortada, menos redondeada) */
        .footer__payment-methods{
            margin-top: .5rem;
            padding: .9rem 1.1rem;
            background: rgba(0,0,0,0.18);
            border: 2px solid rgba(255,255,255,0.10);
            border-radius: 0;
            clip-path: var(--btn-path-2);
            gap: 1.25rem;
        }
        .footer__payment-card{
            height: 30px !important;
            opacity: .95;
            filter: drop-shadow(0 6px 10px rgba(0,0,0,0.22));
        }

        /* Responsive: badges en columnas sin perder estética */
        @media (max-width: 768px){
            .footer__security{ padding: 2.25rem 1rem 2rem; }
            .footer__security-badge{ min-width: 150px; padding: .9rem 1.1rem; }
            .footer__payment-methods{ gap: .9rem; }
        }



/* ============================================
   ICONOS OFICIALES PANACA (desde Iconos-PANACA)
============================================ */
:root{
  --picon-store: url(../assets/iconos/icono-e9073b279e.png);
  --picon-whatsapp: url(../assets/iconos/icono-490f1a4017.png);
  --picon-pin: url(../assets/iconos/icono-437b7b73ae.png);
  --picon-pin-filled: url(../assets/iconos/icono-16fc1cbe84.png);
  --picon-clock: url(../assets/iconos/icono-0f8d511abe.png);
  --picon-calendar: url(../assets/iconos/icono-f6934c67f4.png);
  --picon-group: url(../assets/iconos/icono-d5fd268316.png);
  --picon-map: url(../assets/iconos/icono-b6e5c7df64.png);
  --picon-ticket: url(../assets/iconos/icono-3e9cad3d23.png);
  --picon-mail: url(../assets/iconos/icono-e6bf499b34.png);
  --picon-medal: url(../assets/iconos/icono-9ee7ff700f.png);
  --picon-check: url(../assets/iconos/icono-b4f3813e70.png);
  --picon-arrow: url(../assets/iconos/icono-43185e2ca6.png);
  --picon-van: url(../assets/iconos/icono-f2a951b3e4.png);
  --picon-bulb: url(../assets/iconos/icono-fc97497b0b.png);
}

.picon{
  display:inline-block;
  width: 1.1em;
  height: 1.1em;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  vertical-align:-0.18em;
  filter:none;
}

.picon--sm{ width:0.95em; height:0.95em; vertical-align:-0.14em;}
.picon--md{ width:1.2em; height:1.2em; }
.picon--lg{ width:1.4em; height:1.4em; vertical-align:-0.22em; }

.picon--store{ background-image: var(--picon-store); }
.picon--whatsapp{ background-image: var(--picon-whatsapp); }
.picon--pin{ background-image: var(--picon-pin); }
.picon--pinfilled{ background-image: var(--picon-pin-filled); }
.picon--clock{ background-image: var(--picon-clock); }
.picon--calendar{ background-image: var(--picon-calendar); }
.picon--group{ background-image: var(--picon-group); }
.picon--map{ background-image: var(--picon-map); }
.picon--ticket{ background-image: var(--picon-ticket); }
.picon--mail{ background-image: var(--picon-mail); }
.picon--medal{ background-image: var(--picon-medal); }
.picon--check{ background-image: var(--picon-check); }
.picon--arrow{ background-image: var(--picon-arrow); }
.picon--van{ background-image: var(--picon-van); }
.picon--bulb{ background-image: var(--picon-bulb); }

/* Ajustes: reemplazo de SVGs por picons */
.nav-menu__link .picon{ margin-right:0.35rem; }
.gratis-card__feature .picon{ margin-top:2px; }
.location-cta .picon{ margin-right:0.5rem; }

        /* ============================================
           ICONOS OFICIALES PANACA (reemplazo de emojis específicos)
        ============================================ */
        .pi {
            display: inline-block;
            width: 22px;
            height: 22px;
            vertical-align: middle;
            background-color: currentColor;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
        }

        .pi-panaca-globe {
            -webkit-mask-image: url(../assets/iconos/icono-3874ab7d13.png);
            mask-image: url(../assets/iconos/icono-3874ab7d13.png);
        }
        .pi-panaca-map {
            -webkit-mask-image: url(../assets/iconos/icono-82ce836a8f.png);
            mask-image: url(../assets/iconos/icono-82ce836a8f.png);
        }
        .pi-panaca-horse {
            -webkit-mask-image: url(../assets/iconos/icono-7b55a281c4.png);
            mask-image: url(../assets/iconos/icono-7b55a281c4.png);
        }
        .pi-panaca-wine {
            -webkit-mask-image: url(../assets/iconos/icono-60d3bdee21.png);
            mask-image: url(../assets/iconos/icono-60d3bdee21.png);
        }
        .pi-panaca-family {
            -webkit-mask-image: url(../assets/iconos/icono-70c250b17e.png);
            mask-image: url(../assets/iconos/icono-70c250b17e.png);
        }
        .pi-panaca-flag {
            -webkit-mask-image: url(../assets/iconos/icono-917af5e6ee.png);
            mask-image: url(../assets/iconos/icono-917af5e6ee.png);
        }
        .pi-panaca-waves {
            -webkit-mask-image: url(../assets/iconos/icono-c718b98731.png);
            mask-image: url(../assets/iconos/icono-c718b98731.png);
        }

        /* Ajustes por componente */
        .nav-menu__highlight .pi {
            width: 18px;
            height: 18px;
            margin-right: 0.45rem;
        }

        .header__toggle-btn .pi {
            width: 16px;
            height: 16px;
            margin-right: 0.45rem;
        }

        .nuevo-rd__feature-icon .pi {
            width: 34px;
            height: 34px;
            color: var(--color-yellow);
        }

    
        /* ============================================
           ICONOS OFICIALES PANACA - Inline
        ============================================ */
        .panaca-icon-inline{
            width: 22px;
            height: 22px;
            object-fit: contain;
            display: inline-block;
            vertical-align: -4px;
        }
        .panaca-icon--xs{ width:18px; height:18px; vertical-align:-3px; }
        .panaca-icon--sm{ width:20px; height:20px; vertical-align:-4px; }
        .panaca-icon--md{ width:26px; height:26px; vertical-align:-6px; }
        .panaca-icon--white{ filter: invert(1) brightness(2); }

    

/* Header tagline - Identidad RD */
.header__tagline{
  display:none;
  flex-direction:column;
  gap:2px;
  line-height:1.1;
  padding-left:12px;
  border-left:1px solid rgba(0,0,0,0.10);
}
.header__tagline-title{
  font-family: var(--font-heading);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--color-black);
}
.header__tagline-sub{
  font-family: var(--font-body);
  font-weight:600;
  font-size:11px;
  color: var(--color-gray);
}
@media (min-width: 768px){
  .header__tagline{ display:none !important; }
  .header__container{ gap:14px; }
}



/* Mini popups */
.mini-popups{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index: 9999;
}
.mini-popup{
  width: min(340px, calc(100vw - 32px));
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  padding: 14px 14px 12px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}
.mini-popup--alt{ border-color: rgba(226,27,27,0.25); }
.mini-popup__close{
  position:absolute;
  top:8px; right:10px;
  width:30px; height:30px;
  border:none;
  background: transparent;
  font-size: 22px;
  line-height: 30px;
  cursor:pointer;
  color: rgba(0,0,0,0.55);
}
.mini-popup__badge{
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-black);
  margin-bottom: 6px;
}
.mini-popup__text{
  color: rgba(0,0,0,0.80);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.mini-popup__cta{
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--color-red);
  color: var(--color-white);
}
.mini-popup__cta--link{
  display:block;
  text-align:center;
  background: var(--color-yellow);
  color: var(--color-black);
  text-decoration:none;
}
@media (max-width: 520px){
  .mini-popups{ left: 16px; right: 16px; }
  .mini-popup{ width: 100%; }
}


        /* ============================================
           CARRUSEL DE TESTIMONIOS
        ============================================ */
        .testimonios-carousel{
            position: relative;
        }
        .carousel-viewport{
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding: 0.25rem 0;
            scrollbar-width: none; /* Firefox */
        }
        .carousel-viewport::-webkit-scrollbar{ display: none; }

        .carousel-track{
            display: flex;
            gap: var(--spacing-lg);
            padding: 0 0 var(--spacing-sm);
        }
        .carousel-track .testimonio{
            scroll-snap-align: start;
            flex: 0 0 88%;
        }
        @media (min-width: 640px){
            .carousel-track .testimonio{ flex: 0 0 48%; }
        }
        @media (min-width: 1024px){
            .carousel-track .testimonio{ flex: 0 0 32%; }
        }

        .carousel-btn{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 999px;
            background: rgba(255,255,255,0.92);
            border: 1px solid rgba(0,0,0,0.10);
            box-shadow: var(--shadow-panaca);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 26px;
            line-height: 1;
            color: var(--color-text);
            transition: all var(--transition-panaca);
            z-index: 2;
        }
        .carousel-btn:hover{
            transform: translateY(-50%) scale(1.04);
        }
        .carousel-btn:disabled{
            opacity: 0.35;
            cursor: not-allowed;
        }
        .carousel-btn--prev{ left: -10px; }
        .carousel-btn--next{ right: -10px; }

        @media (max-width: 480px){
            .carousel-btn--prev{ left: -6px; }
            .carousel-btn--next{ right: -6px; }
        }

        .carousel-dots{
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: var(--spacing-lg);
        }
        .carousel-dot{
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: none;
            background: rgba(0,0,0,0.25);
            cursor: pointer;
            transition: all var(--transition-panaca);
        }
        .carousel-dot.is-active{
            background: var(--color-red);
            transform: scale(1.15);
        }


        /* ============================================
           FIX: Quitar capas de color sobre las fotos (cards)
           ============================================ */
        .gratis-card__overlay,
        .gratis-card__overlay--fiesta,
        .gratis-card__overlay--presentacion{
            background: transparent !important;
            background-image: none !important;
        }

   MENÚ RESTAURANTE (MODAL) - Estilo Panaca
============================================ */
.restaurante-highlight{
  align-items:flex-start;
}
.restaurante-actions{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.restaurante-actions__hint{
  font-size:.9rem;
  opacity:.9;
}
.menu-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.menu-modal.is-open{ display:block; }
.menu-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.menu-modal__panel{
  position:relative;
  max-width:1000px;
  width:calc(100% - 32px);
  margin:24px auto;
  background:#FFF7E5;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.08);
}
.menu-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  background:linear-gradient(90deg,#E21B1B 0%, #C81616 100%);
  color:#fff;
}
.menu-modal__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-family:'Poleno', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.menu-modal__close{
  border:none;
  background:rgba(255,255,255,.18);
  color:#fff;
  width:40px;
  height:40px;
  border-radius:12px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
}
.menu-modal__close:hover{ background:rgba(255,255,255,.28); }

.menu-modal__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.menu-tab{
  border:1px solid rgba(0,0,0,.10);
  background:#F6F1E2;
  color:#1B1B1B;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
  font-size:.85rem;
}
.menu-tab.active{
  background:#1E7F3F;
  color:#fff;
  border-color:transparent;
}
.menu-modal__body{
  padding:14px 16px 18px;
}
.menu-modal__frame{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  overflow:auto;
  max-height:72vh;
}
.menu-modal__img{
  display:block;
  width:100%;
  height:auto;
}
.menu-modal__footer{
  padding:12px 16px 16px;
  font-size:.9rem;
  opacity:.85;
}
@media(max-width:640px){
  .menu-modal__panel{ margin:12px auto; border-radius:18px; }
  .menu-modal__title{ font-size:.95rem; }
  .menu-tab{ font-size:.8rem; padding:9px 10px; }
}


/* ============================================
   BOTÓN FLOTANTE: Volver al inicio (Panaca)
============================================ */
.back-top-left{
  position:fixed;
  left:18px;
  bottom:22px;
  width:54px;
  height:54px;
  border:none;
  cursor:pointer;
  z-index:9998;
  display:none;
  align-items:center;
  justify-content:center;
  background: var(--color-red);
  color:#fff;
  clip-path: var(--btn-path-1);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.back-top-left:hover{
  background: var(--color-red-dark);
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.03);
}
.back-top-left:active{ transform: translateY(-1px) scale(0.99); }
.back-top-left svg{
  width:22px;
  height:22px;
  display:block;
  fill: currentColor;
}
.back-top-left__label{
  position:absolute;
  left:64px;
  bottom:50%;
  transform: translateY(50%);
  background: rgba(0,0,0,.55);
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  font-size:.85rem;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.back-top-left:hover .back-top-left__label{ opacity:1; }

@media(max-width:640px){
  .back-top-left{
    left:12px;
    bottom:16px;
    width:50px;
    height:50px;
  }
  .back-top-left__label{ display:none; }
}


/* Ocultar imagen residual del hero */
.hero img,
.hero__image,
.hero [style*="background-image"]{
  display:none !important;
  background-image:none !important;
}


/* ============================================
           HOTFIX MOBILE HERO (CTA side-by-side + lower overlay)
           Requested: botones uno al lado del otro en mobile y bajar bloque para liberar video
        ============================================ */
        @media (max-width: 768px){
            .hero__ctas{
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 0.65rem !important;
                width: 100%;
            }
            .hero__cta{
                width: auto !important;
                max-width: none !important;
                flex: 1 1 0 !important;
                justify-content: center !important;
                padding: 0.75rem 0.9rem !important;
                font-size: 0.80rem !important;
                line-height: 1.1 !important;
                white-space: nowrap;
            }
            /* Baja un poco todo el bloque inferior (texto + CTAs) para mostrar más video */
            .hero__content{
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
            }
            .hero__title{
                margin-bottom: 0.55rem !important;
            }
            .hero__subtitle, .hero__description{
                margin-bottom: 0.65rem !important;
            }
        }


/* === Restaurantes: mostrar 4 + toggle (mobile/desktop) === */
.rest-grid--collapsed > .rest-card:nth-of-type(n+5){
  display:none !important;
}

/* Restaurant cards: full width on mobile */
@media (max-width: 768px) {
  .rest-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
.rest-toggle-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.25rem;
}
.rest-toggle-count{
  font-weight:800;
  color:#5D4037;
  font-size:0.95rem;
}
.rest-toggle-btn{
  /* Hereda el look PANACA desde .btn-panaca */
  cursor:pointer;
  position:relative;
  padding: 1rem 1.35rem;
  box-shadow: var(--shadow-panaca);
  transform: rotate(-0.4deg);
}
/* Doble contorno estilo recorte */
.rest-toggle-btn::after{
  content:"";
  position:absolute;
  inset: -4px;
  border: 2px dashed rgba(255,255,255,.75);
  clip-path: var(--btn-path-1);
  pointer-events:none;
  opacity:.9;
}
.rest-toggle-btn:hover{
  transform: translateY(-3px) scale(1.03) rotate(-0.4deg);
}
.rest-toggle-btn:active{
  transform: translateY(-1px) scale(1.01) rotate(-0.4deg);
}
@media (max-width:768px){
  .rest-toggle-wrap{ margin-top:1rem; }
  .rest-toggle-btn{ width:100%; max-width:340px; }
}


/* ============================================
           FUENTES LOCALES PANACA
           TITULOS: POLENO
           TEXTOS: EUCLID
        ============================================ */
        

        
        
        
        

        /* Alias para compatibilidad con el CSS existente */
        
/* ============================================
           VARIABLES CSS - Paleta PANACA OFICIAL
        ============================================ */
        :root {
            /* ========== PALETA OFICIAL PANACA ========== */
            
            /* Flor Cayena (Rojos) */
            --color-red: #E21B1B;
            --color-red-light: #EF6A60;
            --color-red-medium: #F04E30;
            --color-red-dark: #D1001C;
            
            /* Tonos Amarillos */
            --color-yellow: #F5B122;
            --color-yellow-light: #FFC557;
            --color-yellow-bright: #FFCE34;
            --color-yellow-dark: #D38F01;
            --color-yellow-deep: #EB7200;
            --color-orange: #E65301;
            --color-orange-dark: #DF3B01;
            
            /* Tonos Verde */
            --color-green: #629B3D;
            --color-green-light: #9AC67D;
            --color-green-medium: #448E5B;
            --color-green-dark: #166D35;
            --color-green-deep: #023D1B;
            
            /* Tonos Palma (Verde oliva) */
            --color-palma: #AAA733;
            --color-palma-light: #C6C163;
            --color-palma-dark: #808000;
            --color-palma-deep: #474503;
            
            /* Tonos Azul */
            --color-blue: #2F5289;
            --color-blue-light: #A9E4FC;
            --color-blue-medium: #1B325E;
            --color-blue-dark: #102437;
            
            /* Tonos Mar (Turquesa) */
            --color-mar: #1691B7;
            --color-mar-light: #41BBD8;
            --color-mar-dark: #006994;
            --color-mar-deep: #083D77;
            
            /* Tonos Café */
            --color-cafe: #934932;
            --color-cafe-light: #CD853F;
            --color-cafe-dark: #7F3A1F;
            --color-cafe-deep: #3D1C11;
            
            /* Tonos Coco */
            --color-coco: #AF8E6D;
            --color-coco-light: #D8BFAB;
            --color-coco-dark: #826644;
            --color-coco-deep: #654321;
            
            /* Tonos Arena */
            --color-arena: #F5DEB3;
            --color-arena-light: #FAF0E6;
            --color-arena-dark: #D8C798;
            --color-arena-deep: #C2B280;
            
            /* Colores de interfaz */
            --color-black: #000000;
            --color-white: #ffffff;
            --color-cream: #FAF0E6;
            --color-cream-dark: #F5DEB3;
            --color-gray: #EBEAE7;
            --color-gray-light: #f5f5f5;
            --color-text: #000000;
            --color-text-light: #666666;
            --color-text-muted: #999999;
            --color-brown: #934932;
            
            /* Fuentes PANACA */
            --font-heading: 'Poleno', 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
            --font-body: 'Euclid', 'Inter', 'Segoe UI', Arial, sans-serif;
            --font-body-bold: 'EuclidBold', 'Inter', 'Segoe UI', Arial, sans-serif;
            
            /* Espaciado */
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2.5rem;
            --spacing-xl: 4rem;
            
            /* Sombras PANACA - más pronunciadas */
            --shadow-panaca: 0 0 10px 2px rgba(128,128,128,0.5);
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.12);
            --shadow-md: 0 4px 20px rgba(0,0,0,0.18);
            --shadow-lg: 0 8px 40px rgba(0,0,0,0.22);
            --shadow-hover: 0 15px 30px rgba(0,0,0,0.2);
            
            /* Transiciones PANACA */
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --transition-panaca: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            
            /* Alturas */
            --topbar-height: 44px;
            --header-height: 70px;
            
            /* Clip-paths Zigzag PANACA (Estilo Montaña) */
            --clip-zigzag-bottom: polygon(0 0, 100% 0, 100% 100%, 95% 91%, 87% 98%, 81% 88%, 76% 96%, 70% 88%, 66% 96%, 61% 91%, 57% 98%, 51% 90%, 47% 96%, 42% 90%, 38% 96%, 33% 87%, 30% 98%, 23% 92%, 17% 94%, 13% 90%, 9% 97%, 4% 94%, 0 100%);
            --clip-zigzag-top: polygon(0% 100%, 0 18%, 6% 38%, 14% 12%, 20% 34%, 31% 8%, 40% 27%, 49% 12%, 56% 29%, 67% 10%, 75% 21%, 83% 0, 92% 24%, 100% 0, 100% 100%);
            
            /* Clip-paths para Botones PANACA (Estilo Orgánico/Recortado) */
            --btn-path-1: polygon(100% 100%, 99% 83%, 100% 13%, 94% 0%, 9% 1%, 1% 9%, 0% 77%, 1% 85%, 0% 100%);
            --btn-path-2: polygon(100% 99%, 98% 0, 94% 5%, 0% 2%, 2% 100%, 25% 96%);
            --btn-path-3: polygon(100% 97%, 100% 1%, 70% 3%, 0% 2%, 1% 100%, 21% 97%, 73% 100%);
            --btn-path-4: polygon(100% 96%, 100% 1%, 15% 0, 0 2%, 1% 75%, 0 100%, 96% 100%);
        }

        /* ============================================
           RESET Y BASE
        ============================================ */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            font-family: var(--font-body);
            color: var(--color-text);
            background-color: var(--color-cream);
            line-height: 1.6;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            position: relative;
        }

        /* ============================================
           SEO & ACCESIBILIDAD
        ============================================ */
        
        /* Noscript Content - SEO para buscadores */
        .noscript-content {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            font-family: var(--font-body);
            line-height: 1.6;
        }

        .noscript-content h1 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--color-red);
        }

        .noscript-content h2 {
            font-size: 1.2rem;
            margin: 1.5rem 0 0.5rem;
            color: var(--color-black);
        }

        .noscript-content p, .noscript-content li {
            margin-bottom: 0.5rem;
        }
        
        /* Skip Link - Accesibilidad */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-red);
            color: white;
            padding: 1rem 2rem;
            text-decoration: none;
            font-weight: 700;
            z-index: 99999;
            border-radius: 0 0 8px 8px;
            transition: top 0.3s ease;
        }

        .skip-link:focus {
            top: 0;
            outline: 3px solid var(--color-yellow);
        }

        /* Breadcrumb SEO */
        .breadcrumb {
            background: var(--color-white);
            padding: 0.5rem 0;
            font-size: 0.8rem;
            border-bottom: 1px solid var(--color-gray);
        }

        .breadcrumb__list {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            list-style: none;
            flex-wrap: wrap;
        }

        .breadcrumb__item a {
            color: var(--color-text-light);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .breadcrumb__item a:hover {
            color: var(--color-red);
            text-decoration: underline;
        }

        .breadcrumb__separator {
            color: var(--color-text-muted);
        }

        .breadcrumb__item--active span {
            color: var(--color-red);
            font-weight: 600;
        }

        /* Visually Hidden - para texto SEO accesible */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Focus visible para accesibilidad */
        :focus-visible {
            outline: 3px solid var(--color-yellow);
            outline-offset: 2px;
        }

        /* Reducir animaciones para usuarios que lo prefieren */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            html {
                scroll-behavior: auto;
            }
        }

        body.modal-open {
            overflow: hidden;
        }

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

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: none;
        }

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

        /* ============================================
           TOP BAR - Banner promocional ESTILO PANACA
        ============================================ */
        .topbar {
            background: var(--color-red);
            color: var(--color-white);
            padding: 0 0;
            padding-bottom: 0.45rem;
            position: relative;
            z-index: 1001;
            overflow: visible;
            width: 100%;
            transition: transform 0.3s ease, opacity 0.3s ease;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Borde zigzag inferior PANACA */
        .topbar::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 20px;
            background: var(--color-red);
            clip-path: var(--clip-zigzag-bottom);
            z-index: 999;
        }

        .topbar.topbar--hidden {
            transform: translateY(-100%);
            opacity: 0;
            position: absolute;
            pointer-events: none;
        }

        .topbar__content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
            text-align: center;
            overflow: hidden;
        }

        .topbar__text {
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            font-family: var(--font-heading);
        }

        .topbar__text strong {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.3rem 0.8rem;
            font-weight: 700;
            display: inline-block;
            font-family: var(--font-body-bold);
            clip-path: var(--btn-path-4);
        }

        /* Countdown Timer en topbar */
        .topbar__inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .topbar__promo {
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            font-family: var(--font-heading);
            display: flex;
            align-items: center;
            gap: 0.4rem;
            white-space: nowrap;
        }

        .topbar__promo strong {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.3rem 0.8rem;
            font-weight: 700;
            display: inline-block;
            font-family: var(--font-body-bold);
            clip-path: var(--btn-path-4);
        }

        /* Ofertas laterales del topbar */
        .topbar__offer {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-heading);
            font-size: 0.8rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .topbar__offer-badge {
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.35rem 0.7rem;
            font-weight: 800;
            font-size: 0.85rem;
            font-family: var(--font-heading);
            clip-path: var(--btn-path-4);
            display: inline-block;
            line-height: 1;
        }

        .topbar__offer-text {
            font-size: 0.7rem;
            opacity: 0.95;
            font-weight: 500;
            line-height: 1.2;
            max-width: 130px;
            white-space: normal;
        }

        .topbar__offer--right {
            text-align: left;
        }

        .topbar__offer--right .topbar__offer-badge {
            background: var(--color-yellow);
            color: var(--color-black);
        }

        .topbar__divider {
            width: 1px;
            height: 28px;
            background: rgba(255,255,255,0.25);
            flex-shrink: 0;
        }

        .topbar__countdown {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .topbar__countdown-unit {
            background: rgba(0,0,0,0.25);
            border-radius: 6px;
            padding: 4px 8px;
            min-width: 46px;
            text-align: center;
            line-height: 1;
        }

        .topbar__countdown-number {
            font-size: 1.15rem;
            font-weight: 800;
            font-family: var(--font-heading);
            display: block;
        }

        .topbar__countdown-label {
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.85;
            display: block;
            margin-top: 2px;
        }

        .topbar__countdown-sep {
            font-size: 1.1rem;
            font-weight: 700;
            opacity: 0.6;
        }

        /* ============================================
           HEADER - Sticky con toggle integrado ESTILO PANACA
        ============================================ */
        .header {
            background: var(--color-white);
            height: var(--header-height);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow-panaca);
            overflow: hidden;
            width: 100%;
            transition: top 0.3s ease;
            margin-top: 0;
        }

        /* Cuando se hace scroll, el header se fija arriba */
        body.scrolled .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            margin-top: 0;
        }

        /* Espaciador para cuando el header es fixed */
        .header-spacer {
            display: none;
            height: var(--header-height);
        }

        body.scrolled .header-spacer {
            display: block;
        }

        .header__container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            overflow: hidden;
        }

        .header__logo {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        
        /* Logo PANACA (imagen) */
        .header__logo-img {
            height: 34px;
            width: auto;
            display: block;
        }
/* Logo PANACA en SVG/texto estilizado */
        .header__logo-text {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            font-weight: 400;
            color: var(--color-red);
            letter-spacing: 3px;
            line-height: 1;
        }

        .header__logo-text span {
            position: relative;
        }

        /* Punto decorativo del logo */
        .header__logo-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--color-red);
            border-radius: 50%;
            margin-left: 2px;
            vertical-align: super;
        }

        /* Toggle en el header - REMOVIDO */
        .header__toggle {
            display: none !important;
        }

        .header__toggle-label {
            font-size: 0.75rem;
            color: var(--color-text-light);
            font-weight: 500;
            font-family: var(--font-body);
        }

        .header__toggle-btn {
            padding: 0.4rem 0.875rem;
            font-size: 0.8rem;
            font-weight: 700;
            border-radius: 0;
            background: transparent;
            color: var(--color-text);
            border: 2px solid transparent;
            cursor: pointer;
            transition: all var(--transition-fast);
            font-family: var(--font-heading);
            text-transform: uppercase;
        }

        .header__toggle-btn:hover {
            background: rgba(226, 27, 27, 0.15);
        }

        .header__toggle-btn.active {
            background: var(--color-red);
            color: var(--color-white);
            border-color: var(--color-red);
            box-shadow: 0 2px 8px rgba(226, 27, 27, 0.4);
        }

        .header__actions {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
        }

        /* Botón de idioma */
        .header__lang {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.5rem 0.75rem;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .header__lang:hover {
            background: #e9ecef;
            border-color: #ced4da;
        }

        .header__lang-current {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--color-text);
        }

        .header__lang svg {
            width: 14px;
            height: 14px;
            stroke: var(--color-text);
        }

        .header__cta {
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.85rem 1.75rem;
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all var(--transition-panaca);
            border: none;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            
            overflow: visible;
            font-family: var(--font-heading);
            clip-path: var(--btn-path-1);
        }

        .header__cta:hover {
            background: var(--color-red-dark);
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(226, 27, 27, 0.4);
        }

        .header__cart {
            position: relative;
            padding: 0.5rem;
            cursor: pointer;
            transition: opacity var(--transition-fast);
        }

        .header__cart:hover {
            opacity: 0.7;
        }

        .header__cart svg {
            width: 28px;
            height: 28px;
            stroke: var(--color-black);
            stroke-width: 1.5;
            fill: none;
        }

        /* ============================================
           NAV MENU - Menú de navegación ESTILO PANACA
        ============================================ */
        /* Nav-menu original oculto - movido al header */
        .nav-menu {
            display: none !important;
        }
        .nav-menu-spacer {
            display: none !important;
        }

        /* Nav links integrados en el header */
        /* Hamburger Menu Button */
        .header__hamburger {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1001;
            order: -1;
        }
        .header__hamburger-icon {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 24px;
        }
        .header__hamburger-icon span {
            display: block;
            height: 3px;
            width: 100%;
            background: var(--color-text);
            border-radius: 2px;
            transition: all 0.3s;
        }
        .header__hamburger.is-open .header__hamburger-icon span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 6px);
        }
        .header__hamburger.is-open .header__hamburger-icon span:nth-child(2) {
            opacity: 0;
        }
        .header__hamburger.is-open .header__hamburger-icon span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -6px);
        }
        @media (min-width: 992px) {
            .header__hamburger {
                display: none;
            }
        }

        /* Mobile Nav Overlay */
        .header__mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(62, 39, 35, 0.97);
            z-index: 999;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            opacity: 0;
            transition: opacity 0.3s;
            padding-top: calc(var(--topbar-height, 44px) + var(--header-height, 65px) + 10px);
            padding-bottom: 2rem;
            box-sizing: border-box;
        }
        .header__mobile-nav.is-open {
            display: flex;
            opacity: 1;
        }
        .header__mobile-nav a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 1rem 2rem;
            font-family: var(--font-heading);
            font-size: 1.2rem;
            /* Mismo menu en movil: sin negrilla inventada. */
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #fff;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s;
            width: 80%;
            max-width: 320px;
            justify-content: center;
        }
        .header__mobile-nav a:hover,
        .header__mobile-nav a.active {
            color: var(--color-yellow);
            background: rgba(255,255,255,0.1);
        }
        .header__mobile-nav a .picon {
            width: 20px;
            height: 20px;
        }
        .header__mobile-nav .mobile-nav__cta {
            margin-top: 1.5rem;
            background: var(--color-red);
            color: #fff;
            padding: 1rem 2.5rem;
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            clip-path: var(--btn-path-1);
            transition: all 0.3s;
        }
        .header__mobile-nav .mobile-nav__cta:hover {
            background: #B71C1C;
        }

        .header__nav {
            display: none;
            flex: 1;
            justify-content: center;
        }
        .header__nav-list {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .header__nav-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0.5rem 1rem;
            font-family: var(--font-heading);
            font-size: 0.8rem;
            /* Poleno solo trae el peso 500. Al pedir 700 el navegador inventaba la
               negrilla engordando los trazos y el texto se volvia ilegible. */
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text);
            text-decoration: none;
            border-radius: 4px;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }
        .header__nav-link:hover {
            color: var(--color-red);
            background: rgba(226, 27, 27, 0.06);
        }
        .header__nav-link.active {
            color: var(--color-red);
        }
        .header__nav-link .picon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        @media (min-width: 992px) {
            .header__nav {
                display: flex;
            }
        }

        .nav-menu__container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .nav-menu__list {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 0;
        }

        .nav-menu__item {
            position: relative;
        }

        .nav-menu__link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 1.5rem;
            color: rgba(255,255,255,0.9);
            font-size: 0.85rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all var(--transition-fast);
            white-space: nowrap;
            font-family: var(--font-heading);
        }

        .nav-menu__link:hover {
            color: var(--color-white);
            background: rgba(255,255,255,0.15);
        }

        .nav-menu__link.active {
            color: var(--color-yellow);
            background: rgba(245, 177, 34, 0.2);
        }

        .nav-menu__link svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
        }

        /* Botones destacados del nav-menu ESTILO PANACA con clip-paths */
        .nav-menu__highlights {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .nav-menu__highlight {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.7rem 1.4rem;
            font-size: 0.85rem;
            font-weight: 700;
            border-radius: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all var(--transition-panaca);
            white-space: nowrap;
            font-family: var(--font-heading);
        }

        .nav-menu__highlight--fiesta {
            background: linear-gradient(135deg, #D4A017 0%, #B8860B 100%);
            color: var(--color-white);
            border: none;
            clip-path: var(--btn-path-3);
        }

        .nav-menu__highlight--fiesta:hover {
            background: linear-gradient(135deg, #E6B422 0%, #9A7209 100%);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 6px 20px rgba(212, 160, 23, 0.5);
        }

        .nav-menu__highlight--travesia {
            background: var(--color-red);
            color: var(--color-white);
            border: none;
            clip-path: var(--btn-path-1);
        }

        .nav-menu__highlight--travesia:hover {
            background: var(--color-red-dark);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 6px 20px rgba(226, 27, 27, 0.5);
        }

        /* ============================================
           SECCIÓN GRUPOS Y EVENTOS - Diseño Premium
        ============================================ */
        .grupos-section {
            background: linear-gradient(135deg, #102437 0%, #1B325E 50%, #102437 100%);
            padding: var(--spacing-xl) 0;
            overflow: hidden;
            position: relative;
        }

        .grupos-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        .grupos-section .container {
            position: relative;
            z-index: 1;
        }

        .grupos-section .section-header {
            text-align: center;
            margin-bottom: var(--spacing-lg);
        }

        .grupos-section .section-title {
            color: var(--color-white) !important;
        }

        .grupos-section .section-title span {
            color: var(--color-yellow) !important;
        }

        .grupos-section .section-subtitle {
            color: rgba(255,255,255,0.8);
        }

        .section-badge--dark {
            background: rgba(255,255,255,0.1);
            color: var(--color-yellow);
            border: 1px solid rgba(245, 177, 34, 0.3);
        }

        /* Stats row */
        .grupos-stats {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-bottom: var(--spacing-lg);
            flex-wrap: wrap;
        }

        .grupos-stat {
            text-align: center;
            color: var(--color-white);
        }

        .grupos-stat__number {
            font-family: var(--font-heading);
            font-size: 3rem;
            font-weight: 400;
            color: var(--color-yellow);
            line-height: 1;
            margin-bottom: 0.25rem;
        }

        .grupos-stat__label {
            font-size: 0.85rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Grid de tarjetas mejorado */
        .grupos-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: var(--spacing-lg);
            align-items: stretch;
        }

        .grupos-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .grupos-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0,0,0,0.4);
            border-color: rgba(245, 177, 34, 0.5);
        }

        .grupos-card__image {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .grupos-card__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .grupos-card:hover .grupos-card__image img {
            transform: scale(1.15);
        }

        .grupos-card__overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                to bottom,
                rgba(15,12,41,0) 0%,
                rgba(15,12,41,0.5) 60%,
                rgba(15,12,41,0.95) 100%
            );
        }

        .grupos-card__badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.4rem 1rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: var(--font-heading);
            clip-path: var(--btn-path-4);
        }

        .grupos-card__content {
            padding: 1.25rem;
            color: var(--color-white);
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .grupos-card__bottom {
            margin-top: auto;
        }

        .grupos-card__bottom .btn-discover {
            margin-top: 1rem;
        }

        .grupos-card__icon {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
            display: block;
        }

        .grupos-card__title {
            font-family: var(--font-heading);
            font-size: 1.3rem;
            font-weight: 400;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-white);
        }

        .grupos-card__desc {
            font-size: 0.85rem;
            opacity: 0.8;
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }

        .grupos-card__features {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .grupos-card__feature {
            background: rgba(255,255,255,0.1);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        /* CTA section mejorada */
        .grupos-cta-section {
            background: rgba(255,255,255,0.05);
            border-radius: 20px;
            padding: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            border: 1px solid rgba(255,255,255,0.1);
            flex-wrap: wrap;
        }

        .grupos-cta-info {
            color: var(--color-white);
            flex: 1;
        }

        .grupos-cta-info h3 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
        }

        .grupos-cta-info h3 span {
            color: var(--color-yellow);
        }

        .grupos-cta-info p {
            opacity: 0.8;
            font-size: 0.95rem;
        }

        .grupos-ctas {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .grupos-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            font-size: 0.95rem;
            font-weight: 600;
            border-radius: 50px;
            transition: all var(--transition-normal);
            cursor: pointer;
            border: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .grupos-cta--primary {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: var(--color-white);
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
        }

        .grupos-cta--primary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
        }

        .grupos-cta--secondary {
            background: linear-gradient(135deg, var(--color-yellow) 0%, #D38F01 100%);
            color: var(--color-black);
            box-shadow: 0 4px 15px rgba(245, 177, 34, 0.3);
        }

        .grupos-cta--secondary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(245, 177, 34, 0.5);
        }

        /* ============================================
           HERO - Carrusel exacto como la imagen
        ============================================ */
        .hero {
            position: relative;
            height: calc(100vh - var(--header-height));
            min-height: 500px;
            overflow: hidden;
            background: var(--color-black);
        }

        .hero__carousel {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* Video de fondo permanente */
        .hero__video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
        }

        .hero__video-bg video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        
/* === Responsive HERO video sources (PC vs mobile) === */
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero__video--mobile { display: none; }
@media (max-width: 768px){
    .hero__video--desktop { display: none; }
    .hero__video--mobile { display: block; width: 100%; height: 100%; object-fit: cover; }
    .hero__video-bg { display: block; }
}
.hero__overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,0) 40%,
                rgba(0,0,0,0.4) 100%
            );
            z-index: 1;
        }

        /* Slides solo para contenido */
        .hero__slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s ease, visibility 0.8s ease;
            z-index: 2;
        }

        .hero__slide.active {
            opacity: 1;
            visibility: visible;
        }

        /* Ocultar título hero en mobile */
        @media (max-width: 768px) {
            .hero {
                height: calc(100vh - var(--header-height));
                min-height: 480px;
            }
            .hero__title--hide-mobile {
                display: none !important;
            }
            /* Centrar contenido del banner en mobile */
            .hero__content {
                padding-left: var(--spacing-md) !important;
                padding-right: var(--spacing-md) !important;
                text-align: center;
                bottom: 0;
            }
            .hero__content-inner {
                max-width: 100%;
                margin: 0 auto;
            }
            .hero__subtitle {
                text-align: center;
            }
            .hero__ctas {
                align-items: center;
                justify-content: center;
            }
            .hero__cta {
                width: auto !important;
                max-width: 70% !important;
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }
        }
        .hero__media {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .hero__image,
        .hero__video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero__content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: var(--spacing-md) var(--spacing-xl);
            padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
            padding-left: var(--spacing-xl);
            z-index: 2;
            color: var(--color-white);
        }
        /* HERO - offset para no traslape con redes (desactivado en mobile, centrado) */


        .hero__content-inner {
            max-width: 700px;
        }

        .hero__tag {
            position: absolute;
            top: var(--spacing-lg);
            left: 15px;
            display: inline-block;
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.6rem 1.4rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: var(--font-heading);
            clip-path: var(--btn-path-4);
            z-index: 3;
        }

        .hero__title {
            font-family: var(--font-heading);
            font-size: clamp(1.8rem, 4vw, 3rem);
            font-weight: 400;
            line-height: 1;
            margin-bottom: var(--spacing-md);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .hero__description {
            font-size: 1rem;
            max-width: 550px;
            margin-bottom: var(--spacing-lg);
            opacity: 0.95;
            line-height: 1.6;
        }

        .hero__ctas {
            display: flex;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
        }

        .hero__cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1.1rem 2.2rem;
            font-size: 0.9rem;
            font-weight: 700;
            transition: all var(--transition-panaca);
            cursor: pointer;
            border: none;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .hero__cta--primary {
            background: var(--color-red);
            color: var(--color-white);
            clip-path: var(--btn-path-1);
        }

        .hero__cta--primary:hover {
            background: var(--color-red-dark);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 25px rgba(226, 27, 27, 0.4);
        }

        .hero__cta--secondary {
            background: rgba(255,255,255,0.15);
            color: var(--color-white);
            border: 2px solid rgba(255,255,255,0.5);
            backdrop-filter: blur(10px);
            clip-path: var(--btn-path-2);
        }

        .hero__cta--secondary:hover {
            background: rgba(255,255,255,0.25);
            border-color: var(--color-white);
            transform: translateY(-3px) scale(1.03);
        }

        /* Controles del carrusel */
        .hero__controls {
            position: absolute;
            bottom: var(--spacing-xl);
            right: var(--spacing-xl);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            z-index: 3;
        }

        /* Flechas del carrusel - ESTILO PANACA con clip-paths */
        .hero__arrow {
            display: none !important;
            position: absolute;
            width: 55px;
            height: 55px;
            background: var(--color-green-dark);
            border: none;
            color: var(--color-white);
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-panaca);
            z-index: 10;
        }

        .hero__arrow--prev {
            bottom: var(--spacing-xl);
            right: calc(var(--spacing-xl) + 180px);
            clip-path: var(--btn-path-3);
        }

        .hero__arrow--next {
            bottom: var(--spacing-xl);
            right: calc(var(--spacing-xl) + 120px);
            clip-path: var(--btn-path-1);
        }

        .hero__arrow:hover {
            background: var(--color-red);
            transform: scale(1.08);
        }

        .hero__arrow svg {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            stroke-width: 2.5;
            fill: none;
        }

        .hero__dots {
            display: none !important;
            gap: 8px;
        }

        .hero__dot {
            display: none !important;
            width: 12px;
            height: 12px;
            background: #000;
            border: none;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .hero__dot:hover {
            background: rgba(255,255,255,0.7);
        }

        .hero__dot.active {
            background: var(--color-red);
        }

        .hero__controls {
            display: none !important;
        }

        /* Barra de progreso */
        .hero__progress {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255,255,255,0.2);
            z-index: 3;
        }

        .hero__progress-bar {
            height: 100%;
            background: var(--color-red);
            width: 0%;
            transition: width 0.1s linear;
        }

        /* Botón flotante derecho (como en la imagen) */
        .hero__float-btn {
            position: absolute;
            bottom: var(--spacing-xl);
            right: var(--spacing-md);
            width: 50px;
            height: 50px;
            background: var(--color-red);
            color: var(--color-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 4;
            box-shadow: var(--shadow-md);
            transition: all var(--transition-normal);
            display: none; /* Mostrar solo en mobile si se desea */
        }

        .hero__float-btn:hover {
            transform: scale(1.1);
        }

        /* ============================================
           SECCIONES GENERALES - ESTILO PANACA
        ============================================ */
        .section {
            padding: var(--spacing-xl) 0;
            overflow: hidden;
            width: 100%;
            position: relative;
        }

        .section--gray {
            background: var(--color-gray);
        }

        .section--cream {
            background: var(--color-cream);
        }
        
        .section--cream-dark {
            background: var(--color-cream-dark);
        }

        .section--dark {
            background: var(--color-black);
            color: var(--color-white);
        }
        
        /* Separadores zigzag PANACA para secciones */
        .section--with-separator-top {
            padding-top: calc(var(--spacing-xl) + 20px);
        }
        
        .section--with-separator-top::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: inherit;
            clip-path: var(--clip-zigzag-top);
        }
        
        .section--with-separator-bottom::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 20px;
            background: inherit;
            clip-path: var(--clip-zigzag-bottom);
            z-index: 2;
        }

        .section-header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.6rem 1.4rem;
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: var(--spacing-md);
            border-radius: 0;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            clip-path: var(--btn-path-4);
        }

        .section-badge svg {
            width: 18px;
            height: 18px;
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 4vw, 3rem);
            color: var(--color-brown);
            margin-bottom: var(--spacing-sm);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .section-title span {
            color: var(--color-red);
        }

        .section-subtitle {
            font-size: 1rem;
            color: var(--color-text-light);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
            font-family: var(--font-body);
        }

        /* ============================================
           NUEVO EN RD - Sección emocional ESTILO PANACA
        ============================================ */
        .nuevo-rd {
            background: var(--color-cream);
            color: var(--color-text);
            position: relative;
            overflow: visible;
            padding-top: calc(var(--spacing-xl) + 20px);
        }
        
        /* Borde zigzag superior PANACA */
        .nuevo-rd::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 0;
            right: 0;
            height: 22px;
            background: var(--color-cream);
            clip-path: var(--clip-zigzag-top);
            z-index: 3;
        }
        
        .nuevo-rd .section-badge {
            background: var(--color-yellow);
            color: var(--color-black);
            clip-path: var(--btn-path-4);
        }

        .nuevo-rd__content {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }

        .nuevo-rd__badge {
            display: inline-block;
            background: var(--color-green-dark);
            color: var(--color-white);
            padding: 0.6rem 1.6rem;
            font-weight: 700;
            font-size: 0.9rem;
            margin-bottom: var(--spacing-md);
            font-family: var(--font-heading);
            text-transform: uppercase;
            clip-path: var(--btn-path-4);
        }

        .nuevo-rd__title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 5vw, 3.5rem);
            line-height: 1.1;
            margin-bottom: var(--spacing-md);
            text-transform: uppercase;
            color: var(--color-text);
        }

        .nuevo-rd__title span {
            color: var(--color-red);
        }

        .nuevo-rd__subtitle {
            font-size: 1.15rem;
            opacity: 0.85;
            line-height: 1.7;
            margin-bottom: var(--spacing-lg);
        }

        .nuevo-rd__features {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: var(--spacing-lg);
        }

        .nuevo-rd__feature {
            text-align: center;
            padding: 2rem 1.25rem;
            background: var(--color-white);
            border: 2px solid rgba(0,0,0,0.08);
            position: relative;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-1);
            box-shadow: var(--shadow-sm);
        }

        .nuevo-rd__feature:nth-child(2) {
            clip-path: var(--btn-path-2);
        }

        .nuevo-rd__feature:nth-child(3) {
            clip-path: var(--btn-path-3);
        }

        .nuevo-rd__feature:nth-child(4) {
            clip-path: var(--btn-path-4);
        }

        .nuevo-rd__feature:hover {
            transform: translateY(-5px);
            border-color: var(--color-green-dark);
            box-shadow: var(--shadow-md);
        }

        .nuevo-rd__feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nuevo-rd__feature-icon svg {
            width: 50px;
            height: 50px;
        }

        .nuevo-rd__feature-text h4 {
            font-family: var(--font-heading);
            font-weight: 400;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-text);
        }

        .nuevo-rd__feature-text p {
            font-size: 0.85rem;
            opacity: 0.7;
            line-height: 1.5;
        }

        .nuevo-rd__quote {
            background: var(--color-white);
            padding: 1.5rem;
            border-left: 4px solid var(--color-green-dark);
            text-align: left;
            max-width: 600px;
            margin: 0 auto;
            clip-path: var(--btn-path-2);
            box-shadow: var(--shadow-sm);
        }

        .nuevo-rd__quote p {
            font-size: 1.1rem;
            font-style: italic;
            margin-bottom: 0.5rem;
            line-height: 1.5;
            color: var(--color-text);
        }

        .nuevo-rd__quote span {
            font-size: 0.9rem;
            opacity: 0.7;
        }

        /* ---- Banner venta: bloques adicionales ---- */
        .nuevo-rd__support {
            font-size: 1rem;
            opacity: 0.8;
            line-height: 1.7;
            margin-bottom: var(--spacing-lg);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .nuevo-rd__includes-title {
            font-family: var(--font-heading);
            font-size: 1.4rem;
            text-transform: uppercase;
            color: var(--color-green-dark);
            margin-bottom: var(--spacing-md);
            letter-spacing: 1px;
        }

        .nuevo-rd__checklist {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.6rem 2rem;
            max-width: 750px;
            margin: 0 auto var(--spacing-lg);
            text-align: left;
        }

        .nuevo-rd__check-item {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            font-size: 0.95rem;
            line-height: 1.4;
            color: var(--color-text);
        }

        .nuevo-rd__check-icon {
            color: #4CAF50;
            font-weight: 700;
            flex-shrink: 0;
            font-size: 1.1rem;
        }

        .nuevo-rd__extras-title {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            text-transform: uppercase;
            color: var(--color-yellow-dark);
            margin-bottom: var(--spacing-sm);
            letter-spacing: 1px;
        }

        .nuevo-rd__extras {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            max-width: 750px;
            margin: 0 auto var(--spacing-lg);
        }

        .nuevo-rd__extra-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            background: var(--color-white);
            border: 1px dashed var(--color-yellow-dark);
            padding: 0.9rem 1.2rem;
            border-radius: 10px;
            text-align: left;
            transition: all var(--transition-panaca);
        }

        .nuevo-rd__extra-item:hover {
            border-color: var(--color-yellow);
            box-shadow: var(--shadow-sm);
            transform: translateX(4px);
        }

        .nuevo-rd__extra-icon {
            font-size: 1.6rem;
            flex-shrink: 0;
        }

        .nuevo-rd__extra-text {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }

        .nuevo-rd__extra-text strong {
            font-size: 0.9rem;
            color: var(--color-text);
        }

        .nuevo-rd__extra-text span {
            font-size: 0.78rem;
            color: var(--color-yellow-dark);
            font-weight: 600;
        }

        .nuevo-rd__cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.2rem;
            margin-bottom: var(--spacing-lg);
        }

        .nuevo-rd__card {
            background: var(--color-white);
            border: 1px solid rgba(0,0,0,0.08);
            padding: 1.5rem 1rem;
            text-align: center;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-2);
            box-shadow: var(--shadow-sm);
        }

        .nuevo-rd__card:nth-child(even) {
            clip-path: var(--btn-path-3);
        }

        .nuevo-rd__card:hover {
            transform: translateY(-4px);
            border-color: var(--color-green-dark);
            box-shadow: var(--shadow-md);
        }

        .nuevo-rd__card-emoji {
            font-size: 2.2rem;
            margin-bottom: 0.6rem;
            display: block;
        }

        .nuevo-rd__card h4 {
            font-family: var(--font-heading);
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.3rem;
            color: var(--color-text);
        }

        .nuevo-rd__card p {
            font-size: 0.8rem;
            opacity: 0.65;
            line-height: 1.4;
        }

        .nuevo-rd__trust {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-bottom: var(--spacing-lg);
        }

        .nuevo-rd__trust-item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.85rem;
            color: var(--color-text);
            opacity: 0.8;
            font-weight: 500;
        }

        .nuevo-rd__trust-icon {
            color: var(--color-green-dark);
            font-size: 1rem;
        }

        .nuevo-rd__ctas {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .nuevo-rd__cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1.1rem 2.2rem;
            font-weight: 700;
            font-size: 1rem;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all var(--transition-panaca);
            cursor: pointer;
            border: none;
            text-decoration: none;
        }

        .nuevo-rd__cta--primary {
            background: var(--color-red);
            color: var(--color-white);
            clip-path: var(--btn-path-1);
        }

        .nuevo-rd__cta--primary:hover {
            background: var(--color-red-dark);
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 10px 30px rgba(206, 17, 38, 0.4);
        }

        .nuevo-rd__cta--secondary {
            background: transparent;
            color: var(--color-green-dark);
            border: 2px solid var(--color-green-dark);
            clip-path: var(--btn-path-2);
        }

        .nuevo-rd__cta--secondary:hover {
            background: var(--color-green-dark);
            color: var(--color-white);
            transform: translateY(-2px);
        }

        /* ============================================
           PASAPORTES CARDS SECTION
        ============================================ */
        .pasaportes-section {
            background: var(--color-white);
            padding: var(--spacing-xl) 0;
        }

        .pasaportes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.2rem;
            margin-bottom: var(--spacing-lg);
            align-items: stretch;
        }

        .pasaporte-card {
            background: var(--color-white);
            border: 2px solid rgba(0,0,0,0.08);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all var(--transition-panaca);
            box-shadow: var(--shadow-sm);
            border-radius: 0;
        }

        .pasaporte-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: var(--color-green-dark);
        }

        .pasaporte-card--featured {
            border-color: var(--color-red);
            position: relative;
        }

        .pasaporte-card--featured::before {
            content: '⭐ MÁS VENDIDO';
            position: absolute;
            top: 10px;
            left: -4px;
            background: var(--color-yellow);
            color: var(--color-black);
            font-size: 0.7rem;
            font-weight: 700;
            font-family: var(--font-heading);
            padding: 0.35rem 1rem 0.35rem 0.8rem;
            z-index: 2;
            letter-spacing: 1px;
            text-transform: uppercase;
            clip-path: var(--btn-path-4);
        }

        .pasaporte-card--featured .pasaporte-card__header {
            padding-top: 2.5rem;
        }

        .pasaporte-card--featured .pasaporte-card__img {
            margin-top: 1.8rem;
        }

        .pasaporte-card__img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            object-position: center 30%;
            display: block;
        }

        .pasaporte-card__header {
            padding: 1.5rem 1.5rem 1rem;
            text-align: center;
        }

        .pasaporte-card__emoji {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 0.5rem;
        }

        .pasaporte-card__name {
            font-family: var(--font-heading);
            font-size: 1.3rem;
            text-transform: uppercase;
            color: var(--color-text);
            margin-bottom: 0.3rem;
            letter-spacing: 0.5px;
        }

        .pasaporte-card__desc {
            font-size: 0.85rem;
            color: var(--color-text-light);
            line-height: 1.5;
        }

        .pasaporte-card__body {
            padding: 0 1.5rem 1rem;
            flex-grow: 1;
        }

        .pasaporte-card__list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .pasaporte-card__list li {
            font-size: 0.85rem;
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
            line-height: 1.4;
        }

        .pasaporte-card__list li::before {
            content: '🌿';
            flex-shrink: 0;
            font-size: 0.8rem;
        }

        .pasaporte-card--featured .pasaporte-card__list li::before {
            content: '🏕️';
        }

        .pasaporte-card--travesia .pasaporte-card__list li::before {
            content: '🐴';
        }

        .pasaporte-card__footer {
            padding: 1rem 1.5rem 1.5rem;
            border-top: 1px solid rgba(0,0,0,0.06);
            text-align: center;
        }

        .pasaporte-card__price {
            font-family: var(--font-heading);
            font-size: 1.6rem;
            color: var(--color-red);
            margin-bottom: 0.15rem;
        }

        .pasaporte-card__price-old {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            color: var(--color-text-muted);
            margin-bottom: 0.1rem;
            display: block;
        }

        .pasaporte-card__price-old s {
            text-decoration: line-through;
            text-decoration-color: var(--color-red);
            text-decoration-thickness: 2px;
        }

        .pasaporte-card__price-badge {
            display: inline-block;
            background: var(--color-red);
            color: var(--color-white);
            font-size: 0.65rem;
            font-weight: 700;
            font-family: var(--font-heading);
            padding: 0.2rem 0.6rem;
            border-radius: 3px;
            margin-left: 0.4rem;
            vertical-align: middle;
            letter-spacing: 0.5px;
        }

        .pasaporte-card__price-note {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            margin-bottom: 0.8rem;
            display: block;
        }

        .pasaporte-card__prices-row {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 0.4rem;
        }

        .pasaporte-card__price-col {
            text-align: center;
        }

        .pasaporte-card__price-label {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--color-text-muted);
            letter-spacing: 0.5px;
            display: block;
            margin-bottom: 0.1rem;
        }

        .pasaporte-card__price-col .pasaporte-card__price-old {
            font-size: 0.85rem;
            margin-bottom: 0;
        }

        .pasaporte-card__price-col .pasaporte-card__price {
            font-size: 1.3rem;
            margin-bottom: 0;
        }

        .pasaporte-card__cta {
            display: inline-block;
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.7rem 1.8rem;
            font-family: var(--font-heading);
            font-size: 0.85rem;
            text-transform: uppercase;
            font-weight: 700;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-4);
            cursor: pointer;
            border: none;
            letter-spacing: 0.5px;
        }

        .pasaporte-card__cta:hover {
            background: var(--color-red-dark);
            transform: scale(1.05);
        }

        .pasaporte-card__extra-tip {
            display: block;
            margin-top: 0.6rem;
            margin-bottom: 0.3rem;
            padding: 0.5rem 0.8rem;
            background: #FFF8E7;
            border-left: 3px solid var(--color-yellow);
            font-size: 0.75rem;
            color: var(--color-text);
            text-align: left;
            line-height: 1.4;
        }

        .pasaporte-card__extra-tip strong {
            color: var(--color-yellow-dark);
        }

        .pasaporte-card__more {
            display: inline-block;
            margin-top: 0.6rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--color-green-dark);
            text-decoration: none;
            transition: all var(--transition-panaca);
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pasaporte-card__more:hover {
            color: var(--color-red);
            text-decoration: underline;
        }

        .pasaportes-note {
            text-align: center;
            font-size: 0.85rem;
            color: var(--color-text-light);
            max-width: 600px;
            margin: 0 auto;
        }

        .pasaportes-cta-row {
            display: flex;
            justify-content: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin-top: var(--spacing-md);
        }

        @media (max-width: 1024px) and (min-width: 769px) {
            .pasaportes-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .pasaportes-grid {
                grid-template-columns: 1fr;
                max-width: 420px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        @media (max-width: 768px) {
            .nuevo-rd__checklist {
                grid-template-columns: 1fr;
                gap: 0.5rem;
                padding: 0 1rem;
            }
            .nuevo-rd__cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.8rem;
            }
            .nuevo-rd__trust {
                flex-direction: column;
                align-items: center;
                gap: 0.6rem;
            }
        }

        @media (max-width: 480px) {
            .nuevo-rd__cards {
                grid-template-columns: 1fr 1fr;
                gap: 0.6rem;
            }
            .nuevo-rd__card {
                padding: 1rem 0.7rem;
            }
            .nuevo-rd__ctas {
                flex-direction: column;
                align-items: stretch;
                padding: 0 1rem;
            }
            .nuevo-rd__cta {
                justify-content: center;
            }
        }

        /* ============================================
           BANNER DE VISITAS FRECUENTES
        ============================================ */
        .frecuente-banner {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            background: var(--color-green-dark);
            color: var(--color-white);
            padding: 2rem 2.5rem;
            margin-bottom: var(--spacing-lg);
            box-shadow: var(--shadow-panaca);
            clip-path: var(--btn-path-2);
            border: 3px solid rgba(255,255,255,0.1);
        }

        .frecuente-banner__icon {
            font-size: 3rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .frecuente-banner__icon svg {
            width: 50px;
            height: 50px;
        }

        .frecuente-banner__content h3 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
            letter-spacing: 1px;
        }

        .frecuente-banner__content p {
            font-size: 1rem;
            opacity: 0.95;
            line-height: 1.5;
        }
        /* ============================================
           CAJA DE REPETIR VISITAS - ESTILO PANACA
        ============================================ */
        .gratis-repeat-box {
            background: var(--color-cream);
            border: 3px solid var(--color-yellow);
            padding: 2.5rem;
            margin-top: var(--spacing-xl);
            text-align: center;
            clip-path: var(--btn-path-2);
            box-shadow: var(--shadow-panaca);
        }

        .gratis-repeat-box__header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .gratis-repeat-box__icon {
            font-size: 1.5rem;
        }

        .gratis-repeat-box__header h4 {
            font-family: var(--font-heading);
            font-size: 1.3rem;
            text-transform: uppercase;
            color: var(--color-black);
            letter-spacing: 1px;
        }

        .gratis-repeat-box p {
            font-size: 1.05rem;
            color: var(--color-text-light);
            line-height: 1.6;
            max-width: 700px;
            margin: 0 auto 1.5rem;
        }

        .gratis-repeat-box__ctas {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .gratis-repeat-box__link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-red);
            font-weight: 700;
            font-size: 1rem;
            font-family: var(--font-heading);
            text-transform: uppercase;
            transition: all var(--transition-panaca);
        }

        .gratis-repeat-box__link:hover {
            color: var(--color-red-dark);
            transform: translateX(5px);
        }

        /* ============================================
           GRATIS CARDS - ESTILO PANACA
        ============================================ */
        .gratis-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-lg);
            align-items: stretch;
        }

        .gratis-card {
            background: var(--color-white);
            box-shadow: var(--shadow-panaca);
            transition: all var(--transition-panaca);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            border-radius: 0;
        }

        .gratis-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-hover);
        }

        /* Imagen header de la tarjeta */
        .gratis-card__header {
            position: relative;
            height: 220px;
            overflow: hidden;
        }

        .gratis-card__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-panaca);
        }

        .gratis-card:hover .gratis-card__image {
            transform: scale(1.08);
        }

        .gratis-card__overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gratis-card__ribbon {
            position: absolute;
            top: 18px;
            right: -32px;
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.5rem 2.5rem;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            transform: rotate(45deg);
            letter-spacing: 0.5px;
            z-index: 2;
            font-family: var(--font-body-bold);
        }
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            transform: rotate(45deg);
            letter-spacing: 0.5px;
            z-index: 2;
        }

        .gratis-card__price {
            font-family: var(--font-heading);
            font-size: 3.5rem;
            color: var(--color-white);
            line-height: 1;
            text-shadow: 2px 4px 10px rgba(0,0,0,0.3);
            z-index: 1;
            letter-spacing: 2px;
        }

        

        .gratis-card__overlay{
            flex-direction: column;
            gap: 0.4rem;
        }

        .gratis-card__limited{
            display: inline-block;
            font-family: var(--font-body-bold);
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--color-white);
            background: rgba(0,0,0,0.35);
            padding: 0.3rem 0.7rem;
            border-radius: 999px;
            text-shadow: 1px 2px 6px rgba(0,0,0,0.35);
        }

/* Contenido de la tarjeta */
        .gratis-card__content {
            padding: var(--spacing-md);
            text-align: left;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .gratis-card__bottom {
            margin-top: auto;
        }

        .gratis-card__bottom .gratis-card__note {
            margin-bottom: 1rem;
        }

        .gratis-card__title {
            display: inline-block;
            font-family: var(--font-heading);
            font-size: 1.4rem;
            font-weight: 400;
            color: var(--color-black);
            background: var(--color-yellow);
            padding: 0.45rem 1rem;
            margin-bottom: var(--spacing-sm);
            text-transform: uppercase;
            letter-spacing: 1px;
            clip-path: var(--btn-path-4);
        }

        .gratis-card__description {
            font-size: 0.95rem;
            color: var(--color-text);
            line-height: 1.6;
            margin-bottom: var(--spacing-md);
        }

        .gratis-card__features {
            list-style: none;
            margin-bottom: var(--spacing-md);
        }

        .gratis-card__feature {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: var(--color-text);
        }

        .gratis-card__feature svg {
            width: 18px;
            height: 18px;
            stroke: var(--color-red);
            stroke-width: 2.5;
            fill: none;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .gratis-card__note {
            font-size: 0.85rem;
            color: var(--color-text-muted);
            font-style: italic;
            padding-top: var(--spacing-sm);
            border-top: 1px solid var(--color-gray);
        }

        /* Tarjeta del espectáculo con estilo diferente */
        .gratis-card--presentacion {
            border: 2px solid var(--color-yellow);
        }

        .gratis-card__ribbon--presentacion {
            background: var(--color-black) !important;
        }

        .gratis-card__overlay--presentacion {
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
        }
        .gratis-card__cta {
            display: block;
            width: 100%;
            background: var(--color-red);
            color: var(--color-white);
            padding: 1rem 1.5rem;
            font-weight: 700;
            font-size: 1rem;
            text-align: center;
            border: none;
            cursor: pointer;
            margin-top: var(--spacing-sm);
            transition: all var(--transition-panaca);
            font-family: var(--font-heading);
            text-transform: uppercase;
            clip-path: var(--btn-path-1);
        }

        .gratis-card__cta:hover {
            background: var(--color-red-dark);
            transform: translateY(-2px) scale(1.02);
        }

        /* Botones de acción para tarjetas */
        .gratis-card__actions {
            display: flex;
            gap: 0.75rem;
            margin-top: var(--spacing-sm);
        }

        .gratis-card__actions .gratis-card__cta {
            margin-top: 0;
            flex: 1;
        }

        /* Botón Descubrir Más - ESTILO PANACA con clip-paths orgánicos */
        .btn-discover {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem 1.75rem;
            font-weight: 700;
            font-size: 0.95rem;
            text-align: center;
            border-radius: 0;
            cursor: pointer;
            transition: all var(--transition-panaca);
            text-decoration: none;
            border: none;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
        }

        .btn-discover--outline {
            background: transparent;
            border: 3px solid var(--color-red);
            color: var(--color-red);
            clip-path: var(--btn-path-2);
        }

        .btn-discover--outline:hover {
            background: var(--color-red);
            color: #fff;
            transform: translateY(-3px) scale(1.03);
        }

        .btn-discover--outline-white {
            background: transparent;
            border: 3px solid #fff;
            color: #fff;
            clip-path: var(--btn-path-2);
        }

        .btn-discover--outline-white:hover {
            background: #fff;
            color: var(--color-red);
            transform: translateY(-3px) scale(1.03);
        }

        .btn-discover--primary {
            background: var(--color-red);
            color: #fff;
            clip-path: var(--btn-path-1);
        }

        .btn-discover--primary:hover {
            background: var(--color-red-dark);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 25px rgba(226, 27, 27, 0.4);
        }

        .btn-discover--secondary {
            background: var(--color-blue-dark);
            color: #fff;
            clip-path: var(--btn-path-2);
        }

        .btn-discover--secondary:hover {
            background: #102437;
            transform: translateY(-3px) scale(1.03);
        }

        .btn-discover--fiesta {
            background: #1691B7;
            color: #fff;
            clip-path: var(--btn-path-3);
        }

        .btn-discover--fiesta:hover {
            background: #006994;
            transform: translateY(-3px) scale(1.03);
        }

        
        .btn-discover--menu {
            background: var(--color-red);
            color: #fff;
            clip-path: var(--btn-path-1);
        }

        .btn-discover--menu:hover {
            background: var(--color-red-dark);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 25px rgba(226, 27, 27, 0.4);
        }
.btn-discover--green {
            background: var(--color-green-dark);
            color: #fff;
            clip-path: var(--btn-path-3);
        }

        .btn-discover--green:hover {
            background: #023D1B;
            transform: translateY(-3px) scale(1.03);
        }
        
        .btn-discover--yellow {
            background: var(--color-yellow);
            color: var(--color-black);
            clip-path: var(--btn-path-4);
        }
        
        .btn-discover--yellow:hover {
            background: #D38F01;
            transform: translateY(-3px) scale(1.03);
        }

        .btn-discover svg {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }

        .btn-discover:hover svg {
            transform: translateX(3px);
        }

        /* Botón full width */
        .btn-discover--full {
            width: 100%;
        }

        /* CTA Principal debajo de tarjetas gratis */
        .gratis-cta-main {
            margin-top: 2.5rem;
            background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 10px 40px rgba(226, 27, 27, 0.3);
        }

        .gratis-cta-main__content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .gratis-cta-main__text {
            flex: 1;
            min-width: 280px;
        }

        .gratis-cta-main__text h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.5rem;
        }

        .gratis-cta-main__text p {
            font-size: 1rem;
            color: rgba(255,255,255,0.9);
            margin: 0;
        }

        .gratis-cta-main__btn {
            background: #fff;
            color: var(--color-red);
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 700;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .gratis-cta-main__btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        @media (max-width: 768px) {
            .gratis-cta-main {
                padding: 1.5rem;
            }

            .gratis-cta-main__content {
                flex-direction: column;
                text-align: center;
            }

            .gratis-cta-main__text h3 {
                font-size: 1.25rem;
            }

            .gratis-cta-main__btn {
                width: 100%;
            }
        }

        /* Caja informativa */
        .gratis-info-box {
            display: flex;
            align-items: flex-start;
            gap: 1.25rem;
            background: var(--color-white);
            padding: 1.5rem;
            border-radius: 12px;
            margin-top: var(--spacing-xl);
            box-shadow: var(--shadow-sm);
            border-left: 4px solid var(--color-yellow);
        }

        .gratis-info-box__icon {
            width: 48px;
            height: 48px;
            background: var(--color-yellow);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .gratis-info-box__icon svg {
            width: 24px;
            height: 24px;
            stroke: var(--color-black);
            stroke-width: 2;
            fill: none;
        }

        .gratis-info-box__content h4 {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
        }

        .gratis-info-box__content p {
            font-size: 0.95rem;
            color: var(--color-text-light);
            margin-bottom: 0.75rem;
        }

        .gratis-info-box__link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-red);
            font-weight: 600;
            font-size: 0.95rem;
            transition: color var(--transition-fast);
        }

        .gratis-info-box__link:hover {
            color: var(--color-red-dark);
        }

        /* ============================================
           TRAVESÍA HERO - Sección Impactante (Video + Texto)
        ============================================ */
        .travesia-hero {
            position: relative;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d1f1f 100%);
            color: var(--color-white);
            padding: var(--spacing-xl) 0;
            overflow: hidden;
        }

        .travesia-hero__bg {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--fondo-diferido, none) center center/cover;
            opacity: 0.1;
        }

        .travesia-hero__layout {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        /* Video Column */
        .travesia-hero__video-col {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(255, 193, 7, 0.15);
            border: 2px solid rgba(255, 193, 7, 0.25);
            aspect-ratio: 16/9;
        }

        .travesia-hero__video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .travesia-hero__video-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            padding: 1.5rem;
            background: linear-gradient(transparent, rgba(0,0,0,0.85));
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .travesia-hero__video-overlay span {
            font-family: var(--font-heading);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-yellow);
        }

        .travesia-hero__play-hint {
            width: 32px;
            height: 32px;
            background: rgba(255,193,7,0.2);
            border: 2px solid var(--color-yellow);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .travesia-hero__play-hint:hover {
            background: var(--color-yellow);
        }

        .travesia-hero__play-hint svg {
            width: 14px;
            height: 14px;
            fill: var(--color-yellow);
        }

        .travesia-hero__play-hint:hover svg {
            fill: #000;
        }

        /* Text Column */
        .travesia-hero__content {
            position: relative;
            z-index: 1;
            text-align: left;
        }

        .travesia-hero__badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.5rem 1.2rem;
            font-weight: 700;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: var(--spacing-md);
            font-family: var(--font-heading);
            clip-path: var(--btn-path-4);
        }

        .travesia-hero__badge-icon {
            font-size: 0.9rem;
        }

        .travesia-hero__title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 4vw, 3.5rem);
            line-height: 1;
            text-transform: uppercase;
            margin-bottom: var(--spacing-md);
        }

        .travesia-hero__title-highlight {
            color: var(--color-yellow);
            display: block;
        }

        .travesia-hero__subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: var(--spacing-md);
            line-height: 1.6;
        }

        .travesia-hero__quote {
            background: rgba(0,0,0,0.4);
            padding: 1.5rem;
            margin-bottom: var(--spacing-md);
            border-left: 4px solid var(--color-yellow);
            clip-path: var(--btn-path-2);
        }

        .travesia-hero__quote svg {
            width: 28px;
            height: 28px;
            fill: var(--color-yellow);
            margin-bottom: 0.5rem;
        }

        .travesia-hero__quote p {
            font-size: 1rem;
            font-style: italic;
            margin-bottom: 0.4rem;
            line-height: 1.5;
        }

        .travesia-hero__quote span {
            font-size: 0.85rem;
            opacity: 0.7;
        }

        .travesia-hero__stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: var(--spacing-md);
            padding: 1.25rem;
            background: rgba(0,0,0,0.5);
            border-top: 2px solid var(--color-yellow);
            border-bottom: 2px solid var(--color-yellow);
        }

        .travesia-hero__stat {
            text-align: center;
        }

        .travesia-hero__stat-number {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            color: var(--color-yellow);
            display: block;
            line-height: 1;
        }

        .travesia-hero__stat-label {
            font-size: 0.75rem;
            opacity: 0.8;
            line-height: 1.3;
        }

        .travesia-hero__reasons {
            margin-bottom: var(--spacing-md);
        }

        .travesia-hero__reasons h3 {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            text-transform: uppercase;
            margin-bottom: var(--spacing-sm);
            color: var(--color-yellow);
            letter-spacing: 1px;
        }

        .travesia-hero__reasons-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
            text-align: left;
        }

        .travesia-hero__reason {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            background: rgba(255,255,255,0.08);
            padding: 1rem;
            border-left: 3px solid rgba(255,255,255,0.2);
            clip-path: var(--btn-path-2);
            transition: all var(--transition-panaca);
        }

        .travesia-hero__reason:hover {
            background: rgba(255,255,255,0.12);
            border-left-color: var(--color-yellow);
        }

        .travesia-hero__reason-icon {
            font-size: 1.3rem;
            flex-shrink: 0;
        }

        .travesia-hero__reason h4 {
            font-weight: 700;
            font-size: 0.85rem;
            margin-bottom: 0.2rem;
        }

        .travesia-hero__reason p {
            font-size: 0.8rem;
            opacity: 0.8;
        }

        .travesia-hero__cta {
            text-align: left;
        }

        .travesia-hero__btn {
            background: var(--color-red);
            color: var(--color-white);
            padding: 1.15rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: none;
            cursor: pointer;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-1);
        }

        .travesia-hero__btn:hover {
            background: var(--color-red-dark);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 10px 30px rgba(226, 27, 27, 0.4);
        }

        .travesia-hero__cta-note {
            margin-top: var(--spacing-sm);
            font-size: 0.85rem;
            opacity: 0.9;
        }

        .travesia-hero__cta-note strong {
            color: var(--color-yellow);
        }

        /* Responsive: stack on mobile */
        @media (max-width: 900px) {
            .travesia-hero__layout {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            .travesia-hero__content {
                text-align: center;
            }
            .travesia-hero__cta {
                text-align: center;
            }
            .travesia-hero__stats {
                grid-template-columns: repeat(2, 1fr);
            }
            .travesia-hero__reasons-grid {
                grid-template-columns: 1fr;
            }
        }
        /* ============================================
           LOCATION SECTION - Google Maps
        ============================================ */
        .location-section {
            background: var(--color-blue-dark);
            color: var(--color-white);
            padding: var(--spacing-xl) 0;
        }

        .location-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                'header map'
                'body map';
            gap: var(--spacing-xl);
            align-items: stretch;
        }
        .location-info--header { grid-area: header; }
        .location-info--body { grid-area: body; }
        .location-map { grid-area: map; }

        .location-badge {
            display: inline-block;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.6rem 1.6rem;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: var(--font-heading);
            text-transform: uppercase;
            margin-bottom: var(--spacing-md);
            clip-path: var(--btn-path-4);
        }

        .location-title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 5vw, 3rem);
            line-height: 1.1;
            margin-bottom: var(--spacing-md);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .location-title span {
            color: var(--color-yellow);
        }

        .location-description {
            font-size: 1.1rem;
            line-height: 1.7;
            opacity: 0.9;
            margin-bottom: var(--spacing-lg);
        }

        .location-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: var(--spacing-lg);
        }

        .location-detail {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            background: rgba(255,255,255,0.08);
            padding: 1.25rem;
            border-left: 3px solid rgba(255,255,255,0.2);
            clip-path: var(--btn-path-2);
            transition: all var(--transition-panaca);
        }

        .location-detail:hover {
            background: rgba(255,255,255,0.12);
            border-left-color: var(--color-yellow);
        }

        .location-detail__icon {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .location-detail__text h4 {
            font-weight: 700;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
        }

        .location-detail__text p {
            font-size: 0.85rem;
            opacity: 0.85;
        }

        .location-detail__text a {
            color: var(--color-yellow);
            font-weight: 600;
        }

        .location-detail__text a:hover {
            text-decoration: underline;
        }

        .location-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--color-red);
            color: var(--color-white);
            padding: 1.1rem 2.2rem;
            font-weight: 700;
            font-size: 1rem;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-1);
        }

        .location-cta svg {
            width: 24px;
            height: 24px;
        }

        .location-cta:hover {
            background: var(--color-red-dark);
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 10px 30px rgba(206, 17, 38, 0.3);
        }

        .location-map {
            overflow: hidden;
            box-shadow: var(--shadow-panaca);
            min-height: 450px;
            clip-path: var(--btn-path-1);
        }

        .location-map iframe {
            width: 100%;
            height: 100%;
            min-height: 450px;
        }

        /* ============================================
           SEO LOCAL STRIP
        ============================================ */
        .seo-local-strip {
            background: linear-gradient(135deg, var(--color-green-dark) 0%, #2E7D32 100%);
            color: var(--color-white);
            padding: 1.8rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .seo-local-strip::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }

        .seo-local-strip__inner {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .seo-local-strip__icon {
            font-size: 2rem;
            flex-shrink: 0;
            animation: seo-pin-bounce 2s ease-in-out infinite;
        }

        @keyframes seo-pin-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        .seo-local-strip__text {
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 700px;
        }

        .seo-local-strip__text strong {
            color: var(--color-yellow);
            font-weight: 700;
        }

        .seo-local-strip__badges {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 0.5rem;
        }

        .seo-local-strip__badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            background: rgba(255,255,255,0.15);
            padding: 0.4rem 0.9rem;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 20px;
            backdrop-filter: blur(4px);
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .seo-local-strip__inner {
                flex-direction: column;
                gap: 0.75rem;
                padding: 0 1rem;
            }
            .seo-local-strip__text {
                font-size: 1rem;
            }
        }

        /* ============================================
           HORARIOS SECTION
        ============================================ */
        .horarios-section {
            padding: var(--spacing-xl) 0;
        }

        .horarios-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-xl);
            align-items: stretch;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .horario-card {
            background: var(--color-white);
            border-radius: 0px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: all var(--transition-normal);
            display: flex;
            flex-direction: column;
        }

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

        .horario-card--featured {
            border: 3px solid var(--color-red);
            transform: scale(1.02);
        }

        .horario-card--featured:hover {
            transform: scale(1.02) translateY(-5px);
        }

        .horario-card__header {
            padding: 1.25rem;
            text-align: center;
            color: var(--color-white);
            position: relative;
        }

        .horario-card__header--green {
            background: linear-gradient(135deg, #629B3D 0%, #629B3D 100%);
        }

        .horario-card__header--purple {
            background: linear-gradient(135deg, #006994 0%, #1691B7 100%);
        }

        .horario-card__header--red {
            background: linear-gradient(135deg, #c62828 0%, #e53935 100%);
        }

        .horario-card__header--yellow {
            background: linear-gradient(135deg, #EB7200 0%, #E65301 100%);
        }

        .horario-card__icon {
            font-size: 2rem;
            display: block;
            margin-bottom: 0.5rem;
        }

        .horario-card__header h3 {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

        .horario-card__badge {
            display: inline-block;
            background: var(--color-white);
            color: var(--color-text);
            padding: 0.25rem 0.75rem;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 20px;
        }

        .horario-card__badge--discount {
            background: var(--color-yellow);
            color: var(--color-black);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .horario-card__body {
            padding: 1.5rem;
            flex: 1;
        }

        /* Wrapper para footer y botones - siempre al fondo */
        .horario-card__bottom {
            margin-top: auto;
        }

        .horario-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid #eee;
        }

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

        .horario-item__days {
            font-weight: 600;
            color: var(--color-text);
            white-space: nowrap;
            margin-right: 1rem;
        }

        .horario-item__time {
            font-weight: 700;
            color: var(--color-red);
            white-space: nowrap;
        }

        .horario-item--closed .horario-item__days,
        .horario-item--closed .horario-item__time {
            color: #999;
        }

        .horario-card__footer {
            padding: 1rem 1.5rem;
            background: #f8f9fa;
            text-align: center;
        }

        .horario-card__footer p {
            font-size: 0.85rem;
            color: var(--color-text-light);
            margin: 0;
        }

        .horario-card__footer--highlight {
            background: #F5DEB3;
        }

        .horario-card__footer--highlight p {
            color: #D38F01;
        }

        .horario-card__footer--kids {
            background: #B9CBA5;
            border-bottom: 1px solid #c8e6c9;
        }

        .horario-card__footer--kids p {
            color: #629B3D;
        }

        .horario-card__cta {
            display: block;
            width: 100%;
            background: var(--color-red);
            color: var(--color-white);
            padding: 1rem;
            font-weight: 700;
            font-size: 1rem;
            text-align: center;
            border: none;
            cursor: pointer;
            transition: all var(--transition-normal);
        }

        .horario-card__cta:hover {
            background: var(--color-red-dark);
        }

        /* Botón Descubrir en tarjetas de horarios */
        .horario-card__discover {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.875rem 1rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-red);
            background: transparent;
            border-top: 1px solid #eee;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .horario-card__discover:hover {
            background: #FAF0E6;
            color: var(--color-red-dark);
        }

        .horario-card__discover svg {
            width: 16px;
            height: 16px;
            transition: transform 0.3s ease;
        }

        .horario-card__discover:hover svg {
            transform: translateX(4px);
        }

        /* Actions row para Espectáculo Travesía */
        .horario-card__actions {
            display: flex;
            gap: 0;
        }

        .horario-card__actions .horario-card__cta {
            flex: 1;
            border-radius: 0;
        }

        .horario-card__discover--inline {
            flex: 0 0 auto;
            width: auto;
            padding: 1rem 1.25rem;
            background: #fff;
            border: none;
            border-left: 1px solid rgba(0,0,0,0.1);
        }

        .horario-card__discover--inline:hover {
            background: #f5f5f5;
        }

        .horarios-notice {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            padding: 1.5rem;
            border-radius: 12px;
            border-left: 4px solid #2F5289;
        }

        .horarios-notice__icon {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .horarios-notice__content h4 {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            color: #1B325E;
            margin-bottom: 0.5rem;
        }

        .horarios-notice__content p {
            font-size: 0.95rem;
            color: #1B325E;
            line-height: 1.6;
        }

        /* ============================================
           CALENDARIO INTERACTIVO PANACA 2026
        ============================================ */
        .horarios-temporadas {
            margin-top: var(--spacing-xl);
        }

        .horarios-temporadas__intro {
            text-align: center;
            max-width: 720px;
            margin: 0 auto 2rem;
        }

        .horarios-temporadas__intro h3 {
            font-family: var(--font-heading);
            font-size: 1.6rem;
            color: var(--color-text);
            margin-bottom: 0.75rem;
        }

        .horarios-temporadas__intro h3 span {
            color: var(--color-red);
        }

        .horarios-temporadas__intro p {
            font-size: 1rem;
            color: var(--color-text-light);
            line-height: 1.6;
        }

        /* Calendar wrapper */
        .panaca-cal {
            max-width: 520px;
            margin: 0 auto 2rem;
            background: var(--color-white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }

        .panaca-cal__nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, #3E2723 0%, #5D4037 100%);
            color: #fff;
        }

        .panaca-cal__nav-btn {
            background: rgba(255,255,255,0.15);
            border: none;
            color: #fff;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .panaca-cal__nav-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .panaca-cal__nav-title {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .panaca-cal__weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            background: #f5f0ea;
            padding: 0.5rem 0.75rem;
            gap: 2px;
        }

        .panaca-cal__weekday {
            text-align: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: #8D6E63;
            text-transform: uppercase;
            padding: 0.35rem 0;
        }

        .panaca-cal__days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
            padding: 0.5rem 0.75rem 0.75rem;
        }

        .panaca-cal__day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 8px;
            position: relative;
            cursor: default;
            transition: all 0.15s ease;
            color: var(--color-text);
        }

        .panaca-cal__day--empty {
            visibility: hidden;
        }

        .panaca-cal__day--today {
            box-shadow: inset 0 0 0 2px var(--color-red);
        }

        /* Día abierto CON Travesía: dorado + caballo PANACA */
        .panaca-cal__day--travesia,
        .panaca-cal__day--alta,
        .panaca-cal__day--puntual {
            background: linear-gradient(135deg, #C68A00, #E9A800);
            color: #fff;
            border-radius: 8px;
            font-weight: 700;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }

        .panaca-cal__day--travesia::after,
        .panaca-cal__day--alta::after,
        .panaca-cal__day--puntual::after {
            content: '';
            position: absolute;
            bottom: 0px;
            right: 0px;
            width: 22px;
            height: 22px;
            background: #000;
            -webkit-mask-image: url(../assets/iconos/icono-7b55a281c4.png);
            mask-image: url(../assets/iconos/icono-7b55a281c4.png);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            pointer-events: none;
        }

        .panaca-cal__day--travesia:hover,
        .panaca-cal__day--alta:hover,
        .panaca-cal__day--puntual:hover {
            transform: scale(1.12);
            box-shadow: 0 3px 10px rgba(198,138,0,0.4);
        }


        /* Layout for travesia day: number + label */
        .panaca-cal__day-num {
            display: block;
            font-size: inherit;
            line-height: 1;
            position: relative;
            z-index: 1;
        }

        .panaca-cal__day-label {
            display: block;
            font-size: 0.45rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            line-height: 1;
            opacity: 0.95;
            position: relative;
            z-index: 1;
            margin-top: 1px;
        }

        .panaca-cal__day--travesia,
        .panaca-cal__day--alta,
        .panaca-cal__day--puntual {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
        }

        /* Día abierto SIN Travesía: verde */
        .panaca-cal__day--open,
        .panaca-cal__day--regular {
            background: linear-gradient(135deg, #388E3C, #43A047);
            color: #fff;
            border-radius: 8px;
        }

        .panaca-cal__day--open:hover,
        .panaca-cal__day--regular:hover {
            background: linear-gradient(135deg, #2E7D32, #388E3C);
            transform: scale(1.05);
        }
        /* Día cerrado (miércoles o fuera de operación) */
        .panaca-cal__day--closed {
            color: #ccc;
            font-weight: 400;
            background: #f5f5f5;
        }

        /* Tooltip for days */
        .panaca-cal__day[data-tip]:hover::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: #fff;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 5px;
            white-space: nowrap;
            z-index: 10;
            pointer-events: none;
        }

        .panaca-cal__day[data-tip]:hover::before {
            content: '';
            position: absolute;
            bottom: calc(100% + 2px);
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: #333;
            z-index: 10;
            pointer-events: none;
        }

        /* Summary bar under calendar */
        .panaca-cal__summary {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem;
            background: #fafafa;
            border-top: 1px solid #eee;
            flex-wrap: wrap;
        }

        .panaca-cal__summary-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.7rem;
            font-weight: 600;
            color: #666;
        }

        .panaca-cal__summary-dot {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        .panaca-cal__summary-dot--travesia { background: linear-gradient(135deg, #C68A00, #E9A800); }
        .panaca-cal__summary-dot--alta { background: linear-gradient(135deg, #C68A00, #E9A800); }
        .panaca-cal__summary-dot--puntual { background: linear-gradient(135deg, #C68A00, #E9A800); }
        .panaca-cal__summary-dot--open { background: linear-gradient(135deg, #388E3C, #43A047); }
        .panaca-cal__summary-dot--regular { background: linear-gradient(135deg, #388E3C, #43A047); }
        .panaca-cal__summary-dot--closed { background: #eee; }

        /* Month info panel */
        .panaca-cal__info {
            padding: 1rem 1.25rem;
            background: #FFF8E1;
            border-top: 1px solid #FFE082;
        }

        .panaca-cal__info p {
            font-size: 0.85rem;
            color: #5D4037;
            line-height: 1.5;
            margin: 0;
            text-align: center;
        }

        .panaca-cal__info strong {
            color: #E65301;
        }

        /* Quick-jump month pills */
        .panaca-cal__months {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            justify-content: center;
            margin-bottom: 1.25rem;
        }

        .panaca-cal__month-pill {
            padding: 0.35rem 0.7rem;
            border: 1.5px solid #ddd;
            background: #fff;
            border-radius: 20px;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #666;
        }

        .panaca-cal__month-pill:hover {
            border-color: var(--color-red);
            color: var(--color-red);
        }

        .panaca-cal__month-pill.is-active {
            background: var(--color-red);
            border-color: var(--color-red);
            color: #fff;
        }

        .panaca-cal__month-pill--has-alta {
            border-color: #C68A00;
            color: #C68A00;
        }

        .panaca-cal__month-pill--has-alta.is-active {
            background: #C68A00;
            border-color: #C68A00;
            color: #fff;
        }

        /* Bottom CTA */
        .panaca-cal__cta-row {
            text-align: center;
            margin-top: 1.5rem;
        }

        .panaca-cal__cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: var(--color-red);
            color: #fff;
            padding: 1rem 2.25rem;
            font-weight: 700;
            font-size: 1rem;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border: none;
            border-radius: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            position: relative;
        }

        .panaca-cal__cta-btn:hover {
            background: var(--color-red-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(198,40,40,0.3);
        }

        .panaca-cal__cta-btn svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        /* Legend final */
        .horarios-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.25rem;
            margin-top: 1.5rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .horarios-legend__item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem;
            color: var(--color-text);
        }

        .horarios-legend__dot {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        .horarios-legend__dot--alta { background: linear-gradient(135deg, #C68A00, #E9A800); }
        .horarios-legend__dot--puntual { background: linear-gradient(135deg, #C68A00, #E9A800); }
        .horarios-legend__dot--regular { background: linear-gradient(135deg, #388E3C, #43A047); }

        /* Responsive calendar */
        @media (max-width: 768px) {
            .panaca-cal {
                max-width: 100%;
                border-radius: 12px;
            }

            .panaca-cal__day {
                font-size: 0.75rem;
                border-radius: 6px;
            }

            .panaca-cal__nav-title {
                font-size: 1rem;
            }

            .horarios-temporadas__intro h3 {
                font-size: 1.3rem;
            }

            .panaca-cal__month-pill {
                font-size: 0.65rem;
                padding: 0.3rem 0.55rem;
            }

            .panaca-cal__day[data-tip]:hover::after {
                display: none;
            }
        }

        @media (max-width: 400px) {
            .panaca-cal__days {
                gap: 2px;
                padding: 0.35rem 0.5rem 0.5rem;
            }

            .panaca-cal__day {
                font-size: 0.7rem;
                border-radius: 5px;
            }

            .panaca-cal__summary {
                gap: 0.4rem;
            }

            .panaca-cal__summary-item {
                font-size: 0.6rem;
            }
        }

        /* ============================================
           RESTAURANTE SECTION - ESTILO PANACA
        ============================================ */
        .restaurante-section {
            background: var(--color-blue-dark);
            color: var(--color-white);
            padding: var(--spacing-xl) 0;
        }

        .restaurante-section .section-title span {
            color: var(--color-yellow);
        }

        .restaurante-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-xl);
            align-items: start;
        }

        .restaurante-highlight {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: rgba(255,255,255,0.08);
            padding: 1.75rem;
            margin-bottom: var(--spacing-lg);
            border-left: 4px solid var(--color-yellow);
            clip-path: var(--btn-path-2);
        }

        .restaurante-highlight__icon {
            font-size: 3rem;
        }

        .restaurante-highlight__text h3 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .restaurante-highlight__text p {
            opacity: 0.85;
            font-size: 0.95rem;
        }

        .restaurante-menu {
            margin-bottom: var(--spacing-lg);
        }

        .restaurante-menu h4 {
            font-family: var(--font-heading);
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: var(--color-yellow);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .restaurante-menu__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
        }

        .menu-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(255,255,255,0.08);
            padding: 1rem;
            transition: all var(--transition-panaca);
            clip-path: var(--btn-path-2);
            border-left: 2px solid transparent;
        }

        .menu-item:hover {
            background: rgba(255,255,255,0.15);
            transform: translateX(5px);
            border-left-color: var(--color-yellow);
        }

        .menu-item__icon {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .menu-item__info h5 {
            font-weight: 700;
            font-size: 0.9rem;
            margin-bottom: 0.15rem;
        }

        .menu-item__info p {
            font-size: 0.75rem;
            opacity: 0.75;
        }

        .restaurante-bar {
            background: rgba(245, 177, 34, 0.15);
            padding: 1.5rem;
            border-left: 5px solid var(--color-yellow);
            clip-path: var(--btn-path-2);
        }

        .restaurante-bar__header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .restaurante-bar__icon {
            font-size: 1.5rem;
        }

        .restaurante-bar__header h4 {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            color: var(--color-yellow);
            text-transform: uppercase;
        }

        .restaurante-bar p {
            font-size: 0.9rem;
            opacity: 0.9;
            margin-bottom: 0.75rem;
        }

        .restaurante-bar__items {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .restaurante-bar__items span {
            font-size: 0.8rem;
            background: rgba(255,255,255,0.15);
            padding: 0.4rem 0.9rem;
            clip-path: var(--btn-path-4);
        }

        .restaurante-gallery {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .restaurante-gallery__main {
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-panaca);
            clip-path: var(--btn-path-1);
        }

        .restaurante-gallery__main img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

        .restaurante-gallery__badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.5rem 1.2rem;
            font-size: 0.8rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            clip-path: var(--btn-path-1);
        }

        .restaurante-gallery__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .restaurante-gallery__grid img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            clip-path: var(--btn-path-2);
        }

        .restaurante-notice {
            margin-top: var(--spacing-lg);
            background: rgba(255,255,255,0.08);
            padding: 1.25rem 1.75rem;
            text-align: center;
            border: 2px solid var(--color-yellow);
            clip-path: var(--btn-path-2);
        }

        .restaurante-notice p {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* ============================================
           MAPA DEL PARQUE SECTION - ESTILO PANACA
        ============================================ */
        .mapa-section {
            background: var(--color-cream);
            padding: var(--spacing-xl) 0;
        }

        .mapa-content {
            display: grid;
            /* En esta versión el mapa debe ocupar TODO el ancho del banner */
            grid-template-columns: 1fr;
            gap: calc(var(--spacing-lg) + 8px);
            align-items: start;
        }

        /* Si en el futuro vuelves a activar la columna izquierda (lugares destacados),
           agrega la clase .mapa-content--2col al contenedor. */
        .mapa-content.mapa-content--2col {
            grid-template-columns: minmax(320px, 400px) 1fr;
        }

        /* Mobile: mapa arriba, lugares debajo */
        @media (max-width: 768px) {
            .mapa-content.mapa-content--2col {
                grid-template-columns: 1fr;
            }
            .mapa-content.mapa-content--2col .mapa-visual {
                grid-row: 1;
            }
            .mapa-content.mapa-content--2col .mapa-info {
                grid-row: 2;
            }
        }

        .mapa-info h3 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--color-red);
            margin-bottom: var(--spacing-md);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .mapa-lugares {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .mapa-lugar {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--color-white);
            padding: 1.1rem;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-panaca);
            cursor: pointer;
            clip-path: var(--btn-path-2);
            border-left: 3px solid transparent;
        }

        .mapa-lugar:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow-md);
            border-left-color: var(--color-yellow);
        }

        .mapa-lugar__number {
            width: 32px;
            height: 32px;
            background: var(--color-red);
            color: var(--color-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            flex-shrink: 0;
            clip-path: var(--btn-path-4);
        }

        .mapa-lugar__number--green {
            background: var(--color-green-dark);
        }

        .mapa-lugar__number--purple {
            background: #006994;
        }

        .mapa-lugar__number--yellow {
            background: var(--color-yellow);
            color: var(--color-black);
        }

        .mapa-lugar__number--blue {
            background: var(--color-blue-dark);
        }

        .mapa-lugar__info h4 {
            font-weight: 700;
            font-size: 0.95rem;
            margin-bottom: 0.15rem;
        }

        .mapa-lugar__info p {
            font-size: 0.8rem;
            color: var(--color-text-light);
        }

        .mapa-lugar__badge {
            margin-left: auto;
            font-size: 0.7rem;
            padding: 0.3rem 0.6rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            clip-path: var(--btn-path-4);
        }

        .mapa-lugar__badge--gratis {
            background: var(--color-green-dark);
            color: var(--color-white);
        }

        .mapa-lugar__badge--presentacion {
            background: var(--color-red);
            color: var(--color-white);
        }

        .mapa-visual {
            position: relative;
        }

        .mapa-visual{ align-self: start; }

        .mapa-visual__image {
            width: 100%;
            border-radius: 18px;
            box-shadow: var(--shadow-lg);
            background: var(--color-white);
            padding: 1.05rem;
        }

        .mapa-visual__image img {
            width: 100%;
            border-radius: 12px;
            /* Mucho más grande: ocupa la mayor parte del banner */
            height: clamp(360px, 55vw, 680px);
            max-height: 72vh;
            object-fit: contain;
            display: block;
        }

        .mapa-recorrido {
            margin-top: var(--spacing-lg);
            background: var(--color-white);
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
        }

        .mapa-recorrido h4 {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            color: var(--color-red);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .mapa-recorrido__steps {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem 1rem;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .mapa-recorrido__step {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.85rem;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.04);
            color: var(--color-text);
            font-size: 0.85rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .mapa-recorrido__icon {
            font-size: 1.15rem;
            line-height: 1;
        }

        /* Flecha automática entre pasos */
        .mapa-recorrido__step:not(:last-child)::after {
            content: "→";
            margin-left: 0.85rem;
            color: var(--color-text-muted);
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .mapa-recorrido__steps {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.6rem;
            }

            .mapa-recorrido__step {
                width: 100%;
                justify-content: flex-start;
                white-space: normal;
            }

            .mapa-recorrido__step:not(:last-child)::after {
                content: "";
                margin: 0;
            }
        }
.mapa-download {
            margin-top: var(--spacing-md);
            text-align: center;
        }

        .mapa-download__btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-red);
            color: var(--color-white);
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.9rem;
            transition: all var(--transition-normal);
            border: none;
            cursor: pointer;
        }

        .mapa-download__btn:hover {
            background: var(--color-red-dark);
            transform: translateY(-2px);
        }

        

/* ============================================
   PET FRIENDLY SECTION - ESTILO PANACA
============================================ */
.petfriendly-section{
  position:relative;
  overflow:hidden;
}
.petfriendly-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 360px at 10% 10%, rgba(255,193,7,.10), transparent 55%),
    radial-gradient(900px 360px at 90% 30%, rgba(244,67,54,.10), transparent 55%),
    radial-gradient(900px 360px at 50% 95%, rgba(76,175,80,.10), transparent 55%);
  pointer-events:none;
}
.petfriendly-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.25rem;
  align-items:stretch;
}
.petfriendly-card{
  background:#fff;
  border:2px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 1.25rem;
  position:relative;
}
.petfriendly-card::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px dashed rgba(0,0,0,.08);
  border-radius: 12px;
  pointer-events:none;
}
.petfriendly-card--info{
  clip-path: var(--card-path-1, polygon(0% 3%, 98% 0%, 100% 95%, 2% 100%));
}
.petfriendly-card--visual{
  clip-path: var(--card-path-2, polygon(2% 0%, 100% 4%, 98% 100%, 0% 96%));
  /* Foto (la pondrás en la misma carpeta del .html) + velo suave estilo PANACA */
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.06)),
    var(--fondo-diferido, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.petfriendly-title{
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .6px;
  color:#3E2723;
  font-size: 1.05rem;
  margin: 0 0 1rem;
}
.petfriendly-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.75rem;
}
.petfriendly-list li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  background: rgba(250,250,250,.9);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: .75rem .85rem;
}
.petfriendly-ico{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(244,67,54,.12);
  flex: 0 0 34px;
}
.petfriendly-note{
  margin-top: 1rem;
  background: rgba(255,193,7,.12);
  border: 1px solid rgba(255,193,7,.25);
  padding: .9rem 1rem;
  position:relative;
  clip-path: var(--card-path-3, polygon(1% 6%, 100% 0%, 98% 100%, 0% 96%));
}
.petfriendly-note__badge{
  display:inline-block;
  font-family: var(--font-heading);
  font-size: .75rem;
  letter-spacing:.6px;
  text-transform: uppercase;
  background: var(--color-red);
  color:#fff;
  padding: .35rem .9rem;
  clip-path: var(--btn-path-4);
  margin-bottom: .5rem;
  font-weight:700;
}
.petfriendly-note__text{
  margin:0;
  color:#4E342E;
  line-height:1.55;
  font-size:.92rem;
}
.petfriendly-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top: 1.1rem;
}
.btn--ghost{
  background: transparent;
  border: 2px solid rgba(0,0,0,.14);
  color:#3E2723;
}
.btn--ghost:hover{
  transform: translateY(-2px);
}
.petfriendly-visual{
  height:100%;
  min-height: 280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 1.25rem;
  position:relative;
}
.petfriendly-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.10) 35%, rgba(0,0,0,.28) 100%);
  pointer-events:none;
}
.petfriendly-visual > *{
  position:relative;
  z-index:1;
}
.petfriendly-visual__tag{
  display:inline-flex;
  align-self:flex-start;
  gap:.4rem;
  align-items:center;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing:.8px;
  font-size:.78rem;
  padding:.35rem .75rem;
  background:#fff;
  border:2px solid rgba(0,0,0,.10);
  border-radius: 999px;
}
.petfriendly-visual__headline{
  font-family: var(--font-heading);
  color:#B71C1C;
  font-size: 1.55rem;
  line-height:1.15;
  margin: .9rem 0 .6rem;
  text-transform: uppercase;
}
.petfriendly-visual__sub{
  color:#4E342E;
  line-height:1.55;
  font-size: .95rem;
  max-width: 34ch;
}
.petfriendly-visual__paws{
  position:absolute;
  right: 12px;
  bottom: 10px;
  display:flex;
  gap:.35rem;
  opacity:.55;
  font-size: 1.1rem;
}
@media (max-width: 900px){
  .petfriendly-grid{ grid-template-columns: 1fr; }
  .petfriendly-visual{ min-height: 240px; }
}

@media (max-width: 768px){
  /* En mobile baja el tag + titular para que no tapen la foto */
  .petfriendly-visual{
    justify-content:flex-end;
    padding-top: 3rem;
    padding-bottom: 2.1rem;
  }
}

.mapa-download__btn svg {
            width: 20px;
            height: 20px;
        }

        
/* ============================================
   FLATPICKR - ESTILOS PANACA
============================================ */
.flatpickr-calendar {
    font-family: var(--font-body);
    border-radius: 0;
    box-shadow: var(--shadow-panaca);
    border: 2px solid var(--color-red);
}

.flatpickr-months {
    background: var(--color-red);
    padding: 0.5rem 0;
}

.flatpickr-months .flatpickr-month {
    color: var(--color-white);
    fill: var(--color-white);
}

.flatpickr-current-month {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--color-white);
    color: var(--color-white);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--color-yellow);
    color: var(--color-yellow);
}

.flatpickr-weekdays {
    background: var(--color-cream);
}

.flatpickr-weekday {
    color: var(--color-red);
    font-weight: 700;
    font-family: var(--font-heading);
}

.flatpickr-day {
    border-radius: 0;
    font-weight: 500;
    transition: all 0.2s ease;
}

.flatpickr-day:hover {
    background: var(--color-cream);
    border-color: var(--color-red);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);
}

.flatpickr-day.today {
    border-color: var(--color-yellow);
    background: rgba(245, 177, 34, 0.2);
}

.flatpickr-day.today:hover {
    background: var(--color-yellow);
    color: var(--color-black);
}

/* FECHAS BLOQUEADAS */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    background: #f5f5f5 !important;
    color: #ccc !important;
    text-decoration: line-through;
    cursor: not-allowed;
    border-color: transparent;
}

/* Indicador visual de fecha cerrada */
.flatpickr-day.flatpickr-disabled::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #e74c3c;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0.5;
}

/* Botón Clear/Today */
.flatpickr-clear,
.flatpickr-today-button {
    font-family: var(--font-heading);
    color: var(--color-red);
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem;
}

.flatpickr-clear:hover,
.flatpickr-today-button:hover {
    color: var(--color-red-dark);
}

/* Input con flatpickr */
.modal__date-input.flatpickr-input {
    cursor: pointer;
}

.modal__date-input.flatpickr-input:read-only {
    background: var(--color-white);
}

/* Trust Bar - Sitio Oficial (mobile only) */
.trust-bar {
  display: none;
  background: #f0f7f5;
  border-bottom: 1px solid rgba(0,88,68,0.1);
  padding: 0.45rem 0;
  text-align: center;
  font-size: 0.78rem;
  color: #005844;
  position: relative;
  z-index: 90;
}
@media (max-width: 768px) {
  .trust-bar { display: block; }
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  white-space: nowrap;
}
.trust-bar__sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(0,88,68,0.3);
  flex-shrink: 0;
}
.trust-bar__methods {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  opacity: 0.75;
}
@media (max-width: 600px) {
  .trust-bar { font-size: 0.72rem; padding: 0.4rem 0; }
  .trust-bar__inner { gap: 0.6rem; }
  .trust-bar__methods { display: none; }
}

/* OVERRIDE: horarios cards stack on mobile */
@media (max-width: 768px) {
  .horarios-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .location-details { grid-template-columns: 1fr !important; }
  .location-content {
    grid-template-columns: 1fr !important;
    grid-template-areas: 'header' 'map' 'body' !important;
  }
  .location-info--header { grid-area: header; }
  .location-map { grid-area: map; min-height: 300px; }
  .location-info--body { grid-area: body; }
  .faq-item__answer { max-height: 0 !important; overflow: hidden !important; padding: 0 !important; }
  .faq-item.active .faq-item__answer { max-height: 500px !important; padding: 0 !important; }
  .grupos-cards { grid-template-columns: 1fr !important; }
  .hero__content { padding-bottom: 100px !important; }
}

/* Cumpleaños card accent */
.pasaporte-card--cumple {
  border-color: #E9A800 !important;
}

/* ============================================
   CUMPLE-BANNER: Horizontal promotional banner
   ============================================ */
.cumple-banner {
  background: #F0E6C8;
  padding: 3rem 0;
}
.cumple-banner .container {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.cumple-banner__visual {
  position: relative;
  flex: 0 0 38%;
  max-width: 38%;
}
.cumple-banner__img-wrap {
  position: relative;
  background: #fff;
  padding: 10px;
  clip-path: polygon(0% 3%, 97% 0%, 100% 94%, 3% 100%);
  box-shadow: 4px 6px 20px rgba(0,0,0,0.18);
}
.cumple-banner__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  clip-path: polygon(0% 3%, 97% 0%, 100% 94%, 3% 100%);
}
.cumple-banner__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: 0;
  clip-path: var(--btn-path-3);
  z-index: 2;
}
.cumple-banner__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cumple-banner__tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.55rem 1.4rem;
  border-radius: 0;
  clip-path: var(--btn-path-4);
  align-self: flex-start;
}
.cumple-banner__title {
  font-family: var(--font-heading, 'Poleno', serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #3B2A14;
  line-height: 1.1;
  margin: 0;
}
.cumple-banner__title span {
  color: var(--color-red, #C8102E);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cumple-banner__desc {
  color: #3B2A14;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}
.cumple-banner__includes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem 1.5rem;
  margin-top: 0.25rem;
}
.cumple-banner__item {
  color: #2D5A1B;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cumple-banner__item::before {
  content: '✅';
  font-size: 0.85rem;
  flex-shrink: 0;
}
.cumple-banner__price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-left: 4px solid #E9A800;
  padding-left: 1rem;
  margin-top: 0.25rem;
}
.cumple-banner__price-label {
  color: #666;
  font-size: 0.9rem;
}
.cumple-banner__price-old {
  font-size: 1rem;
  color: #999;
  text-decoration: line-through;
}
.cumple-banner__price {
  font-family: var(--font-heading, 'Poleno', serif);
  font-size: 1.8rem;
  font-weight: 900;
  color: #3B2A14;
}
.cumple-banner__price-note {
  font-size: 0.85rem;
  color: #555;
}
.cumple-banner__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.cumple-banner__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  border-radius: 0;
  background: var(--color-red);
  color: #fff;
  clip-path: var(--btn-path-1);
  transition: all var(--transition-panaca);
}
.cumple-banner__cta-primary:hover {
  background: var(--color-red-dark);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(226,27,27,0.4);
}
.cumple-banner__cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  background: transparent;
  border: 3px solid var(--color-green-dark);
  color: var(--color-green-dark);
  clip-path: var(--btn-path-2);
  transition: all var(--transition-panaca);
}
.cumple-banner__cta-secondary:hover {
  background: var(--color-green-dark);
  color: #fff;
  transform: translateY(-3px) scale(1.03);
}
@media (max-width: 860px) {
  .cumple-banner .container {
    flex-direction: column;
    gap: 1.5rem;
  }
  .cumple-banner__visual {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .cumple-banner__includes {
    grid-template-columns: 1fr;
  }
}

/* Pasaportes grid: 4 cards in one row */

/* Modal Cotización Cumpleaños */
.cumple-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
}
.cumple-modal-overlay.is-open {
  display: flex;
}
/* ====== MODAL COMPRA CUMPLEANOS ====== */
.cumple-compra__includes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.65rem;
  padding: 0.6rem 0.75rem;
  background: rgba(0,88,68,0.05);
  border-radius: 10px;
  border: 1px solid rgba(0,88,68,0.1);
}
.cumple-compra__includes span {
  font-size: 0.72rem;
  color: #444;
  font-weight: 500;
}
.cumple-compra__plan-info {
  background: linear-gradient(135deg, #005844, #00796B);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cumple-compra__plan-info strong {
  font-family: var(--font-heading);
  color: var(--color-yellow, #F1C400);
}
.cumple-compra__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cumple-compra__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #eee;
}
.cumple-compra__row-left { flex: 1; min-width: 0; }
.cumple-compra__row-type {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #333;
  display: block;
}
.cumple-compra__row-age { font-size: 0.68rem; color: #999; }
.cumple-compra__row-price { text-align: right; min-width: 90px; }
.cumple-compra__row-price-current {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-green-dark, #166D35);
  display: block;
}
.cumple-compra__row-price-sub { font-size: 0.62rem; color: #aaa; }
.cumple-compra__qty { display: flex; align-items: center; flex-shrink: 0; }
.cumple-compra__qty-btn {
  width: 32px; height: 32px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-red, #E4002B);
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.cumple-compra__qty-btn:first-child { border-radius: 6px 0 0 6px; }
.cumple-compra__qty-btn:last-child  { border-radius: 0 6px 6px 0; }
.cumple-compra__qty-btn:hover {
  background: var(--color-red, #E4002B);
  color: #fff;
  border-color: var(--color-red, #E4002B);
}
.cumple-compra__qty-input {
  width: 38px; height: 32px;
  text-align: center;
  border: 1.5px solid #ddd;
  border-left: none; border-right: none;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: #333;
  background: #fff;
}
.cumple-compra__fecha { display: flex; flex-direction: column; gap: 0.3rem; }
.cumple-compra__fecha label { font-size: 0.78rem; font-weight: 600; color: #555; }
.cumple-compra__fecha input {
  padding: 0.6rem 0.8rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.2s;
}
.cumple-compra__fecha input:focus {
  outline: none;
  border-color: #005844;
  box-shadow: 0 0 0 3px rgba(0,88,68,0.1);
}
.cumple-compra__subtotal {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid #FFD54F;
}
.cumple-compra__subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #333;
}
.cumple-compra__subtotal-row strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-red, #E4002B);
}
.cumple-compra__warn {
  font-size: 0.7rem;
  color: #E65100;
  background: #FFF3E0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  margin: 0;
  line-height: 1.4;
}
.cumple-compra__whatsapp { font-size: 0.75rem; color: #888; margin-top: 0.65rem; }
.cumple-compra__whatsapp a { color: #25D366; font-weight: 700; text-decoration: none; }
.cumple-modal__submit {
  background: var(--color-red, #E4002B);
  color: #fff;
  border: none;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, transform 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  clip-path: var(--btn-path-1, polygon(0 0,100% 0,100% 75%,98% 100%,2% 100%,0 75%));
}
.cumple-modal__submit:hover { background: #c40023; transform: scale(1.02); }
@media (max-width: 480px) {
  .cumple-compra__row { flex-wrap: wrap; }
  .cumple-compra__row-price { text-align: left; min-width: auto; }
}

.cumple-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cumple-modal__close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  z-index: 1;
}
.cumple-modal__close:hover { color: #000; }
.cumple-modal__header {
  background: linear-gradient(135deg, #005844, #00796B);
  color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 16px 16px 0 0;
  text-align: center;
}
.cumple-modal__header h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0.5rem 0 0.25rem;
}
.cumple-modal__header p {
  font-size: 0.85rem;
  opacity: 0.9;
  margin: 0;
}
.cumple-modal__body {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cumple-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) {
  .cumple-modal__row { grid-template-columns: 1fr; }
  .cumple-modal__body { padding: 1rem; }
  .cumple-modal__header { padding: 1.25rem 1rem; }
  .cumple-modal__footer { padding: 1rem; }
}
.cumple-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cumple-modal__field--full {
  width: 100%;
}
.cumple-modal__field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
  font-family: var(--font-body-bold, sans-serif);
}
.cumple-modal__field input,
.cumple-modal__field textarea {
  padding: 0.65rem 0.8rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.cumple-modal__field input:focus,
.cumple-modal__field textarea:focus {
  outline: none;
  border-color: #005844;
  box-shadow: 0 0 0 3px rgba(0,88,68,0.1);
}
.cumple-modal__footer {
  padding: 0 2rem 1.5rem;
  text-align: center;
}
.cumple-modal__submit {
  background: #25D366;
  color: #fff;
  border: none;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, transform 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cumple-modal__submit:hover {
  background: #1ebe5b;
  transform: scale(1.02);
}
.cumple-modal__hint {
  font-size: 0.75rem;
  color: #888;
  margin-top: 0.75rem;
}
/* ----- Hero banner Eje Cafetero (estilo inline migrado) ----- */
        /* ============================================
           EJE CAFETERO HERO BANNER - ESTILO PANACA
        ============================================ */
        .eje-hero {
            background: var(--color-green-deep);
            position: relative;
            overflow: hidden;
            padding: 0;
        }

            /* Zigzag superior */
            .eje-hero::before {
                content: '';
                position: absolute;
                top: -1px;
                left: 0;
                right: 0;
                height: 24px;
                background: var(--color-cream);
                clip-path: var(--clip-zigzag-top);
                z-index: 5;
            }

            /* Zigzag inferior */
            .eje-hero::after {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                right: 0;
                height: 24px;
                background: var(--color-cream);
                clip-path: var(--clip-zigzag-bottom);
                z-index: 5;
            }

        /* Fondo texturizado con capas de color */
        .eje-hero__bg {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .eje-hero__bg-layer1 {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 70% 30%, rgba(102,166,63,0.35) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(22,109,53,0.4) 0%, transparent 55%), radial-gradient(ellipse at 90% 90%, rgba(2,61,27,0.5) 0%, transparent 50%);
        }

        .eje-hero__bg-dots {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
            background-size: 28px 28px;
        }

        /* Forma decorativa izquierda */
        .eje-hero__deco-left {
            position: absolute;
            left: -60px;
            top: 50%;
            transform: translateY(-50%);
            width: 320px;
            height: 320px;
            background: rgba(245,177,34,0.08);
            border-radius: 50%;
            z-index: 1;
        }
        /* Forma decorativa derecha */
        .eje-hero__deco-right {
            position: absolute;
            right: -80px;
            bottom: -40px;
            width: 420px;
            height: 420px;
            background: rgba(147,73,50,0.1);
            border-radius: 50%;
            z-index: 1;
        }

        .eje-hero__inner {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 2rem 90px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        /* ---- COLUMNA IZQUIERDA: TEXTO ---- */
        .eje-hero__content {
        }

        .eje-hero__badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 0.55rem 1.4rem;
            font-size: 0.8rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 1px;
            clip-path: var(--btn-path-4);
            margin-bottom: 1.4rem;
        }

        .eje-hero__headline {
            font-family: var(--font-heading);
            font-size: clamp(2.4rem, 5vw, 3.8rem);
            color: var(--color-white);
            text-transform: uppercase;
            letter-spacing: 2px;
            line-height: 1.05;
            margin-bottom: 1rem;
        }

            .eje-hero__headline em {
                font-style: normal;
                color: var(--color-yellow-bright);
            }

        .eje-hero__sub {
            font-family: var(--font-body);
            font-size: 1.05rem;
            color: rgba(255,255,255,0.85);
            line-height: 1.65;
            margin-bottom: 2rem;
            max-width: 500px;
        }

            .eje-hero__sub strong {
                color: var(--color-yellow-light);
                font-family: var(--font-body-bold);
            }

        /* Pill tags de categorías */
        .eje-hero__pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 2rem;
        }

        .eje-hero__pill {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            background: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.92);
            border: 1px solid rgba(255,255,255,0.22);
            padding: 0.35rem 0.85rem;
            font-size: 0.78rem;
            font-family: var(--font-body);
            font-weight: 600;
            border-radius: 30px;
            letter-spacing: 0.3px;
        }

            .eje-hero__pill span {
                font-size: 0.9rem;
            }

        /* CTAs */
        .eje-hero__ctas {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .eje-hero__cta-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-yellow);
            color: var(--color-black);
            padding: 1rem 2rem;
            font-family: var(--font-heading);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            font-weight: 700;
            clip-path: var(--btn-path-1);
            transition: background var(--transition-fast), transform var(--transition-fast);
            cursor: pointer;
            border: none;
        }

            .eje-hero__cta-primary:hover {
                background: var(--color-yellow-bright);
                transform: translateY(-2px);
            }

        .eje-hero__cta-secondary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            color: var(--color-white);
            padding: 0.9rem 1.8rem;
            font-family: var(--font-heading);
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            font-weight: 700;
            border: 2px solid rgba(255,255,255,0.45);
            clip-path: var(--btn-path-4);
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
            cursor: pointer;
        }

            .eje-hero__cta-secondary:hover {
                background: rgba(255,255,255,0.12);
                border-color: rgba(255,255,255,0.7);
                transform: translateY(-2px);
            }

        /* ---- COLUMNA DERECHA: CARDS FLOTANTES ---- */
        .eje-hero__cards {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        /* Card principal grande */
        .eje-hero__card-main {
            background: rgba(255,255,255,0.13);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 1.3rem 1.4rem;
            clip-path: var(--btn-path-1);
            position: relative;
        }

        .eje-hero__card-main__label {
            font-family: var(--font-heading);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--color-yellow-light);
            margin-bottom: 0.5rem;
        }

        .eje-hero__card-main__title {
            font-family: var(--font-heading);
            font-size: 1.25rem;
            color: var(--color-white);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.35rem;
        }

        .eje-hero__card-main__desc {
            font-size: 0.83rem;
            color: rgba(255,255,255,0.75);
            font-family: var(--font-body);
            line-height: 1.5;
            margin-bottom: 0.8rem;
        }

        .eje-hero__card-main__tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }

        .eje-hero__card-tag {
            background: rgba(245,177,34,0.2);
            color: var(--color-yellow-light);
            padding: 0.2rem 0.65rem;
            font-size: 0.72rem;
            font-family: var(--font-body);
            font-weight: 600;
            border: 1px solid rgba(245,177,34,0.35);
            border-radius: 20px;
        }

        /* Grid de mini cards */
        .eje-hero__cards-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.85rem;
        }

        .eje-hero__mini-card {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 1rem 1rem 0.9rem;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            clip-path: var(--btn-path-4);
            transition: background var(--transition-fast);
        }

            .eje-hero__mini-card:hover {
                background: rgba(255,255,255,0.18);
            }

        .eje-hero__mini-card__icon {
            font-size: 1.4rem;
            margin-bottom: 0.15rem;
        }

        .eje-hero__mini-card__name {
            font-family: var(--font-heading);
            font-size: 0.85rem;
            text-transform: uppercase;
            color: var(--color-white);
            letter-spacing: 0.5px;
        }

        .eje-hero__mini-card__desc {
            font-size: 0.72rem;
            color: rgba(255,255,255,0.65);
            font-family: var(--font-body);
            line-height: 1.4;
        }

        /* Badge de planificador IA flotante */
        .eje-hero__ai-badge {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--color-red-dark);
            padding: 0.9rem 1.2rem;
            clip-path: var(--btn-path-4);
            margin-top: 0.2rem;
        }

        .eje-hero__ai-badge__icon {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .eje-hero__ai-badge__text {
        }

        .eje-hero__ai-badge__title {
            font-family: var(--font-heading);
            font-size: 0.9rem;
            text-transform: uppercase;
            color: var(--color-white);
            letter-spacing: 0.5px;
        }

        .eje-hero__ai-badge__sub {
            font-size: 0.72rem;
            color: rgba(255,255,255,0.75);
            font-family: var(--font-body);
            line-height: 1.4;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .eje-hero__inner {
                grid-template-columns: 1fr;
                padding: 70px 1.25rem 80px;
                gap: 2.5rem;
            }

            .eje-hero__headline {
                font-size: clamp(2rem, 7vw, 3rem);
            }

            .eje-hero__cards-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 560px) {
            .eje-hero__inner {
                padding: 60px 1rem 72px;
            }

            .eje-hero__ctas {
                flex-direction: column;
                align-items: flex-start;
            }

            .eje-hero__cards-grid {
                grid-template-columns: 1fr;
            }
        }
/* ----- Modal restaurantes (estilo inline migrado) ----- */
.rest-modal-overlay{position:fixed;inset:0;z-index:10000;background:rgba(62,39,35,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity .3s ease}
.rest-modal-overlay.is-open{display:flex;opacity:1}
.rest-modal{background:#FFF8F0;border-radius:16px;max-width:480px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 25px 60px rgba(0,0,0,.25);overflow:hidden;transform:translateY(20px);transition:transform .3s ease}
.rest-modal-overlay.is-open .rest-modal{transform:translateY(0)}
.rest-modal__header{background:linear-gradient(135deg,#3E2723 0%,#5D4037 100%);padding:1.5rem 1.5rem 1.25rem;position:relative;text-align:center}
.rest-modal__header::after{content:'';position:absolute;bottom:-12px;left:0;right:0;height:24px;background:#FFF8F0;border-radius:50% 50% 0 0}
.rest-modal__close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:background .2s}
.rest-modal__close:hover{background:rgba(255,255,255,.3)}
.rest-modal__icon{font-size:2.2rem;margin-bottom:.35rem}
.rest-modal__title{font-family:var(--font-heading);color:#fff;font-size:1.4rem;text-transform:uppercase;margin:0;letter-spacing:.5px}
.rest-modal__location{color:#FFAB91;font-size:.8rem;margin-top:.25rem}
.rest-modal__body{flex:1;overflow-y:auto;padding:1.75rem 1.5rem 1rem;scrollbar-width:thin;scrollbar-color:#D7CCC8 transparent}
.rest-modal__body::-webkit-scrollbar{width:6px}
.rest-modal__body::-webkit-scrollbar-thumb{background:#D7CCC8;border-radius:3px}
.rest-modal__category{font-family:var(--font-heading);font-size:.9rem;color:#E65100;text-transform:uppercase;letter-spacing:1px;margin:0 0 .75rem;padding-bottom:.4rem;border-bottom:2px solid #FFCC80}
.rest-modal__category:not(:first-child){margin-top:1.25rem}
.rest-modal__items{list-style:none;padding:0;margin:0}
.rest-modal__item{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px dotted #D7CCC8;font-size:.88rem;color:#4E342E;line-height:1.4}
.rest-modal__item:last-child{border-bottom:none}
.rest-modal__item::before{content:'🌿';font-size:.7rem;flex-shrink:0}
.rest-modal__footer{padding:1rem 1.5rem 1.25rem;background:linear-gradient(0deg,#FFF8F0,#FFECD2);text-align:center;border-top:1px solid #FFCC80}
.rest-modal__download{display:inline-flex;align-items:center;gap:.5rem;background:var(--color-red,#D32F2F);color:#fff;border:none;padding:.95rem 2.5rem;font-family:var(--font-heading);font-size:1.05rem;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .3s;clip-path:var(--btn-path-1)}
.rest-modal__download:hover{background:var(--color-red-dark,#B71C1C);transform:translateY(-2px) scale(1.03);box-shadow:0 8px 25px rgba(211,47,47,.35)}
.rest-modal__note{font-size:.72rem;color:#8D6E63;margin-top:.6rem}
@media(max-width:480px){.rest-modal{max-height:95vh;border-radius:12px}.rest-modal__header{padding:1.25rem 1.25rem 1rem}.rest-modal__body{padding:1.5rem 1.25rem 1rem}.rest-modal__footer{padding:.85rem 1.25rem 1rem}}

/* Portal migrated pages */
.portal-page {
    background: #fffaf2;
    color: #2d261f;
    overflow-x: hidden;
}

.portal-hero {
    --portal-hero-image: none;
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    background-image:
        linear-gradient(90deg, rgba(30, 20, 14, 0.82), rgba(30, 20, 14, 0.42), rgba(30, 20, 14, 0.2)),
        var(--portal-hero-image);
    background-size: cover;
    background-position: center;
    padding: 4.5rem 1.25rem;
}

.portal-hero--solid {
    background: #1b5e20;
}

.portal-hero__content {
    width: min(1120px, 100%);
    margin: 0 auto;
    color: #fff;
}

.portal-hero__content h1 {
    max-width: 760px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 0.96;
    letter-spacing: 0;
    text-transform: uppercase;
}

.portal-hero__content p {
    max-width: 660px;
    margin: 1rem 0 0;
    font-size: 1.08rem;
    line-height: 1.6;
}

.portal-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    margin: 0 0 0.75rem;
    color: #f5b51b;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.portal-hero__actions,
.portal-cta-band {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.portal-hero__actions {
    margin-top: 1.5rem;
}

.portal-btn,
.portal-card-link,
.portal-destination-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.1rem;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.portal-btn:hover,
.portal-card-link:hover,
.portal-destination-card:hover {
    transform: translateY(-1px);
}

.portal-btn--primary {
    background: #ed1c24;
    color: #fff;
    box-shadow: 0 12px 24px rgba(141, 26, 18, 0.25);
}

.portal-btn--secondary {
    background: #fff;
    color: #1b5e20;
}

.portal-section {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 4rem 0;
}

.portal-section--muted {
    width: 100%;
    max-width: none;
    padding-inline: max(1rem, calc((100% - 1120px) / 2));
    background: #f3eadc;
}

.portal-section--split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: start;
}

.portal-section__header {
    max-width: 760px;
    margin-bottom: 2rem;
}

.portal-section__header h2,
.portal-comparison h2,
.portal-cta-band h2,
.portal-section--split h2 {
    margin: 0;
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.portal-section__header p,
.portal-section--split p,
.portal-cta-band p {
    color: #5c5146;
    line-height: 1.6;
}

.portal-pricing-grid,
.portal-card-grid,
.portal-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.portal-card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-card-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-price-card,
.portal-info-card,
.portal-step-grid article,
.portal-schedule-card {
    border: 1px solid rgba(77, 54, 38, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(57, 38, 22, 0.08);
}

.portal-price-card,
.portal-info-card,
.portal-schedule-card {
    padding: 1.35rem;
}

.portal-price-card--featured {
    border-color: rgba(237, 28, 36, 0.35);
    box-shadow: 0 18px 38px rgba(141, 26, 18, 0.14);
}

.portal-price-card__tag {
    margin: 0 0 0.75rem;
    color: #b92a1d;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.portal-price-card h3,
.portal-info-card h3,
.portal-step-grid h3,
.portal-schedule-card h2 {
    margin: 0 0 0.7rem;
    color: #2c241e;
    font-family: var(--font-heading);
    font-size: 1.55rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.portal-price-card__desc,
.portal-info-card p,
.portal-step-grid p,
.portal-schedule-card p {
    color: #5c5146;
    line-height: 1.55;
}

.portal-price-card__prices {
    display: grid;
    gap: 0.2rem;
    margin: 1.25rem 0;
}

.portal-price-card__prices span,
.portal-price-card__prices small {
    color: #756758;
}

.portal-price-card__old {
    color: #9b5a2a !important;
    text-decoration: line-through;
}

.portal-price-card__prices strong {
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 2.1rem;
    line-height: 1;
}

.portal-card-link {
    width: 100%;
    background: #1b5e20;
    color: #fff;
}

.portal-comparison {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 0.65fr);
    gap: 2rem;
    align-items: start;
}

.portal-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(57, 38, 22, 0.08);
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.portal-table th,
.portal-table td {
    padding: 1rem;
    border-bottom: 1px solid #eadfce;
    text-align: left;
}

.portal-table th {
    background: #1b5e20;
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.portal-table td:first-child {
    font-weight: 700;
    color: #2c241e;
}

.portal-cta-band {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto 4rem;
    justify-content: space-between;
    padding: 1.5rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(77, 54, 38, 0.12);
    box-shadow: 0 12px 28px rgba(57, 38, 22, 0.08);
}

.portal-cta-band > div {
    max-width: 760px;
}

.portal-info-card__icon {
    display: inline-flex;
    margin-bottom: 1rem;
    color: #ed1c24;
}

.portal-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: -0.5rem 0 1.5rem;
}

.portal-chip-row span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(27, 94, 32, 0.18);
    border-radius: 6px;
    background: #fff;
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.portal-chip-row--hero {
    margin: 1rem 0 0;
}

.portal-chip-row--hero span {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.55);
}

.portal-check-list {
    display: grid;
    gap: 0.75rem;
}

.portal-check-list p {
    margin: 0;
    padding: 0.9rem 1rem;
    border-left: 4px solid #1b5e20;
    border-radius: 6px;
    background: #fff;
    color: #3a3028;
}

.portal-schedule-card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portal-schedule-card strong {
    color: #ed1c24;
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.05;
}

.portal-schedule-card--green {
    border-top: 6px solid #1b5e20;
}

.portal-schedule-card--red {
    border-top: 6px solid #ed1c24;
}

.portal-step-grid article {
    padding: 1.25rem;
}

.portal-step-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: #f5b51b;
    color: #2c241e;
    font-weight: 800;
}

.portal-map-embed {
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(77, 54, 38, 0.12);
    background: #fff;
}

.portal-map-embed iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

.portal-route-grid,
.portal-adventure-grid,
.portal-restaurant-grid,
.portal-stat-grid {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.portal-route-grid,
.portal-restaurant-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-adventure-grid,
.portal-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-route-card,
.portal-adventure-card,
.portal-restaurant-card,
.portal-stat-grid article,
.portal-timeline article {
    border: 1px solid rgba(77, 54, 38, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(57, 38, 22, 0.08);
}

.portal-route-card,
.portal-adventure-card,
.portal-restaurant-card,
.portal-stat-grid article {
    padding: 1.2rem;
}

.portal-route-card span,
.portal-adventure-card span,
.portal-restaurant-card span,
.portal-timeline span {
    color: #b92a1d;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.portal-route-card h3,
.portal-adventure-card h3,
.portal-restaurant-card h3 {
    margin: 0.55rem 0 0.55rem;
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 1.55rem;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.portal-route-card p,
.portal-adventure-card p,
.portal-restaurant-card p,
.portal-timeline p {
    margin: 0;
    color: #5c5146;
    line-height: 1.55;
}

.portal-stat-grid article {
    display: grid;
    align-content: center;
    min-height: 136px;
    text-align: center;
}

.portal-stat-grid strong {
    color: #ed1c24;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1;
}

.portal-stat-grid span {
    margin-top: 0.45rem;
    color: #2c241e;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.portal-timeline {
    display: grid;
    gap: 0.75rem;
}

.portal-timeline article {
    position: relative;
    padding: 1rem 1rem 1rem 1.35rem;
}

.portal-timeline article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    border-radius: 4px;
    background: #1b5e20;
}

.portal-link-grid {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.portal-link-grid a,
.portal-destination-card {
    min-height: 82px;
    padding: 1rem;
    border: 1px solid rgba(77, 54, 38, 0.12);
    border-radius: 8px;
    background: #fff;
    color: #1b5e20;
    font-family: var(--font-heading);
    text-transform: uppercase;
    text-decoration: none;
}

.portal-faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 0.8rem;
}

.portal-faq-list details {
    border: 1px solid rgba(77, 54, 38, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(57, 38, 22, 0.08);
}

.portal-faq-list summary {
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.portal-faq-list p {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: #5c5146;
    line-height: 1.6;
}

.portal-hero--catalog {
    background:
        linear-gradient(90deg, rgba(27, 94, 32, 0.94), rgba(237, 28, 36, 0.5)),
        var(--fondo-diferido, none) center/cover;
}

.portal-catalog-summary {
    align-items: center;
}

.portal-catalog-meta {
    display: inline-grid;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(77, 54, 38, 0.12);
}

.portal-catalog-meta span {
    color: #756758;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portal-catalog-meta strong {
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0;
}

.portal-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.portal-fact-grid article {
    min-height: 120px;
    padding: 1.1rem;
    border: 1px solid rgba(77, 54, 38, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(57, 38, 22, 0.08);
}

.portal-fact-grid span {
    display: block;
    color: #b92a1d;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.portal-fact-grid strong {
    display: block;
    margin-top: 0.45rem;
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1;
    text-transform: uppercase;
}

.portal-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.portal-related-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    background: #f3eadc;
    color: #1b5e20;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
}

@media (max-width: 900px) {
    .portal-hero {
        min-height: 360px;
        padding: 3.5rem 1rem;
    }

    .portal-hero__content h1 {
        font-size: 3rem;
    }

    .portal-section--split,
    .portal-comparison,
    .portal-pricing-grid,
    .portal-card-grid,
    .portal-card-grid--two,
    .portal-card-grid--four,
    .portal-step-grid,
    .portal-route-grid,
    .portal-adventure-grid,
    .portal-restaurant-grid,
    .portal-stat-grid,
    .portal-fact-grid,
    .portal-link-grid {
        grid-template-columns: 1fr;
    }

    .portal-section,
    .portal-section--muted {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 560px) {
    .portal-hero__content h1 {
        font-size: 2.35rem;
    }

    .portal-hero__content p {
        font-size: 1rem;
    }

    .portal-btn,
    .portal-card-link {
        width: 100%;
    }

    .portal-cta-band {
        align-items: stretch;
    }
}

/* Keep the accessibility skip link fully hidden until keyboard focus. */
.skip-link {
    top: 0 !important;
    transform: translate(-50%, -120%) !important;
    transition: transform 0.25s ease !important;
}

.skip-link:focus {
    top: 0 !important;
    transform: translate(-50%, 0) !important;
}

/* ============================================
   FRANJA PROMOCIONAL SUPERIOR
   Va por encima del header (como en panaca.co). No es sticky: se va con el
   scroll y deja el header pegado arriba, que es quien maneja el z-index 1000.
   ============================================ */
.promo-bar {
    /* Fija arriba como en panaca.co: la campana debe verse siempre, tambien al
       hacer scroll. El header sticky se corre hacia abajo su altura exacta. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: block;
    width: 100%;
    background: #EA0A2A;
    color: var(--color-white);
    text-decoration: none;
    padding: 0.3rem 1rem;
    text-align: center;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    line-height: 1.25;
    transition: filter 0.2s ease;
}

.promo-bar:hover,
.promo-bar:focus {
    color: var(--color-white);
    filter: brightness(1.08);
}

.promo-bar__text {
    display: inline-block;
    max-width: 1400px;
}

.promo-bar__text strong {
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .promo-bar {
        font-size: 0.62rem;
        letter-spacing: 0.3px;
        padding: 0.28rem 0.6rem;
    }
}

/* ============================================
   CORRECCION RESPONSIVE DEL ENCABEZADO
   El nav de escritorio se mostraba desde 992px, pero logo + 8 enlaces + CTA
   necesitan ~1330px. Como .header y .header__container tienen overflow:hidden,
   el boton COMPRAR PASAPORTES quedaba cortado entre 992px y ~1366px.
   ============================================ */
.header__cta {
    /* El CTA nunca cede espacio: es lo ultimo que debe encogerse o cortarse. */
    flex-shrink: 0;
}

.header__nav {
    /* Sin esto el nav no baja de su ancho de contenido y empuja al CTA fuera. */
    min-width: 0;
}

/* 992-1279: no cabe el nav completo, se usa el menu hamburguesa (ya existente). */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .header__nav {
        display: none;
    }

    .header__hamburger {
        display: flex;
    }
}

/* 1280-1439: cabe compactando enlaces (sin iconos) y el CTA. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    .header__nav-link {
        padding: 0.5rem 0.45rem;
        font-size: 0.72rem;
        gap: 4px;
    }

    .header__nav-link .picon {
        display: none;
    }

    .header__cta {
        padding: 0.75rem 1.1rem;
        font-size: 0.75rem;
    }
}

/* --------------------------------------------
   El archivo trae una segunda copia (mas vieja) de si mismo a partir de la
   linea ~10438, cuyas reglas base ganan por orden a los @media de la copia
   nueva. Eso deja SIN EFECTO el ajuste del CTA en pantallas pequenas: el boton
   conservaba el tamano de escritorio y se salia del contenedor.
   Se restauran aqui, al final del archivo, los mismos valores originales.
   -------------------------------------------- */
@media (max-width: 768px) {
    .header__cta {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .header__cta {
        padding: 0.4rem 0.65rem;
        font-size: 0.6rem;
        letter-spacing: 0;
    }
}

@media (max-width: 360px) {
    .header__cta {
        padding: 0.3rem 0.5rem;
        font-size: 0.55rem;
    }
}

/* --------------------------------------------
   La franja promocional intermedia (.topbar, la que va dentro de la portada)
   quedaba con z-index 1001 -mayor que el del encabezado, que es 1000- porque
   la segunda copia del archivo sobrescribe a la primera. Al fijarse el header
   al hacer scroll, esa franja le pasaba POR ENCIMA y tapaba el logo y el boton
   COMPRAR PASAPORTES. Debe pasar por debajo del encabezado.
   -------------------------------------------- */
.topbar {
    z-index: 1;
}

/* --------------------------------------------
   REPRODUCTOR DE TRAVESIA - silueta semi irregular, TODO recto
   Nada de esquinas redondeadas: el panel se corta con chaflanes (cortes
   diagonales) de tamano distinto en cada esquina, en la misma linea angular
   que los zigzag de la marca.
   Los cortes de ABAJO van discretos a proposito: ahi viven el boton de sonido
   y el rotulo del video, y un chaflan grande se los comeria.
   -------------------------------------------- */
.travesia-hero__video-col {
    /* Cada esquina: corte oblicuo con medidas horizontal/vertical distintas. */
    --ch-si-x: 58px;
    --ch-si-y: 34px;
    --ch-sd-x: 16px;
    --ch-sd-y: 22px;
    --ch-id-x: 26px;
    --ch-id-y: 32px;
    --ch-ii-x: 12px;
    --ch-ii-y: 20px;
    --marco: 3px;

    border: 0;
    border-radius: 0;
    clip-path: polygon(
        var(--ch-si-x) 0,
        calc(100% - var(--ch-sd-x)) 0,
        100% var(--ch-sd-y),
        100% calc(100% - var(--ch-id-y)),
        calc(100% - var(--ch-id-x)) 100%,
        var(--ch-ii-x) 100%,
        0 calc(100% - var(--ch-ii-y)),
        0 var(--ch-si-y)
    );
    /* box-shadow queda recortado por clip-path; el relieve se hace con filter. */
    box-shadow: none;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 193, 7, 0.18));
}

/* Marco dorado: anillo que sigue el contorno cortado (regla evenodd = exterior
   menos interior). Va encima del video y no intercepta clics. */
.travesia-hero__video-col::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(255, 193, 7, 0.45);
    clip-path: polygon(evenodd,
        var(--ch-si-x) 0,
        calc(100% - var(--ch-sd-x)) 0,
        100% var(--ch-sd-y),
        100% calc(100% - var(--ch-id-y)),
        calc(100% - var(--ch-id-x)) 100%,
        var(--ch-ii-x) 100%,
        0 calc(100% - var(--ch-ii-y)),
        0 var(--ch-si-y),

        calc(var(--ch-si-x) + var(--marco)) var(--marco),
        calc(100% - var(--ch-sd-x) - var(--marco)) var(--marco),
        calc(100% - var(--marco)) calc(var(--ch-sd-y) + var(--marco)),
        calc(100% - var(--marco)) calc(100% - var(--ch-id-y) - var(--marco)),
        calc(100% - var(--ch-id-x) - var(--marco)) calc(100% - var(--marco)),
        calc(var(--ch-ii-x) + var(--marco)) calc(100% - var(--marco)),
        var(--marco) calc(100% - var(--ch-ii-y) - var(--marco)),
        var(--marco) calc(var(--ch-si-y) + var(--marco))
    );
}

@media (max-width: 768px) {
    .travesia-hero__video-col {
        --ch-si-x: 34px;
        --ch-si-y: 20px;
        --ch-sd-x: 10px;
        --ch-sd-y: 14px;
        --ch-id-x: 16px;
        --ch-id-y: 20px;
        --ch-ii-x: 8px;
        --ch-ii-y: 12px;
        --marco: 2px;
    }
}

/* --------------------------------------------
   RED DE SEGURIDAD PARA FLATPICKR
   El calendario se estiliza con la hoja del CDN. Si esa hoja no carga (CDN
   caido o bloqueado), el widget se renderizaba dentro del documento ocupando
   miles de pixeles al final de la pagina. Estas reglas replican lo minimo de
   flatpickr para que, en ese caso, simplemente no se vea.
   -------------------------------------------- */
.flatpickr-calendar:not(.open):not(.inline) {
    display: none;
}

.flatpickr-calendar .flatpickr-months svg,
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    width: 14px;
    height: 14px;
}


/* --------------------------------------------
   La franja fija saca al header de su sitio: hay que empujar el contenido
   y recolocar el header sticky justo debajo de ella.
   Altura de la franja: 24px escritorio / 21px tablet / 34px movil.
   -------------------------------------------- */
/* La franja esta fuera del flujo: el encabezado reserva su hueco con un margen
   propio (no con padding en el body, que sumaba dos veces) y se pega justo
   debajo de ella al hacer scroll. */
.header {
    margin-top: 24px;
}

.header,
body.scrolled .header {
    top: 24px;
}

@media (max-width: 768px) {
    .header { margin-top: 21px; }
    .header, body.scrolled .header { top: 21px; }
}

@media (max-width: 480px) {
    .header { margin-top: 34px; }
    .header, body.scrolled .header { top: 34px; }
}

/* --------------------------------------------
   ENCABEZADO EN DOS FILAS (como panaca.co)
   Con 10 elementos de menu, el nav necesita ~1190px y solo dispone de ~1015px
   junto al logo y al boton: los ultimos items quedaban tapados por el CTA.
   Produccion resuelve esto poniendo el nav en su propia fila, hermano del
   contenedor. Aqui se replica: fila 1 = logo + CTA, fila 2 = navegacion.
   -------------------------------------------- */
.header {
    /* Antes tenia altura fija de 70px; con dos filas debe crecer. */
    height: auto;
    overflow: visible;
}

.header__container {
    height: var(--header-height);
}

.header__nav {
    /* Ocupa el ancho completo bajo la primera fila. */
    flex: none;
    width: 100%;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--color-white);
}

.header__nav-list {
    max-width: 1400px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 var(--spacing-md);
}

/* El nav ya no compite por espacio con el logo y el CTA: se recuperan los
   iconos y el tamano original que se habian sacrificado por falta de sitio. */
@media (min-width: 992px) {
    .header__nav {
        display: flex;
    }

    .header__hamburger {
        display: none;
    }

    /* Con 11 elementos (entro Convenios) el menu pedia 1364px y solo hay 1352
       utiles a 1440: se partia en dos filas y el espaciador quedaba corto.
       Bajando el costado de 0.85rem a 0.7rem pide 1311 y sobra margen. */
    .header__nav-link {
        padding: 0.5rem 0.7rem;
        font-size: 0.8rem;
        gap: 6px;
    }

    .header__nav-link .picon {
        display: inline-block;
    }

    .header__cta {
        padding: 0.85rem 1.75rem;
        font-size: 0.85rem;
    }
}

/* Bajo 992px sigue mandando el menu hamburguesa. */
@media (max-width: 991.98px) {
    .header__nav {
        display: none;
    }

    .header__hamburger {
        display: flex;
    }
}

/* --------------------------------------------
   El menu en una sola fila tambien entre 992 y 1279
   A esos anchos los 10 elementos se partian en dos lineas y el encabezado
   crecia a 148px. Se compactan enlaces y CTA para que quepan en una.
   -------------------------------------------- */
@media (min-width: 992px) and (max-width: 1279.98px) {
    /* A 992px el margen era de solo 6px con 11 elementos: se aprieta un poco
       mas para que no dependa del ancho de la barra de desplazamiento. */
    .header__nav-link {
        padding: 0.5rem 0.45rem;
        font-size: 0.72rem;
        gap: 4px;
    }

    .header__nav-link .picon {
        display: none;
    }

    .header__nav-list {
        flex-wrap: nowrap;
    }
}

/* --------------------------------------------
   Espaciador acorde a la nueva altura del encabezado
   El JS pone .scrolled y el header pasa a fixed; el espaciador debe medir lo
   mismo que el header o el contenido salta. Con el nav en su propia fila el
   header mide 107px, no los 70px de antes.
   -------------------------------------------- */
@media (min-width: 1280px) {
    body.scrolled .header-spacer { height: 131px; }
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    body.scrolled .header-spacer { height: 129px; }
}

@media (min-width: 769px) and (max-width: 991.98px) {
    body.scrolled .header-spacer { height: 94px; }
}

@media (min-width: 481px) and (max-width: 768px) {
    body.scrolled .header-spacer { height: 91px; }
}

@media (max-width: 480px) {
    body.scrolled .header-spacer { height: 104px; }
}

/* ============================================
   BANNER: CUMPLEANERO GRATIS
   Va debajo de los pasaportes en la portada. Es una condicion de la entrada,
   asi que se lee como aviso destacado y no como otra tarjeta de producto.
============================================ */
.cumple-gratis {
    padding: 0 0 3rem;
}

.cumple-gratis__caja {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: linear-gradient(100deg, #005844 0%, #0b7a5e 100%);
    color: #fff;
    padding: 1.5rem 1.75rem;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.cumple-gratis__icono {
    font-size: 2.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.cumple-gratis__texto {
    flex: 1 1 320px;
    min-width: 0;
}

.cumple-gratis__titulo {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.cumple-gratis__titulo span {
    color: var(--color-yellow);
}

.cumple-gratis__desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.92;
}

.cumple-gratis__cta {
    flex-shrink: 0;
    background: var(--color-yellow);
    color: #1a1a1a;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.8rem 1.4rem;
    text-decoration: none;
    clip-path: var(--btn-path-4);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cumple-gratis__cta:hover,
.cumple-gratis__cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

@media (max-width: 768px) {
    .cumple-gratis__caja {
        padding: 1.25rem;
        gap: 0.9rem;
        text-align: center;
        justify-content: center;
    }

    .cumple-gratis__titulo {
        font-size: 1.1rem;
    }

    .cumple-gratis__cta {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   CARRITO DE LA CABECERA
   --------------------------------------------
   Va al FINAL a proposito: .header__cart esta declarado tres veces mas
   arriba (herencia de la migracion) y aqui gana por cascada sin tener
   que tocar ninguno de los duplicados.

   El icono siempre esta; el globo con el numero solo aparece cuando hay
   algo dentro. Lo controla carrito-cabecera.js leyendo PanacaCarrito.
============================================ */
.header__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.header__cart:focus-visible {
    outline: 3px solid var(--color-green-dark);
    outline-offset: 2px;
}

.header__cart:hover {
    opacity: 0.75;
    transform: translateY(-1px);
}

/* Con algo dentro el carrito se pone rojo: se distingue de un vistazo del
   carrito vacio sin tener que leer el numero. */
.header__cart--lleno svg {
    stroke: var(--color-red);
    stroke-width: 2;
}

.header__cart-globo {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.35rem;
    padding: 0.1rem 0.3rem;
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
    /* Poleno solo trae el peso 500: pedir 700 lo dibuja en negrita falsa. */
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.25;
    text-align: center;
    /* Corte irregular en vez de circulo: es la forma de la casa. */
    clip-path: var(--btn-path-4);
}

.header__cart-globo[hidden] {
    display: none;
}

/* Solo cuando el numero CAMBIA, para avisar de que algo acaba de entrar. */
.header__cart-globo--salta {
    animation: carritoSalta 0.45s ease-out;
}

@keyframes carritoSalta {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* El carrito del menu movil: fila propia, con el numero al final. Ahi el
   icono no cabe junto al logo y el numero no se leeria. */
.mobile-nav__carrito {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
}

.mobile-nav__carrito-texto {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-nav__carrito svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    flex-shrink: 0;
}

/* Aqui el globo va en el flujo, no encima del icono. */
.mobile-nav__carrito .header__cart-globo {
    position: static;
}

@media (prefers-reduced-motion: reduce) {
    .header__cart-globo--salta { animation: none; }
    .header__cart:hover { transform: none; }
}

/* ============================================================================
   INTERRUPTOR DE IDIOMA
   ----------------------------------------------------------------------------
   Habla el mismo idioma visual que el resto de la cabecera:

     · Poleno en mayusculas con el mismo interletraje de los enlaces del menu,
     · el borde recortado —clip-path— que es la firma de los botones PANACA,
     · y el rojo de la casa reservado para el estado activo, no para el reposo.

   Por que arena y no rojo en reposo: el rojo esta comprometido con «COMPRAR
   PASAPORTES». Un segundo boton rojo en la misma fila compite con la unica
   accion que da plata. El arena pertenece a la paleta, se ve sobre el blanco y
   cede el protagonismo.

   Va al FINAL del archivo a proposito: `.header__cart` y compania se declaran
   varias veces mas arriba —herencia de la migracion de Shopify— y una regla
   escrita antes se la comeria una posterior.
============================================================================ */
.header__idioma {
    position: relative;
    /* Encierra al ::before: sin esto, un z-index negativo puede colarse por
       detras del fondo de un ancestro y el chip desaparece. */
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    margin-right: 0.35rem;

    /* La misma altura que un enlace del menu, que es el nivel al que pertenece:
       es navegacion, no una llamada a la accion. Se fija en vez de dejarla al
       relleno para que no baile si cambia la metrica de la fuente. */
    min-height: 36px;

    font-family: var(--font-heading);
    /* Poleno solo trae el peso 500. Al pedir 700 el navegador inventa la
       negrilla engordando los trazos y el texto se vuelve ilegible. */
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;

    color: var(--color-green-deep);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-panaca);
}

/* El fondo vive en una capa aparte, y no en el propio enlace, por una razon
   concreta: un clip-path recorta TAMBIEN el anillo de foco, y quien navega con
   teclado se queda sin saber donde esta parado. Asi el recorte se lo lleva el
   fondo y el foco se sigue dibujando entero. */
.header__idioma::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-arena);
    clip-path: var(--btn-path-4);
    transition: background var(--transition-panaca);
}

.header__idioma:hover,
.header__idioma:focus-visible {
    color: var(--color-white);
}

.header__idioma:hover::before,
.header__idioma:focus-visible::before {
    background: var(--color-red);
}

.header__idioma svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    flex-shrink: 0;
}

/* Entre 481 y 768 se queda solo el globo: el rotulo ya no cabe junto al carrito
   y al boton de compra. El recorte se mantiene porque es justo lo que lo hace
   reconocible como boton PANACA. */
@media (max-width: 768px) {
    .header__idioma {
        padding: 0.5rem 0.6rem;
        margin-right: 0.15rem;
    }

    .header__idioma-texto {
        display: none;
    }
}

/* Por debajo de 480 desaparece de la cabecera. Medido: a 375px la fila es
   logo + carrito + COMPRAR PASAPORTES y sobran 24px; el interruptor pide 40 y
   empujaba el boton de compra 16px fuera del contenedor.
   Entre dejarlo y que se corte la unica accion que da plata, gana el boton: en
   un telefono la navegacion vive en el menu, y alli el interruptor sigue
   estando —como fila propia y en amarillo— a un toque de distancia. */
@media (max-width: 480px) {
    .header__idioma {
        display: none;
    }
}

/* --- El del menu movil --- */
/* Hereda de `.header__mobile-nav a` (Poleno, mayusculas, blanco sobre oscuro).
   Solo se le anade la raya de separacion y el amarillo de la casa: no es una
   seccion mas del sitio, es un cambio de estado. */
.mobile-nav__idioma {
    margin-top: 0.5rem;
    padding-top: 1.25rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-yellow) !important;
}

.mobile-nav__idioma svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    flex-shrink: 0;
}

/* ═══════════════ BANDA «TRABAJA CON NOSOTROS» ═══════════════
   Cierra la portada. Va al final del archivo porque aqui las reglas repetidas
   ganan por orden —esta hoja lleva dos copias de si misma desde la migracion—,
   y estas son las ultimas en llegar. */

.banda-empleo {
    background: var(--color-green-deep);
    color: var(--color-white);
    padding: var(--spacing-xl) var(--spacing-sm);

    /* El corte de arriba la separa de lo anterior sin necesidad de una linea. */
    clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
    margin-top: calc(var(--spacing-xl) * -1 + 2.5rem);
}

.banda-empleo__in {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.banda-empleo__texto { max-width: 62ch; }

.banda-empleo__antetitulo {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-yellow-bright);
    margin: 0 0 0.4rem;
}

.banda-empleo__titulo {
    font-family: var(--font-heading);
    font-weight: 500;                 /* Poleno solo trae 500 */
    font-size: clamp(1.8rem, 4.5vw, 2.9rem);
    line-height: 1.03;
    text-transform: uppercase;
    margin: 0 0 var(--spacing-xs);
}

.banda-empleo__bajada {
    font-family: var(--font-body);
    font-size: 1.02rem;
    opacity: 0.9;
    margin: 0 0 var(--spacing-md);
}

.banda-empleo__boton {
    display: inline-block;
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 2.2rem;
    clip-path: var(--btn-path-1);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.banda-empleo__boton:hover {
    background: var(--color-red-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}

.banda-empleo__sello {
    font-size: 6rem;
    line-height: 1;
    opacity: 0.22;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .banda-empleo__boton:hover { transform: none; }
}

@media (max-width: 768px) {
    .banda-empleo {
        padding: var(--spacing-lg) var(--spacing-xs);
        clip-path: polygon(0 1.4rem, 100% 0, 100% 100%, 0 100%);
        margin-top: calc(var(--spacing-lg) * -1 + 1.4rem);
    }

    .banda-empleo__sello { display: none; }
}

/*  ── Enganche desde la portada ────────────────────────────────────────────
    La vista previa del mapa en la portada ahora es un enlace al mapa de verdad.
    Viven en panaca.css —y no en mapa-interactivo.css— porque la portada no carga
    la hoja del mapa: son cuatro reglas, no vale la pena una peticion mas.  */
.mapa-visual__enlace {
    position: relative;
    display: block;
    cursor: pointer;
}

.mapa-visual__lupa {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.92);
    background: rgba(15, 23, 15, .82);
    color: #fff;
    font-family: var(--font-heading);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    z-index: 2;
}

.mapa-visual__enlace:hover .mapa-visual__lupa,
.mapa-visual__enlace:focus-visible .mapa-visual__lupa {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.mapa-download__btn--primario {
    background: var(--color-red, #ea0b2a);
    color: #fff;
    border-color: var(--color-red, #ea0b2a);
}


/* ============================================================================
   AJUSTES DE ACCESIBILIDAD  (2026-09-07)

   Salen de la auditoria de Lighthouse de la portada. Van al FINAL del archivo a
   proposito: esta hoja arrastra copias de sus propias reglas —el mismo bloque
   aparece dos veces— y lo ultimo que se lee es lo que manda. Corregir la
   declaracion original no bastaria: la copia de mas abajo la volveria a pisar.
   ============================================================================ */

/*  CONTRASTE. Ninguno de estos textos llegaba a 4,5:1, el minimo para texto normal.
    Cada color es el tono MAS CLARO que cumple sobre su propio fondo, para que el
    diseno cambie lo menos posible:

      #999999 sobre blanco   2,84 -> #747474  4,67
      #808080 sobre blanco   3,95 -> #747474  4,67
      #e21b1b sobre #f5f5f5  4,37 -> #db1a1a  4,61
      #d38f01 sobre blanco   2,73 -> #9e6b01  4,61
      #d38f01 sobre #f5deb3  2,08 -> #855a01  4,62                                  */

.pasaporte-card__price-label,
.pasaporte-card__price-old,
.pasaporte-card__price-old s,
.pasaporte-card__price-note,
.pasaporte-card__prices-row s,
.pasaporte-card__footer s,
.horario-item__days,
.horario-item__time,
.expo-card__precio-nota { color: #747474; }

.expo-card__requisitos-titulo,
.expo-card__noapto { color: #db1a1a; }

.expo-condicion__titulo { color: #9e6b01; }

.horario-card__footer p,
.horario-card__footer p strong { color: #855a01; }

/*  AREA TACTIL. Los puntos del carrusel de testimonios median 11,5 px y el minimo son
    24. Se agranda el BOTON a 24x24; el borde transparente deja el punto visible del
    mismo tamano que antes, asi que el dedo tiene donde caer sin que cambie el diseno. */
.carousel-dot {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 7px solid transparent;
    background-clip: content-box;
}

/*  FONDO DEL HERO. Es un <img> real debajo de los <video>, no el atributo `poster`: a un
    <img> del primer pantallazo Chrome le da prioridad y lo pinta enseguida, al poster de un
    <video> no. Ocupa el mismo hueco y se recorta igual.  */
.hero__poster {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
}
.hero__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}
@media (max-width: 768px) {
    .hero__poster img { object-position: center center; }
}
/*  Los videos van por encima del fondo, dentro del mismo contenedor posicionado. */
.hero__video { position: relative; z-index: 1; }


/*  FONDOS QUE ESPERAN SU TURNO. Estas tres imagenes visten secciones que estan muy por
    debajo del pliegue, pero el navegador las pedia nada mas analizar la hoja y competian
    por el ancho de banda con el hero: 166 KB de Travesia_home.webp entrando a la vez que
    el fondo del hero. Ahora la regla no trae direccion —`var(--fondo-diferido, none)`— y
    `js/fondos-diferidos.js` la rellena cuando la seccion se acerca a la pantalla.        */
    La direccion vive en el atributo `data-fondo` del elemento y el JS la escribe en la
    variable. `.petfriendly-card--visual` se queda sin imagen a proposito: esa regla no la
    usa ningun marcado, es codigo muerto.  */

/*  El fondo del hero es una <img> y hay una regla vieja —«Ocultar imagen residual del
    hero»— que hace `.hero img { display:none !important }`. Se le hace sitio a esta y solo
    a esta: mas especifica (dos clases y un tipo frente a una clase y un tipo) y con su
    propio !important, porque contra un !important no vale la especificidad sola.

    Sin esto el hero salia NEGRO —el `background:#000` de .hero__video-bg— en toda la tira
    de fotogramas de Lighthouse, con la imagen descargada pero sin pintar.                 */
.hero .hero__poster { display: block !important; }
.hero .hero__poster img { display: block !important; }

/*  Los horarios de un dia CERRADO se pintaban en #999 sobre blanco (2,84:1). La regla
    original lleva dos clases —`.horario-item--closed .horario-item__days`—, asi que el
    ajuste general de mas arriba, con una sola, no la alcanzaba. Se iguala la
    especificidad para poder corregirla.  */
.horario-item--closed .horario-item__days,
.horario-item--closed .horario-item__time,
.horario-item--cerrado .horario-item__days,
.horario-item--cerrado .horario-item__time { color: #747474; }

/* ============================================================================
   SECCIONES DE ABAJO: QUE EL NAVEGADOR NO LAS TRABAJE HASTA QUE HAGAN FALTA

   La portada son ~12.000 px de alto, 1.731 elementos y 1.682 selectores distintos.
   Medido con Lighthouse en produccion el 2026-09-07, en movil se iban **1.090 ms en
   «estilo y diseno»** —mas que en ejecutar todo el JavaScript junto— calculando la
   posicion de secciones que estan a nueve pantallas de distancia y que nadie ha visto.

   `content-visibility: auto` le dice al navegador que se salte estilo, diseno y pintado
   de lo que esta fuera de pantalla, y que lo haga cuando se acerque. `contain-intrinsic-size`
   le da mientras tanto un alto de mentira para que la barra de desplazamiento no baile;
   con la palabra `auto` delante, en cuanto la seccion se dibuja una vez el navegador
   recuerda su alto REAL y ya no hace falta acertar.

   Se dejan fuera el hero y la franja de confianza: son lo primero que se ve y aplicarles
   contencion no ahorra nada.

   ⚠️ Crea un contexto de contencion: si algun dia una seccion necesita que algo se le
   salga por fuera (un `position: sticky` que sobresalga, un menu desplegable que
   desborde), esa seccion hay que sacarla de esta regla.
   ============================================================================ */
main > section:not(.hero):not(.trust-bar),
main > div:not(.hero):not(.trust-bar):not(.topbar) {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/*  El pie y el bloque de texto para buscadores van igual: estan al final de 12.000 px de
    pagina y nadie los ve al abrir.  */
.site-footer,
.noscript-content {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}