/* =============================================================
   dossier.css — sistema visual del Dossier de Raúl Capote Braña
   Extraído del CSS inline de /dossier.html (fidelidad byte a byte)
   + componentes nuevos (landing mobile-first, cards de territorio,
     topbar de subpágina). NO toca schema/JSON-LD ni firebase.json.
   ============================================================= */

/* ===== bloque 1 (heredado de dossier.html inline) ===== */
:root {
            --bg-color: #0a0a0a;
            --text-color: #e0e0e0;
            --text-dim: #888;
            --accent-color: #fff;
            --border-color: rgba(255, 255, 255, 0.1);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
            --font-serif: 'Playfair Display', serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-main);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: var(--accent-color);
        }

        /* Layout Structure */
        .wrapper {
            display: grid;
            grid-template-columns: 1fr;
            min-height: 100vh;
        }

        @media (min-width: 1024px) {
            .wrapper {
                grid-template-columns: 350px 1fr;
                /* Fixed Sidebar + Scrollable Main */
            }
        }

        /* Sidebar Styling */
        .sidebar {
            background-color: var(--bg-color);
            padding: 3rem 2rem;
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        @media (min-width: 1024px) {
            .sidebar {
                border-bottom: none;
                border-right: 1px solid var(--border-color);
                height: 100vh;
                position: fixed;
                width: 350px;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 4rem 2.5rem;
            }
        }

        .profile-header {
            margin-bottom: 3rem;
        }

        .dossier-eyebrow {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: var(--text-dim);
            margin-bottom: 0.75rem;
            opacity: 0.85;
        }

        .name {
            font-family: var(--font-serif);
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 0.5rem;
            letter-spacing: -0.02em;
        }

        .title {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--text-dim);
            margin-bottom: 2rem;
        }

        /* Índice de ramas — sticky vía sidebar fija en desktop; en móvil queda arriba del stack */
        html { scroll-behavior: smooth; }
        .rama-group, #formacion { scroll-margin-top: 1.5rem; }
        .rama-nav {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            margin-bottom: 2.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-color);
        }
        .rama-nav a {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--text-dim);
            text-decoration: none;
            opacity: 0.7;
            transition: color 0.25s ease, opacity 0.25s ease;
        }
        .rama-nav a:hover,
        .rama-nav a.active { color: var(--text-color); opacity: 1; }
        .rama-nav a.active::before { content: "— "; }
        .rama-nav .rama-nav-coda {
            margin-top: 0.4rem;
            padding-top: 0.7rem;
            border-top: 1px dashed var(--border-color);
            font-size: 0.72rem;
            opacity: 0.55;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            font-size: 0.95rem;
            margin-bottom: 3rem;
        }

        .contact-item {
            display: flex;
            flex-direction: column;
        }

        .contact-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-dim);
            margin-bottom: 0.2rem;
        }

        .profile-summary {
            font-size: 0.95rem;
            color: #ccc;
            line-height: 1.7;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
        }

        .profile-summary p + p {
            margin-top: 1.2rem;
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: auto;
            padding: 1rem 0;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--text-dim);
            border-top: 1px solid transparent;
            /* Spacer */
        }

        @media (max-width: 1023px) {
            .back-btn {
                margin-top: 2rem;
                border: 1px solid var(--border-color);
                padding: 1rem 2rem;
                border-radius: 50px;
                width: 100%;
                justify-content: center;
            }
        }

        .back-btn:hover {
            color: #fff;
        }

        /* Main Content Styling */
        .main-content {
            padding: 3rem 1.5rem;
            max-width: 900px;
            margin: 0 auto;
        }

        @media (min-width: 1024px) {
            .main-content {
                grid-column: 2;
                padding: 6rem 5rem;
                margin: 0;
                max-width: 1000px;
            }
        }

        section {
            margin-bottom: 6rem;
            opacity: 0;
            animation: fadeIn 1s ease forwards;
        }

        section:nth-child(1) {
            animation-delay: 0.2s;
        }

        section:nth-child(2) {
            animation-delay: 0.3s;
        }

        section:nth-child(3) {
            animation-delay: 0.4s;
        }

        section:nth-child(4) {
            animation-delay: 0.5s;
        }

        section:nth-child(5) {
            animation-delay: 0.6s;
        }

        section:nth-child(6) {
            animation-delay: 0.7s;
        }

        .dossier-footer {
            margin-top: 1rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
            color: var(--text-dim);
            font-size: 0.75rem;
            letter-spacing: 0.12em;
            line-height: 1.8;
            text-transform: uppercase;
        }

        .dossier-footer p {
            margin: 0;
        }

        .section-title {
            font-family: var(--font-main);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--text-dim);
            margin-bottom: 3rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .section-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--border-color), transparent);
        }

        .section-lead {
            font-family: var(--font-serif);
            font-size: 1rem;
            color: var(--text-dim);
            line-height: 1.7;
            margin: -1.5rem 0 2.5rem;
            max-width: 64ch;
        }

        /* ELD Zona 2 · Síntesis general */
        .dossier-synthesis {
            max-width: 720px;
        }

        .dossier-synthesis .synthesis-lead {
            font-family: var(--font-serif);
            font-size: 1.35rem;
            line-height: 1.7;
            color: #e8e8e8;
            margin: 0 0 1.5rem;
        }

        .dossier-synthesis .synthesis-body {
            font-family: var(--font-serif);
            font-size: 1.05rem;
            line-height: 1.75;
            color: var(--text-dim);
            margin: 0;
        }

        @media (min-width: 1024px) {
            .dossier-synthesis .synthesis-lead {
                font-size: 1.5rem;
            }
        }

        /* Highlights Grid */
        .highlights-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            font-family: var(--font-serif);
        }

        @media (min-width: 768px) {
            .highlights-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .highlight-card {
            padding: 2.5rem;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        a.highlight-card {
            display: block;
            color: inherit;
            text-decoration: none;
        }

        a.highlight-card:hover {
            color: inherit;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10020;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

        .modal-wrapper {
            position: relative;
            width: 90%;
            max-width: 1000px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal-overlay.active .modal-wrapper {
            transform: scale(1);
        }

        .modal-content {
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
        }

        .modal-content iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        .close-modal-btn {
            position: absolute;
            top: -50px;
            right: 0;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
            padding: 12px 24px;
            border-radius: 50px;
            cursor: pointer;
            font-family: var(--font-main);
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            z-index: 10021;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }

        .close-modal-btn:hover {
            background: #fff;
            color: #000;
            transform: scale(1.05);
        }

        .rotate-hint {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10015;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .rotate-hint .phone-icon {
            width: 40px;
            height: 64px;
            border: 2px solid rgba(255, 255, 255, 0.6);
            border-radius: 6px;
            position: relative;
            animation: rotatePhoneModal 2.5s infinite ease-in-out;
        }

        .rotate-hint .phone-icon::before {
            content: '';
            position: absolute;
            top: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 2px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 4px;
        }

        .rotate-hint p {
            margin-top: 1rem;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            text-align: center;
            opacity: 0;
            animation: fadeInOutModal 2.5s infinite ease-in-out;
        }

        @keyframes rotatePhoneModal {
            0% {
                transform: rotate(0deg);
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            50% {
                transform: rotate(-90deg);
                opacity: 1;
            }

            80% {
                opacity: 0;
            }

            100% {
                transform: rotate(-90deg);
                opacity: 0;
            }
        }

        @keyframes fadeInOutModal {
            0%,
            15% {
                opacity: 0;
            }

            30%,
            65% {
                opacity: 1;
            }

            80%,
            100% {
                opacity: 0;
            }
        }

        .highlight-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 40%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        @media (hover: hover) and (pointer: fine) {
            .highlight-card:hover::before {
                opacity: 1;
            }
        }

        .highlight-text {
            font-family: var(--font-serif);
            font-size: 1.25rem;
            line-height: 1.5;
            color: #ececec;
            position: relative;
            z-index: 1;
        }

        .highlight-text strong {
            color: #fff;
            font-weight: 700;
        }

        .highlight-text em {
            color: var(--text-dim);
            font-style: italic;
        }

        /* Filmography List */
        .entry-list {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .entry {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            transition: transform 0.3s ease;
        }

        .entry:last-child {
            border-bottom: none;
        }

        @media (min-width: 768px) {
            .entry {
                grid-template-columns: 80px 1fr;
                gap: 2rem;
                padding-bottom: 1.5rem;
            }
        }

        .entry:hover {
            transform: translateX(5px);
        }

        .entry-year {
            font-family: var(--font-main);
            font-size: 0.9rem;
            color: var(--text-dim);
            font-weight: 300;
        }

        .entry-content {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .entry-title {
            font-family: var(--font-serif);
            font-size: 1.4rem;
            font-weight: 400;
            color: #fff;
            line-height: 1.2;
        }

        .entry-subtitle {
            font-size: 0.9rem;
            color: #aaa;
            font-style: italic;
        }

        .entry-details {
            font-size: 0.9rem;
            color: var(--text-dim);
            margin-top: 0.2rem;
        }

        .entry-role {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #fff;
            margin-top: 0.5rem;
            width: fit-content;
        }

        .festival-badge {
            display: block;
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: #e0e0e0;
            border-left: 2px solid #555;
            padding-left: 0.8rem;
        }

        /* Cine & TV Editorial Prototype */
        .cine-section-lead {
            max-width: 720px;
            margin-bottom: 2.5rem;
            font-family: var(--font-serif);
            font-size: 1.1rem;
            line-height: 1.75;
            color: #d8d8d8;
        }

        .cine-program-note {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 0.8rem 0;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--text-dim);
        }

        .cine-featured-spread {
            display: grid;
            grid-template-columns: 86px 1fr;
            gap: 2.25rem;
            margin-bottom: 3rem;
            padding: 2rem 0 2.25rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            position: relative;
        }

        .cine-featured-spread::before {
            content: "";
            position: absolute;
            top: 0;
            left: 86px;
            width: 1px;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
        }

        .cine-feature-index {
            font-family: var(--font-serif);
            font-size: clamp(3.5rem, 7vw, 5.8rem);
            line-height: 0.85;
            color: rgba(255, 255, 255, 0.16);
        }

        .cine-feature-body {
            min-width: 0;
        }

        .cine-feature-meta,
        .cine-compact-meta {
            font-family: var(--font-main);
            font-size: 0.72rem;
            line-height: 1.7;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--text-dim);
        }

        .cine-feature-title {
            margin: 0.45rem 0 0.3rem;
            font-family: var(--font-serif);
            font-size: clamp(3.15rem, 8vw, 6.25rem);
            font-weight: 400;
            line-height: 0.9;
            color: #fff;
        }

        .cine-feature-subtitle {
            font-size: 0.95rem;
            color: #aaa;
            font-style: italic;
        }

        .cine-feature-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.7rem;
            margin: 1.2rem 0;
        }

        .cine-feature-badges span,
        .cine-compact-role {
            display: inline-block;
            width: fit-content;
            padding: 0.2rem 0.55rem;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 3px;
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.11em;
            color: #f4f4f4;
        }

        .cine-feature-copy {
            max-width: 700px;
            font-family: var(--font-serif);
            font-size: 1.12rem;
            line-height: 1.72;
            color: #ececec;
        }

        .cine-feature-details {
            max-width: 700px;
            margin-top: 1.25rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .cine-feature-details summary {
            width: fit-content;
            cursor: pointer;
            list-style: none;
            font-family: var(--font-main);
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: #bbb;
            transition: color 0.25s ease;
        }

        .cine-feature-details summary::-webkit-details-marker {
            display: none;
        }

        .cine-feature-details summary::marker {
            content: "";
        }

        .cine-feature-details summary:hover,
        .cine-feature-details summary:focus-visible,
        .cine-feature-details[open] summary {
            color: #fff;
        }

        .cine-feature-details summary:focus-visible,
        .cine-feature-link:focus-visible {
            outline: 1px solid rgba(255, 255, 255, 0.4);
            outline-offset: 4px;
        }

        .cine-feature-details p {
            margin-top: 0.8rem;
            font-family: var(--font-serif);
            font-size: 1rem;
            line-height: 1.65;
            color: #cfcfcf;
        }

        .cine-feature-link {
            display: inline-block;
            margin-top: 1.1rem;
            font-family: var(--font-main);
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #f2f2f2;
            border-bottom: 1px solid rgba(255, 255, 255, 0.35);
            padding-bottom: 0.15rem;
        }

        .cine-feature-link:hover {
            color: #fff;
            border-bottom-color: #fff;
        }

        .cine-compact-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2.25rem 2rem;
        }

        .cine-compact-card {
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.09);
        }

        .cine-compact-title {
            margin: 0.5rem 0 0.35rem;
            font-family: var(--font-serif);
            font-size: 1.55rem;
            font-weight: 400;
            line-height: 1.15;
            color: #fff;
        }

        .cine-compact-subtitle,
        .cine-compact-note {
            font-size: 0.9rem;
            line-height: 1.55;
            color: #aaa;
        }

        .cine-compact-note {
            margin-top: 0.8rem;
            color: #d8d8d8;
        }

        .cine-compact-role {
            margin-top: 0.85rem;
        }

        .cine-archive-toggle {
            margin-top: 3rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .cine-archive-toggle summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            cursor: pointer;
            list-style: none;
            padding: 1rem 0;
            font-family: var(--font-main);
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--text-dim);
            transition: color 0.25s ease;
        }

        .cine-archive-toggle summary::-webkit-details-marker {
            display: none;
        }

        .cine-archive-toggle summary::marker {
            content: "";
        }

        .cine-archive-toggle summary::after {
            content: "+";
            color: rgba(255, 255, 255, 0.55);
            font-size: 1rem;
            line-height: 1;
        }

        .cine-archive-toggle[open] summary::after {
            content: "−";
        }

        .cine-archive-toggle summary:hover,
        .cine-archive-toggle summary:focus-visible,
        .cine-archive-toggle[open] summary {
            color: #fff;
        }

        .cine-archive-toggle summary:focus-visible {
            outline: 1px solid rgba(255, 255, 255, 0.4);
            outline-offset: 4px;
        }

        .cine-archive-rows {
            padding-bottom: 0.75rem;
        }

        .cine-archive-row {
            display: grid;
            grid-template-columns: 72px 1fr;
            gap: 1.25rem;
            padding: 1rem 0;
            border-top: 1px solid rgba(255, 255, 255, 0.055);
        }

        .cine-archive-year {
            font-family: var(--font-main);
            font-size: 0.78rem;
            color: var(--text-dim);
            letter-spacing: 0.08em;
        }

        .cine-archive-title {
            font-family: var(--font-serif);
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 1.2;
            color: #fff;
            margin-bottom: 0.25rem;
        }

        .cine-archive-meta,
        .cine-archive-role,
        .cine-archive-note {
            font-size: 0.86rem;
            line-height: 1.6;
            color: #aaa;
        }

        .cine-archive-role {
            color: #d8d8d8;
        }

        .cine-archive-note {
            margin-top: 0.25rem;
        }

        @media (max-width: 767px) {
            .cine-program-note {
                align-items: flex-start;
                flex-direction: column;
            }

            .cine-featured-spread {
                grid-template-columns: 1fr;
                gap: 1rem;
                padding-top: 1.4rem;
            }

            .cine-featured-spread::before {
                display: none;
            }

            .cine-feature-index {
                font-size: 3rem;
            }

            .cine-feature-title {
                font-size: clamp(3rem, 16vw, 4.6rem);
            }

            .cine-compact-grid {
                grid-template-columns: 1fr;
                gap: 1.7rem;
            }

            .cine-archive-row {
                grid-template-columns: 56px 1fr;
                gap: 0.9rem;
            }
        }

        /* Education Compact List */
        .edu-item {
            margin-bottom: 2rem;
        }

        .edu-title {
            font-family: var(--font-serif);
            font-size: 1.2rem;
            margin-bottom: 0.2rem;
        }

        .edu-place {
            font-size: 0.9rem;
            color: #aaa;
        }

        .edu-detail {
            font-size: 0.85rem;
            color: var(--text-dim);
            margin-top: 0.5rem;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #0a0a0a;
        }

        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #444;
        }

        /* Language Toggle - Matches index.html styling */
        #lang-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10010;
            font-family: var(--font-main);
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.5);
            user-select: none;
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 50px;
            backdrop-filter: blur(8px);
        }

        #lang-toggle:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.4);
        }

        #lang-toggle svg {
            width: 16px;
            height: 16px;
            opacity: 0.7;
            transition: all 0.4s ease;
        }

        #lang-toggle:hover svg {
            opacity: 1;
            transform: rotate(180deg);
        }

        #lang-toggle span.active {
            color: #fff;
            font-weight: 700;
        }

        @media (min-width: 1024px) {
            #lang-toggle {
                top: 30px;
                right: 30px;
            }
        }

        /* WIP badge retirado (2026-07-08): la página ya no muestra estado de
           construcción en público. Estilos eliminados a propósito. */


