/* DISEÑO PLANO ÚNICO (#portada-cont) */

/* VARIABLES GLOBALES */
:root {

/* ANCHURA, OPACIDAD Y HALOS DE LOS LOTES */
    --lote-size:50px;
    --lote-l-w: 32px; --lote-l-op: 1; --lote-l-halo: 68, 146, 220;  /* Libros    */
    --lote-m-w: 32px; --lote-m-op: 1; --lote-m-halo: 68, 146, 220;  /* Canciones */
    --lote-c-w: 32px; --lote-c-op: 1; --lote-c-halo: 68, 146, 220;  /* Cine      */
    --lote-t-w: 32px; --lote-t-op: 1; --lote-t-halo: 68, 146, 220;  /* TV        */
    --lote-y-w: 32px; --lote-y-op: 1; --lote-y-halo: 68, 146, 220;  /* Canales   */
    --lote-j-w: 32px; --lote-j-op: 1; --lote-j-halo: 68, 146, 220;  /* Juegos    */

/* ANCHURA, OPACIDAD Y HALOS DE LAS RAMAS EN MÓVIL */
    --rama-d-w: 275px; --rama-d-op: 1.0;  /* Destacado         */
    --rama-i-w: 140px; --rama-i-op: 1.0;  /* Introducción      */
    --rama-f-w: 270px; --rama-f-op: 1.0;  /* Fundamental       */
    --rama-n-w: 150px; --rama-n-op: 1.0;  /* Nuclear           */
    --rama-g-w: 190px; --rama-g-op: 1.0;  /* Gravitación       */
    --rama-e-w: 180px; --rama-e-op: 0.99; /* Electromagnetismo */
    --rama-o-w: 190px; --rama-o-op: 1.0;  /* Ondas             */

    --land: 0.6;
    --port: 0.55;

/* POSICIÓN DE LOS ICONOS DE LOS LOTES */
    --lote-l-izq-escr:  8; --lote-l-arr-escr: 60px;
    --lote-m-izq-escr: 24; --lote-m-arr-escr: 30px;
    --lote-c-izq-escr: 40; --lote-c-arr-escr: 15px;
    --lote-t-izq-escr: 56; --lote-t-arr-escr: 15px;
    --lote-y-izq-escr: 74; --lote-y-arr-escr: 30px;
    --lote-j-izq-escr: 90; --lote-j-arr-escr: 60px;

    --lote-l-izq-land:  7; --lote-l-arr-land: 24px;
    --lote-m-izq-land: 23; --lote-m-arr-land:  8px;
    --lote-c-izq-land: 39; --lote-c-arr-land:  0px;
    --lote-t-izq-land: 55; --lote-t-arr-land:  0px;
    --lote-y-izq-land: 73; --lote-y-arr-land:  8px;
    --lote-j-izq-land: 89; --lote-j-arr-land: 24px;

    --lote-l-izq-port:  7; --lote-l-arr-port: 20px;
    --lote-m-izq-port: 44; --lote-m-arr-port:  5px;
    --lote-c-izq-port: 81; --lote-c-arr-port: 20px;
    --lote-t-izq-port: 11; --lote-t-arr-port: 80px;
    --lote-y-izq-port: 44; --lote-y-arr-port: 65px;
    --lote-j-izq-port: 77; --lote-j-arr-port: 80px;

/* POSICIÓN DE LOS ICONOS DE LAS RAMAS */
    --rama-d-izq-escr: 22; --rama-d-arr-escr:  6;
    --rama-i-izq-escr: 57; --rama-i-arr-escr: 19;
    --rama-f-izq-escr:  3; --rama-f-arr-escr: 23;
    --rama-n-izq-escr: 78; --rama-n-arr-escr: 33;
    --rama-g-izq-escr: 21; --rama-g-arr-escr: 48;
    --rama-e-izq-escr: 41; --rama-e-arr-escr: 52;
    --rama-o-izq-escr: 60; --rama-o-arr-escr: 47;

    --rama-d-izq-land: 22; --rama-d-arr-land: 3.5;
    --rama-i-izq-land: 64; --rama-i-arr-land: 14;
    --rama-f-izq-land:  4; --rama-f-arr-land: 18;
    --rama-n-izq-land: 80; --rama-n-arr-land: 26;
    --rama-g-izq-land: 25; --rama-g-arr-land: 35;
    --rama-e-izq-land: 44; --rama-e-arr-land: 36; /* 43 crashea */
    --rama-o-izq-land: 62; --rama-o-arr-land: 35;

    --rama-d-izq-port: 10; --rama-d-arr-port: 15;
    --rama-i-izq-port: 61; --rama-i-arr-port: 21;
    --rama-f-izq-port: 10; --rama-f-arr-port: 60;
    --rama-n-izq-port: 60; --rama-n-arr-port: 65;
    --rama-g-izq-port: 10; --rama-g-arr-port: 38;
    --rama-e-izq-port: 38; --rama-e-arr-port: 44;
    --rama-o-izq-port: 62; --rama-o-arr-port: 38;

/* POSICIÓN DE LOS TÍTULOS DE LAS RAMAS */
    --rama-title-escr-size: 1.5vw;
    --rama-d-title-escr: 92; --rama-d-title-escr-show: 0;
    --rama-i-title-escr: 96; --rama-i-title-escr-show: 0;
    --rama-f-title-escr: 72; --rama-f-title-escr-show: 0;
    --rama-n-title-escr: 88; --rama-n-title-escr-show: 0;
    --rama-g-title-escr: 84; --rama-g-title-escr-show: 0;
    --rama-e-title-escr: 95; --rama-e-title-escr-show: 0;
    --rama-o-title-escr: 83; --rama-o-title-escr-show: 0;

    --rama-title-land-size: 1.5vw;
    --rama-d-title-land: 72; --rama-d-title-land-show: 1;
    --rama-i-title-land: 94; --rama-i-title-land-show: 1;
    --rama-f-title-land: 70; --rama-f-title-land-show: 1;
    --rama-n-title-land: 88; --rama-n-title-land-show: 1;
    --rama-g-title-land: 81; --rama-g-title-land-show: 1;
    --rama-e-title-land: 90; --rama-e-title-land-show: 1;
    --rama-o-title-land: 80; --rama-o-title-land-show: 1;

    --rama-title-port-size: 3.5vw;
    --rama-d-title-port: 72; --rama-d-title-port-show: 1;
    --rama-i-title-port: 94; --rama-i-title-port-show: 1;
    --rama-f-title-port: 73; --rama-f-title-port-show: 1;
    --rama-n-title-port: 93; --rama-n-title-port-show: 1;
    --rama-g-title-port: 88; --rama-g-title-port-show: 1;
    --rama-e-title-port: 90; --rama-e-title-port-show: 1;
    --rama-o-title-port: 88; --rama-o-title-port-show: 1;

    /* ─ HALO DE RAMAS AL HACER HOVER ─
       3 capas drop-shadow (siguen la silueta) + disco radial (aura circular detrás) */
    --halo-d1:    28px;  /* radio capa 1 (cerca, más densa) */
    --halo-d2:    56px;  /* radio capa 2 */
    --halo-d3:    96px;  /* radio capa 3 (lejos, más difusa) */
    --halo-op1:   0.95;  /* opacidad capa 1 */
    --halo-op2:   0.70;  /* opacidad capa 2 */
    --halo-op3:   0.45;  /* opacidad capa 3 */
    --halo-size:  280px; /* diámetro del disco radial (igual para todas las ramas) */
    --halo-aura:  0.55;  /* opacidad del disco radial */
    --halo-stop:  65%;   /* extensión del disco antes de transparente (bordes difusos) */
}

