html.hero-locked { scroll-behavior: auto; }
        html.hero-locked body { overflow: hidden; }

        ::selection { background: rgba(var(--accent-gold-rgb), 0.35); }

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

        
        
        :target,
        .contenido h2[id], .contenido h3[id], .contenido h4[id],
        #contenido-jirafa {
            scroll-margin-top: 140px;
        }

        .lectura-barra { height: 3px; background: var(--border-color); overflow: hidden; }
        .lectura-barra span {
            display: block; height: 100%; width: 100%;
            transform: scaleX(0); transform-origin: left center;
            background: var(--accent-gold);
        }
        
        .lectura-barra.marian {
            height: 0; opacity: 0;
            transition: height .45s cubic-bezier(0.16, 1, 0.3, 1), opacity .45s;
        }
        .lectura-barra.marian span { background: var(--text-white); }
        html.lectura-dos .lectura-barra.marian { height: 3px; opacity: 1; }
        @media (prefers-reduced-motion: reduce) { .lectura-barra.marian { transition: none; } }

        
        .indice {
            position: fixed; z-index: 40;
            left: 24px; top: 150px;
            width: 230px;
            max-height: calc(100vh - 150px);
            overflow: auto;
            font-family: var(--font-heading);
            opacity: 0; pointer-events: none;
            transition: opacity .7s ease;
        }
        
        html.indice-visible .indice { opacity: 1; pointer-events: auto; }
        .indice .indice-titulo {
            font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
            color: var(--accent-gold); margin-bottom: 10px;
        }
        .indice ul { list-style: none; }
        .indice a {
            display: block; padding: 5px 10px;
            color: var(--text-muted); text-decoration: none;
            font-size: .85rem; line-height: 1.35;
            border-left: 2px solid var(--border-color);
            transition: var(--transition);
        }
        .indice a:hover { color: var(--accent-gold); border-left-color: var(--accent-gold); }
        
        .indice a.activo {
            color: var(--text-white);
            border-left-color: var(--accent-gold);
            background: var(--eyebrow-bg);
        }
        .indice li.sub a { padding-left: 22px; font-size: .78rem; }
        @media (max-width: 1279px) { .indice { display: none; } }

        
        .hero {
            position: relative;
            margin-top: var(--altura-header, 126px);
            min-height: calc(100vh - var(--altura-header, 126px));
            min-height: calc(100dvh - var(--altura-header, 126px));
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute; inset: 0; z-index: 0;
            background:
                var(--fondo-jirafa) center / cover no-repeat,
                radial-gradient(ellipse 60% 50% at 18% 28%, rgba(234, 167, 59, 0.20), transparent 62%),
                radial-gradient(ellipse 45% 40% at 82% 18%, rgba(234, 167, 59, 0.12), transparent 60%),
                radial-gradient(ellipse 75% 60% at 70% 85%, rgba(107, 78, 61, 0.45), transparent 66%),
                radial-gradient(ellipse 50% 45% at 30% 78%, rgba(64, 46, 30, 0.38), transparent 60%),
                var(--bg-primary);
            opacity: 0;
            will-change: opacity;
        }
        .hero-bg::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse 105% 90% at 50% 45%, transparent 55%, rgba(8, 9, 13, 0.78) 100%);
        }

        .hero-media {
            position: absolute; z-index: 1;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 300px; height: 400px;
            max-width: 95vw; max-height: 85vh;
            border-radius: 18px; overflow: hidden;
            border: 1px solid rgba(var(--accent-gold-rgb), 0.28);
            box-shadow: 0 0 60px rgba(0, 0, 0, 0.55), 0 0 120px rgba(var(--accent-gold-rgb), 0.07);
            will-change: width, height;
        }
        .hero-media img {
            width: 100%; height: 100%;
            
            object-fit: cover; object-position: var(--encuadre, center 22%);
            display: block;
        }
        .hero-media-overlay {
            position: absolute; inset: 0;
            background: rgba(8, 9, 13, 0.9);
            opacity: .55;
        }

        .hero-caption {
            position: absolute; left: 20px; bottom: 18px; right: 20px;
            display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
            opacity: 0; transform: translateY(10px);
            transition: opacity .6s ease .15s, transform .6s ease .15s;
            pointer-events: none;
        }
        html.is-expanded .hero-caption, html.static-hero .hero-caption { opacity: 1; transform: translateY(0); }
        .hero-caption .pill {
            font-family: var(--font-heading); font-weight: 500; font-size: .78rem;
            letter-spacing: .08em; text-transform: uppercase;
            color: #f3f4f6; background: rgba(8, 9, 13, 0.72);
            border: 1px solid var(--border-hover);
            padding: 5px 12px; border-radius: 999px;
        }
        .hero-caption .nombre {
            font-family: var(--font-heading); font-weight: 700;
            font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1;
            color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
        }

        .hero-title-wrap {
            position: relative; z-index: 2;
            display: flex; flex-direction: column; align-items: center;
            text-align: center;
            padding: 0 16px;
            will-change: opacity;
        }
        html.is-expanded .hero-title-wrap { pointer-events: none; }

        .hero-title {
            font-family: var(--font-heading);
            font-weight: 700;
            text-transform: uppercase;
            line-height: .92;
            letter-spacing: -0.015em;
            display: flex; flex-direction: column; align-items: center; gap: .04em;
        }
        .hero-title .l1, .hero-title .l2 {
            display: block;
            will-change: transform, filter;
            text-shadow: 0 4px 34px rgba(8, 9, 13, 0.55);
        }
        
        .hero-title .l1 { font-size: clamp(2.4rem, 8.5vw, 7rem); color: var(--text-white); }
        .hero-title .l2 { font-size: clamp(1.15rem, 3.6vw, 3rem); color: var(--accent-gold); }

        .hero-sub {
            margin-top: 22px;
            font-family: var(--font-body); font-style: italic;
            font-size: clamp(1rem, 2.2vw, 1.25rem);
            color: var(--text-muted);
            max-width: 40ch;
        }

        .hero-hint {
            position: absolute; z-index: 3;
            bottom: max(26px, env(safe-area-inset-bottom, 0px));
            left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            background: none; border: none; cursor: pointer;
            font-family: var(--font-heading); font-weight: 500; font-size: .85rem;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--text-muted);
            transition: color .3s;
        }
        .hero-hint:hover { color: var(--accent-gold); }
        .hero-hint .flecha {
            width: 20px; height: 20px;
            animation: hint-bounce 1.8s ease-in-out infinite;
            color: var(--accent-gold);
        }
        @keyframes hint-bounce {
            0%, 100% { transform: translateY(0); opacity: .9; }
            50% { transform: translateY(7px); opacity: .5; }
        }

        
        
        .contenido {
            transition: opacity .7s ease;
        }
        html.content-on .contenido, html.static-hero .contenido { opacity: 1; }

        .section { padding: clamp(64px, 9vw, 110px) 0; }
        .hub-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
        
        .prosa { max-width: 107ch; margin-left: auto; margin-right: auto; }
        @media (min-width: 1280px) {
            .prosa { max-width: min(107ch, calc(100vw - 600px)); }
        }

        .eyebrow {
            display: inline-block;
            font-family: var(--font-heading); font-weight: 600; font-size: .8rem;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--accent-gold); background: var(--eyebrow-bg);
            border: 1px solid var(--border-color);
            padding: 6px 14px; border-radius: 999px;
            margin-bottom: 18px;
        }

        .section-title {
            font-family: var(--font-heading); font-weight: 600;
            font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15;
            margin-bottom: 26px;
            color: var(--text-white);
        }

        .breadcrumb {
            font-family: var(--font-heading); font-size: .85rem;
            color: var(--text-muted);
            margin-bottom: 34px;
        }
        .breadcrumb a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition); }
        .breadcrumb a:hover { color: var(--accent-gold); }
        .breadcrumb .sep { margin: 0 8px; color: var(--accent-gold); }

        .lead-box {
            border-left: 3px solid var(--accent-gold);
            background: var(--glass-bg);
            border-radius: 0 14px 14px 0;
            padding: clamp(20px, 3.5vw, 32px);
            font-size: clamp(1.05rem, 2vw, 1.2rem);
            line-height: 1.75;
        }
        .lead-box strong { font-weight: 700; }

        
        .servicio-box {
            background: var(--trust-bg);
            border: 1px solid var(--trust-border);
            border-radius: 18px;
            padding: clamp(20px, 3.5vw, 32px);
        }
        .servicio-box p {
            font-size: clamp(1rem, 1.8vw, 1.1rem);
            line-height: 1.8;
            margin-bottom: 1em;
        }
        .servicio-box p:last-child { margin-bottom: 0; }
        .servicio-box .encuadre {
            font-family: var(--font-heading);
            font-size: .92rem; color: var(--text-muted);
        }
        .servicio-box a { color: var(--accent-gold); text-decoration: none; border-bottom: 1px solid var(--border-hover); }
        .servicio-box a:hover { color: var(--accent-gold-hover); }

        
        .relato p {
            font-size: clamp(1.02rem, 1.9vw, 1.16rem);
            line-height: 1.85;
            margin-bottom: 1.6em;
            color: var(--text-white);
        }
        .relato p:first-of-type::first-letter {
            font-family: var(--font-heading); font-weight: 700;
            font-size: 3.4em; line-height: .85;
            float: left; padding: .06em .12em 0 0;
            color: var(--accent-gold);
        }
        
        .relato p.dialogo { margin-bottom: .85em; }
        .relato p.dialogo + p:not(.dialogo) { margin-top: 1.6em; }

        
        .relato h3 {
            font-family: var(--font-heading); font-weight: 600;
            font-size: clamp(1.2rem, 2.6vw, 1.55rem);
            margin: 2.2em 0 1em;
            color: var(--text-white);
        }
        .relato h3::before { content: '— '; color: var(--accent-gold); }

        .relato blockquote {
            margin: 2.2em 0;
            padding: 0 clamp(10px, 4vw, 34px);
            font-style: italic;
            font-size: clamp(1.15rem, 2.4vw, 1.45rem);
            line-height: 1.6;
            color: var(--text-white);
            text-align: center;
            position: relative;
        }
        .relato blockquote::before, .relato blockquote::after {
            content: ''; display: block; width: 54px; height: 2px;
            background: var(--accent-gold); opacity: .55;
            margin: 0 auto 1.1em;
        }
        .relato blockquote::after { margin: 1.1em auto 0; }

        .firma-relato {
            margin-top: 2.6em;
            padding-top: 1.5em;
            border-top: 1px solid var(--border-color);
            display: flex; align-items: center; gap: 14px;
            font-family: var(--font-heading);
        }
        .firma-relato img {
            width: 68px; height: 68px; flex: none;
            border-radius: 50%; object-fit: cover;
            border: 2px solid var(--accent-gold);
        }
        .firma-relato .datos { line-height: 1.45; }
        .firma-relato .datos .rol {
            display: block;
            font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
            color: var(--accent-gold);
        }
        .firma-relato .datos strong {
            display: block;
            font-size: 1.05rem; font-weight: 600;
            color: var(--text-white);
        }
        .firma-relato .datos .oficio { display: block; font-size: .85rem; color: var(--text-muted); }
        .firma-relato .datos .oficio a { color: inherit; }
        .firma-relato .datos .oficio a:hover { color: var(--accent-gold); }

        
        .cta-principal { background: var(--lamp-bg); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
        .cta-card {
            max-width: 820px; margin: 0 auto; text-align: center;
        }
        .cta-card .section-title { margin-bottom: 14px; }
        .cta-card > p.intro {
            color: var(--text-muted); font-size: clamp(1rem, 1.9vw, 1.15rem);
            max-width: 56ch; margin: 0 auto 34px;
        }
        .btn-llamar {
            display: inline-flex; align-items: center; gap: 12px;
            font-family: var(--font-heading); font-weight: 700;
            font-size: clamp(1.1rem, 2.6vw, 1.5rem);
            color: var(--on-accent); background: var(--accent-gold);
            padding: 18px clamp(24px, 5vw, 44px); border-radius: 999px;
            text-decoration: none;
            box-shadow: 0 10px 40px rgba(var(--accent-gold-rgb), 0.25);
            transition: var(--transition);
        }
        .btn-llamar:hover { background: var(--accent-gold-hover); transform: translateY(-2px); }
        .btn-llamar svg { width: 22px; height: 22px; flex: none; }

        .cta-reserva { margin-top: 16px; font-family: var(--font-heading); font-size: .95rem; }
        .cta-reserva a { color: var(--text-muted); }
        .cta-reserva a:hover { color: var(--accent-gold); }

        .precios-chips {
            display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
            margin-top: 38px;
        }
        .chip-precio {
            background: var(--bg-card); border: 1px solid var(--glass-border);
            border-radius: 14px; padding: 14px 22px;
            font-family: var(--font-heading);
            display: flex; flex-direction: column; gap: 2px; min-width: 150px;
        }
        .chip-precio.destacado { border-color: var(--border-hover); position: relative; }
        .chip-precio.destacado::after {
            content: 'Recomendado';
            position: absolute; top: -10px; right: 12px;
            font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
            background: var(--accent-gold); color: var(--on-accent);
            padding: 3px 9px; border-radius: 999px;
        }
        .chip-precio .dur { font-size: .85rem; color: var(--text-muted); }
        .chip-precio .eur { font-size: 1.55rem; font-weight: 700; color: var(--text-white); }

        .cta-trust {
            margin-top: 22px; font-family: var(--font-heading);
            font-size: .88rem; color: var(--text-muted);
        }
        .cta-trust .dot { margin: 0 8px; color: var(--accent-gold); }
        .cta-legal { margin-top: 14px; font-size: .82rem; font-family: var(--font-heading); color: var(--text-muted); }
        .cta-legal a { color: var(--text-muted); }
        .cta-legal a:hover { color: var(--accent-gold); }

        
        .ficha {
            background: var(--warm-surface);
            border: 1px solid var(--warm-border);
            border-radius: 22px;
            padding: clamp(26px, 5vw, 56px);
        }
        .firma {
            display: flex; align-items: center; gap: 14px;
            margin-bottom: 34px;
        }
        .firma img {
            width: 68px; height: 68px; border-radius: 50%;
            object-fit: cover; border: 2px solid var(--accent-gold);
            flex: none;
        }
        .firma .quien { font-family: var(--font-heading); font-size: .95rem; line-height: 1.4; }
        .firma .quien strong { display: block; font-weight: 600; color: var(--text-white); }
        .firma .quien span { color: var(--text-muted); font-size: .85rem; }
        .firma .quien a { color: inherit; }

        .ficha h3 {
            font-family: var(--font-heading); font-weight: 600;
            font-size: clamp(1.15rem, 2.4vw, 1.45rem);
            margin: 1.9em 0 .7em;
            color: var(--text-white);
        }

        
        .ficha h4 {
            font-family: var(--font-heading); font-weight: 600;
            font-size: clamp(1rem, 1.9vw, 1.12rem);
            margin: 1.5em 0 .6em;
            padding-left: .7em;
            border-left: 2px solid var(--accent-gold);
            color: var(--text-white);
        }
        .ficha h3:first-of-type { margin-top: 0; }
        .ficha h3::before { content: '— '; color: var(--accent-gold); }
        .ficha p { color: var(--text-white); margin-bottom: 1.1em; line-height: 1.8; font-size: clamp(1rem, 1.8vw, 1.08rem); }
        .ficha p em { color: var(--text-muted); }

        
        .ficha p.pendiente {
            font-family: var(--font-heading); font-size: .92rem;
            color: var(--text-muted); font-style: italic;
            border-left: 2px dashed var(--border-hover);
            padding-left: 14px;
        }

        .caja-limites {
            margin-top: 2.4em;
            background: var(--trust-bg); border: 1px solid var(--trust-border);
            border-left: 3px solid var(--accent-gold);
            border-radius: 0 14px 14px 0;
            padding: 20px 24px;
            font-size: .98rem; line-height: 1.75;
        }
        .caja-limites strong { font-family: var(--font-heading); }

        .ficha .evidencia { margin-top: 1.6em; font-family: var(--font-heading); font-size: .95rem; }
        .ficha .evidencia a { color: var(--accent-gold); text-decoration: none; border-bottom: 1px solid var(--border-hover); }
        .ficha .evidencia a:hover { color: var(--accent-gold-hover); }

        .ficha details {
            margin-top: 2em; font-family: var(--font-heading); font-size: .9rem; color: var(--text-muted);
        }
        .ficha details summary { cursor: pointer; }
        .ficha details p { color: var(--text-muted); font-style: italic; margin-top: .8em; font-size: .9rem; }

        .fechas {
            margin-top: 2em; font-family: var(--font-heading);
            font-size: .82rem; color: var(--text-muted);
        }

        
        .cta-final { text-align: center; }
        .cta-final p.frase {
            font-style: italic; font-size: clamp(1.1rem, 2.3vw, 1.4rem);
            color: var(--text-white); margin-bottom: 14px;
        }
        .cta-final a.tel {
            font-family: var(--font-heading); font-weight: 600;
            font-size: clamp(1.15rem, 2.6vw, 1.5rem);
            color: var(--accent-gold); text-decoration: none;
            border-bottom: 2px solid var(--border-hover);
            transition: var(--transition);
        }
        .cta-final a.tel:hover { color: var(--accent-gold-hover); border-color: var(--accent-gold); }
        .cta-final .alt { margin-top: 12px; font-family: var(--font-heading); font-size: .88rem; color: var(--text-muted); }
        .cta-final .alt a { color: var(--text-muted); }
        .cta-final .alt a:hover { color: var(--accent-gold); }

        
        html.static-hero .hero-bg { opacity: .45 !important; }
        html.static-hero .hero-media-overlay { opacity: .25 !important; }
        html.static-hero .hero-title-wrap {
            position: absolute; z-index: 4; opacity: 1 !important;
            top: max(84px, 12vh);
        }
        html.static-hero .hero-title .l1, html.static-hero .hero-title .l2 {
            transform: none !important; filter: none !important;
            font-size: clamp(1.5rem, 4.2vw, 3rem);
        }
        html.static-hero .hero-sub { display: none; }
        html.static-hero .hero-hint { display: none; }

        @media (max-width: 768px) {