/* ===== bloque 2 (heredado de dossier.html inline) ===== */
/* FILM GRAIN TEXTURE */
        .film-grain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* SCROLL REVEAL ANIMATION */
        .reveal-element {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .reveal-element.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Auditoría a11y · respeta prefers-reduced-motion: neutraliza animaciones continuas
           (shimmer, pulse-dot, modal rotate/fade) y los reveals con desplazamiento, sin ocultar contenido
           (las animaciones 'forwards' saltan a su estado final). */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
            .reveal-element { opacity: 1 !important; transform: none !important; }
        }

        /* SPOTLIGHT EFFECT ON LISTS */
        .entry-list:hover .entry {
            opacity: 0.4;
            filter: grayscale(100%) blur(1px);
            transition: all 0.4s ease;
        }

        .entry-list .entry:hover {
            opacity: 1;
            filter: grayscale(0%) blur(0);
            transform: translateX(10px) scale(1.02);
            z-index: 10;
        }

        .entry-list .entry {
            /* Reset specific transform for the hover effect to work cleanly */
            transition: all 0.4s ease;
        }

        /* HIGHLIGHTS HOVER */
        @media (hover: hover) and (pointer: fine) {
            .highlights-grid:hover .highlight-card {
                opacity: 0.5;
            }

            .highlights-grid .highlight-card:hover {
                opacity: 1;
                transform: translateY(-5px);
                background: rgba(255, 255, 255, 0.05);
                border-color: rgba(255, 255, 255, 0.3);
            }
        }

        @media (max-width: 1024px) and (orientation: portrait) {
            .modal-overlay.active .rotate-hint {
                display: flex;
            }
        }

        .highlight-card {
            transition: all 0.4s ease;
        }

        /* TYPOGRAPHY SHIMMER */
        .name {
            background: linear-gradient(90deg, #fff, #888, #fff);
            background-size: 200% auto;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 5s linear infinite;
        }

        @keyframes shimmer {
            to {
                background-position: 200% center;
            }
        }

/* =============================================================
   COMPONENTES NUEVOS · Dossier mobile-first (2026-07-08)
   Landing por territorios + subpáginas. Prioridad: móvil 390px.
   ============================================================= */

/* ---------- LANDING ---------- */
.dossier-landing {
    max-width: 760px;
    margin: 0 auto;
    padding: 5.5rem 1.4rem 4rem;
}

@media (min-width: 1024px) {
    .dossier-landing {
        padding: 7rem 2rem 5rem;
    }
}

.landing-hero {
    margin-bottom: 2.5rem;
}

.landing-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--text-dim);
    margin-bottom: 1.1rem;
    opacity: 0.85;
}