/* AISLAMIENTO INTEGRAL DE HARDWARE PARA EVITAR PARPADEOS Y DEFECTOS VECTORIALES */
#portada-cont,
.lote,
.rama,
.rama img,
.lote img {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* CONTENEDOR ÚNICO */
#portada-cont {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* LOTES DE DIVULGACIÓN */
.lote {
    position: absolute;
    width: var(--lote-size);
    height: var(--lote-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 6;   /* por encima de las ramas (5): sus lienzos transparentes no les roban el clic */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, filter 0.3s ease;
    text-decoration: none;
    overflow: visible;
    touch-action: manipulation; /* elimina el retardo de 300ms al tocar */
}

.lote img {
    display: block;
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.l img { width: var(--lote-l-w); opacity: var(--lote-l-op); }
.m img { width: var(--lote-m-w); opacity: var(--lote-m-op); }
.c img { width: var(--lote-c-w); opacity: var(--lote-c-op); }
.t img { width: var(--lote-t-w); opacity: var(--lote-t-op); }
.y img { width: var(--lote-y-w); opacity: var(--lote-y-op); }
.j img { width: var(--lote-j-w); opacity: var(--lote-j-op); }

.lote:hover { transform: scale(1.2); z-index: 50; }

.lote:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8));
    opacity: 1;
}

/* Disco oscuro tras cada lote (escritorio, landscape y portrait) */
.lote::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #1a1a2e 0%, #000005 60%, #000000 100%);
    z-index: 1;
    transition: box-shadow 0.4s ease;
}
.l:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-l-halo), 0.55); }
.m:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-m-halo), 0.55); }
.c:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-c-halo), 0.55); }
.t:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-t-halo), 0.55); }
.y:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-y-halo), 0.55); }
.j:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-j-halo), 0.55); }

/* RAMAS DE FÍSICA */
.rama {
    position: absolute;
    display: block;
    cursor: pointer;
    text-decoration: none;
    z-index: 4;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, filter 0.3s ease;
    touch-action: manipulation; /* elimina el retardo de 300ms al tocar */
}

