/* =========================================================================
   pages/guia.css
   -------------------------------------------------------------------------
   Extraido de core.css. Solo esta pagina usa estas reglas, asi que
   cargarlas en las demas era peso muerto en el render inicial.
   El orden relativo original se conserva intacto.
   ========================================================================= */

/* =========================================================================
   1 . BLOQUES QUE VIVIAN EN core.css
   ========================================================================= */



/* ======================================================= */
/* === 4. BARRA REPSOL (Scroll Sticky - FIXED)         === */
/* ======================================================= */

#repsol-nav {
    position: fixed;
    /* Colocamos la barra justo DEBAJO del header principal (que mide 60px) */
    top: 60px; 
    left: 0;
    width: 100%;
    height: 60px; /* Altura de la barra dinámica */
    
    background: rgba(10, 10, 10, 0.95); /* Fondo oscuro */
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--color-primary);
    
    /* Z-index menor que el header principal (900) para que salga por debajo */
    z-index: 800; 
    
    /* Empieza escondida hacia arriba */
    transform: translateY(-150%); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.repsol-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.repsol-title {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 15px;
}

.repsol-select {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    max-width: 250px;
    font-family: var(--font-subheading);
    font-weight: bold;
    outline: none;
}

.repsol-select:focus {
    border-color: var(--color-primary);
}

/* ======================================================= */
/* === 5. ZIG-ZAG HYBRID V8 (TEXTO FULL WIDTH)         === */
/* ======================================================= */

.guide-container {
    max-width: 1300px; margin: 0 auto; padding: 60px 20px;
    display: grid; grid-template-columns: 1fr 320px; gap: 60px;
}
@media (max-width: 1024px) { .guide-container { grid-template-columns: 1fr; }
}

.stops-feed { display: flex; flex-direction: column; gap: 80px; }

/* Tarjeta contenedora */
.stop-card-v8 {
    display: flex; flex-direction: column; gap: 30px;
    padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.stop-card-v8:last-child { border-bottom: none; }

/* --- 1. FILA SUPERIOR (IMAGEN + DATOS) --- */
.stop-top-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}

/* Imagen */
.stop-img-frame {
    width: 100%; aspect-ratio: 467/300; position: relative;
    overflow: hidden; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}
.stop-img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.stop-card-v8:hover img { transform: scale(1.05); }
.stop-copyright { margin-top: 8px; font-size: 0.75rem; color: #666; text-align: right; font-family: monospace; }

/* Columna de Datos */
.stop-data-col { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.stop-number-outline {
    font-family: var(--font-heading); font-size: 5rem; line-height: 0.8;
    color: transparent; -webkit-text-stroke: 2px var(--color-primary);
    display: block; margin-bottom: 5px; opacity: 0.8;
}
.stop-title-main {
    font-family: var(--font-heading); font-size: 2.2rem; color: #fff;
    line-height: 1; text-transform: uppercase; margin: 0 0 15px 0;
}
.stop-address-link {
    color: var(--color-text-secondary); text-decoration: none; font-size: 0.9rem;
    border-bottom: 1px dashed #444; padding-bottom: 2px; display: inline-block; margin-bottom: 20px;
}
.stop-address-link:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* --- HUD Grid (Info + Acciones) --- */
.stop-hud-grid {
    background: var(--color-surface); /* Adaptable */
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary); /* Línea naranja marca */
    padding: 15px 20px; 
    display: flex; gap: 20px; align-items: center; justify-content: space-between;
    border-radius: 4px;
}

.hud-info-lines { 
    display: flex; flex-direction: column; gap: 8px; 
    font-size: 0.9rem; color: var(--color-text-secondary); 
    flex-grow: 1;
}
.hud-line i { color: var(--color-primary); width: 18px; text-align: center; margin-right: 5px; }
.hud-line strong { color: var(--color-text-primary); }

/* Columna Acciones Estilizada */
.hud-actions-col { 
    display: flex; 
    flex-direction: column; /* Vertical en escritorio */
    gap: 12px; align-items: center; 
    padding-left: 20px; 
    border-left: 1px solid var(--color-border); 
}

/* BOTONES TÁCTICOS (Estilizados y Pequeños) */
.btn-tactical-icon {
    width: 40px; height: 40px; /* Tamaño compacto */
    border-radius: 50%; /* Circulares */
    background: transparent;
    border: 1px solid var(--color-border); /* Borde sutil adaptable */
    color: var(--color-text-secondary);
    font-size: 1.1rem; /* Icono ajustado */
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    text-decoration: none;
}

/* Hover: Se ilumina en naranja */
.btn-tactical-icon:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
    transform: scale(1.1);
} /* fa-bookmark solid */

/* --- 2. FILA INFERIOR (TEXTO FULL WIDTH) --- */
.stop-bottom-row { width: 100%; margin-top: 10px; }