.landing-name {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.02;
    font-size: clamp(2.6rem, 12vw, 4.6rem);
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #fff, #888, #fff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 5s linear infinite;
}

.landing-role {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text-dim);
    line-height: 1.7;
    max-width: 40ch;
}

.landing-synthesis {
    margin: 2.5rem 0 3.25rem;
    max-width: 60ch;
}

.landing-synthesis .lead {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 5.4vw, 1.6rem);
    line-height: 1.5;
    color: #ececec;
    margin: 0 0 1.1rem;
}

.landing-synthesis .body {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin: 0;
}

/* ---------- CARDS DE TERRITORIO ---------- */
.territory-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .territory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

.territory-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.6rem 1.5rem;
    min-height: 140px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.territory-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.territory-index {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.32);
}

.territory-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.18;
    color: #fff;
    position: relative;
    z-index: 1;
}

.territory-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-dim);
    position: relative;
    z-index: 1;
}

.territory-arrow {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #cfcfcf;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: gap 0.3s ease, color 0.3s ease;
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .territory-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.05);
    }

    .territory-card:hover::before {
        opacity: 1;
    }

    .territory-card:hover .territory-arrow {
        color: #fff;
        gap: 0.75rem;
    }
}

.territory-card:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: 4px;
}

/* Entrada suave y escalonada (reutiliza @keyframes fadeIn; en
   prefers-reduced-motion salta al estado final por ser 'forwards'). */