.rama img {
    height: auto;
    display: block;
    transition: filter 0.4s ease, opacity 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Aura difusa detrás de la imagen — disco radial que no depende de la silueta */
.rama::after {
    content: '';
    position: absolute;
    /* Tamaño fijo: todas las ramas tienen el mismo círculo de aura */
    width: var(--halo-size);
    height: var(--halo-size);
    /* Centrar respecto al <a> (que sigue el tamaño de la imagen) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Etiqueta de TÍTULO de la rama: aspecto común.
   Visibilidad (-show), posición vertical (-title) y tamaño (-size) se fijan por
   contexto (escritorio / móvil landscape / portrait) más abajo. */
.rama::before {
    content: attr(title);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.1;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
    z-index: 3;
    opacity: 0;            /* oculto por defecto; cada contexto lo activa con su -show */
    pointer-events: none;
}

.rama:hover { transform: scale(1.2); z-index: 50; }
.rama:hover::after { opacity: 1; }

/* CANCIONES vs ECLIPSE (sin recortar nada visual): los lotes quedan POR ENCIMA
   de las ramas en la detección del puntero (z-index 6 > 4), así el lienzo
   transparente del eclipse no roba el clic al icono de canciones. Además el
   eclipse no se eleva al hacer hover, para no volver a taparlo. */
.rama.v:hover { z-index: 4; }

/* Halo combinado: drop-shadow multi-capa (silueta) + aura radial (::after) */
.d:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(180, 80,255, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(180, 80,255, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(180, 80,255, var(--halo-op3))); opacity: 1; }
.i:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(180, 80,255, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(180, 80,255, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(180, 80,255, var(--halo-op3))); opacity: 1; }
.f:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(240,160, 30, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(240,160, 30, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(240,160, 30, var(--halo-op3))); opacity: 1; }
.n:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(240,160, 30, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(240,160, 30, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(240,160, 30, var(--halo-op3))); opacity: 1; }
.g:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba( 68,146,220, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba( 68,146,220, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba( 68,146,220, var(--halo-op3))); opacity: 1; }
.e:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba( 68,146,220, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba( 68,146,220, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba( 68,146,220, var(--halo-op3))); opacity: 1; }
.o:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba( 68,146,220, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba( 68,146,220, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba( 68,146,220, var(--halo-op3))); opacity: 1; }

/* Disco de aura: color por rama */
.d::after { background: radial-gradient(circle, rgba(180, 80,255, var(--halo-aura)) 0%, rgba(180, 80,255,0) var(--halo-stop)); }
.i::after { background: radial-gradient(circle, rgba(180, 80,255, var(--halo-aura)) 0%, rgba(180, 80,255,0) var(--halo-stop)); }
.f::after { background: radial-gradient(circle, rgba(240,160, 30, var(--halo-aura)) 0%, rgba(240,160, 30,0) var(--halo-stop)); }
.n::after { background: radial-gradient(circle, rgba(240,160, 30, var(--halo-aura)) 0%, rgba(240,160, 30,0) var(--halo-stop)); }
.g::after { background: radial-gradient(circle, rgba( 68,146,220, var(--halo-aura)) 0%, rgba( 68,146,220,0) var(--halo-stop)); }
.e::after { background: radial-gradient(circle, rgba( 68,146,220, var(--halo-aura)) 0%, rgba( 68,146,220,0) var(--halo-stop)); }
.o::after { background: radial-gradient(circle, rgba( 68,146,220, var(--halo-aura)) 0%, rgba( 68,146,220,0) var(--halo-stop)); }

/* Atenuación global: hover en cualquier elemento atenúa al resto */
#portada-cont:has(.lote:hover) .lote:not(:hover),
#portada-cont:has(.lote:hover) .rama          { opacity: 0.55; filter: blur(0.5px); }

#portada-cont:has(.rama:hover) .rama:not(:hover),
#portada-cont:has(.rama:hover) .lote          { opacity: 0.55; filter: blur(0.5px); }

/* ESCRITORIO + LANDSCAPE (solo posiciones) */
@media (orientation: landscape) {

/* ESTILOS EXCLUSIVOS DE PRINCIPAL */
#principal main {
    flex: 1;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (max-width: 950px) { #principal main { padding-top: 60px; padding-bottom: 35px; } }
@media (max-width: 768px) { #principal main { padding-top: 48px; } }

/* ── ESCRITORIO ── */
#portada-cont { height: 540px; }

.l { left: calc(var(--lote-l-izq-escr) * 1%); top: var(--lote-l-arr-escr); }
.m { left: calc(var(--lote-m-izq-escr) * 1%); top: var(--lote-m-arr-escr); }
.c { left: calc(var(--lote-c-izq-escr) * 1%); top: var(--lote-c-arr-escr); }
.t { left: calc(var(--lote-t-izq-escr) * 1%); top: var(--lote-t-arr-escr); }
.y { left: calc(var(--lote-y-izq-escr) * 1%); top: var(--lote-y-arr-escr); }
.j { left: calc(var(--lote-j-izq-escr) * 1%); top: var(--lote-j-arr-escr); }

.d { left: calc(var(--rama-d-izq-escr) * 1%); top: calc(var(--rama-d-arr-escr) * 1%); } .d img { width: var(--rama-d-w); opacity: var(--rama-d-op); }
.i { left: calc(var(--rama-i-izq-escr) * 1%); top: calc(var(--rama-i-arr-escr) * 1%); } .i img { width: var(--rama-i-w); opacity: var(--rama-i-op); }
.f { left: calc(var(--rama-f-izq-escr) * 1%); top: calc(var(--rama-f-arr-escr) * 1%); } .f img { width: var(--rama-f-w); opacity: var(--rama-f-op); }
.n { left: calc(var(--rama-n-izq-escr) * 1%); top: calc(var(--rama-n-arr-escr) * 1%); } .n img { width: var(--rama-n-w); opacity: var(--rama-n-op); }
.g { left: calc(var(--rama-g-izq-escr) * 1%); top: calc(var(--rama-g-arr-escr) * 1%); } .g img { width: var(--rama-g-w); opacity: var(--rama-g-op); }
.e { left: calc(var(--rama-e-izq-escr) * 1%); top: calc(var(--rama-e-arr-escr) * 1%); } .e img { width: var(--rama-e-w); opacity: var(--rama-e-op); }
.o { left: calc(var(--rama-o-izq-escr) * 1%); top: calc(var(--rama-o-arr-escr) * 1%); } .o img { width: var(--rama-o-w); opacity: var(--rama-o-op); }

/* MÓVIL LANDSCAPE. Altura≤480px */
@media (orientation: landscape) and (max-height: 480px) {
#principal main { justify-content: flex-start; padding-top: 48px; padding-bottom: 8px; }
#portada-cont { height: 390px; transform: scale(1); transform-origin: top center; margin-bottom: -156px; }
.l { left: calc(var(--lote-l-izq-land) * 1%); top: var(--lote-l-arr-land); }
.m { left: calc(var(--lote-m-izq-land) * 1%); top: var(--lote-m-arr-land); }
.c { left: calc(var(--lote-c-izq-land) * 1%); top: var(--lote-c-arr-land); }
.t { left: calc(var(--lote-t-izq-land) * 1%); top: var(--lote-t-arr-land); }
.y { left: calc(var(--lote-y-izq-land) * 1%); top: var(--lote-y-arr-land); }
.j { left: calc(var(--lote-j-izq-land) * 1%); top: var(--lote-j-arr-land); }

.d { left: calc(var(--rama-d-izq-land) * 1%); top: calc(var(--rama-d-arr-land) * 1%); } .d img { width: calc(var(--rama-d-w) * var(--land)); }
.i { left: calc(var(--rama-i-izq-land) * 1%); top: calc(var(--rama-i-arr-land) * 1%); } .i img { width: calc(var(--rama-i-w) * var(--land)); }
.f { left: calc(var(--rama-f-izq-land) * 1%); top: calc(var(--rama-f-arr-land) * 1%); } .f img { width: calc(var(--rama-f-w) * var(--land)); }
.n { left: calc(var(--rama-n-izq-land) * 1%); top: calc(var(--rama-n-arr-land) * 1%); } .n img { width: calc(var(--rama-n-w) * var(--land)); }
.g { left: calc(var(--rama-g-izq-land) * 1%); top: calc(var(--rama-g-arr-land) * 1%); } .g img { width: calc(var(--rama-g-w) * var(--land)); }
.e { left: calc(var(--rama-e-izq-land) * 1%); top: calc(var(--rama-e-arr-land) * 1%); } .e img { width: calc(var(--rama-e-w) * var(--land)); }
.o { left: calc(var(--rama-o-izq-land) * 1%); top: calc(var(--rama-o-arr-land) * 1%); } .o img { width: calc(var(--rama-o-w) * var(--land)); }
/* Intro y EM se solapan ~60px: Intro sobre las demás ramas (4) pero bajo los lotes (6) */
.rama.i { z-index: 5; }
}

/* TÍTULOS. Posición vertical (% del alto del icono: 0 = arriba, 100 = abajo). */

/* Títulos en ESCRITORIO (desktop landscape, altura ≥ 481px) */
@media (orientation: landscape) and (min-height: 481px) {
.rama::before { font-size: var(--rama-title-escr-size); }
.d::before { top: calc(var(--rama-d-title-escr) * 1%); opacity: var(--rama-d-title-escr-show); }
.i::before { top: calc(var(--rama-i-title-escr) * 1%); opacity: var(--rama-i-title-escr-show); }
.f::before { top: calc(var(--rama-f-title-escr) * 1%); opacity: var(--rama-f-title-escr-show); }
.n::before { top: calc(var(--rama-n-title-escr) * 1%); opacity: var(--rama-n-title-escr-show); }
.g::before { top: calc(var(--rama-g-title-escr) * 1%); opacity: var(--rama-g-title-escr-show); }
.e::before { top: calc(var(--rama-e-title-escr) * 1%); opacity: var(--rama-e-title-escr-show); }
.o::before { top: calc(var(--rama-o-title-escr) * 1%); opacity: var(--rama-o-title-escr-show); }
}

/* Títulos en MÓVIL LANDSCAPE (altura ≤ 480px) */
@media (orientation: landscape) and (max-height: 480px) {
.rama::before { font-size: var(--rama-title-land-size); }
.d::before { top: calc(var(--rama-d-title-land) * 1%); opacity: var(--rama-d-title-land-show); }
.i::before { top: calc(var(--rama-i-title-land) * 1%); opacity: var(--rama-i-title-land-show); }
.f::before { top: calc(var(--rama-f-title-land) * 1%); opacity: var(--rama-f-title-land-show); }
.n::before { top: calc(var(--rama-n-title-land) * 1%); opacity: var(--rama-n-title-land-show); }
.g::before { top: calc(var(--rama-g-title-land) * 1%); opacity: var(--rama-g-title-land-show); }
.e::before { top: calc(var(--rama-e-title-land) * 1%); opacity: var(--rama-e-title-land-show); }
.o::before { top: calc(var(--rama-o-title-land) * 1%); opacity: var(--rama-o-title-land-show); }
}

/* Móvil landscape TÁCTIL: apertura instantánea de los enlaces de portada */
@media (orientation: landscape) and (max-height: 480px) and (hover: none) {
  .lote, .lote img, .lote::before,
  .rama, .rama img, .rama::after {
    transition: none !important;
  }
  .lote:hover, .rama:hover            { transform: none; }
  .lote:hover img, .rama:hover img    { transform: none; filter: none; }
  .rama:hover::after                  { opacity: 0; }
  #portada-cont:has(.lote:hover) .lote:not(:hover),
  #portada-cont:has(.lote:hover) .rama,
  #portada-cont:has(.rama:hover) .rama:not(:hover),
  #portada-cont:has(.rama:hover) .lote { opacity: 1; filter: none; }
}
}

/* LANDSCAPE estrecho (≤ 950px): lotes algo mayores + cabecera/main compactos
   (Se conserva el comportamiento previo; el diseño plano #portada-cont no cambia.) */
@media (orientation: landscape) and (max-width: 950px) {
:root { --lote-size: 50px; }

header { height: 60px; padding: 0 12px; font-size: 0.75em; }
header img { height: 2.25em; }
header h1 {
    font-size: 1.6em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#principal main {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 34px 8px 16px;
    gap: 16px;
    margin: 0;
    width: 100%;
    min-height: calc(100dvh - 60px);
}
}

/* PORTRAIT */
@media (orientation: portrait) {

/* La portada se centra en el viewport igual que en escritorio */
#principal main {
    flex: 1;
    justify-content: center;
    align-items: center;
}

/* Alto del lienzo de iconos (ajustable). Las posiciones "arr" de las ramas
   son % de este alto; las de los lotes son px. */
#portada-cont { height: 620px; }

/* LOTES — posición por variables -port (el disco .lote::before viene de la base común) */
.l { left: calc(var(--lote-l-izq-port) * 1%); top: var(--lote-l-arr-port); }
.m { left: calc(var(--lote-m-izq-port) * 1%); top: var(--lote-m-arr-port); }
.c { left: calc(var(--lote-c-izq-port) * 1%); top: var(--lote-c-arr-port); }
.t { left: calc(var(--lote-t-izq-port) * 1%); top: var(--lote-t-arr-port); }
.y { left: calc(var(--lote-y-izq-port) * 1%); top: var(--lote-y-arr-port); }
.j { left: calc(var(--lote-j-izq-port) * 1%); top: var(--lote-j-arr-port); }

/* RAMAS — posición por -izq/-arr-port; tamaño = anchura móvil (--rama-X-w) × --port */
.d { left: calc(var(--rama-d-izq-port) * 1%); top: calc(var(--rama-d-arr-port) * 1%); } .d img { width: calc(var(--rama-d-w) * var(--port)); opacity: var(--rama-d-op); }
.i { left: calc(var(--rama-i-izq-port) * 1%); top: calc(var(--rama-i-arr-port) * 1%); } .i img { width: calc(var(--rama-i-w) * var(--port)); opacity: var(--rama-i-op); }
.f { left: calc(var(--rama-f-izq-port) * 1%); top: calc(var(--rama-f-arr-port) * 1%); } .f img { width: calc(var(--rama-f-w) * var(--port)); opacity: var(--rama-f-op); }
.n { left: calc(var(--rama-n-izq-port) * 1%); top: calc(var(--rama-n-arr-port) * 1%); } .n img { width: calc(var(--rama-n-w) * var(--port)); opacity: var(--rama-n-op); }
.g { left: calc(var(--rama-g-izq-port) * 1%); top: calc(var(--rama-g-arr-port) * 1%); } .g img { width: calc(var(--rama-g-w) * var(--port)); opacity: var(--rama-g-op); }
.e { left: calc(var(--rama-e-izq-port) * 1%); top: calc(var(--rama-e-arr-port) * 1%); } .e img { width: calc(var(--rama-e-w) * var(--port)); opacity: var(--rama-e-op); }
.o { left: calc(var(--rama-o-izq-port) * 1%); top: calc(var(--rama-o-arr-port) * 1%); } .o img { width: calc(var(--rama-o-w) * var(--port)); opacity: var(--rama-o-op); }

/* Títulos en PORTRAIT. Posición vertical --rama-x-title-port (% del alto del icono). */
.rama::before { font-size: var(--rama-title-port-size); }
.d::before { top: calc(var(--rama-d-title-port) * 1%); opacity: var(--rama-d-title-port-show); }
.i::before { top: calc(var(--rama-i-title-port) * 1%); opacity: var(--rama-i-title-port-show); }
.f::before { top: calc(var(--rama-f-title-port) * 1%); opacity: var(--rama-f-title-port-show); }
.n::before { top: calc(var(--rama-n-title-port) * 1%); opacity: var(--rama-n-title-port-show); }
.g::before { top: calc(var(--rama-g-title-port) * 1%); opacity: var(--rama-g-title-port-show); }
.e::before { top: calc(var(--rama-e-title-port) * 1%); opacity: var(--rama-e-title-port-show); }
.o::before { top: calc(var(--rama-o-title-port) * 1%); opacity: var(--rama-o-title-port-show); }

/* Táctil: navegación instantánea (sin hover pegajoso ni atenuado del resto) */
@media (hover: none) {
  .lote, .lote img, .lote::before,
  .rama, .rama img, .rama::after {
    transition: none !important;
  }
  .lote:hover, .rama:hover            { transform: none; }
  .lote:hover img, .rama:hover img    { transform: none; filter: none; }
  .rama:hover::after                  { opacity: 0; }
  #portada-cont:has(.lote:hover) .lote:not(:hover),
  #portada-cont:has(.lote:hover) .rama,
  #portada-cont:has(.rama:hover) .rama:not(:hover),
  #portada-cont:has(.rama:hover) .lote { opacity: 1; filter: none; }
}
}

/* Oculta los 6 iconos de divulgación y quita su interacción */
body.portada-oculta #portada-cont .lote {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Oculta los títulos de las ramas de Física */
body.portada-oculta #portada-cont .rama::before {
    opacity: 0 !important;
}

/* Desactiva los efectos de atenuación cruzada (:has) cuando todo esté oculto */
body.portada-oculta #portada-cont:has(.rama:hover) .lote,
body.portada-oculta #portada-cont:has(.lote:hover) .rama {
    opacity: 1 !important;
    filter: none !important;
}

/* NÚCLEO DE ACTIVACIÓN (solo escritorio con ratón) */
@media (orientation: landscape) and (min-height: 481px) and (hover: hover) {
  .rama { pointer-events: none; }
  .rama::before {
    content: '';
    width:  var(--hit-rama, 62%);
    height: var(--hit-rama, 62%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: auto;
  }
}

/* Animación de destello / parpadeo para destacar el enlace */
@keyframes destello-destacado {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px #ffeb3b); /* Resplandor amarillo */
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    filter: drop-shadow(0 0 0px transparent);
    transform: scale(1.1); /* Ligero aumento de tamaño */
  }
}

/* 1. FME (header): Punto rojo sin alterar layout */
header a.notificacion-activa {
    position: relative;
}

header a.notificacion-activa::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    background-color: #f02000;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(240, 32, 0, 0.9);
    z-index: 9999;
    pointer-events: none;
    display: block;
}