.stop-narrative { position: relative; }
.narrative-content {
    font-size: 1.05rem; line-height: 1.8; color: #d4d4d4;
    overflow: hidden; transition: max-height 0.5s ease;
}
.narrative-content.collapsed {
    max-height: 120px; /* Solo intro visible */
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.narrative-content strong { color: #fff; }

/* Experiencia Canalla */
.canalla-box {
    margin-top: 30px; padding: 25px; background: rgba(20, 20, 20, 0.6);
    border: 1px dashed var(--color-primary); border-radius: 8px; position: relative;
}
.canalla-title {
    font-family: var(--font-subheading); color: #000; background: var(--color-primary);
    display: inline-block; padding: 4px 10px; font-size: 0.85rem; border-radius: 4px;
    position: absolute; top: -14px; left: 20px; font-weight: bold;
}

/* Botón Leer Más (Corregido para Modo Claro) */
.btn-read-more {
    background: none; 
    border: none; 
    color: var(--color-primary); /* Naranja base */
    font-weight: bold; 
    font-size: 0.9rem; 
    padding: 15px 0; 
    width: 100%; 
    text-align: left;
    cursor: pointer; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    display: flex; 
    align-items: center; 
    gap: 5px; 
    margin-top: 10px;
    transition: color 0.2s ease;
}

.btn-read-more:hover { 
    /* FIX: Usar variable adaptable en vez de #fff fijo */
    color: var(--color-text-primary); 
    text-decoration: underline; 
}

/* 2. Título Brutalista */
.hero-title {
    font-family: var(--font-display);
    min-height: 1.2em;
    contain: layout paint;
    /* Clamp: Mínimo 3rem, Ideal 10vw, Máximo 8rem */
    font-size: clamp(3.5rem, 10vw, 8rem); 
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0;
    color: #fff;
    /* Efecto "Glitch" o Sombra sólida */
    text-shadow: 5px 5px 0px rgba(0,0,0,0.5);
    word-break: break-word; /* Evita desbordamiento en móvil */
}

/* --- 1. HERO TACTICAL V7 (SIEMPRE OSCURO + TÍTULO CONTROLADO) --- */
/* Estos estilos ignoran el modo claro para mantener el drama visual */

.hero-tactical {
    position: relative; width: 100%; min-height: 85vh;
    display: flex; align-items: center; margin-top: -60px;
    padding: 100px 0 60px; overflow: hidden;
    color: #fff !important; /* Forzar texto blanco siempre */
    content-visibility: auto; /* Mejora rendimiento */
    contain: layout paint; /* Aísla el renderizado */
}

.hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    filter: brightness(0.5) contrast(1.1);
}

.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(circle at top left, rgba(0,0,0,0.2), #000);
    opacity: 0.8;
}

.hero-grid {
    position: relative; z-index: 2; width: 100%;
    /* AJUSTE 1: Damos más espacio a la izquierda (1.5fr) para títulos largos */
    display: grid; grid-template-columns: 1.5fr 0.8fr;
    gap: 60px; align-items: center;
}

/* Textos Hero (Forzados a blanco) */
.hero-col-left { color: #fff !important; }

.hero-loc {
    color: var(--color-primary); font-family: var(--font-subheading);
    font-weight: 900; letter-spacing: 2px; margin-bottom: 15px;
    text-transform: uppercase; font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px;
}

/* AJUSTE 2: TÍTULO CONTROLADO */
.hero-title {
    font-family: var(--font-heading);
    
    /* Clamp más suave: Mínimo 2.5rem, Ideal 4.5vw, Máximo 4.5rem */
    /* Esto evita que títulos largos como "La Ruta Prohibida..." se salgan */
    font-size: clamp(2.5rem, 4.5vw, 4.5rem); 
    
    line-height: 1.1; /* Un poco más de aire entre líneas */
    color: #fff !important;
    text-transform: uppercase; margin-bottom: 40px;
    text-shadow: 5px 5px 0px rgba(0,0,0,0.8);
    
    /* Seguridad extra */
    word-break: normal; 
    overflow-wrap: break-word; 
    hyphens: manual;
}

/* ======================================================= */
/* === HERO TACTICAL V7.5 (MIXTO: CRISTAL + SÓLIDO)    === */
/* ======================================================= */

/* 1. HUD STATS (CAJAS DE CRISTAL / GLASSMORPHISM) */
/* Solo cambiamos esto para que sea elegante y traslúcido */
.hero-specs-grid { 
    display: flex; gap: 20px; flex-wrap: wrap; 
}

.spec-box {
    /* Efecto Cristal */
    background: rgba(255, 255, 255, 0.05); /* Muy transparente */
    backdrop-filter: blur(10px);           /* Desenfoque del fondo */
    -webkit-backdrop-filter: blur(10px);
    
    /* Bordes sutiles con luz */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.25); /* Luz arriba */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* Luz izquierda */
    border-radius: 8px;
    
    padding: 15px 20px; 
    min-width: 120px;
    display: flex; flex-direction: column; gap: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.spec-box:hover {
    transform: translateY(-5px);
    /* Al hacer hover se ilumina el borde en naranja */
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 15px rgba(249, 115, 22, 0.2);
}

.spec-label {
    font-size: 0.7rem; 
    color: var(--color-primary);
    text-transform: uppercase; 
    font-weight: bold; 
    letter-spacing: 1px;
}

.spec-val {
    font-family: var(--font-heading);
    font-size: 1.5rem; 
    color: #fff !important; /* Blanco siempre */
    line-height: 1; 
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.report-header {
    font-family: var(--font-heading); 
    font-size: 1.5rem; 
    color: #fff !important; 
    margin-bottom: 20px;
    text-transform: uppercase; 
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    padding-bottom: 15px;
}

.report-body {
    color: #ddd !important; 
    font-size: 1rem; 
    line-height: 1.6;
    max-height: 120px; 
    overflow: hidden; 
    position: relative;
    transition: max-height 0.5s ease;
}

/* Gradiente de desvanecimiento siempre negro */
.report-body::after {
    content: ''; 
    position: absolute; bottom: 0; left: 0; 
    width: 100%; height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(20,20,20,1));
    transition: opacity 0.3s;
}
.report-body.expanded { max-height: 1000px; }
.report-body.expanded::after { opacity: 0; pointer-events: none; }

.btn-expand-report {
    background: none; border: none; 
    color: var(--color-primary);
    font-weight: bold; cursor: pointer; margin-top: 15px;
    font-family: var(--font-subheading); text-transform: uppercase;
    font-size: 0.85rem; padding: 0;
}
.btn-expand-report:hover { color: #fff !important; }

/* 3. FOOTER ACCIONES (INTACTO) */
.report-actions {
    margin-top: 30px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: center;
}


/* --- 2. ZIG-ZAG HYBRID V8 (ADAPTABLE AL TEMA) --- */
/* Aquí sí usamos variables para que el contenido cambie con el tema */

.guide-container {
    max-width: 1300px; margin: 0 auto; padding: 60px 20px;
    display: grid; grid-template-columns: 1fr 320px; gap: 60px;
}
@media (max-width: 1024px) { .guide-container { grid-template-columns: 1fr; }
}

.stops-feed { display: flex; flex-direction: column; gap: 80px; }

.stop-card-v8 {
    display: flex; flex-direction: column; gap: 30px;
    padding-bottom: 40px; border-bottom: 1px solid var(--color-border);
}
.stop-card-v8:last-child { border-bottom: none; }

.stop-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (min-width: 768px) {
    .stop-card-v8:nth-child(even) .stop-top-row { direction: rtl; }
    .stop-card-v8:nth-child(even) .stop-data-col { direction: ltr; text-align: left; }
    .stop-card-v8:nth-child(even) .stop-copyright { text-align: left; }
}

.stop-img-frame {
    width: 100%; aspect-ratio: 467/300; position: relative;
    overflow: hidden; border-radius: 4px; 
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}
.stop-img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.stop-card-v8:hover img { transform: scale(1.05); }

.stop-copyright { 
    margin-top: 8px; font-size: 0.75rem; 
    color: var(--color-text-secondary); text-align: right; font-family: monospace; 
}

/* DATOS PARADA */
.stop-data-col { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.stop-number-outline {
    font-family: var(--font-heading); font-size: 5rem; line-height: 0.8;
    color: transparent; 
    -webkit-text-stroke: 2px var(--color-primary); /* Siempre Naranja */
    display: block; margin-bottom: 5px; opacity: 0.8;
}

.stop-title-main {
    font-family: var(--font-heading); font-size: 2.2rem; color: #fff;
    contain: layout;
    color: var(--color-text-primary); /* Adaptable (Negro en Light, Blanco en Dark) */
    line-height: 1; text-transform: uppercase; margin: 0 0 15px 0;
}

.stop-address-link {
    color: var(--color-text-secondary); text-decoration: none; font-size: 0.9rem;
    border-bottom: 1px dashed var(--color-border); padding-bottom: 2px; 
    display: inline-block; margin-bottom: 20px;
}
.stop-address-link:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* HUD Grid (Info + Acciones) */
.stop-hud-grid {
    background: var(--color-surface); /* Adaptable */
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    padding: 15px; display: flex; gap: 20px; align-items: center; justify-content: space-between;
    border-radius: 4px;
}

.hud-info-lines { 
    display: flex; flex-direction: column; gap: 8px; 
    font-size: 0.9rem; color: var(--color-text-secondary); 
}
.hud-line i { color: var(--color-primary); width: 18px; text-align: center; margin-right: 5px; }
.hud-line strong { color: var(--color-text-primary); }

.hud-actions-col { 
    display: flex; flex-direction: column; gap: 15px; align-items: center; 
    padding-left: 15px; border-left: 1px solid var(--color-border); 
}

/* TEXTO DESCRIPCIÓN (Adaptable) */
.stop-bottom-row { width: 100%; margin-top: 20px; }
.stop-narrative { position: relative; }

.narrative-content {
    font-size: 1.05rem; line-height: 1.8; 
    color: var(--color-text-secondary); /* Texto legible adaptable */
    overflow: hidden; transition: max-height 0.5s ease;
}
.narrative-content strong { color: var(--color-text-primary); } /* Negritas adaptables */

.narrative-content.collapsed {
    max-height: 120px;
    /* Gradiente adaptable hacia el color de fondo */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Experiencia Canalla (Caja) */
.canalla-box {
    margin-top: 30px; padding: 25px; 
    background: var(--color-surface); 
    border: 1px dashed var(--color-primary); border-radius: 8px; position: relative;
    box-shadow: var(--shadow-md);
}
.canalla-title {
    font-family: var(--font-subheading); color: #000; background: var(--color-primary);
    display: inline-block; padding: 4px 10px; font-size: 0.85rem; border-radius: 4px;
    position: absolute; top: -14px; left: 20px; font-weight: bold;
}

.btn-read-more {
    background: none; border: none; color: var(--color-primary);
    font-weight: bold; font-size: 0.9rem; padding: 15px 0; width: 100%; text-align: left;
    cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 5px; margin-top: 10px;
}
.btn-read-more:hover { text-decoration: underline; }

/* ======================================================= */
/* === 2.5 SECCIÓN MANIFIESTO (Narrativa Expandible)   === */
/* ======================================================= */

.mission-manifesto {
    margin: 40px auto 60px; /* Separación visual */
    max-width: 900px;
    position: relative;
    padding: 0 20px;
}

.manifesto-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-primary);
}

.manifesto-body p {
    margin-bottom: 20px;
}

/* Lógica de Colapso */
.manifesto-content {
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Estado Colapsado */
.manifesto-content.collapsed {
    max-height: 250px; /* Altura inicial visible (aprox 2 párrafos) */
    
    /* Máscara de desvanecimiento hacia el color de fondo */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Botón de Acción */
/* Botón de Acción "Informe" (Estilo Terminal Táctico) */
.btn-read-manifesto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 0; /* Centrado */
    padding: 15px;
    
    background: transparent; /* Sin fondo */
    border: none;            /* Sin bordes */
    
    /* Tipografía de impacto */
    color: var(--color-primary); 
    font-family: var(--font-subheading);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px; /* Aireado para elegancia */
    
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.btn-read-manifesto:hover {
    /* Efecto: Se separa y brilla */
    letter-spacing: 4px; 
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
    transform: scale(1.05);
}

.btn-read-manifesto i {
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.btn-read-manifesto:hover i {
    transform: translateY(3px); /* La flecha baja un poco */
}

/* ======================================================= */
/* === MARCA DE AGUA V3 (PEQUEÑA Y ELEGANTE)           === */
/* ======================================================= */

.watermark-stacked {
    position: absolute;
    bottom: 12px;
    right: 15px;
    z-index: 2;
    pointer-events: none;
    
    display: flex;
    align-items: center;
    gap: 3px;
    
    font-family: var(--font-heading);
    font-weight: 900;
    line-height: 0.9;
    
    /* Sombra más suave para tamaño pequeño */
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
    
    opacity: 0.8;
    transition: all 0.3s ease;
}

.stop-card-v8:hover .watermark-stacked {
    opacity: 1;
    transform: scale(1.05);
}

/* --- CORCHETES [ ] (Naranjas y más finos) --- */
.wm-bracket {
    font-size: 1.8rem; /* Reducido de 3rem a 1.8rem */
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary); /* Trazo más fino */
    margin-top: -3px;
}

/* --- CONTENEDOR TEXTO --- */
.wm-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ESTILOS DE TEXTO (Blancos) --- */
.wm-line-top, .wm-line-bottom {
    font-size: 0.85rem; /* Reducido de 1.4rem a 0.85rem */
    color: transparent;
    -webkit-text-stroke: 0.8px #fff; /* Trazo muy fino y elegante */
}

.wm-line-top { letter-spacing: 2px; }
.wm-line-bottom { letter-spacing: 1px; }

/* --- LAS "A" (Naranjas) --- */
.wm-accent {
    -webkit-text-stroke: 0.8px var(--color-primary);
}

/* ================================================================= */
/* === 5. CONSOLA DE MANDO PC (NAV MISIONES - GLASSMORPHISM)     === */
/* ================================================================= */

.desktop-mission-console {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 70px;
    
    /* CAPAS: Debajo del Widget Plan de Fuga (1000) */
    z-index: 800; 
    
    /* ESTILO BASE (MODO OSCURO - DARK GLASS) */
    background: rgba(9, 9, 11, 0.85); /* Negro Zinc semitransparente */
    backdrop-filter: blur(12px);      /* Efecto desenfoque */
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    display: flex; 
    align-items: center;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.desktop-mission-console .freq-container {
    width: 100%; 
    max-width: 100%; 
    display: flex; 
    justify-content: space-between;
    
    /* ESPACIO VITAL: */
    /* 340px a la izquierda para que no lo tape el Plan de Fuga */
    padding-left: 340px; 
    /* 100px a la derecha para no chocar con botones flotantes */
    padding-right: 100px; 
}

/* ENLACES (ESTILO BASE) */
.desktop-mission-console .freq-link {
    display: flex; 
    align-items: center; 
    gap: 15px;
    text-decoration: none;
    
    /* Color Gris Suave en reposo */
    color: rgba(255, 255, 255, 0.5); 
    transition: all 0.3s ease;
    max-width: 45%;
}

.desktop-mission-console .freq-link i {
    font-size: 1.1rem;
    color: var(--color-primary); /* Naranja siempre */
    transition: transform 0.3s ease;
}

/* HOVER (MODO OSCURO) */
.desktop-mission-console .freq-link:hover {
    color: #fff; /* Blanco brillante */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.desktop-mission-console .freq-link.prev:hover i { transform: translateX(-5px); }

/* TEXTOS */
.desktop-mission-console .freq-data {
    display: flex; flex-direction: column; justify-content: center;
}
.desktop-mission-console .freq-label {
    font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
    font-family: var(--font-body); opacity: 0.7; margin-bottom: 2px;
}
.desktop-mission-console .freq-title {
    font-family: var(--font-subheading); font-size: 0.95rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.desktop-mission-console .freq-signal { opacity: 0.2; }

/* 2. Barra Consola Inferior (Misión Anterior/Siguiente): Nivel Medio-Alto */
.desktop-mission-console {
    z-index: 800 !important;
}

/* 3. Barra Repsol Superior: Nivel Alto */
#repsol-nav {
    z-index: 950 !important;
}

#sidebarTimelineWidget {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}

/* ======================================================= */
/* === 2. NUEVO: HUD MINIMALISTA (Solo Iconos)         === */
/* ======================================================= */
/* Se usa cuando no hay horario/precio/transporte */
.stop-hud-minimal {
    display: flex;
    justify-content: flex-end; /* Botones a la derecha */
    gap: 15px;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea sutil separadora */
}

/* ======================================================= */
/* === FIX: ALINEACIÓN DE TEXTOS LARGOS EN HUD         === */
/* ======================================================= */

.hud-line {
    display: flex;
    /* ALINEAR ARRIBA: Clave para cuando hay varias horas */
    align-items: flex-start; 
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1.5; /* Altura de línea para buena lectura */
    color: var(--color-text-secondary);
}

.hud-line i {
    /* El icono se queda fijo arriba, no baja con el texto */
    margin-top: 4px; 
    color: var(--color-primary);
    width: 20px;
    text-align: center;
    flex-shrink: 0; /* Evita que el icono se aplaste */
}

/* ======================================================= */
/* === FIX: HUD TEXTOS LIMPIOS (DEFINITIVO)            === */
/* ======================================================= */

.hud-line {
    display: flex;
    /* Alineación superior para que la primera línea coincida con el icono */
    align-items: flex-start; 
    gap: 15px; 
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.hud-line i {
    /* El icono se queda fijo arriba */
    margin-top: 3px; 
    color: var(--color-primary);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.hud-line strong {
    color: var(--color-text-primary);
    /* Evitamos que "Llegar:" se parta */
    white-space: nowrap; 
}

.hud-line span {
    flex: 1;
    /* Respeta los saltos de línea (\n) que genera el PHP */
    white-space: pre-line; 
    /* Elimina cualquier margen heredado */
    margin: 0; 
}

.hero-subtitle {
    font-family: monospace; /* Toque técnico */
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    letter-spacing: 1px;
}

/* Asegura que el icono sea visible y tenga tamaño  */
.btn-add-plan i {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900; /* Requerido para iconos solid */
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


/* --- 5. WIDGETS ESPECÍFICOS --- */

/* A. TIMELINE (HOJA RUTA) */
.wire-timeline {
    list-style: none; padding: 20px 0; margin: 0; position: relative; z-index: 1;
}
.wire-timeline::before { /* Eje vertical */
    content: ''; position: absolute; top: 0; bottom: 0; left: 25px;
    width: 1px; background: rgba(255,255,255,0.2);
}
.wire-timeline li {
    position: relative; padding: 8px 10px 8px 50px; margin-bottom: 2px;
}
.wt-diamond { /* Rombo */
    position: absolute; left: 21px; top: 14px;
    width: 9px; height: 9px;
    background: var(--color-background); /* Tapa la línea */
    border: 1px solid var(--color-text-secondary);
    transform: rotate(45deg); transition: all 0.2s;
}
.wire-timeline li a {
    color: var(--color-text-secondary); text-decoration: none; font-size: 1rem;
    transition: all 0.2s; display: block;
}
.warning-mode .wh-title i { color: #ef4444; }
.warning-mode .blink { animation: blink 1s infinite; color: #ef4444; border-color: #ef4444; }
.warning-item {
    display: flex; gap: 15px; padding: 10px 0; border-bottom: 1px dotted rgba(255,255,255,0.1);
    color: #fca5a5; font-size: 0.95rem; align-items: flex-start;
}


/* C. INTEL MISIÓN (FIX ALINEACIÓN) */
.wire-kv-grid { padding: 10px; position: relative; z-index: 1; }
.wire-kv-row {
    display: flex; justify-content: space-between; align-items: baseline; /* Alinea textos */
    padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wk-label {
    width: 40%; flex-shrink: 0; /* Columna fija */
    font-size: 0.7rem; font-weight: 700; color: var(--color-text-secondary);
    text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}
.wk-label i { color: var(--color-primary); font-size: 0.9rem; }
.wk-val { 
    width: 60%; text-align: right; 
    font-family: var(--font-body); font-size: 0.95rem; color: var(--color-text-primary); 
    line-height: 1.3;
}


/* D. SUPERVIVENCIA (Logística) */
.wire-logistics { padding: 15px; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.wl-header {
    display: flex; align-items: center; gap: 15px; margin-bottom: 10px;
    border-bottom: 1px solid var(--color-primary); padding-bottom: 5px; width: fit-content;
}
.wl-badge {
    color: var(--color-primary); font-family: var(--font-tactical); font-weight: 900; 
    font-size: 1rem;
}
.wl-zone { color: var(--color-text-primary); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }

.wl-content { display: flex; flex-direction: column; gap: 10px; }
.wl-row {
    display: flex; gap: 15px; align-items: flex-start;
    font-size: 0.95rem; color: var(--color-text-secondary);
    padding: 8px; border-left: 2px solid var(--color-text-secondary);
}
.wl-row i { color: var(--color-primary); margin-top: 4px; width: 16px; text-align: center; }
.wl-row strong { color: var(--color-text-primary); font-weight: 700; } /* Resaltar local */


/* E. INCÓGNITO & COMIDA (FIX RESALTADO NARANJA) */
.incognito-item-wire {
    padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.1);
    display: flex; flex-direction: column; gap: 4px;
} /* Verde Táctico */


/* F. KIT AHORRO (GRID INVENTARIO) */
.wire-tools-grid { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; position: relative; z-index: 1;
}

/* =================================================================== */
/* === Estilos Visual De-cluttering Hero [GUIA.PHP]                === */
/* =================================================================== */

/* Nuevo CSS para limpiar el Hero */

.report-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 15px;
}

/* Iconos sociales limpios y agrupados a la izquierda */
.share-icons-minimal {
    display: flex;
    gap: 12px;
}
.share-icons-minimal a {
    color: rgba(255,255,255,0.5); /* Grisáceo por defecto */
    font-size: 1.1rem;
    transition: color 0.3s;
}
.share-icons-minimal a:hover {
    color: var(--color-primary); /* Se encienden al pasar ratón */
}

/* --- CONTENEDOR PRINCIPAL --- */
.report-actions {
    display: flex;
    flex-wrap: wrap; /* Para móviles */
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.15);
    gap: 20px;
}

/* --- A. ICONOS SOCIALES (Minimal) --- */
.share-icons-minimal {
    display: flex;
    align-items: center;
    gap: 12px;
}
.share-label-mini {
    font-size: 0.7rem;
    font-family: 'Orbitron', sans-serif;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
}
.share-icons-minimal a {
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.share-icons-minimal a:hover {
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* --- B. GRUPO DE BOTONES UNIFICADOS --- */
.ops-group {
    display: flex;
    background: rgba(255,255,255,0.05); /* Fondo muy sutil para agruparlos */
    border-radius: 4px;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ESTILO BASE DEL BOTÓN (IGUAL PARA MAPA Y GUARDAR) */
.btn-tactical-op {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
}

/* Separador visual entre botones */
.btn-tactical-op:first-child {
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* Hover: Efecto de encendido suave */
.btn-tactical-op:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-primary);
}


/* =========================================================================
   2 . TACTICAL-GUIDE  (antes assets/css/tactical-guide.css)
   -------------------------------------------------------------------------
   Fusionado aqui: eran dos hojas que solo cargaba guia.php y que se pisaban
   entre si. Tener el aspecto de la guia repartido en dos ficheros obligaba a
   saltar de uno a otro para saber que gana en la cascada. Ahora la guia tiene
   UNA hoja propia.
   ========================================================================= */
/* =========================================================
   tactical-guide.css - V18 (CWV, A11Y UE, MOBILE SWIPE)
   ========================================================= */

/* A11Y UE COMPLIANCE */
:focus-visible { outline: 3px solid var(--color-primary, #f97316); outline-offset: 3px; border-radius: 2px; }

.repsol-map-btn {
    background-color: transparent; 
    border: 1px solid var(--color-primary); 
    color: var(--color-primary); 
    width: 36px; height: 36px; 
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer; margin-left: 15px; border-radius: 4px; 
    /* ELIMINADO EL 'ALL'. Transición táctica exclusiva para la GPU: */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; 
}

.repsol-map-btn:hover { 
    background-color: var(--color-primary); 
    color: #000; 
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.3); 
}

.toc-tactical { background: rgba(0,0,0,0.05); border-left: 3px solid var(--color-primary); padding: 20px; border-radius: 0 8px 8px 0; }
.toc-tactical h3 { margin-top: 0; font-family: "Orbitron", sans-serif; font-size: 1.1rem; letter-spacing: 1px; color: var(--color-primary); }
.toc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.toc-list li a { text-decoration: none; color: inherit; font-size: 0.9rem; transition: color 0.2s; display: flex; align-items: center; gap: 8px; font-weight: 500;}
.toc-list li a:hover { color: var(--color-primary); }
.toc-num { font-weight: bold; color: var(--color-primary); }

/* 2. PROTECCIÓN GLOBAL Y CORE VITALS (CWV) */
html, body { width: 100%; margin: 0; padding: 0; overscroll-behavior-x: none; }
*, *::before, *::after { box-sizing: border-box; }

/* Nota: .hero-tactical se define completo mas abajo, en el bloque "CLS OPTIMIZATION", con aspect-ratio incluido. Se ha quitado la definicion corta duplicada de aqui. */
.hero-bg img {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; 
    object-fit: cover !important; z-index: 0;
}
.hero-overlay, .hero-grid { position: relative; z-index: 1; }

/* CWV HACK: content-visibility desactivado para recuperar los cálculos del scroll.
   Nota: sin content-visibility, contain-intrinsic-size no hace nada, por eso se ha quitado. */
.stop-card-v8 { }

.stop-card-v8 * { min-width: 0 !important; }

.stop-card-v8 h1, .stop-card-v8 h2, .stop-card-v8 h3, .stop-card-v8 p, .stop-card-v8 a, .stop-card-v8 span {
    overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word !important; hyphens: auto;
}

.stops-feed img, .sidebar-sticky img, .stop-img-frame img {
    width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: cover;
}
.leaflet-container img { width: initial !important; max-width: none !important; height: initial !important; object-fit: initial !important; }

/* 3. BLINDAJE MÓVIL Y GESTOS TÁCTICOS */
@media (max-width: 768px) {
    .container, .guide-container, .hero-grid, .stops-feed, .mission-manifesto, .waypoints-tactical-section {
        max-width: 100vw !important; overflow-x: hidden !important; 
    }
    .stop-card-v8 {
        width: 100% !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important;
        box-sizing: border-box !important; overflow: hidden !important; 
    }
    .stop-top-row { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 15px; }
    .stop-visual-col, .stop-data-col { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
    .stop-img-frame, .stop-img-frame img { width: 100% !important; max-width: 100% !important; }
    .toc-list { grid-template-columns: 1fr !important; }
    .hero-col-left, .hero-col-right { padding: 0 15px; }
}

/* 4. HUD: BARRA LÁSER DE INFILTRACIÓN */
.infiltration-progress-wrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 6px; 
    background: rgba(255, 255, 255, 0.15); z-index: 2147483647; 
    pointer-events: auto; cursor: pointer;
}
.infiltration-progress-bar {
    height: 100%; width: 0%; background: var(--color-primary, #f97316);
    box-shadow: 0 0 10px var(--color-primary, #f97316), 0 0 3px #ffffff; 
    border-radius: 0 3px 3px 0; will-change: width;
}
.mission-complete-pulse { animation: orangeNeonPulse 0.8s infinite alternate !important; }
@keyframes orangeNeonPulse {
    0% { opacity: 0.8; box-shadow: 0 0 10px var(--color-primary), 0 0 3px #fff; }
    100% { opacity: 1; box-shadow: 0 0 25px var(--color-primary), 0 0 10px #fff, 0 0 40px var(--color-primary); }
}

/* 5. EFECTO "PAGE CURL" (BOTONES A11Y) */
.page-curl-hint {
    position: fixed; top: 50%; transform: translateY(-50%); height: 110px; display: flex; align-items: center;
    z-index: 999990; cursor: pointer; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s;
    appearance: none; -webkit-appearance: none; padding: 0; margin: 0; border: none; /* Reset de Botón Crítico */
}
.page-curl-hint i { color: var(--color-primary, #f97316); font-size: 1.4rem; }

.page-curl-hint.next { right: 0; width: 35px; background: linear-gradient(to left, rgba(249, 115, 22, 0.25), transparent); border-left: 2px solid var(--color-primary, #f97316); border-radius: 50% 0 0 50%; justify-content: flex-start; padding-left: 10px; }
.page-curl-hint.next i { animation: pulseRightArrow 2s infinite; }

.page-curl-hint.prev { left: 0; width: 35px; background: linear-gradient(to right, rgba(249, 115, 22, 0.25), transparent); border-right: 2px solid var(--color-primary, #f97316); border-radius: 0 50% 50% 0; justify-content: flex-end; padding-right: 10px; }
.page-curl-hint.prev i { animation: pulseLeftArrow 2s infinite; }

.page-curl-hint.next.anim-flap { animation: pageFlapNext 3.5s ease-in-out forwards; }
.page-curl-hint.prev.anim-flap { animation: pageFlapPrev 3.5s ease-in-out forwards; }

@keyframes pageFlapNext { 0% { width: 35px; } 15% { width: 90px; background: linear-gradient(to left, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0.1)); } 80% { width: 90px; background: linear-gradient(to left, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0.1)); } 100% { width: 35px; } }
@keyframes pageFlapPrev { 0% { width: 35px; } 15% { width: 90px; background: linear-gradient(to right, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0.1)); } 80% { width: 90px; background: linear-gradient(to right, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0.1)); } 100% { width: 35px; } }
@keyframes pulseRightArrow { 0%, 100% { transform: translateX(2px); opacity: 0.6; } 50% { transform: translateX(-4px); opacity: 1; } }
@keyframes pulseLeftArrow { 0%, 100% { transform: translateX(-2px); opacity: 0.6; } 50% { transform: translateX(4px); opacity: 1; } }
@media (min-width: 769px) { .page-curl-hint { display: none; }
}

/* =========================================================
   BLINDAJE TÁCTICO: HOJA DE RUTA (SIDEBAR) INAMOVIBLE
   ========================================================= */
/* Garantiza que el sidebar completo se quede pegado al hacer scroll */
.sidebar-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 90px !important;
    align-self: flex-start !important;
}

/* =========================================================
   tactical-guide.css - CLS OPTIMIZATION BLOCK
   ========================================================= */

/* 1. CLS DEL HERO SIN RECORTAR CONTENIDO
   -----------------------------------------------------------------
   ANTES: aspect-ratio 16/9 (4/5 en móvil) + overflow:hidden. Un bloque con
   aspect-ratio y altura automática NO crece con su contenido: fija la altura a
   partir del ancho y lo que sobra se recorta. En móvil el héroe medía ~4/5 del
   ancho y todo lo que caía por debajo -el pie de la tarjeta de briefing: los
   iconos de COMPARTIR y los botones MAPA / GUARDAR- desaparecía literalmente.
   AHORA: el hueco se reserva con min-height (que es un suelo, no un techo), así
   que el CLS sigue cubierto y el contenido nunca se corta.
   La imagen de fondo va en position:absolute, no participa en el flujo, por lo
   que su carga no puede mover nada. */
.hero-tactical {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    min-height: min(85vh, 820px);
    overflow: hidden;
    contain: layout paint;   /* Aísla el cálculo del navegador */
    content-visibility: visible; /* El héroe es el LCP: nunca debe saltarse su render */
}
@media (max-width: 768px) {
    .hero-tactical {
        min-height: 0;       /* Que mande el contenido: nada se recorta */
        height: auto;
        /* El héroe arranca en -60px (margin-top) para colarse bajo la cabecera fija.
           Con align-items:flex-start el contenido empieza justo tras el padding, así
           que hacen falta 60px de cabecera + aire, o el "BARCELONA //" y la primera
           línea del H1 quedan escondidos detrás del header. */
        padding: 132px 0 32px;
        align-items: flex-start;
    }
}

/* 2. HACK CLS: FIJAR LAS IMÁGENES DE LAS PARADAS */
/* Aunque el HTML tenga width y height, en responsive a veces falla el cálculo inicial.
   Forzamos el aspect-ratio en CSS para que el navegador reserve el bloque de cemento. */
.stop-img-frame {
    /* Si el frame tiene algún padding o border, esto ayuda a estabilizarlo */
    display: block;
    width: 100%;
}

.stop-img-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 467 / 300; /* La proporción exacta de tus imágenes (500x250 o similar) */
    object-fit: cover;
    display: block; /* Elimina el espacio fantasma debajo de las imágenes inline */
}

/* 3. HACK CLS: EVITAR EL SALTO DE FUENTES (FOIT/FOUT) EN LOS ICONOS */
/* Cuando FontAwesome carga, los iconos pasan de 0px a su tamaño real, empujando el texto.
   Reservamos el ancho estándar de un icono antes de que la fuente esté lista. */
i.fa-solid, i.fa-regular, i.fa-brands {
    display: inline-block;
    min-width: 1.25em; /* Ancho seguro para la mayoría de iconos de FA */
    text-align: center;
    line-height: 1; /* Estabiliza la altura de línea */
}

/* 4. HACK CLS: ALTURA MÍNIMA PARA TÍTULOS CRÍTICOS */
/* Si la fuente personalizada del título tarda en cargar, el fallback font puede ser más pequeño,
   causando un salto cuando la fuente final se aplica. */
.hero-title { 
    min-height: 1.2em; 
    contain: layout paint; 
}

.stop-title-main { 
    min-height: 1.2em; 
    contain: layout; 
}

.hero-title { 
    min-height: 1.2em; 
    line-height: 1.2 !important; /* Congela la altura exacta sin depender de la fuente */
    contain: layout paint; 
    overflow: hidden; /* Evita que los descendientes empujen el alto */
}

.stop-title-main { 
    min-height: 1.2em; 
    line-height: 1.2 !important; 
    contain: layout; 
    overflow: hidden;
}

p, span, div {
    /* Estabiliza todo el texto base de la guía */
    line-height: 1.6; 
}
/* =========================================================
   A11Y AA FIX: WCAG 2.2.2 - Parpadeo (Pause, Stop, Hide)
   El "blink" y el "wh-stamp.blink" se definen en otra hoja de estilos
   del sitio con animation: blink 1s infinite. Un parpadeo indefinido
   incumple el criterio 2.2.2 (Nivel A). Limitamos las iteraciones para
   que se detenga solo, sin tocar la animacion en si.
   ========================================================= */
.wh-stamp.blink,
.blink {
    animation-iteration-count: 3 !important;
}

/* =========================================================
   FIX CLS DE CAMPO (Search Console): la Hoja de Ruta ya no se
   oculta animando max-height/margin-bottom (eso mueve el resto
   del sidebar y cuenta como Cambio de Diseño real en Chrome).
   Ahora solo se desvanece: el hueco queda reservado, sin reflow.
   ========================================================= */
/* =========================================================
   LA HOJA DE RUTA SE VA Y LA COLUMNA SUBE (SIN CLS)
   ---------------------------------------------------------
   El widget se oculta con opacity/visibility: su hueco sigue
   reservado, así que el navegador NO recalcula el layout y no
   hay Cambio de Diseño. Acto seguido subimos TODA la columna
   con transform la altura exacta del widget, de modo que los
   módulos restantes ocupan su sitio de verdad. El hueco vacío
   acaba abajo, fuera de vista.
   Chrome excluye del CLS lo que se mueve por transform, así que
   esto puntúa 0 y funciona quepa o no quepa el sidebar en la
   pantalla (el intento anterior, con scroll propio, no hacía
   nada en monitores grandes porque la columna cabía entera).
   ========================================================= */
@media (min-width: 1024px) {
    .sidebar-sticky {
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;
    }
    .sidebar-sticky.sidebar-lifted {
        transform: translateY(calc(-1 * var(--vv-lift, 0px)));
    }
}

.sidebar-sticky .wire-timeline-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media (prefers-reduced-motion: reduce) {
    .sidebar-sticky { transition: none; }
}

/* =========================================================
   V19 - REDISTRIBUCIÓN MÓVIL, TARJETA DE BRIEFING Y A11Y
   Nada se elimina: se reordena, se agranda el área de toque
   y se reparte en bloques para que no se apelotone.
   ========================================================= */

/* ---------------------------------------------------------
   1. TARJETA DE BRIEFING (la que faltaba)
   El HTML usa .mission-brief-card pero la hoja de estilos solo
   definía .mission-report-card: el bloque se quedaba sin fondo,
   el texto caía directamente sobre la foto (contraste insuficiente)
   y el degradado de "leer más" pintaba una banda oscura suelta.
   --------------------------------------------------------- */
/* Cristal ahumado, no panel opaco. El tinte oscuro va DENTRO del cristal:
   se sigue viendo la foto a través, pero el texto conserva contraste AA
   caiga la tarjeta sobre un cielo claro o sobre una sombra. */
.mission-brief-card {
    position: relative;
    /* La clave está en el brightness() del backdrop-filter, misma receta que los
       paneles de pais.php y el Atlas: en vez de TAPAR la foto con una capa opaca,
       se OSCURECE lo que hay detrás (brightness .45) y encima va un tinte muy
       ligero. Resultado: se ve la foto a través del cristal y aun así el texto
       blanco conserva contraste AA, porque el fondo llega ya apagado y uniforme. */
    background:
        linear-gradient(160deg, rgba(12, 15, 19, 0.26), rgba(12, 15, 19, 0.4));
    backdrop-filter: blur(26px) saturate(190%) brightness(0.45);
    -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.28);   /* Luz arriba */
    border-left-color: rgba(255, 255, 255, 0.2);   /* Luz izquierda */
    border-radius: 12px;
    padding: 28px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
    overflow: hidden;
}
/* Sin backdrop-filter (Firefox con la bandera apagada, navegadores viejos) el
   tinte al 26% sobre una foto sería ilegible: ahí sí toca capa opaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mission-brief-card {
        background: linear-gradient(160deg, rgba(12, 15, 19, 0.86), rgba(12, 15, 19, 0.92));
    }
}

/* Filo naranja de marca: hilo degradado que se apaga en los extremos,
   en vez del borde macizo de 4px que rompía el efecto cristal. */
.mission-brief-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-primary) 25%,
        var(--color-primary) 75%,
        transparent);
    opacity: 0.85;
    pointer-events: none;
}
.mission-brief-card .report-header {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 18px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* El degradado de "leer más" estaba fijado a rgba(20,20,20,1): sobre un
   cristal translúcido pintaba una banda opaca suelta. Con máscara, el
   texto se desvanece a transparente sea cual sea el fondo. */
.mission-brief-card .report-body::after { display: none; }
.mission-brief-card .report-body {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.mission-brief-card .report-body.expanded {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Área de toque digna para el desplegable del informe (WCAG 2.5.8) */
.btn-expand-report {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ---------------------------------------------------------
   1.b SUBTÍTULO Y DISTINTIVO DEL HÉROE
   Vienen de T_Guia.titulo_descripcion y T_Guia.fecha, dos campos
   que estaban en la base de datos y no se pintaban en ningún sitio.
   --------------------------------------------------------- */
.hero-subtitle {
    font-family: var(--font-subheading);
    font-weight: 600;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
    margin: -22px 0 28px;          /* Se acerca al H1, que trae margin-bottom 40px */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    max-width: 46ch;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    /* Mismo cristal que las spec-box, con el filo de marca */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-family: var(--font-tactical, var(--font-subheading));
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #fff;
}
@media (max-width: 992px) {
    /* En móvil el H1 baja a margin-bottom 22-30px, el negativo debe encoger */
    .hero-subtitle { margin: -12px 0 22px; text-align: center; max-width: none; }
    .hero-loc { flex-wrap: wrap; }
}

/* ---------------------------------------------------------
   2. COMPARTIR: contraste y área de toque
   --------------------------------------------------------- */
.share-icons-minimal a {
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 6px;
}
.share-icons-minimal a:hover,
.share-icons-minimal a:focus-visible {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.06);
}

/* Botones MAPA / GUARDAR: dedo, no ratón */
.btn-tactical-op {
    min-height: 46px;
    justify-content: center;
}

/* ---------------------------------------------------------
   2.b ESTADO "GUARDADA"
   Estaba raro por dos motivos:
   1) core.css lo pintaba de naranja MACIZO con texto negro. Media
      barra de acciones se convertía en un bloque de color que no
      pegaba con nada y parecía un error de estilos.
   2) El tick no salía nunca. main.js cambia el icono a
      `fa-circle-check`, pero core.css tiene
      `.added-active .icon-state::before { content: "\f02e" }`
      (marcador sólido), que gana por especificidad y pisa el glifo
      de FontAwesome. Encima main.js sobrescribe el className del <i>
      y se lleva por delante la clase `icon-state`.
   Aquí forzamos el tick sobre CUALQUIER <i> del botón, pase lo que
   pase con las clases, y el fondo pasa a un naranja tenue.
   --------------------------------------------------------- */
.btn-tactical-op.added-active {
    background: rgba(249, 115, 22, 0.16) !important;
    color: var(--color-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.55);
    font-weight: 700;
}
.btn-tactical-op.added-active:hover {
    background: rgba(249, 115, 22, 0.26) !important;
}
.btn-tactical-op.added-active i::before {
    content: "\f00c";                       /* fa-check, existe en la versión Free */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-primary);
}
/* El texto "GUARDADA" lo pone core.css con ::after. Le damos el mismo peso
   que al resto para que no cante. */
.btn-tactical-op.added-active::after {
    font-family: var(--font-subheading);
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
   3. HERO EN MÓVIL: TRES BLOQUES CLAROS
   [identidad] -> [datos] -> [briefing + acciones]
   --------------------------------------------------------- */
@media (max-width: 768px) {
    /* El canalón lo pone la rejilla una sola vez (antes se sumaba el del
       .container + el de cada columna y se comían 40px de ancho útil) */
    .hero-grid { gap: 24px; padding-left: 16px; padding-right: 16px; }
    .hero-col-left, .hero-col-right { padding: 0; }

    /* 2,8rem fijos desbordaban en pantallas de 360-390px */
    .hero-title {
        font-size: clamp(1.85rem, 7.8vw, 2.6rem);
        margin-bottom: 22px;
    }
    .hero-loc { font-size: 0.78rem; }

    /* Los 3 specs en rejilla fija: siempre una sola fila legible */
    .hero-specs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .spec-box {
        min-width: 0;
        padding: 10px 6px;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
    .spec-label {
        /* "INFILTRACIÓN" se salía de su caja: que encoja y parta si hace falta */
        font-size: clamp(0.5rem, 2.4vw, 0.62rem);
        letter-spacing: 0;
        min-width: 0;
        justify-content: center;
        gap: 4px;
        overflow-wrap: anywhere;
    }
    .spec-label i { min-width: 0.9em; }
    .spec-val { font-size: 1rem; }
    .spec-box:hover { transform: none; } /* Sin hover fantasma en táctil */

    .mission-brief-card { padding: 20px 16px; }
    .mission-brief-card .report-header {
        font-size: 1.05rem;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    /* --- ACCIONES REPARTIDAS EN DOS FILAS --- */
    .report-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 20px;
        padding-top: 16px;
    }
    .ops-group {          /* Fila 1: la acción principal, a pantalla completa */
        order: 1;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 3px;
    }
    .btn-tactical-op {
        min-height: 50px;
        padding: 12px 8px;
        font-size: 0.78rem;
    }
    .share-icons-minimal { /* Fila 2: compartir, centrado y visible */
        order: 2;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }
    .share-label-mini { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------
   4. BARRA REPSOL: USABLE EN PANTALLA ESTRECHA
   --------------------------------------------------------- */
/* A11Y: mientras está replegada no debe ser alcanzable con el tabulador */
#repsol-nav { visibility: hidden; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.4s; }
#repsol-nav.visible { visibility: visible; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s; }
@media (max-width: 768px) {
    #repsol-nav { height: 56px; padding: 0 10px; }
    .repsol-container { gap: 10px; }
    .repsol-title { font-size: 0.85rem; flex: 0 1 auto; min-width: 0; }
    .repsol-select {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        min-height: 40px;
        font-size: 0.85rem;
    }
    .repsol-map-btn { flex: 0 0 44px; width: 44px; height: 44px; margin-left: 0; }
}
@media (max-width: 480px) {
    /* El título ya está en el H1 de la página: aquí estorba más que informa */
    .repsol-title { display: none; }
}

/* Al saltar a una parada, que no quede tapada por cabecera + barra Repsol */
.stop-card-v8 { scroll-margin-top: 140px; }
@media (max-width: 768px) { .stop-card-v8 { scroll-margin-top: 125px; }
}

/* ---------------------------------------------------------
   4.b HOJA DE RUTA: ROMBO DE CRISTAL
   El rombo relleno de naranja sólido quedaba como un pegote
   pegado al eje. Se pasa al mismo lenguaje glassmorphism que
   ya usan las .spec-box del héroe: translúcido, con luz en el
   borde superior y desenfoque de fondo.
   --------------------------------------------------------- */
.wt-diamond {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top-color: rgba(255, 255, 255, 0.45);   /* Luz arriba */
    border-left-color: rgba(255, 255, 255, 0.34);  /* Luz izquierda */
    border-radius: 2px;                            /* Rombo suave, no pixelado */
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.12);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.wire-timeline li.active .wt-diamond {
    /* Se enciende por dentro, no se rellena de pintura plana */
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.6);
    border-top-color: rgba(255, 170, 110, 0.85);
    box-shadow:
        inset 0 0 6px rgba(249, 115, 22, 0.45),
        0 0 12px rgba(249, 115, 22, 0.3);
}
body.light-theme .wt-diamond {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 0, 0, 0.18);
    border-top-color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.06);
}
body.light-theme .wire-timeline li.active .wt-diamond {
    background: rgba(249, 115, 22, 0.22);
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: inset 0 0 6px rgba(249, 115, 22, 0.35), 0 0 10px rgba(249, 115, 22, 0.2);
}

/* ---------------------------------------------------------
   5. ÍNDICE DE WAYPOINTS = HOJA DE RUTA DEL MÓVIL
   El sidebar se oculta por debajo de 1024px (su contenido vive
   en el cajón "Kit"), así que el rombo activo se traslada aquí.
   --------------------------------------------------------- */
.toc-list li a {
    position: relative;
    padding: 8px 10px;
    border-radius: 4px;
    min-height: 40px;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.toc-list li.active a {
    color: var(--color-text-primary);
    background: rgba(249, 115, 22, 0.1);
    border-left-color: var(--color-primary);
    font-weight: 700;
}
.toc-list li.active .toc-num { text-shadow: 0 0 8px var(--color-primary); }
@media (max-width: 768px) {
    /* Caja con altura acotada: informa sin comerse la pantalla */
    .toc-content {
        max-height: 46vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .toc-list { gap: 2px; }
    .toc-list li a { font-size: 0.88rem; }
    .toc-tactical { padding: 16px 14px; }
    .toc-header { min-height: 44px; gap: 12px; }
    .toc-tactical h3 { font-size: 0.95rem; letter-spacing: 0; }
    .manifesto-title { font-size: 1.4rem; }
}

/* ---------------------------------------------------------
   6. MAPA TÁCTICO
   --------------------------------------------------------- */
body.map-modal-open { overflow: hidden; }

.modal-box { display: flex; flex-direction: column; }
/* position:relative para que las herramientas y el panel de objetivos,
   que van en absolute, se anclen al mapa y no al modal entero. */
.modal-map { flex: 1 1 auto; min-height: 0; position: relative; }

/* Pestañas RADAR / RUTA COMPLETA */
.map-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px 0;
    flex: 0 0 auto;
}
.map-tab {
    flex: 1 1 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--color-text-secondary);
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.map-tab:hover { color: var(--color-primary); border-color: var(--color-primary); }
.map-tab.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(249, 115, 22, 0.1);
    box-shadow: inset 0 -2px 0 var(--color-primary);
}
.map-tab i { font-size: 0.9rem; }

/* ⚠️ CRÍTICO — POR QUÉ ESTE Z-INDEX TAN ALTO
   atlas.css sube la cabecera del sitio a `z-index: 9999999 !important` (y su
   propio botón de cerrar a 10000000) para que el mapa del Atlas no la tape.
   Ese archivo se carga en TODA la web, así que el modal de la guía, que estaba
   en 9999, quedaba POR DEBAJO de la cabecera: en escritorio no se notaba porque
   la caja va centrada al 65% de alto, pero al ponerlo a pantalla completa en
   móvil la cabecera se comía justo la franja superior... con el botón ✕ dentro.
   Resultado: se abría el mapa y no había forma humana de cerrarlo.
   Si algún día alguien vuelve a tocar los z-index, este tiene que quedar por
   encima de 9999999. */
#mapModal.modal-overlay { z-index: 10000001; }

/* En móvil el mapa ocupa TODA la ventana: una caja al 94% con un mapa dentro
   es inmanejable con el dedo. Se usa dvh para que la barra del navegador
   móvil no deje una franja muerta abajo. */
@media (max-width: 768px) {
    #mapModal.modal-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    /* Con el mapa a pantalla completa la cabecera del sitio no pinta nada y
       encima roba 60px. La escondemos mientras dure (es position:fixed, así
       que ocultarla no mueve nada de la página que hay detrás). */
    body.map-modal-open .site-header,
    body.map-modal-open .mobile-navigation,
    body.map-modal-open #dynamic-scroll-header,
    body.map-modal-open #repsol-nav { display: none !important; }
    #mapModal .modal-box {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border: none;
        border-radius: 0;
        clip-path: none;              /* El recorte "HUD" en pantalla completa comía esquinas */
    }
    #mapModal .modal-header {
        padding: 12px 14px;
        padding-top: max(12px, env(safe-area-inset-top));
        flex: 0 0 auto;
    }
    #mapModal .modal-title {
        font-size: 0.9rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0;                  /* Que el título ceda antes que el botón */
    }
    /* La ✕ deja de ser un carácter suelto: botón sólido, imposible de no ver
       ni de fallar con el pulgar. */
    #mapModal .close-btn {
        flex: 0 0 auto;
        width: 46px; height: 46px;
        display: inline-flex; align-items: center; justify-content: center;
        margin-left: 12px;
        font-size: 1.7rem; line-height: 1;
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid var(--color-primary);
        border-radius: 50%;
    }
    #mapModal .close-btn:active {
        background: var(--color-primary);
        color: #000;
    }
    #mapModal .close-btn:hover { transform: none; }   /* El giro de 90° en táctil sobra */
    #mapModal .modal-footer-status {
        flex: 0 0 auto;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    .map-tabs { padding: 8px 10px 0; }
    .map-tab { font-size: 0.72rem; }

    /* Con el mapa abierto las pestañas de página estorban al arrastrar */
    body.map-modal-open .page-curl-hint,
    body.map-modal-open .mobile-bottom-kit,
    body.map-modal-open .infiltration-progress-wrap { display: none !important; }
}

/* ---------------------------------------------------------
   7. HUD DE INFILTRACIÓN: no robar toques a la cabecera
   --------------------------------------------------------- */
@media (max-width: 1023px) {
    .infiltration-progress-wrap { pointer-events: none; cursor: default; height: 4px; }
}

/* ---------------------------------------------------------
   8.b BARRAS DE SCROLL INTERNAS EN NARANJA
   Cualquier caja con scroll propio de la guía (índice, sidebar,
   cajón Kit, modal del mapa, textos desplegados...) lleva la
   barra de marca, no la gris del sistema.
   --------------------------------------------------------- */
.toc-content,
.wire-body,
.sidebar-sticky,
.stops-feed,
.narrative-content,
.report-body,
.modal-box,
.modal-map,
.kit-drawer,
.drawer-panel,
.drawer-body-scroll,
.drawer-content-wrapper,
.trip-list-container,
#mobileKitContainer,
#drawerContent,
.guide-container *,
.hero-tactical * {
    scrollbar-width: thin;                                      /* Firefox */
    scrollbar-color: var(--color-primary) rgba(255, 255, 255, 0.08);
}

.toc-content::-webkit-scrollbar,
.wire-body::-webkit-scrollbar,
.sidebar-sticky::-webkit-scrollbar,
.stops-feed::-webkit-scrollbar,
.narrative-content::-webkit-scrollbar,
.report-body::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
.modal-map::-webkit-scrollbar,
.kit-drawer::-webkit-scrollbar,
.drawer-panel::-webkit-scrollbar,
.drawer-body-scroll::-webkit-scrollbar,
.drawer-content-wrapper::-webkit-scrollbar,
.trip-list-container::-webkit-scrollbar,
#mobileKitContainer::-webkit-scrollbar,
#drawerContent::-webkit-scrollbar,
.guide-container *::-webkit-scrollbar,
.hero-tactical *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.toc-content::-webkit-scrollbar-track,
.wire-body::-webkit-scrollbar-track,
.sidebar-sticky::-webkit-scrollbar-track,
.stops-feed::-webkit-scrollbar-track,
.narrative-content::-webkit-scrollbar-track,
.report-body::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
.modal-map::-webkit-scrollbar-track,
.kit-drawer::-webkit-scrollbar-track,
.drawer-panel::-webkit-scrollbar-track,
.drawer-body-scroll::-webkit-scrollbar-track,
.drawer-content-wrapper::-webkit-scrollbar-track,
.trip-list-container::-webkit-scrollbar-track,
#mobileKitContainer::-webkit-scrollbar-track,
#drawerContent::-webkit-scrollbar-track,
.guide-container *::-webkit-scrollbar-track,
.hero-tactical *::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.toc-content::-webkit-scrollbar-thumb,
.wire-body::-webkit-scrollbar-thumb,
.sidebar-sticky::-webkit-scrollbar-thumb,
.stops-feed::-webkit-scrollbar-thumb,
.narrative-content::-webkit-scrollbar-thumb,
.report-body::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
.modal-map::-webkit-scrollbar-thumb,
.kit-drawer::-webkit-scrollbar-thumb,
.drawer-panel::-webkit-scrollbar-thumb,
.drawer-body-scroll::-webkit-scrollbar-thumb,
.drawer-content-wrapper::-webkit-scrollbar-thumb,
.trip-list-container::-webkit-scrollbar-thumb,
#mobileKitContainer::-webkit-scrollbar-thumb,
#drawerContent::-webkit-scrollbar-thumb,
.guide-container *::-webkit-scrollbar-thumb,
.hero-tactical *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), #c2410c);
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.35);
}

body.light-theme .toc-content,
body.light-theme .guide-container *,
body.light-theme .hero-tactical *,
body.light-theme .drawer-body-scroll,
body.light-theme #mobileKitContainer,
body.light-theme #drawerContent {
    scrollbar-color: var(--color-primary) rgba(0, 0, 0, 0.08);
}
body.light-theme .toc-content::-webkit-scrollbar-track,
body.light-theme .guide-container *::-webkit-scrollbar-track,
body.light-theme .hero-tactical *::-webkit-scrollbar-track,
body.light-theme .drawer-body-scroll::-webkit-scrollbar-track,
body.light-theme #mobileKitContainer::-webkit-scrollbar-track,
body.light-theme #drawerContent::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.07);
}

/* ---------------------------------------------------------
   8. WCAG 2.3.3 / 2.2.2 - MOVIMIENTO REDUCIDO
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .page-curl-hint i { animation: none !important; }
    .stop-card-v8:hover img { transform: none; }
}