.territory-card {
    opacity: 0;
    animation: fadeIn 0.85s ease forwards;
}

.territory-card:nth-child(1) { animation-delay: 0.10s; }
.territory-card:nth-child(2) { animation-delay: 0.18s; }
.territory-card:nth-child(3) { animation-delay: 0.26s; }
.territory-card:nth-child(4) { animation-delay: 0.34s; }
.territory-card:nth-child(5) { animation-delay: 0.42s; }
.territory-card:nth-child(6) { animation-delay: 0.50s; }

/* ---------- CONTACTO / CV (landing) ---------- */
.landing-contact {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color);
    scroll-margin-top: 5.5rem;
}

.landing-contact h2 {
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    margin-bottom: 1.6rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cv-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.8rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #f2f2f2;
    transition: all 0.3s ease;
}

.cv-download-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* ---------- SUBPÁGINA ---------- */
.dossier-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim);
}

.topbar-back svg {
    width: 16px;
    height: 16px;
}

.topbar-back:hover {
    color: #fff;
}

.subpage {
    max-width: 900px;
    margin: 0 auto;
    padding: 5.75rem 1.4rem 4rem;
}

@media (min-width: 1024px) {
    .subpage {
        padding: 6.5rem 3rem 5rem;
        max-width: 960px;
    }
}