/* 2. Lotes: Punto rojo superpuesto vía grid/transform SIN cambiar la propiedad position original */
#portada-cont .lote.notificacion-activa::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 9px;
    background-color: #f02000;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(240, 32, 0, 0.9);
    z-index: 9999;
    pointer-events: none;
    display: block;
}

/* 3. Ramas: Resplandor rojo directo en la imagen SVG */
#portada-cont .rama.notificacion-activa img,
#portada-cont .rama.rama-activa img {
    filter: drop-shadow(0 0 6px #f02000) drop-shadow(0 0 12px rgba(240, 32, 0, 0.8)) !important;
}/* DISEÑO PLANO ÚNICO (#portada-cont) */

/* VARIABLES GLOBALES */
:root {

/* ANCHURA, OPACIDAD Y HALOS DE LOS LOTES */
    --lote-size:50px;
    --lote-l-w: 32px; --lote-l-op: 1; --lote-l-halo: 68, 146, 220;  /* Libros    */
    --lote-m-w: 32px; --lote-m-op: 1; --lote-m-halo: 68, 146, 220;  /* Canciones */
    --lote-c-w: 32px; --lote-c-op: 1; --lote-c-halo: 68, 146, 220;  /* Cine      */
    --lote-t-w: 32px; --lote-t-op: 1; --lote-t-halo: 68, 146, 220;  /* TV        */
    --lote-y-w: 32px; --lote-y-op: 1; --lote-y-halo: 68, 146, 220;  /* Canales   */
    --lote-j-w: 32px; --lote-j-op: 1; --lote-j-halo: 68, 146, 220;  /* Juegos    */

/* ANCHURA, OPACIDAD Y HALOS DE LAS RAMAS EN MÓVIL */
    --rama-d-w: 275px; --rama-d-op: 1.0;  /* Destacado         */
    --rama-i-w: 140px; --rama-i-op: 1.0;  /* Introducción      */
    --rama-f-w: 270px; --rama-f-op: 1.0;  /* Fundamental       */
    --rama-n-w: 150px; --rama-n-op: 1.0;  /* Nuclear           */
    --rama-g-w: 190px; --rama-g-op: 1.0;  /* Gravitación       */
    --rama-e-w: 180px; --rama-e-op: 0.99; /* Electromagnetismo */
    --rama-o-w: 190px; --rama-o-op: 1.0;  /* Ondas             */

    --land: 0.6;
    --port: 0.55;

/* POSICIÓN DE LOS ICONOS DE LOS LOTES */
    --lote-l-izq-escr:  8; --lote-l-arr-escr: 60px;
    --lote-m-izq-escr: 24; --lote-m-arr-escr: 30px;
    --lote-c-izq-escr: 40; --lote-c-arr-escr: 15px;
    --lote-t-izq-escr: 56; --lote-t-arr-escr: 15px;
    --lote-y-izq-escr: 74; --lote-y-arr-escr: 30px;
    --lote-j-izq-escr: 90; --lote-j-arr-escr: 60px;

    --lote-l-izq-land:  7; --lote-l-arr-land: 24px;
    --lote-m-izq-land: 23; --lote-m-arr-land:  8px;
    --lote-c-izq-land: 39; --lote-c-arr-land:  0px;
    --lote-t-izq-land: 55; --lote-t-arr-land:  0px;
    --lote-y-izq-land: 73; --lote-y-arr-land:  8px;
    --lote-j-izq-land: 89; --lote-j-arr-land: 24px;

    --lote-l-izq-port:  7; --lote-l-arr-port: 20px;
    --lote-m-izq-port: 44; --lote-m-arr-port:  5px;
    --lote-c-izq-port: 81; --lote-c-arr-port: 20px;
    --lote-t-izq-port: 11; --lote-t-arr-port: 80px;
    --lote-y-izq-port: 44; --lote-y-arr-port: 65px;
    --lote-j-izq-port: 77; --lote-j-arr-port: 80px;

/* POSICIÓN DE LOS ICONOS DE LAS RAMAS */
    --rama-d-izq-escr: 22; --rama-d-arr-escr:  6;
    --rama-i-izq-escr: 57; --rama-i-arr-escr: 19;
    --rama-f-izq-escr:  3; --rama-f-arr-escr: 23;
    --rama-n-izq-escr: 78; --rama-n-arr-escr: 33;
    --rama-g-izq-escr: 21; --rama-g-arr-escr: 48;
    --rama-e-izq-escr: 41; --rama-e-arr-escr: 52;
    --rama-o-izq-escr: 60; --rama-o-arr-escr: 47;

    --rama-d-izq-land: 22; --rama-d-arr-land: 3.5;
    --rama-i-izq-land: 64; --rama-i-arr-land: 14;
    --rama-f-izq-land:  4; --rama-f-arr-land: 18;
    --rama-n-izq-land: 80; --rama-n-arr-land: 26;
    --rama-g-izq-land: 25; --rama-g-arr-land: 35;
    --rama-e-izq-land: 44; --rama-e-arr-land: 36; /* 43 crashea */
    --rama-o-izq-land: 62; --rama-o-arr-land: 35;

    --rama-d-izq-port: 10; --rama-d-arr-port: 15;
    --rama-i-izq-port: 61; --rama-i-arr-port: 21;
    --rama-f-izq-port: 10; --rama-f-arr-port: 60;
    --rama-n-izq-port: 60; --rama-n-arr-port: 65;
    --rama-g-izq-port: 10; --rama-g-arr-port: 38;
    --rama-e-izq-port: 38; --rama-e-arr-port: 44;
    --rama-o-izq-port: 62; --rama-o-arr-port: 38;

/* POSICIÓN DE LOS TÍTULOS DE LAS RAMAS */
    --rama-title-escr-size: 1.5vw;
    --rama-d-title-escr: 92; --rama-d-title-escr-show: 0;
    --rama-i-title-escr: 96; --rama-i-title-escr-show: 0;
    --rama-f-title-escr: 72; --rama-f-title-escr-show: 0;
    --rama-n-title-escr: 88; --rama-n-title-escr-show: 0;
    --rama-g-title-escr: 84; --rama-g-title-escr-show: 0;
    --rama-e-title-escr: 95; --rama-e-title-escr-show: 0;
    --rama-o-title-escr: 83; --rama-o-title-escr-show: 0;

    --rama-title-land-size: 1.5vw;
    --rama-d-title-land: 72; --rama-d-title-land-show: 1;
    --rama-i-title-land: 94; --rama-i-title-land-show: 1;
    --rama-f-title-land: 70; --rama-f-title-land-show: 1;
    --rama-n-title-land: 88; --rama-n-title-land-show: 1;
    --rama-g-title-land: 81; --rama-g-title-land-show: 1;
    --rama-e-title-land: 90; --rama-e-title-land-show: 1;
    --rama-o-title-land: 80; --rama-o-title-land-show: 1;

    --rama-title-port-size: 3.5vw;
    --rama-d-title-port: 72; --rama-d-title-port-show: 1;
    --rama-i-title-port: 94; --rama-i-title-port-show: 1;
    --rama-f-title-port: 73; --rama-f-title-port-show: 1;
    --rama-n-title-port: 93; --rama-n-title-port-show: 1;
    --rama-g-title-port: 88; --rama-g-title-port-show: 1;
    --rama-e-title-port: 90; --rama-e-title-port-show: 1;
    --rama-o-title-port: 88; --rama-o-title-port-show: 1;

    /* ─ HALO DE RAMAS AL HACER HOVER ─
       3 capas drop-shadow (siguen la silueta) + disco radial (aura circular detrás) */
    --halo-d1:    28px;  /* radio capa 1 (cerca, más densa) */
    --halo-d2:    56px;  /* radio capa 2 */
    --halo-d3:    96px;  /* radio capa 3 (lejos, más difusa) */
    --halo-op1:   0.95;  /* opacidad capa 1 */
    --halo-op2:   0.70;  /* opacidad capa 2 */
    --halo-op3:   0.45;  /* opacidad capa 3 */
    --halo-size:  280px; /* diámetro del disco radial (igual para todas las ramas) */
    --halo-aura:  0.55;  /* opacidad del disco radial */
    --halo-stop:  65%;   /* extensión del disco antes de transparente (bordes difusos) */
}