.subpage-header {
    margin-bottom: 3rem;
}

.subpage-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-dim);
    margin-bottom: 0.9rem;
    opacity: 0.85;
}

.subpage-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 8.5vw, 3.1rem);
    line-height: 1.05;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

.subpage-lead {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text-dim);
    max-width: 64ch;
    margin: 0;
}

/* Nav inferior entre territorios */
.territory-footer-nav {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    align-items: baseline;
}

.territory-footer-nav .tfn-label {
    width: 100%;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 0.2rem;
}

.territory-footer-nav a {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
}

.territory-footer-nav a:hover {
    color: #fff;
}

.territory-footer-nav a.is-current {
    color: #fff;
    opacity: 0.45;
    pointer-events: none;
}

/* La subpágina usa <section> heredado: neutraliza el margen inferior gigante
   del último bloque para que el footer-nav respire sin exceso. */
.subpage section:last-of-type {
    margin-bottom: 2rem;
}

/* =============================================================
   RETRATO DE FICHA — imagen del dossier (2026-07-28)

   Contrato: el retrato SOLO existe cuando hay archivo. Una ficha
   sin <figure class="ficha-retrato"> se renderiza exactamente
   igual que antes de este componente: no hay hueco, ni marco, ni
   reserva de espacio. Por eso la columna de imagen vive en un
   modificador (--retrato) y no en la regla base.

   Cómo se añade un retrato nuevo:
   1. El <figure> va como hijo DIRECTO del contenedor de la ficha
      (.entry o .cine-featured-spread), no dentro del texto.
   2. El contenedor recibe su modificador: .entry--retrato o
      .cine-featured-spread--retrato.
   3. El <img> lleva SIEMPRE width/height reales del archivo (evita
      CLS), loading="lazy", decoding="async" y un alt descriptivo.
   4. <picture> con WebP + original como fallback, igual que el
      mosaico de /actor/.

   No se recorta: cada imagen conserva su proporción original, así
   que el encuadre aprobado se respeta tal cual y no hace falta
   dirección de arte por pieza.
   ============================================================= */
.ficha-retrato {
    margin: 0;
    width: var(--retrato-w, 140px);
    max-width: 100%;
}

.ficha-retrato picture {
    display: block;
}

.ficha-retrato img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Modificador para .entry (listas de Teatro / Docencia / Formación) ---
   Móvil: .entry es de una columna, el retrato se apila arriba a la
   izquierda con su ancho fijo. Escritorio: se abre una tercera
   columna entre el año y el contenido. */
@media (min-width: 768px) {
    .entry--retrato {
        grid-template-columns: 80px var(--retrato-w, 140px) 1fr;
    }
}

/* --- Modificador para .cine-featured-spread (ficha destacada de Cine & TV) ---
   Solo escritorio: índice · retrato · cuerpo. Por debajo de 768px NO se
   toca la rejilla: la ficha ya colapsa a una columna (regla del diseño
   móvil, más arriba en este archivo) y el retrato se apila entre el
   índice y el cuerpo. Acotarlo a min-width es obligatorio, no cosmético:
   sin el @media esta regla ganaría a la móvil por orden de aparición
   —misma especificidad— y estrecharía la columna de texto. */
@media (min-width: 768px) {
    .cine-featured-spread--retrato {
        grid-template-columns: 86px var(--retrato-w, 140px) 1fr;
    }
}