/* AISLAMIENTO INTEGRAL DE HARDWARE PARA EVITAR PARPADEOS Y DEFECTOS VECTORIALES */
#portada-cont,
.lote,
.rama,
.rama img,
.lote img {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* CONTENEDOR ÚNICO */
#portada-cont {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* LOTES DE DIVULGACIÓN */
.lote {
    position: absolute;
    width: var(--lote-size);
    height: var(--lote-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 6;   /* por encima de las ramas (5): sus lienzos transparentes no les roban el clic */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, filter 0.3s ease;
    text-decoration: none;
    overflow: visible;
    touch-action: manipulation; /* elimina el retardo de 300ms al tocar */
}

.lote img {
    display: block;
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.l img { width: var(--lote-l-w); opacity: var(--lote-l-op); }
.m img { width: var(--lote-m-w); opacity: var(--lote-m-op); }
.c img { width: var(--lote-c-w); opacity: var(--lote-c-op); }
.t img { width: var(--lote-t-w); opacity: var(--lote-t-op); }
.y img { width: var(--lote-y-w); opacity: var(--lote-y-op); }
.j img { width: var(--lote-j-w); opacity: var(--lote-j-op); }

.lote:hover { transform: scale(1.2); z-index: 50; }

.lote:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8));
    opacity: 1;
}