/* --- Cartel + retrato en la misma columna (ficha destacada) ---
   La rejilla del spread tiene tres celdas y el retrato ocupa la del
   medio. Para que una ficha lleve DOS imágenes —el cartel, que dice
   qué película es, y el retrato, que es la puerta al fragmento— hay
   que envolverlas: si fueran hermanas sueltas, la segunda caería en
   la celda del cuerpo de texto y partiría la ficha.

   Móvil apila el spread en una columna, así que ahí las dos imágenes
   van EN FILA (una al lado de otra, encogiendo si hace falta): dos
   carteles de 140px apilados dejarían una tira vertical larguísima
   antes de llegar al texto. De 768px en adelante la celda es estrecha
   y la fila pasa a columna. */
.ficha-imagenes {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.ficha-imagenes .ficha-retrato {
    flex: 0 1 var(--retrato-w, 140px);
    min-width: 0;
}

@media (min-width: 768px) {
    .ficha-imagenes {
        flex-direction: column;
        gap: 0.9rem;
    }

    .ficha-imagenes .ficha-retrato {
        flex: none;
        width: var(--retrato-w, 140px);
    }

    /* El cartel de la ficha destacada es la portada de la sección: se le
       da algo más de ancho que a los de la rejilla para que su tipografía
       se lea. Va en la variable, no en la regla, porque la columna de la
       rejilla se calcula con ella. */
    .cine-featured-spread--cartel {
        --retrato-w: 168px;
    }
}

/* --- Modificador para .cine-compact-card (rejilla de Cine & TV) ---
   Aquí el punto de corte obvio es el equivocado. El ancho de esta tarjeta NO
   crece de forma monótona con la ventana: la rejilla pasa de 1 a 2 columnas en
   768px, así que la tarjeta mide 722px justo ANTES del corte y 346px justo
   DESPUÉS. Medido en navegador: 315px a 360 · 345px a 390 · 435→722px entre 480
   y 767 · 346px a 768 · 372px a 820 · 412px a 900 · 416px de 1024 en adelante.

   El cartel ocupa 140px más 20 de hueco. La columna solo se abre donde al texto
   le quedan 220px o más; en los dos tramos estrechos —móvil, y ese 768–899 de
   dos columnas apretadas— el cartel se apila encima. De ahí la consulta doble:
   no es rebuscada, es la forma exacta de esos dos tramos.

   Sin cartel, la tarjeta se renderiza igual que siempre: el modificador
   --cartel no existe si no hay archivo (mismo contrato que .ficha-retrato). */
.cine-compact-card--cartel .ficha-retrato {
    margin-bottom: 1.1rem;
}

@media (min-width: 480px) and (max-width: 767px), (min-width: 900px) {
    .cine-compact-card--cartel {
        display: grid;
        grid-template-columns: var(--retrato-w, 140px) 1fr;
        column-gap: 1.25rem;
        align-items: start;
    }

    .cine-compact-card--cartel .ficha-retrato {
        margin-bottom: 0;
    }
}

/* =============================================================
   FRAGMENTO — el vídeo como prueba de la ficha (2026-07-28)

   El dossier afirma («interpreté a Esteban en La Piscina»); el
   fragmento lo demuestra. Por eso vive pegado a su ficha y no en
   una galería aparte: es evidencia, no escaparate.

   Dos formas del mismo gesto, según la ficha tenga o no retrato:
   · con retrato → el propio retrato es la puerta (.ficha-retrato--fragmento)
   · sin retrato → enlace de texto (.ficha-fragmento), en el mismo
     idioma tipográfico que «Ver web Berlinale →»

   Ambas llevan href real a YouTube Y data-video-src: sin JS el
   enlace funciona; con JS lo intercepta el modal que esta página ya
   tenía. No se importa el motor moviola de La Manigua: el espacio
   personal conserva su propio vocabulario.
   ============================================================= */
/* block + fit-content, NO inline-block: el subrayado debe ceñirse al texto,
   pero el enlace tiene que empezar línea propia. Si no, en las fichas donde
   el último elemento es el badge de rol (p. ej. Fenómenos Naturales) el
   enlace se le pega al costado y los dos se apelotonan. */
.ficha-fragmento {
    display: block;
    width: fit-content;
    margin-top: 0.85rem;
    font-family: var(--font-main);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 0.15rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.ficha-fragmento:hover,
.ficha-fragmento:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

/* --- El retrato como puerta al fragmento --- */
.ficha-retrato--fragmento a {
    display: block;
    position: relative;
}

/* El disparador se ve SIEMPRE, no solo en hover: en táctil no hay
   hover y nada delataría que la imagen se puede abrir. */
.ficha-retrato-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.45);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.ficha-retrato-play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -6px 0 0 -3px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
}

.ficha-retrato--fragmento a:hover .ficha-retrato-play,
.ficha-retrato--fragmento a:focus-visible .ficha-retrato-play {
    background: rgba(10, 10, 10, 0.12);
    border-color: #fff;
}

.ficha-retrato--fragmento a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .ficha-fragmento,
    .ficha-retrato-play {
        transition: none;
    }
}