/* Disco oscuro tras cada lote (escritorio, landscape y portrait) */
.lote::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #1a1a2e 0%, #000005 60%, #000000 100%);
    z-index: 1;
    transition: box-shadow 0.4s ease;
}
.l:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-l-halo), 0.55); }
.m:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-m-halo), 0.55); }
.c:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-c-halo), 0.55); }
.t:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-t-halo), 0.55); }
.y:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-y-halo), 0.55); }
.j:hover::before { box-shadow: 0 0 16px 4px rgba(var(--lote-j-halo), 0.55); }

/* RAMAS DE FÍSICA */
.rama {
    position: absolute;
    display: block;
    cursor: pointer;
    text-decoration: none;
    z-index: 4;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, filter 0.3s ease;
    touch-action: manipulation; /* elimina el retardo de 300ms al tocar */
}

.rama img {
    height: auto;
    display: block;
    transition: filter 0.4s ease, opacity 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Aura difusa detrás de la imagen — disco radial que no depende de la silueta */
.rama::after {
    content: '';
    position: absolute;
    /* Tamaño fijo: todas las ramas tienen el mismo círculo de aura */
    width: var(--halo-size);
    height: var(--halo-size);
    /* Centrar respecto al <a> (que sigue el tamaño de la imagen) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Etiqueta de TÍTULO de la rama: aspecto común.
   Visibilidad (-show), posición vertical (-title) y tamaño (-size) se fijan por
   contexto (escritorio / móvil landscape / portrait) más abajo. */
.rama::before {
    content: attr(title);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.1;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
    z-index: 3;
    opacity: 0;            /* oculto por defecto; cada contexto lo activa con su -show */
    pointer-events: none;
}

.rama:hover { transform: scale(1.2); z-index: 50; }
.rama:hover::after { opacity: 1; }

/* CANCIONES vs ECLIPSE (sin recortar nada visual): los lotes quedan POR ENCIMA
   de las ramas en la detección del puntero (z-index 6 > 4), así el lienzo
   transparente del eclipse no roba el clic al icono de canciones. Además el
   eclipse no se eleva al hacer hover, para no volver a taparlo. */
.rama.v:hover { z-index: 4; }

/* Halo combinado: drop-shadow multi-capa (silueta) + aura radial (::after) */
.d:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(180, 80,255, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(180, 80,255, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(180, 80,255, var(--halo-op3))); opacity: 1; }
.i:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(180, 80,255, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(180, 80,255, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(180, 80,255, var(--halo-op3))); opacity: 1; }
.f:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(240,160, 30, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(240,160, 30, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(240,160, 30, var(--halo-op3))); opacity: 1; }
.n:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba(240,160, 30, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba(240,160, 30, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba(240,160, 30, var(--halo-op3))); opacity: 1; }
.g:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba( 68,146,220, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba( 68,146,220, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba( 68,146,220, var(--halo-op3))); opacity: 1; }
.e:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba( 68,146,220, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba( 68,146,220, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba( 68,146,220, var(--halo-op3))); opacity: 1; }
.o:hover img { filter: drop-shadow(0 0 var(--halo-d1) rgba( 68,146,220, var(--halo-op1)))
                       drop-shadow(0 0 var(--halo-d2) rgba( 68,146,220, var(--halo-op2)))
                       drop-shadow(0 0 var(--halo-d3) rgba( 68,146,220, var(--halo-op3))); opacity: 1; }

/* Disco de aura: color por rama */
.d::after { background: radial-gradient(circle, rgba(180, 80,255, var(--halo-aura)) 0%, rgba(180, 80,255,0) var(--halo-stop)); }
.i::after { background: radial-gradient(circle, rgba(180, 80,255, var(--halo-aura)) 0%, rgba(180, 80,255,0) var(--halo-stop)); }
.f::after { background: radial-gradient(circle, rgba(240,160, 30, var(--halo-aura)) 0%, rgba(240,160, 30,0) var(--halo-stop)); }
.n::after { background: radial-gradient(circle, rgba(240,160, 30, var(--halo-aura)) 0%, rgba(240,160, 30,0) var(--halo-stop)); }
.g::after { background: radial-gradient(circle, rgba( 68,146,220, var(--halo-aura)) 0%, rgba( 68,146,220,0) var(--halo-stop)); }
.e::after { background: radial-gradient(circle, rgba( 68,146,220, var(--halo-aura)) 0%, rgba( 68,146,220,0) var(--halo-stop)); }
.o::after { background: radial-gradient(circle, rgba( 68,146,220, var(--halo-aura)) 0%, rgba( 68,146,220,0) var(--halo-stop)); }

/* Atenuación global: hover en cualquier elemento atenúa al resto */
#portada-cont:has(.lote:hover) .lote:not(:hover),
#portada-cont:has(.lote:hover) .rama          { opacity: 0.55; filter: blur(0.5px); }

#portada-cont:has(.rama:hover) .rama:not(:hover),
#portada-cont:has(.rama:hover) .lote          { opacity: 0.55; filter: blur(0.5px); }

/* ESCRITORIO + LANDSCAPE (solo posiciones) */
@media (orientation: landscape) {

/* ESTILOS EXCLUSIVOS DE PRINCIPAL */
#principal main {
    flex: 1;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (max-width: 950px) { #principal main { padding-top: 60px; padding-bottom: 35px; } }
@media (max-width: 768px) { #principal main { padding-top: 48px; } }

/* ── ESCRITORIO ── */
#portada-cont { height: 540px; }

.l { left: calc(var(--lote-l-izq-escr) * 1%); top: var(--lote-l-arr-escr); }
.m { left: calc(var(--lote-m-izq-escr) * 1%); top: var(--lote-m-arr-escr); }
.c { left: calc(var(--lote-c-izq-escr) * 1%); top: var(--lote-c-arr-escr); }
.t { left: calc(var(--lote-t-izq-escr) * 1%); top: var(--lote-t-arr-escr); }
.y { left: calc(var(--lote-y-izq-escr) * 1%); top: var(--lote-y-arr-escr); }
.j { left: calc(var(--lote-j-izq-escr) * 1%); top: var(--lote-j-arr-escr); }

.d { left: calc(var(--rama-d-izq-escr) * 1%); top: calc(var(--rama-d-arr-escr) * 1%); } .d img { width: var(--rama-d-w); opacity: var(--rama-d-op); }
.i { left: calc(var(--rama-i-izq-escr) * 1%); top: calc(var(--rama-i-arr-escr) * 1%); } .i img { width: var(--rama-i-w); opacity: var(--rama-i-op); }
.f { left: calc(var(--rama-f-izq-escr) * 1%); top: calc(var(--rama-f-arr-escr) * 1%); } .f img { width: var(--rama-f-w); opacity: var(--rama-f-op); }
.n { left: calc(var(--rama-n-izq-escr) * 1%); top: calc(var(--rama-n-arr-escr) * 1%); } .n img { width: var(--rama-n-w); opacity: var(--rama-n-op); }
.g { left: calc(var(--rama-g-izq-escr) * 1%); top: calc(var(--rama-g-arr-escr) * 1%); } .g img { width: var(--rama-g-w); opacity: var(--rama-g-op); }
.e { left: calc(var(--rama-e-izq-escr) * 1%); top: calc(var(--rama-e-arr-escr) * 1%); } .e img { width: var(--rama-e-w); opacity: var(--rama-e-op); }
.o { left: calc(var(--rama-o-izq-escr) * 1%); top: calc(var(--rama-o-arr-escr) * 1%); } .o img { width: var(--rama-o-w); opacity: var(--rama-o-op); }

/* MÓVIL LANDSCAPE. Altura≤480px */
@media (orientation: landscape) and (max-height: 480px) {
#principal main { justify-content: flex-start; padding-top: 48px; padding-bottom: 8px; }
#portada-cont { height: 390px; transform: scale(1); transform-origin: top center; margin-bottom: -156px; }
.l { left: calc(var(--lote-l-izq-land) * 1%); top: var(--lote-l-arr-land); }
.m { left: calc(var(--lote-m-izq-land) * 1%); top: var(--lote-m-arr-land); }
.c { left: calc(var(--lote-c-izq-land) * 1%); top: var(--lote-c-arr-land); }
.t { left: calc(var(--lote-t-izq-land) * 1%); top: var(--lote-t-arr-land); }
.y { left: calc(var(--lote-y-izq-land) * 1%); top: var(--lote-y-arr-land); }
.j { left: calc(var(--lote-j-izq-land) * 1%); top: var(--lote-j-arr-land); }

.d { left: calc(var(--rama-d-izq-land) * 1%); top: calc(var(--rama-d-arr-land) * 1%); } .d img { width: calc(var(--rama-d-w) * var(--land)); }
.i { left: calc(var(--rama-i-izq-land) * 1%); top: calc(var(--rama-i-arr-land) * 1%); } .i img { width: calc(var(--rama-i-w) * var(--land)); }
.f { left: calc(var(--rama-f-izq-land) * 1%); top: calc(var(--rama-f-arr-land) * 1%); } .f img { width: calc(var(--rama-f-w) * var(--land)); }
.n { left: calc(var(--rama-n-izq-land) * 1%); top: calc(var(--rama-n-arr-land) * 1%); } .n img { width: calc(var(--rama-n-w) * var(--land)); }
.g { left: calc(var(--rama-g-izq-land) * 1%); top: calc(var(--rama-g-arr-land) * 1%); } .g img { width: calc(var(--rama-g-w) * var(--land)); }
.e { left: calc(var(--rama-e-izq-land) * 1%); top: calc(var(--rama-e-arr-land) * 1%); } .e img { width: calc(var(--rama-e-w) * var(--land)); }
.o { left: calc(var(--rama-o-izq-land) * 1%); top: calc(var(--rama-o-arr-land) * 1%); } .o img { width: calc(var(--rama-o-w) * var(--land)); }
/* Intro y EM se solapan ~60px: Intro sobre las demás ramas (4) pero bajo los lotes (6) */
.rama.i { z-index: 5; }
}

/* TÍTULOS. Posición vertical (% del alto del icono: 0 = arriba, 100 = abajo). */

/* Títulos en ESCRITORIO (desktop landscape, altura ≥ 481px) */
@media (orientation: landscape) and (min-height: 481px) {
.rama::before { font-size: var(--rama-title-escr-size); }
.d::before { top: calc(var(--rama-d-title-escr) * 1%); opacity: var(--rama-d-title-escr-show); }
.i::before { top: calc(var(--rama-i-title-escr) * 1%); opacity: var(--rama-i-title-escr-show); }
.f::before { top: calc(var(--rama-f-title-escr) * 1%); opacity: var(--rama-f-title-escr-show); }
.n::before { top: calc(var(--rama-n-title-escr) * 1%); opacity: var(--rama-n-title-escr-show); }
.g::before { top: calc(var(--rama-g-title-escr) * 1%); opacity: var(--rama-g-title-escr-show); }
.e::before { top: calc(var(--rama-e-title-escr) * 1%); opacity: var(--rama-e-title-escr-show); }
.o::before { top: calc(var(--rama-o-title-escr) * 1%); opacity: var(--rama-o-title-escr-show); }
}

/* Títulos en MÓVIL LANDSCAPE (altura ≤ 480px) */
@media (orientation: landscape) and (max-height: 480px) {
.rama::before { font-size: var(--rama-title-land-size); }
.d::before { top: calc(var(--rama-d-title-land) * 1%); opacity: var(--rama-d-title-land-show); }
.i::before { top: calc(var(--rama-i-title-land) * 1%); opacity: var(--rama-i-title-land-show); }
.f::before { top: calc(var(--rama-f-title-land) * 1%); opacity: var(--rama-f-title-land-show); }
.n::before { top: calc(var(--rama-n-title-land) * 1%); opacity: var(--rama-n-title-land-show); }
.g::before { top: calc(var(--rama-g-title-land) * 1%); opacity: var(--rama-g-title-land-show); }
.e::before { top: calc(var(--rama-e-title-land) * 1%); opacity: var(--rama-e-title-land-show); }
.o::before { top: calc(var(--rama-o-title-land) * 1%); opacity: var(--rama-o-title-land-show); }
}

/* Móvil landscape TÁCTIL: apertura instantánea de los enlaces de portada */
@media (orientation: landscape) and (max-height: 480px) and (hover: none) {
  .lote, .lote img, .lote::before,
  .rama, .rama img, .rama::after {
    transition: none !important;
  }
  .lote:hover, .rama:hover            { transform: none; }
  .lote:hover img, .rama:hover img    { transform: none; filter: none; }
  .rama:hover::after                  { opacity: 0; }
  #portada-cont:has(.lote:hover) .lote:not(:hover),
  #portada-cont:has(.lote:hover) .rama,
  #portada-cont:has(.rama:hover) .rama:not(:hover),
  #portada-cont:has(.rama:hover) .lote { opacity: 1; filter: none; }
}
}

/* LANDSCAPE estrecho (≤ 950px): lotes algo mayores + cabecera/main compactos
   (Se conserva el comportamiento previo; el diseño plano #portada-cont no cambia.) */
@media (orientation: landscape) and (max-width: 950px) {
:root { --lote-size: 50px; }

header { height: 60px; padding: 0 12px; font-size: 0.75em; }
header img { height: 2.25em; }
header h1 {
    font-size: 1.6em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#principal main {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 34px 8px 16px;
    gap: 16px;
    margin: 0;
    width: 100%;
    min-height: calc(100dvh - 60px);
}
}

/* PORTRAIT */
@media (orientation: portrait) {

/* La portada se centra en el viewport igual que en escritorio */
#principal main {
    flex: 1;
    justify-content: center;
    align-items: center;
}

/* Alto del lienzo de iconos (ajustable). Las posiciones "arr" de las ramas
   son % de este alto; las de los lotes son px. */
#portada-cont { height: 620px; }

/* LOTES — posición por variables -port (el disco .lote::before viene de la base común) */
.l { left: calc(var(--lote-l-izq-port) * 1%); top: var(--lote-l-arr-port); }
.m { left: calc(var(--lote-m-izq-port) * 1%); top: var(--lote-m-arr-port); }
.c { left: calc(var(--lote-c-izq-port) * 1%); top: var(--lote-c-arr-port); }
.t { left: calc(var(--lote-t-izq-port) * 1%); top: var(--lote-t-arr-port); }
.y { left: calc(var(--lote-y-izq-port) * 1%); top: var(--lote-y-arr-port); }
.j { left: calc(var(--lote-j-izq-port) * 1%); top: var(--lote-j-arr-port); }

/* RAMAS — posición por -izq/-arr-port; tamaño = anchura móvil (--rama-X-w) × --port */
.d { left: calc(var(--rama-d-izq-port) * 1%); top: calc(var(--rama-d-arr-port) * 1%); } .d img { width: calc(var(--rama-d-w) * var(--port)); opacity: var(--rama-d-op); }
.i { left: calc(var(--rama-i-izq-port) * 1%); top: calc(var(--rama-i-arr-port) * 1%); } .i img { width: calc(var(--rama-i-w) * var(--port)); opacity: var(--rama-i-op); }
.f { left: calc(var(--rama-f-izq-port) * 1%); top: calc(var(--rama-f-arr-port) * 1%); } .f img { width: calc(var(--rama-f-w) * var(--port)); opacity: var(--rama-f-op); }
.n { left: calc(var(--rama-n-izq-port) * 1%); top: calc(var(--rama-n-arr-port) * 1%); } .n img { width: calc(var(--rama-n-w) * var(--port)); opacity: var(--rama-n-op); }
.g { left: calc(var(--rama-g-izq-port) * 1%); top: calc(var(--rama-g-arr-port) * 1%); } .g img { width: calc(var(--rama-g-w) * var(--port)); opacity: var(--rama-g-op); }
.e { left: calc(var(--rama-e-izq-port) * 1%); top: calc(var(--rama-e-arr-port) * 1%); } .e img { width: calc(var(--rama-e-w) * var(--port)); opacity: var(--rama-e-op); }
.o { left: calc(var(--rama-o-izq-port) * 1%); top: calc(var(--rama-o-arr-port) * 1%); } .o img { width: calc(var(--rama-o-w) * var(--port)); opacity: var(--rama-o-op); }

/* Títulos en PORTRAIT. Posición vertical --rama-x-title-port (% del alto del icono). */
.rama::before { font-size: var(--rama-title-port-size); }
.d::before { top: calc(var(--rama-d-title-port) * 1%); opacity: var(--rama-d-title-port-show); }
.i::before { top: calc(var(--rama-i-title-port) * 1%); opacity: var(--rama-i-title-port-show); }
.f::before { top: calc(var(--rama-f-title-port) * 1%); opacity: var(--rama-f-title-port-show); }
.n::before { top: calc(var(--rama-n-title-port) * 1%); opacity: var(--rama-n-title-port-show); }
.g::before { top: calc(var(--rama-g-title-port) * 1%); opacity: var(--rama-g-title-port-show); }
.e::before { top: calc(var(--rama-e-title-port) * 1%); opacity: var(--rama-e-title-port-show); }
.o::before { top: calc(var(--rama-o-title-port) * 1%); opacity: var(--rama-o-title-port-show); }

/* Táctil: navegación instantánea (sin hover pegajoso ni atenuado del resto) */
@media (hover: none) {
  .lote, .lote img, .lote::before,
  .rama, .rama img, .rama::after {
    transition: none !important;
  }
  .lote:hover, .rama:hover            { transform: none; }
  .lote:hover img, .rama:hover img    { transform: none; filter: none; }
  .rama:hover::after                  { opacity: 0; }
  #portada-cont:has(.lote:hover) .lote:not(:hover),
  #portada-cont:has(.lote:hover) .rama,
  #portada-cont:has(.rama:hover) .rama:not(:hover),
  #portada-cont:has(.rama:hover) .lote { opacity: 1; filter: none; }
}
}

/* Oculta los 6 iconos de divulgación y quita su interacción */
body.portada-oculta #portada-cont .lote {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Oculta los títulos de las ramas de Física */
body.portada-oculta #portada-cont .rama::before {
    opacity: 0 !important;
}

/* Desactiva los efectos de atenuación cruzada (:has) cuando todo esté oculto */
body.portada-oculta #portada-cont:has(.rama:hover) .lote,
body.portada-oculta #portada-cont:has(.lote:hover) .rama {
    opacity: 1 !important;
    filter: none !important;
}

/* NÚCLEO DE ACTIVACIÓN (solo escritorio con ratón) */
@media (orientation: landscape) and (min-height: 481px) and (hover: hover) {
  .rama { pointer-events: none; }
  .rama::before {
    content: '';
    width:  var(--hit-rama, 62%);
    height: var(--hit-rama, 62%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: auto;
  }
}

/* Animación de destello / parpadeo para destacar el enlace */
@keyframes destello-destacado {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px #ffeb3b); /* Resplandor amarillo */
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    filter: drop-shadow(0 0 0px transparent);
    transform: scale(1.1); /* Ligero aumento de tamaño */
  }
}

/* 1. FME (header): Punto rojo sin alterar layout */
header a.notificacion-activa {
    position: relative;
}

header a.notificacion-activa::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    background-color: #f02000;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(240, 32, 0, 0.9);
    z-index: 9999;
    pointer-events: none;
    display: block;
}

/* 2. Lotes: Punto rojo superpuesto vía grid/transform SIN cambiar la propiedad position original */
#portada-cont .lote.notificacion-activa::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 9px;
    background-color: #f02000;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(240, 32, 0, 0.9);
    z-index: 9999;
    pointer-events: none;
    display: block;
}

/* 3. Ramas: Resplandor rojo directo en la imagen SVG */
#portada-cont .rama.notificacion-activa img,
#portada-cont .rama.rama-activa img {
    filter: drop-shadow(0 0 6px #f02000) drop-shadow(0 0 12px rgba(240, 32, 0, 0.8)) !important;
}