/* Landing del Ciclo Anual — Universidad Nacional del Callao.

   TODO cuelga de .lp-puerto. El marco del sitio inyecta en ESTE documento
   Bootstrap, akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: a igualdad
   de especificidad ganan sus reglas. De ahí el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: el puerto del Callao. La bahía de noche (portada, muelle de carga,
   sonda y cierre) es oscura en los dos temas, como el mar de noche. Las secciones
   de lectura son una carta náutica de papel, clara de día y azul noche en el tema
   oscuro. Los documentos de a bordo (manifiesto, ficha, radiograma, consultas)
   son papel sobre la carta.

   CINCO FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul marino y dorado de la franja superior,
       la identidad de las landings de la UNAC.
     · LA NOCHE (--lp-noche-*, --lp-luz-*): el mar y el cielo oscuros y la luz del
       faro. Iguales en los dos temas.
     · LA CARTA Y EL PAPEL (--lp-carta-*, --lp-papel-*, --lp-patio-*,
       --lp-rada-*): cambian con el tema.
     · LA PINTURA (--lp-rojo, --lp-azul, --lp-boya-*, --lp-casco-*, los
       contenedores): banderas, boyas, cascos y contenedores. Son objetos
       pintados y se ven igual de día y de noche.
     · LA ACCIÓN (--lp-chaleco-*): el naranja de chaleco salvavidas de todas las
       llamadas a inscribirse.

   Todo el movimiento respeta la preferencia de menos movimiento del sistema y
   ninguna animación se repite sin fin. */
.lp-puerto {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #0E2240;
    --lp-uni-alto: #17325A;
    --lp-uni-oro: #D9A93F;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #C9D3E0;
    /* ── La noche: oscura en los dos temas ─────────────────────────────── */
    --lp-noche: #06101F;
    --lp-noche-alto: #0B2140;
    --lp-noche-bajo: #0E2C52;
    --lp-noche-panel: rgba(6, 16, 31, .72);
    --lp-noche-texto: #EEF4FB;
    --lp-noche-suave: rgba(238, 244, 251, .8);
    --lp-noche-linea: rgba(238, 244, 251, .16);
    --lp-noche-linea-fuerte: rgba(238, 244, 251, .42);
    --lp-estrella: rgba(255, 255, 255, .75);
    --lp-luz: #FFD166;
    --lp-luz-clara: #FFE9A8;
    --lp-luz-tinta: #1B1300;
    --lp-haz: rgba(255, 233, 168, .34);
    --lp-halo: rgba(255, 209, 102, .5);
    --lp-sodio: rgba(255, 176, 80, .16);
    --lp-ola-lejos: #0C284A;
    --lp-ola-cerca: #113660;
    --lp-silueta: #02070F;
    --lp-faro-rojo: #A61E2D;
    --lp-faro-blanco: #D8DDE4;
    --lp-roca: #030810;
    /* ── La carta y el papel: cambian con el tema ──────────────────────── */
    --lp-carta: #F3EBD8;
    --lp-carta-alterna: #ECE2CB;
    --lp-carta-reticula: rgba(29, 78, 137, .07);
    --lp-carta-isobata: rgba(29, 78, 137, .15);
    --lp-carta-tinta: #13263D;
    --lp-carta-suave: #4B5B6E;
    --lp-carta-acento: #1D4E89;
    --lp-carta-acento-tinta: #F3EBD8;
    --lp-carta-borde: rgba(19, 38, 61, .18);
    --lp-carta-sombra: rgba(19, 38, 61, .16);
    --lp-papel: #FFFBF1;
    --lp-papel-linea: rgba(19, 38, 61, .13);
    --lp-papel-tinta: #1C2430;
    --lp-papel-suave: #55606E;
    --lp-sello: #B3261E;
    --lp-telegrama: #FFF6D8;
    --lp-cabo: #A88A52;
    --lp-postal: #FBF8F0;
    --lp-postal-tinta: #2A2A2A;
    --lp-patio: #E4E1DA;
    --lp-patio-junta: rgba(30, 38, 48, .07);
    --lp-patio-tinta: #1E2630;
    --lp-patio-suave: #505A66;
    --lp-rada: #DCEEF7;
    --lp-rada-ola: rgba(20, 90, 140, .12);
    --lp-rada-tinta: #0F2A40;
    --lp-rada-suave: #3D5569;
    /* ── La travesía: los cuatro mares, de la orilla a mar abierto ─────── */
    --lp-zona-1: #7FC3E4;
    --lp-zona-2: #4A9ACF;
    --lp-zona-3: #2672AA;
    --lp-zona-4: #154F80;
    --lp-zona-tinta-clara: #0B2138;
    --lp-zona-tinta-oscura: #FFFFFF;
    /* ── Pintura: igual de día y de noche ──────────────────────────────── */
    --lp-rojo: #C8102E;
    --lp-azul: #1B3F8F;
    --lp-amarillo: #F5C400;
    --lp-blanco: #F8F9FA;
    --lp-negro: #111418;
    --lp-boya-roja: #C62D3A;
    --lp-boya-verde: #1E7F57;
    --lp-boya-amarilla: #F2C230;
    --lp-boya-amarilla-oscura: #6B5207;
    --lp-laton: #C9A24B;
    --lp-laton-claro: #F1D78C;
    --lp-laton-oscuro: #6E5218;
    --lp-casco: #17191E;
    --lp-casco-fondo: #8F2A2C;
    --lp-casco-pintura: #F4F4F0;
    --lp-casco-marca: rgba(244, 244, 240, .4);
    --lp-carga-mate: #A83A24;
    --lp-carga-ciencias: #1F6E8C;
    --lp-carga-letras: #6B3F8E;
    --lp-carga-aptitud: #2F6B3C;
    --lp-contenedor-tinta: #FFFFFF;
    /* ── Acción ────────────────────────────────────────────────────────── */
    --lp-chaleco: #FF7A1A;
    --lp-chaleco-alto: #FF9A3D;
    --lp-chaleco-tinta: #1B0B00;
    --lp-chaleco-sombra: #A84A00;
    --lp-foco-noche: #FFD166;
    --lp-foco-papel: #1D4E89;
    /* ── Medidas y letras ──────────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-titular: "DIN Condensed", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", Bahnschrift, "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --lp-texto: "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --lp-maquina: "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace;
    --lp-estarcido: Stencil, "Stencil Std", "Bahnschrift SemiBold Condensed", Bahnschrift, Impact, "Arial Black", sans-serif;
    --lp-mano: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Neue", cursive;
    margin: 0;
    background: var(--lp-carta);
    color: var(--lp-carta-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: la carta de noche. El atributo lo pone Akcadmia en un
   ancestro; aquí solo se reasignan las variables, nunca las reglas. La noche y la
   pintura no cambian. */
[data-tema="oscuro"] .lp-puerto {
    --lp-uni: #081629;
    --lp-uni-alto: #10254A;
    --lp-uni-oro: #E7BB57;
    --lp-uni-plata: #D8E0EA;
    --lp-carta: #0F1B2B;
    --lp-carta-alterna: #132236;
    --lp-carta-reticula: rgba(140, 194, 255, .05);
    --lp-carta-isobata: rgba(140, 194, 255, .12);
    --lp-carta-tinta: #E3ECF6;
    --lp-carta-suave: #A9B8C8;
    --lp-carta-acento: #8CC2FF;
    --lp-carta-acento-tinta: #0F1B2B;
    --lp-carta-borde: rgba(227, 236, 246, .16);
    --lp-carta-sombra: rgba(0, 0, 0, .45);
    --lp-papel: #1A2536;
    --lp-papel-linea: rgba(227, 236, 246, .13);
    --lp-papel-tinta: #E6EDF5;
    --lp-papel-suave: #AEBBCB;
    --lp-sello: #FF8A80;
    --lp-telegrama: #262216;
    --lp-cabo: #8C7650;
    --lp-postal: #E7E1D5;
    --lp-patio: #141A22;
    --lp-patio-junta: rgba(230, 237, 245, .05);
    --lp-patio-tinta: #E6EDF5;
    --lp-patio-suave: #A9B6C5;
    --lp-rada: #0B1F33;
    --lp-rada-ola: rgba(140, 194, 255, .08);
    --lp-rada-tinta: #E3ECF6;
    --lp-rada-suave: #A9BFD4;
    --lp-foco-papel: #8CC2FF;
    color-scheme: dark;
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. El hueco se pinta del color de la franja institucional
   para que no se distinga. El color va escrito porque aquí se pinta un ancestro
   de .lp-puerto, que no ve sus variables. */
body:has(> .lp-puerto) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0E2240;
}

[data-tema="oscuro"] body:has(> .lp-puerto) {
    background-color: #081629;
}

body > :has(+ .lp-puerto) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

    body > :has(+ .lp-puerto) > :last-child {
        margin-bottom: 0 !important;
    }

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta cero especificidad: solo derrota las reglas de elemento del sitio
   y queda por debajo de las clases de esta hoja. */
.lp-puerto :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, em, label, legend, summary, button, output, aside, article, figure, figcaption, input, details, fieldset) {
    color: inherit;
    font-family: inherit;
}

.lp-puerto,
.lp-puerto *,
.lp-puerto *::before,
.lp-puerto *::after {
    box-sizing: border-box;
}

/* Lo que el guion oculta con hidden se oculta siempre, aunque una regla de esta
   hoja le haya dado otro display. */
.lp-puerto [hidden] {
    display: none !important;
}

/* Sin guion no se escribe ninguna fecha: lo que depende de ellas no se enseña
   para no dejar etiquetas con el hueco vacío. */
.lp-puerto:not(.lp-puerto--animada) [data-depende-fechas] {
    display: none !important;
}

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-puerto [id] {
    scroll-margin-top: 5rem;
}

.lp-puerto__ancho {
    width: min(100% - 2.5rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-puerto__ancho--estrecho {
    width: min(100% - 2.5rem, 52rem);
}

.lp-puerto svg {
    fill: currentColor;
}

.lp-puerto__icono {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
}

/* Los iconos de trazo (el timón) no se rellenan: se dibujan con su línea. */
.lp-puerto .lp-puerto__icono--trazo {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

/* Texto que solo leen los lectores de pantalla. */
.lp-puerto__oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Las fotografías reservan su proporción con width y height del marcado, así la
   página no salta al cargarlas. Va dentro de :where para que la clase de cada
   foto pueda cambiarle el alto sin pelear por especificidad. */
.lp-puerto :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* El foco se ve en cualquier fondo: cada zona fija su color en --lp-foco. */
.lp-puerto :where(a, button, summary, input):focus-visible {
    outline: 3px solid var(--lp-foco, var(--lp-foco-papel));
    outline-offset: 3px;
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   La clase que oculta la pone el guion: sin él todo se ve desde el principio.
   Lo que descansa girado (postal, ficha) guarda su giro en --lp-giro para que la
   aparición termine en él y no lo enderece. */
.lp-puerto--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.5rem) rotate(var(--lp-giro, 0deg));
    transition: opacity .6s ease, transform .75s cubic-bezier(.2, .8, .2, 1);
}

    .lp-puerto--animada [data-revelar].lp-puerto--visible {
        opacity: 1;
        transform: rotate(var(--lp-giro, 0deg));
    }

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-puerto__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-alto));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -3px 0 var(--lp-uni-oro);
}

.lp-puerto__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    padding: .85rem 0 1rem;
}

.lp-puerto__emblema {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border: 2px solid var(--lp-uni-oro);
    border-radius: 50%;
    color: var(--lp-uni-oro);
}

    .lp-puerto__emblema svg {
        width: 1.5rem;
        height: 1.5rem;
    }

.lp-puerto__uni {
    display: grid;
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    line-height: 1.25;
}

.lp-puerto__uni-nombre {
    font-weight: 700;
    font-size: 1.05rem;
}

.lp-puerto__uni-lema {
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-uni-plata);
}

.lp-puerto__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-oro);
    border-radius: .4rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

    /* Sin guion el sello no recibe su texto: se esconde para no dejar un marco vacío. */
    .lp-puerto__uni-sello:empty {
        display: none;
    }

/* ═══ Piezas comunes ═══════════════════════════════════════════════════════ */
.lp-puerto__cabecera {
    max-width: 46rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    container-type: inline-size;
}

.lp-puerto__cabecera--centro {
    margin-inline: auto;
    text-align: center;
}

.lp-puerto__antetitulo {
    display: inline-block;
    margin: 0 0 .9rem;
    padding: .28rem .85rem;
    border-radius: .3rem;
    background: var(--lp-carta-acento);
    color: var(--lp-carta-acento-tinta);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.lp-puerto__antetitulo--oro {
    background: var(--lp-luz);
    color: var(--lp-luz-tinta);
}

/* El tope de 11cqi, medido con el ancho de la cabecera, garantiza que la palabra
   más larga de un título entre entera aunque el teléfono use letra de reserva,
   bastante más ancha que las condensadas de la lista. */
.lp-puerto__h2 {
    margin: 0 0 .85rem;
    font-family: var(--lp-titular);
    font-size: min(max(2.2rem, 5.4vw), 3.9rem, 11cqi);
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.lp-puerto__h3 {
    margin: 0 0 .45rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.3rem, 2.4vw, 1.55rem);
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.lp-puerto__entrada {
    margin: 0;
    font-size: clamp(1.02rem, 1.8vw, 1.15rem);
    line-height: 1.6;
    color: var(--lp-carta-suave);
}

.lp-puerto__parrafo {
    margin: 0 0 .9rem;
    line-height: 1.6;
}

.lp-puerto__nota {
    margin: 1.25rem 0 0;
    font-size: .92rem;
    font-style: italic;
    color: var(--lp-carta-suave);
}

.lp-puerto__accion {
    margin: 2rem 0 0;
}

.lp-puerto__accion--centro {
    text-align: center;
}

/* La llamada es un chaleco salvavidas: naranja con la franja reflectante abajo. */
.lp-puerto__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 2.9rem;
    padding: .7rem 1.6rem .8rem;
    border-radius: 999px;
    font-family: var(--lp-titular);
    font-size: 1.12rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.lp-puerto__boton--chaleco {
    background: linear-gradient(180deg, var(--lp-chaleco-alto), var(--lp-chaleco));
    color: var(--lp-chaleco-tinta);
    box-shadow: inset 0 -.3rem 0 rgba(255, 255, 255, .3), 0 4px 0 var(--lp-chaleco-sombra), 0 10px 20px rgba(0, 0, 0, .22);
}

    .lp-puerto__boton--chaleco:hover {
        color: var(--lp-chaleco-tinta);
        transform: translateY(-2px);
        box-shadow: inset 0 -.3rem 0 rgba(255, 255, 255, .3), 0 6px 0 var(--lp-chaleco-sombra), 0 14px 26px rgba(0, 0, 0, .28);
    }

    .lp-puerto__boton--chaleco:active {
        transform: translateY(2px);
        box-shadow: inset 0 -.3rem 0 rgba(255, 255, 255, .3), 0 2px 0 var(--lp-chaleco-sombra);
    }

.lp-puerto__boton--cabo {
    border: 2px solid var(--lp-luz);
    color: var(--lp-luz-clara);
    font-size: .98rem;
}

    .lp-puerto__boton--cabo:hover {
        background: rgba(255, 209, 102, .14);
        color: var(--lp-luz-clara);
    }

.lp-puerto__boton--grande {
    min-height: 3.4rem;
    padding: .9rem 2.2rem 1rem;
    font-size: 1.3rem;
}

.lp-puerto__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

/* ═══ La noche ═════════════════════════════════════════════════════════════
   Cielo con estrellas sobre el azul del mar, igual en los dos temas. */
.lp-puerto__noche {
    --lp-foco: var(--lp-foco-noche);
    position: relative;
    overflow: clip;
    background-color: var(--lp-noche);
    background-image: radial-gradient(1.5px 1.5px at 8% 14%, var(--lp-estrella), transparent), radial-gradient(1px 1px at 21% 32%, var(--lp-estrella), transparent), radial-gradient(1.5px 1.5px at 34% 9%, var(--lp-estrella), transparent), radial-gradient(1px 1px at 47% 24%, var(--lp-estrella), transparent), radial-gradient(1.5px 1.5px at 58% 6%, var(--lp-estrella), transparent), radial-gradient(1px 1px at 69% 19%, var(--lp-estrella), transparent), radial-gradient(1.5px 1.5px at 81% 11%, var(--lp-estrella), transparent), radial-gradient(1px 1px at 92% 28%, var(--lp-estrella), transparent), linear-gradient(180deg, var(--lp-noche) 0%, var(--lp-noche-alto) 62%, var(--lp-noche-bajo) 100%);
    color: var(--lp-noche-texto);
}

    .lp-puerto__noche .lp-puerto__entrada,
    .lp-puerto__cabecera--noche .lp-puerto__entrada {
        color: var(--lp-noche-suave);
    }

/* ═══ La carta ═════════════════════════════════════════════════════════════
   Papel de carta náutica: retícula de coordenadas y un par de isobatas, las
   curvas que unen los puntos de igual profundidad. */
.lp-puerto__carta {
    --lp-foco: var(--lp-foco-papel);
    position: relative;
    overflow-x: clip;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background-color: var(--lp-carta);
    background-image: radial-gradient(ellipse 55% 42% at 92% 8%, transparent 0 57%, var(--lp-carta-isobata) 57.3% 58%, transparent 58.3% 67%, var(--lp-carta-isobata) 67.3% 68%, transparent 68.3% 77%, var(--lp-carta-isobata) 77.3% 78%, transparent 78.3%), linear-gradient(var(--lp-carta-reticula) 1px, transparent 1px), linear-gradient(90deg, var(--lp-carta-reticula) 1px, transparent 1px);
    background-size: auto, 4rem 4rem, 4rem 4rem;
    color: var(--lp-carta-tinta);
}

.lp-puerto__carta--alterna {
    background-color: var(--lp-carta-alterna);
    background-image: radial-gradient(ellipse 50% 45% at 4% 96%, transparent 0 57%, var(--lp-carta-isobata) 57.3% 58%, transparent 58.3% 68%, var(--lp-carta-isobata) 68.3% 69%, transparent 69.3%), linear-gradient(var(--lp-carta-reticula) 1px, transparent 1px), linear-gradient(90deg, var(--lp-carta-reticula) 1px, transparent 1px);
}

/* ═══ LA BAHÍA DE NOCHE (portada) ══════════════════════════════════════════ */
.lp-puerto__portada {
    padding-top: clamp(2rem, 5vw, 3.5rem);
}

.lp-puerto__portada-rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    align-items: center;
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.lp-puerto__portada-texto {
    min-width: 0;
    container-type: inline-size;
}

/* Las banderas cuelgan de una driza, cada una con su dibujo del código
   internacional de señales. La A es de dos colas; las demás, rectangulares. */
.lp-puerto__senal {
    margin: 0 0 1.4rem;
}

.lp-puerto__driza {
    position: relative;
    display: inline-flex;
    gap: .5rem;
    padding: .2rem .5rem 0;
}

    .lp-puerto__driza::before {
        content: "";
        position: absolute;
        left: -.6rem;
        right: -.6rem;
        top: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--lp-noche-linea-fuerte);
    }

.lp-puerto__bandera {
    display: block;
    width: 2.5rem;
    height: 1.75rem;
    transform-origin: 50% 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
}

.lp-puerto__bandera--u {
    background: linear-gradient(90deg, var(--lp-rojo) 50%, var(--lp-blanco) 50%) top / 100% 50% no-repeat, linear-gradient(90deg, var(--lp-blanco) 50%, var(--lp-rojo) 50%) bottom / 100% 50% no-repeat;
}

.lp-puerto__bandera--n {
    background: conic-gradient(var(--lp-blanco) 25%, var(--lp-azul) 0 50%, var(--lp-blanco) 0 75%, var(--lp-azul) 0) 0 0 / 50% 50%;
}

.lp-puerto__bandera--a {
    background: linear-gradient(90deg, var(--lp-blanco) 50%, var(--lp-azul) 50%);
    clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%);
}

.lp-puerto__bandera--c {
    background: linear-gradient(180deg, var(--lp-azul) 0 20%, var(--lp-blanco) 20% 40%, var(--lp-rojo) 40% 60%, var(--lp-blanco) 60% 80%, var(--lp-azul) 80%);
}

.lp-puerto__bandera--p {
    background: linear-gradient(var(--lp-blanco), var(--lp-blanco)) center / 36% 40% no-repeat, var(--lp-azul);
}

.lp-puerto--animada .lp-puerto__driza .lp-puerto__bandera {
    animation: lp-puerto-flamear 1.8s ease-in-out .3s 3 both;
}

    .lp-puerto--animada .lp-puerto__driza .lp-puerto__bandera:nth-child(2) {
        animation-delay: .45s;
    }

    .lp-puerto--animada .lp-puerto__driza .lp-puerto__bandera:nth-child(3) {
        animation-delay: .6s;
    }

    .lp-puerto--animada .lp-puerto__driza .lp-puerto__bandera:nth-child(4) {
        animation-delay: .75s;
    }

@keyframes lp-puerto-flamear {
    0%,
    100% {
        transform: none;
    }

    30% {
        transform: rotate(-5deg) skewY(-3deg);
    }

    70% {
        transform: rotate(4deg) skewY(2deg);
    }
}

.lp-puerto__senal-texto {
    margin: .55rem 0 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-noche-suave);
}

/* Cada línea del titular se mide con el ancho de su columna: nunca se parte. */
.lp-puerto__titular {
    margin: 0 0 1.1rem;
    font-family: var(--lp-titular);
    font-synthesis: none;
    font-weight: 700;
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.lp-puerto__titular-linea {
    display: block;
    font-size: min(14.5cqi, 7rem);
    white-space: nowrap;
}

.lp-puerto__titular-linea--oro {
    color: var(--lp-luz);
    text-shadow: 0 0 .3em rgba(255, 209, 102, .35);
}

.lp-puerto__lema {
    max-width: 36rem;
    margin: 0;
    font-size: clamp(1.05rem, 1.9vw, 1.22rem);
    color: var(--lp-noche-suave);
}

.lp-puerto__rumbos {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1.1rem 0 1.6rem;
    padding: 0;
    list-style: none;
}

    .lp-puerto__rumbos li {
        padding: .28rem .8rem;
        border: 1px solid var(--lp-noche-linea-fuerte);
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

        .lp-puerto__rumbos li::before {
            content: "✦ ";
            content: "✦ " / "";
            color: var(--lp-luz);
        }

/* El ojo de buey: un aro de latón con ocho pernos alrededor del vidrio. */
.lp-puerto__portada-lado {
    display: grid;
    gap: 1.5rem;
    justify-items: center;
    min-width: 0;
}

.lp-puerto__ojo-de-buey {
    position: relative;
    width: min(78%, 21rem);
    aspect-ratio: 1;
    margin: 0;
    padding: 1.15rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--lp-laton-claro), var(--lp-laton) 45%, var(--lp-laton-oscuro) 100%);
    box-shadow: 0 0 0 .35rem rgba(0, 0, 0, .28), 0 18px 40px rgba(0, 0, 0, .5);
}

    .lp-puerto__ojo-de-buey::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 4.5%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem), radial-gradient(circle at 82% 18%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem), radial-gradient(circle at 95.5% 50%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem), radial-gradient(circle at 82% 82%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem), radial-gradient(circle at 50% 95.5%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem), radial-gradient(circle at 18% 82%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem), radial-gradient(circle at 4.5% 50%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem), radial-gradient(circle at 18% 18%, var(--lp-laton-oscuro) 0 .2rem, transparent .24rem);
        pointer-events: none;
    }

    /* Reflejo del vidrio sobre la foto. */
    .lp-puerto__ojo-de-buey::after {
        content: "";
        position: absolute;
        inset: 1.15rem;
        z-index: 1;
        border-radius: 50%;
        background: linear-gradient(140deg, rgba(255, 255, 255, .28) 0 18%, transparent 36%);
        box-shadow: inset 0 0 0 .3rem rgba(0, 0, 0, .35), inset 0 0 1.2rem rgba(0, 0, 0, .45);
        pointer-events: none;
    }

    .lp-puerto__ojo-de-buey img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        background: var(--lp-noche-alto);
    }

/* El parte de zarpe: una hoja de bitácora con las fechas del ciclo. */
.lp-puerto__zarpe {
    width: min(100%, 24rem);
    padding: 1.15rem 1.35rem 1.25rem;
    border: 1px solid var(--lp-noche-linea-fuerte);
    border-radius: .6rem;
    background: var(--lp-noche-panel);
}

.lp-puerto__zarpe-titulo {
    margin: 0 0 .7rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--lp-noche-linea-fuerte);
    font-family: var(--lp-maquina);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lp-luz);
}

.lp-puerto__zarpe-datos {
    margin: 0 0 .5rem;
}

.lp-puerto__zarpe-fila {
    display: grid;
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
    align-items: center;
    gap: .25rem 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--lp-noche-linea);
}

    .lp-puerto__zarpe-fila dt {
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--lp-noche-suave);
    }

    .lp-puerto__zarpe-fila dd {
        margin: 0;
    }

.lp-puerto__fecha {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.lp-puerto__fecha-dia {
    font-family: var(--lp-titular);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--lp-luz);
}

/* El guion separa el día de la semana y el mes con un salto de línea. */
.lp-puerto__fecha-resto {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: pre-line;
}

.lp-puerto__zarpe-semanas {
    font-family: var(--lp-titular);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--lp-luz-clara);
}

.lp-puerto__zarpe-linea {
    margin: .4rem 0 0;
    font-size: .9rem;
    color: var(--lp-noche-suave);
}

    .lp-puerto__zarpe-linea strong {
        font-size: .76rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-noche-texto);
    }

@media (min-width: 62rem) {
    .lp-puerto__portada-rejilla {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
    }
}

/* ═══ El horizonte ═════════════════════════════════════════════════════════
   Franja baja de la portada y del cierre: olas, un buque de carga en silueta y
   el faro, cuyo haz barre la bahía unas pocas veces y se queda quieto. */
.lp-puerto__horizonte {
    position: relative;
    height: clamp(8rem, 18vw, 12rem);
    overflow: hidden;
}

.lp-puerto__buque-silueta {
    position: absolute;
    left: 7%;
    bottom: 38%;
    width: clamp(7rem, 17vw, 11.5rem);
    color: var(--lp-silueta);
}

    .lp-puerto__buque-silueta svg {
        display: block;
        width: 100%;
        height: auto;
    }

.lp-puerto--animada .lp-puerto__buque-silueta {
    animation: lp-puerto-navegar 26s linear 1 both;
}

@keyframes lp-puerto-navegar {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(14vw);
    }
}

/* El faro va delante de las olas lejanas y detrás de las cercanas: su roca
   queda a medias bajo el agua. Mide menos que el horizonte para que el techo de
   la linterna no se corte. */
.lp-puerto__faro {
    position: absolute;
    z-index: 1;
    right: 8%;
    bottom: 22%;
    width: clamp(2.6rem, 5vw, 3.8rem);
    height: clamp(5.2rem, 11vw, 8rem);
}

.lp-puerto__faro-torre {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 24%;
    bottom: 0;
    background: repeating-linear-gradient(180deg, var(--lp-faro-rojo) 0 1rem, var(--lp-faro-blanco) 1rem 2rem);
    clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

.lp-puerto__faro-linterna {
    position: absolute;
    left: 24%;
    right: 24%;
    top: 7%;
    height: 17%;
    border-radius: .35rem .35rem 0 0;
    background: var(--lp-luz-clara);
    box-shadow: 0 0 .9rem .35rem var(--lp-halo), 0 0 2.8rem 1rem rgba(255, 209, 102, .22);
}

    /* El techo de la linterna. */
    .lp-puerto__faro-linterna::before {
        content: "";
        position: absolute;
        left: -18%;
        right: -18%;
        bottom: 100%;
        height: 70%;
        background: var(--lp-faro-rojo);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

/* La roca empieza justo donde termina la torre y se ensancha hacia el agua. */
.lp-puerto__faro-roca {
    position: absolute;
    left: -60%;
    right: -60%;
    top: 100%;
    height: 22%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: var(--lp-roca);
    box-shadow: inset 0 .2rem 0 rgba(120, 150, 180, .16);
}

/* El haz nace en la linterna y se abre hacia la izquierda, sobre el mar. */
.lp-puerto__faro-haz {
    position: absolute;
    right: 50%;
    top: 15%;
    width: min(88vw, 48rem);
    height: 6.5rem;
    background: linear-gradient(270deg, rgba(255, 233, 168, .55), var(--lp-haz) 18%, rgba(255, 233, 168, 0) 92%);
    clip-path: polygon(0 0, 100% 46%, 100% 54%, 0 100%);
    transform: translateY(-50%) rotate(6deg);
    transform-origin: 100% 50%;
    pointer-events: none;
}

.lp-puerto--animada .lp-puerto__portada .lp-puerto__faro-haz,
.lp-puerto--animada .lp-puerto__cierre.lp-puerto--visible .lp-puerto__faro-haz {
    animation: lp-puerto-barrido 3.4s ease-in-out .4s 3 alternate both;
}

@keyframes lp-puerto-barrido {
    from {
        transform: translateY(-50%) rotate(-16deg);
    }

    to {
        transform: translateY(-50%) rotate(6deg);
    }
}

/* Dos capas de olas: una fila de crestas (medias elipses) sobre el agua lisa.
   La lejana es más alta y oscura; las dos se corren unos segundos y se detienen. */
.lp-puerto__ola {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
}

.lp-puerto__ola--lejos {
    height: 46%;
    background: radial-gradient(1.4rem .75rem at 50% 100%, var(--lp-ola-lejos) 96%, transparent 100%) 0 0 / 2.8rem .75rem repeat-x, linear-gradient(var(--lp-ola-lejos), var(--lp-ola-lejos)) 0 .74rem / 100% 100% no-repeat;
}

.lp-puerto__ola--cerca {
    z-index: 2;
    height: 26%;
    background: radial-gradient(1.8rem .9rem at 50% 100%, var(--lp-ola-cerca) 96%, transparent 100%) 1.4rem 0 / 3.6rem .9rem repeat-x, linear-gradient(var(--lp-ola-cerca), var(--lp-ola-cerca)) 0 .89rem / 100% 100% no-repeat;
}

.lp-puerto--animada .lp-puerto__ola--lejos {
    animation: lp-puerto-oleaje 18s linear 2 both;
}

.lp-puerto--animada .lp-puerto__ola--cerca {
    animation: lp-puerto-oleaje 11s linear 3 reverse both;
}

@keyframes lp-puerto-oleaje {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-25%);
    }
}

/* ═══ LA TRAVESÍA ══════════════════════════════════════════════════════════
   La regla del barco. El deslizador ocupa toda la franja y es invisible: lo que
   se ve es el buque, que el guion coloca con --lp-avance (de 0 a 1), y los
   cuatro mares, pintados con --lp-t0 y --lp-t1 en la misma escala. El foco del
   teclado se dibuja en la franja. */
.lp-puerto__derrota {
    --lp-barco-ancho: 4.5rem;
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.25rem 1.1rem;
    border: 1px solid var(--lp-carta-borde);
    border-radius: .8rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 10px 24px var(--lp-carta-sombra);
}

.lp-puerto__derrota-etiqueta {
    display: block;
    margin: 0 0 .75rem;
    font-weight: 700;
}

.lp-puerto__derrota-mar {
    position: relative;
    height: 5.5rem;
    border-radius: .6rem;
}

    .lp-puerto__derrota-mar:has(.lp-puerto__derrota-rango:focus-visible) {
        outline: 3px solid var(--lp-foco);
        outline-offset: 4px;
    }

.lp-puerto__zona {
    position: absolute;
    bottom: 0;
    height: 44%;
    left: max(0%, calc(var(--lp-barco-ancho) / 2 + var(--lp-t0, 0) * (100% - var(--lp-barco-ancho))));
    right: max(0%, calc(100% - var(--lp-barco-ancho) / 2 - var(--lp-t1, 1) * (100% - var(--lp-barco-ancho))));
    background: radial-gradient(.55rem .3rem at 50% 100%, var(--lp-zona) 96%, transparent 100%) 0 0 / 1.1rem .3rem repeat-x, linear-gradient(var(--lp-zona), var(--lp-zona)) 0 .29rem / 100% 100% no-repeat;
}

.lp-puerto__zona--1 {
    --lp-zona: var(--lp-zona-1);
    border-bottom-left-radius: .6rem;
}

.lp-puerto__zona--2 {
    --lp-zona: var(--lp-zona-2);
}

.lp-puerto__zona--3 {
    --lp-zona: var(--lp-zona-3);
}

.lp-puerto__zona--4 {
    --lp-zona: var(--lp-zona-4);
    border-bottom-right-radius: .6rem;
}

.lp-puerto__barco {
    position: absolute;
    left: calc(var(--lp-avance, 0) * (100% - var(--lp-barco-ancho)));
    bottom: 34%;
    width: var(--lp-barco-ancho);
    color: var(--lp-papel-tinta);
    transition: left .25s ease;
    pointer-events: none;
}

    .lp-puerto__barco svg {
        display: block;
        width: 100%;
        height: auto;
    }

.lp-puerto__derrota-rango {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

    .lp-puerto__derrota-rango:active {
        cursor: grabbing;
    }

    /* El pulgar invisible mide lo mismo que el buque: así, arrastrar desde el
       buque agarra el pulgar y los dos avanzan juntos. */
    .lp-puerto__derrota-rango::-webkit-slider-thumb {
        width: var(--lp-barco-ancho);
        height: 5.5rem;
        -webkit-appearance: none;
        appearance: none;
    }

    .lp-puerto__derrota-rango::-moz-range-thumb {
        width: var(--lp-barco-ancho);
        height: 5.5rem;
        border: 0;
    }

.lp-puerto__lectura {
    display: grid;
    gap: .15rem;
    margin-top: 1rem;
}

    .lp-puerto__lectura p {
        margin: 0;
    }

.lp-puerto__lectura-semana {
    font-family: var(--lp-titular);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
}

.lp-puerto__lectura-numero {
    font-size: 2.3rem;
    line-height: 1;
    color: var(--lp-carta-acento);
}

.lp-puerto__lectura-total {
    color: var(--lp-papel-suave);
}

.lp-puerto__lectura-fechas {
    font-weight: 700;
}

.lp-puerto__lectura-etapa {
    color: var(--lp-papel-suave);
}

/* Las cuatro etapas: tarjetas de papel con su boya numerada del color del mar. */
.lp-puerto__etapas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-puerto__etapa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    border: 1px solid var(--lp-carta-borde);
    border-radius: .8rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 6px 16px var(--lp-carta-sombra);
}

.lp-puerto__etapa--1 {
    --lp-zona: var(--lp-zona-1);
    --lp-zona-tinta: var(--lp-zona-tinta-clara);
}

.lp-puerto__etapa--2 {
    --lp-zona: var(--lp-zona-2);
    --lp-zona-tinta: var(--lp-zona-tinta-clara);
}

.lp-puerto__etapa--3 {
    --lp-zona: var(--lp-zona-3);
    --lp-zona-tinta: var(--lp-zona-tinta-oscura);
}

.lp-puerto__etapa--4 {
    --lp-zona: var(--lp-zona-4);
    --lp-zona-tinta: var(--lp-zona-tinta-oscura);
}

/* La etapa de la semana que marca el barco se enmarca en su color. */
.lp-puerto__etapa--actual {
    box-shadow: 0 0 0 3px var(--lp-zona), 0 10px 22px var(--lp-carta-sombra);
}

.lp-puerto__etapa-boya {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--lp-zona);
    color: var(--lp-zona-tinta);
    box-shadow: inset 0 -.35rem 0 rgba(0, 0, 0, .2);
    font-family: var(--lp-titular);
    font-size: 1.35rem;
    font-weight: 700;
}

.lp-puerto__etapa-texto {
    min-width: 0;
}

.lp-puerto__etapa-orden {
    margin: 0 0 .15rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-papel-suave);
}

.lp-puerto__etapa .lp-puerto__parrafo {
    margin-bottom: .65rem;
}

.lp-puerto__etapa-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    margin: 0;
}

    .lp-puerto__etapa-datos > span {
        padding: .12rem .6rem;
        border: 1px solid var(--lp-papel-linea);
        border-radius: .6rem;
        font-size: .8rem;
        font-weight: 700;
    }

        .lp-puerto__etapa-datos > span:empty {
            display: none;
        }

@media (min-width: 48rem) {
    .lp-puerto__etapas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.3rem;
    }

    .lp-puerto__lectura {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 1.5rem;
    }

    .lp-puerto__lectura-semana {
        grid-row: span 2;
    }
}

/* ═══ EL MUELLE DE CARGA ═══════════════════════════════════════════════════
   El largo de cada contenedor es --lp-puntos sobre 40, el máximo de la tabla:
   40 puntos llenan el carril. :has() cambia los puntos según el radio marcado,
   y el ancho se anima solo porque cambia su valor calculado. */
.lp-puerto__muelle {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background-image: radial-gradient(ellipse 50% 40% at 12% 0%, var(--lp-sodio), transparent 70%), radial-gradient(ellipse 40% 34% at 90% 6%, var(--lp-sodio), transparent 70%), linear-gradient(180deg, var(--lp-noche-alto) 0%, var(--lp-noche) 100%);
}

.lp-puerto__bloques {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    min-width: 0;
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}

.lp-puerto__bloques-leyenda {
    float: none;
    width: auto;
    margin: 0 0 .75rem;
    padding: 0;
    font-family: var(--lp-titular);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-luz-clara);
}

.lp-puerto__bloque {
    position: relative;
    display: grid;
    gap: .1rem;
    padding: .85rem 1rem .9rem 3rem;
    border: 2px solid var(--lp-noche-linea-fuerte);
    border-radius: .6rem;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

    .lp-puerto__bloque:hover {
        border-color: var(--lp-luz-clara);
    }

    .lp-puerto__bloque:has(:checked) {
        border-color: var(--lp-luz);
        background: rgba(255, 209, 102, .13);
    }

    .lp-puerto__bloque:has(:focus-visible) {
        outline: 3px solid var(--lp-foco);
        outline-offset: 3px;
    }

.lp-puerto__bloque-radio {
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    accent-color: var(--lp-luz);
}

    .lp-puerto .lp-puerto__bloque-radio:focus-visible {
        outline: 0;
    }

.lp-puerto__bloque-numero {
    font-family: var(--lp-titular);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lp-luz-clara);
}

.lp-puerto__bloque-nombre {
    font-size: .92rem;
    line-height: 1.35;
    color: var(--lp-noche-suave);
}

.lp-puerto__buque {
    position: relative;
    padding: 1.4rem 1.25rem 3.4rem;
    border: 1px solid var(--lp-noche-linea);
    border-radius: .8rem;
    background: rgba(2, 8, 18, .5);
    container-type: inline-size;
}

.lp-puerto__carga {
    --lp-mate: 39.9;
    --lp-ciencias: 20;
    --lp-letras: 20;
    --lp-aptitud: 20.1;
    display: grid;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-puerto__examen:has(#lp-puerto-bloque-2:checked) .lp-puerto__carga {
    --lp-mate: 19.9;
    --lp-letras: 40;
}

.lp-puerto__examen:has(#lp-puerto-bloque-3:checked) .lp-puerto__carga {
    --lp-mate: 19.9;
    --lp-ciencias: 30;
    --lp-letras: 30;
}

.lp-puerto__fila-carga {
    display: grid;
    gap: .2rem;
}

.lp-puerto__carga-rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .1rem 1rem;
    margin: 0;
}

    .lp-puerto__carga-rotulo strong {
        font-family: var(--lp-titular);
        font-size: 1.2rem;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .lp-puerto__carga-rotulo span {
        font-size: .85rem;
        color: var(--lp-noche-suave);
    }

.lp-puerto__carga-detalle {
    margin: 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--lp-noche-suave);
}

/* El carril tiene una marca cada 4 puntos, como la escala de un muelle. */
.lp-puerto__carril {
    position: relative;
    height: 3rem;
    margin-top: .35rem;
    border-bottom: 3px solid var(--lp-noche-linea-fuerte);
    background: repeating-linear-gradient(90deg, var(--lp-noche-linea) 0 1px, transparent 1px 10%);
}

.lp-puerto__caja {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: calc(var(--lp-puntos) * 2.5%);
    padding: 0 .6rem;
    overflow: hidden;
    border-radius: .2rem;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, rgba(0, 0, 0, .13) 2px 7px), var(--lp-caja);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
    color: var(--lp-contenedor-tinta);
    font-family: var(--lp-titular);
    font-size: clamp(.82rem, 3.4cqi, 1.05rem);
    font-weight: 700;
    white-space: nowrap;
    transition: width .7s cubic-bezier(.3, .9, .3, 1);
}

.lp-puerto__caja--mate {
    --lp-puntos: var(--lp-mate);
    --lp-caja: var(--lp-carga-mate);
}

.lp-puerto__caja--ciencias {
    --lp-puntos: var(--lp-ciencias);
    --lp-caja: var(--lp-carga-ciencias);
}

.lp-puerto__caja--letras {
    --lp-puntos: var(--lp-letras);
    --lp-caja: var(--lp-carga-letras);
}

.lp-puerto__caja--aptitud {
    --lp-puntos: var(--lp-aptitud);
    --lp-caja: var(--lp-carga-aptitud);
}

/* Cada dato que depende del bloque existe tres veces y solo se ve el del radio
   marcado. Sin :has() se queda a la vista el del Bloque I, que es el marcado. */
.lp-puerto__examen [data-en-bloque] {
    display: none;
}

.lp-puerto__examen:has(#lp-puerto-bloque-1:checked) [data-en-bloque="1"],
.lp-puerto__examen:has(#lp-puerto-bloque-2:checked) [data-en-bloque="2"],
.lp-puerto__examen:has(#lp-puerto-bloque-3:checked) [data-en-bloque="3"] {
    display: revert;
}

@supports not selector(:has(*)) {
    .lp-puerto__examen [data-en-bloque="1"] {
        display: revert;
    }
}

.lp-puerto__buque-casco {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: .9rem;
    height: 1.5rem;
    background: linear-gradient(180deg, var(--lp-casco) 0 52%, var(--lp-casco-pintura) 52% 58%, var(--lp-casco-fondo) 58%);
    clip-path: polygon(0 0, 100% 0, 96% 100%, 3% 100%);
}

.lp-puerto__bloque-carreras {
    margin: 1.4rem 0 0;
}

    .lp-puerto__bloque-carreras p {
        margin: 0;
        font-size: .98rem;
    }

    .lp-puerto__bloque-carreras strong {
        color: var(--lp-luz-clara);
    }

.lp-puerto__reglas {
    display: grid;
    gap: .45rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .92rem;
    color: var(--lp-noche-suave);
}

    .lp-puerto__reglas li {
        position: relative;
        padding-left: 1.4rem;
    }

        .lp-puerto__reglas li::before {
            content: "⚓";
            content: "⚓" / "";
            position: absolute;
            left: 0;
            top: 0;
            font-size: .85rem;
            color: var(--lp-luz);
        }

@media (min-width: 48rem) {
    .lp-puerto__bloques {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-puerto__buque {
        padding: 1.75rem 2rem 3.6rem;
    }

    .lp-puerto__fila-carga {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        column-gap: 1.5rem;
        align-items: center;
    }

    .lp-puerto__carga-rotulo,
    .lp-puerto__carga-detalle {
        grid-column: 1;
    }

    .lp-puerto__carril {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }
}

/* ═══ EL TERMINAL DE CONTENEDORES ══════════════════════════════════════════
   Patio de concreto con juntas y una franja de peligro arriba, como el borde de
   un muelle. Cada contenedor pinta su chapa con --lp-contenedor-color, que viene
   del modificador --cNN que comparten la pestaña, el manifiesto y la bahía. */
.lp-puerto__terminal-seccion {
    --lp-foco: var(--lp-foco-papel);
    position: relative;
    overflow-x: clip;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 8vw, 6.5rem);
    background-color: var(--lp-patio);
    background-image: repeating-linear-gradient(-45deg, var(--lp-amarillo) 0 .9rem, var(--lp-negro) .9rem 1.8rem), linear-gradient(var(--lp-patio-junta) 2px, transparent 2px), linear-gradient(90deg, var(--lp-patio-junta) 2px, transparent 2px);
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat-x, repeat, repeat;
    background-size: auto .7rem, 7rem 7rem, 7rem 7rem;
    color: var(--lp-patio-tinta);
}

    .lp-puerto__terminal-seccion .lp-puerto__entrada,
    .lp-puerto__terminal-seccion .lp-puerto__nota {
        color: var(--lp-patio-suave);
    }

.lp-puerto--c01 {
    --lp-contenedor-color: #1F5A96;
}

.lp-puerto--c02 {
    --lp-contenedor-color: #276B43;
}

.lp-puerto--c03 {
    --lp-contenedor-color: #A5461D;
}

.lp-puerto--c04 {
    --lp-contenedor-color: #9E3131;
}

.lp-puerto--c05 {
    --lp-contenedor-color: #46586A;
}

.lp-puerto--c06 {
    --lp-contenedor-color: #55662A;
}

.lp-puerto--c07 {
    --lp-contenedor-color: #5E4289;
}

.lp-puerto--c08 {
    --lp-contenedor-color: #146E73;
}

.lp-puerto--c09 {
    --lp-contenedor-color: #86651A;
}

.lp-puerto--c10 {
    --lp-contenedor-color: #7D3350;
}

.lp-puerto--c11 {
    --lp-contenedor-color: #2C6E9E;
}

.lp-puerto--c12 {
    --lp-contenedor-color: #7A4E33;
}

.lp-puerto__terminal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

/* En el teléfono el patio son dos filas que se deslizan de lado: así la bahía
   queda justo debajo y el manifiesto cambia a la vista del dedo. */
.lp-puerto__patio {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: minmax(9.5rem, 44%);
    gap: .55rem;
    padding: 1.6rem .3rem .8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.lp-puerto__contenedor {
    position: relative;
    display: grid;
    align-content: center;
    gap: .05rem;
    min-width: 0;
    min-height: 4.8rem;
    padding: .55rem 1.75rem .6rem .75rem;
    border: 0;
    border-radius: .2rem;
    background: linear-gradient(90deg, transparent calc(100% - 1.3rem), rgba(0, 0, 0, .3) calc(100% - 1.3rem) calc(100% - 1.15rem), transparent calc(100% - 1.15rem) calc(100% - .75rem), rgba(0, 0, 0, .3) calc(100% - .75rem) calc(100% - .6rem), transparent calc(100% - .6rem)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, rgba(0, 0, 0, .13) 2px 7px), var(--lp-contenedor-color);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .32), 0 4px 0 rgba(0, 0, 0, .28);
    color: var(--lp-contenedor-tinta);
    font-family: var(--lp-titular);
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .lp-puerto__contenedor:hover {
        transform: translateY(-.2rem);
    }

    /* El elegido sube colgado del gancho de la grúa. */
    .lp-puerto__contenedor[aria-selected="true"] {
        transform: translateY(-.5rem);
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .32), 0 0 0 3px var(--lp-patio-tinta), 0 12px 18px rgba(0, 0, 0, .3);
    }

        .lp-puerto__contenedor[aria-selected="true"]::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 100%;
            width: 2px;
            height: 1.1rem;
            margin-left: -1px;
            background: var(--lp-patio-tinta);
        }

.lp-puerto__contenedor-codigo {
    font-family: var(--lp-estarcido);
    font-size: .7rem;
    letter-spacing: .14em;
    opacity: .85;
}

.lp-puerto__contenedor-tipo {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-puerto__contenedor-nombre {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.12;
}

/* Sin guion la bahía es una rejilla de manifiestos; con guion es un contenedor
   abierto que muestra uno solo, con sus dos puertas batientes. */
.lp-puerto__bahia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
}

.lp-puerto__puerta {
    display: none;
}

.lp-puerto__manifiesto {
    position: relative;
    padding: 1.2rem 1.25rem 1.4rem;
    border-top: .55rem solid var(--lp-contenedor-color);
    border-radius: .3rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.lp-puerto__manifiesto-tipo {
    margin: 0 0 .45rem;
    font-family: var(--lp-maquina);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-papel-suave);
}

.lp-puerto__manifiesto-titulo {
    margin: 0 0 .4rem;
    font-family: var(--lp-titular);
    font-size: 1.4rem;
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.lp-puerto__manifiesto-lema {
    margin: 0 0 .85rem;
    font-size: .92rem;
    color: var(--lp-papel-suave);
}

.lp-puerto__manifiesto-lista {
    display: grid;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-family: var(--lp-maquina);
    font-size: 1.02rem;
    font-weight: 700;
}

    .lp-puerto__manifiesto-lista li {
        padding-bottom: .35rem;
        border-bottom: 1px dashed var(--lp-papel-linea);
    }

        .lp-puerto__manifiesto-lista li::before {
            content: "▸ ";
            content: "▸ " / "";
            color: var(--lp-sello);
        }

.lp-puerto__manifiesto-sello {
    display: inline-block;
    margin: 0;
    padding: .25rem .6rem;
    border: 2px solid var(--lp-sello);
    border-radius: .25rem;
    color: var(--lp-sello);
    font-family: var(--lp-estarcido);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.lp-puerto__terminal--activa .lp-puerto__bahia {
    position: relative;
    display: block;
    padding: 1rem;
    border: .35rem solid var(--lp-contenedor-color, var(--lp-patio-tinta));
    border-radius: .3rem;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, rgba(0, 0, 0, .1) 2px 9px), var(--lp-contenedor-color, var(--lp-patio-tinta));
    perspective: 70rem;
    transition: border-color .3s ease, background-color .3s ease;
}

.lp-puerto__terminal--activa .lp-puerto__manifiesto {
    min-height: 15rem;
}

.lp-puerto__terminal--activa .lp-puerto__puerta {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    width: 50%;
    background: linear-gradient(90deg, transparent 44%, rgba(0, 0, 0, .3) 44% 47%, transparent 47%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, rgba(0, 0, 0, .14) 2px 8px), var(--lp-contenedor-color, var(--lp-patio-tinta));
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
}

.lp-puerto__puerta--izquierda {
    left: 0;
    transform-origin: 0 50%;
}

.lp-puerto__puerta--derecha {
    right: 0;
    transform-origin: 100% 50%;
}

.lp-puerto__bahia--abre .lp-puerto__puerta--izquierda {
    animation: lp-puerto-abrir-izquierda .9s cubic-bezier(.5, 0, .3, 1) both;
}

.lp-puerto__bahia--abre .lp-puerto__puerta--derecha {
    animation: lp-puerto-abrir-derecha .9s cubic-bezier(.5, 0, .3, 1) both;
}

@keyframes lp-puerto-abrir-izquierda {
    0%,
    15% {
        opacity: 1;
        transform: rotateY(0);
    }

    85% {
        opacity: 1;
        transform: rotateY(-100deg);
    }

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

@keyframes lp-puerto-abrir-derecha {
    0%,
    15% {
        opacity: 1;
        transform: rotateY(0);
    }

    85% {
        opacity: 1;
        transform: rotateY(100deg);
    }

    100% {
        opacity: 0;
        transform: rotateY(100deg);
    }
}

@media (min-width: 36rem) {
    .lp-puerto__patio {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-columns: auto;
        overflow: visible;
        padding-inline: 0;
    }
}

@media (min-width: 48rem) {
    .lp-puerto__patio {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .lp-puerto__terminal--activa {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 2rem;
        align-items: start;
    }

    .lp-puerto__patio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-puerto__terminal--activa .lp-puerto__bahia {
        position: sticky;
        top: 6rem;
        margin-top: 1.6rem;
    }
}

/* ═══ LOS PRÁCTICOS ════════════════════════════════════════════════════════
   La ficha es papel de la capitanía escrito a máquina, con renglones. El sello
   cae con un golpe cuando la ficha aparece. */
.lp-puerto__practicos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.lp-puerto__practicos-texto {
    min-width: 0;
    container-type: inline-size;
}

    .lp-puerto__practicos-texto .lp-puerto__parrafo {
        margin-top: 1rem;
    }

.lp-puerto__ficha {
    --lp-giro: -.8deg;
    position: relative;
    min-width: 0;
    padding: 1.4rem 1.4rem 4rem;
    border: 1px solid var(--lp-papel-linea);
    border-radius: .3rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 14px 30px var(--lp-carta-sombra);
    font-family: var(--lp-maquina);
    transform: rotate(var(--lp-giro));
}

.lp-puerto__ficha-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .2rem 1rem;
    margin: 0 0 .8rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--lp-papel-tinta);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

    .lp-puerto__ficha-cabecera span:last-child {
        color: var(--lp-papel-suave);
    }

.lp-puerto__ficha-datos {
    display: grid;
    margin: 0;
}

.lp-puerto__ficha-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .1rem 1rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--lp-papel-linea);
}

    .lp-puerto__ficha-fila dt {
        font-size: .86rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .lp-puerto__ficha-fila dd {
        margin: 0;
        font-family: var(--lp-texto);
        font-size: .96rem;
    }

.lp-puerto__ficha-sello {
    position: absolute;
    right: 1.2rem;
    bottom: 1rem;
    margin: 0;
    padding: .3rem .75rem;
    border: 3px double var(--lp-sello);
    border-radius: .3rem;
    color: var(--lp-sello);
    font-family: var(--lp-estarcido);
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: rotate(-7deg);
}

.lp-puerto--animada .lp-puerto__ficha .lp-puerto__ficha-sello {
    opacity: 0;
}

.lp-puerto--animada .lp-puerto__ficha.lp-puerto--visible .lp-puerto__ficha-sello {
    animation: lp-puerto-sellar .45s cubic-bezier(.3, 1.4, .5, 1) .7s both;
}

@keyframes lp-puerto-sellar {
    from {
        opacity: 0;
        transform: rotate(-7deg) scale(1.9);
    }

    to {
        opacity: 1;
        transform: rotate(-7deg) scale(1);
    }
}

@media (min-width: 36rem) {
    .lp-puerto__ficha-fila {
        grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
        align-items: baseline;
    }
}

@media (min-width: 62rem) {
    .lp-puerto__practicos {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 3.5rem;
    }
}

/* ═══ LA SONDA ═════════════════════════════════════════════════════════════
   Agua cada vez más honda con rayos de luz que bajan desde la superficie. Sin
   guion la plomada ya está en el fondo; con guion baja cuando la sección aparece
   y cada capa se enciende a su paso. */
.lp-puerto__fondo-marino {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background-image: repeating-linear-gradient(100deg, rgba(160, 210, 255, .05) 0 2rem, transparent 2rem 6rem), linear-gradient(180deg, #0E3A5C 0%, #082A45 45%, #041424 100%);
}

.lp-puerto__sondeo {
    position: relative;
    margin: 0;
    padding-left: 3.25rem;
}

.lp-puerto__sondaleza {
    position: absolute;
    left: 1.2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--lp-noche-linea-fuerte) 0 .6rem, transparent .6rem .9rem);
}

.lp-puerto__plomada {
    position: absolute;
    left: 50%;
    top: calc(100% - 1.7rem);
    width: 1.15rem;
    height: 1.7rem;
    margin-left: -.575rem;
    border-radius: .3rem .3rem .6rem .6rem;
    background: linear-gradient(90deg, #6F7C8A, #C9D2DB 45%, #56626F);
    box-shadow: 0 0 .9rem rgba(255, 209, 102, .4);
}

.lp-puerto--animada .lp-puerto__plomada {
    top: 0;
}

.lp-puerto__sondeo--suelta .lp-puerto__plomada {
    animation: lp-puerto-sondear 2.6s cubic-bezier(.45, 0, .55, 1) both;
}

@keyframes lp-puerto-sondear {
    from {
        top: 0;
    }

    to {
        top: calc(100% - 1.7rem);
    }
}

.lp-puerto__capas {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-puerto__capa {
    position: relative;
    padding: 1.35rem 1.3rem;
    border-left: 3px solid var(--lp-capa-borde);
    background: var(--lp-capa-fondo);
}

    .lp-puerto__capa .lp-puerto__parrafo {
        margin: 0;
        color: var(--lp-noche-suave);
    }

.lp-puerto__capa--1 {
    --lp-capa-fondo: rgba(95, 180, 230, .14);
    --lp-capa-borde: #7FC3E4;
    border-radius: .6rem .6rem 0 0;
}

.lp-puerto__capa--2 {
    --lp-capa-fondo: rgba(40, 120, 190, .18);
    --lp-capa-borde: #4A9ACF;
}

.lp-puerto__capa--3 {
    --lp-capa-fondo: rgba(4, 18, 40, .55);
    --lp-capa-borde: var(--lp-luz);
    border-radius: 0 0 .6rem .6rem;
}

.lp-puerto__capa-hondo {
    margin: 0 0 .3rem;
    font-family: var(--lp-maquina);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-luz);
}

.lp-puerto--animada .lp-puerto__capa {
    opacity: .4;
}

.lp-puerto__sondeo--suelta .lp-puerto__capa {
    animation: lp-puerto-encender .5s ease .5s both;
}

    .lp-puerto__sondeo--suelta .lp-puerto__capa--2 {
        animation-delay: 1.3s;
    }

    .lp-puerto__sondeo--suelta .lp-puerto__capa--3 {
        animation-delay: 2.1s;
    }

@keyframes lp-puerto-encender {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

.lp-puerto__soltar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.1rem 0 0;
    padding: .5rem 1rem;
    border: 2px solid var(--lp-luz);
    border-radius: 999px;
    background: transparent;
    color: var(--lp-luz-clara);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}

    .lp-puerto__soltar:hover {
        background: rgba(255, 209, 102, .14);
    }

/* ═══ EL PASAJE ════════════════════════════════════════════════════════════
   Agua de rada con ondas finas. Cada boya lleva la forma y la marca de tope de
   su tipo: especial (amarilla, aspa), de estribor (roja, cono), de babor (verde,
   cilindro) y de aguas seguras (a franjas, esfera). */
.lp-puerto__rada {
    --lp-foco: var(--lp-foco-papel);
    position: relative;
    overflow-x: clip;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background-color: var(--lp-rada);
    background-image: radial-gradient(ellipse 1.6rem .5rem at 50% 100%, transparent 70%, var(--lp-rada-ola) 72% 88%, transparent 90%);
    background-size: 3.4rem 1.6rem;
    color: var(--lp-rada-tinta);
}

    .lp-puerto__rada .lp-puerto__entrada {
        color: var(--lp-rada-suave);
    }

.lp-puerto__boyas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    gap: 2.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.lp-puerto__boya {
    position: relative;
}

    /* La línea del agua: va en la tarjeta para quedarse quieta mientras la boya
       se mece. Cae a la altura del collar de flotación del dibujo. */
    .lp-puerto__boya::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 7.35rem;
        width: 9rem;
        height: 2px;
        margin-left: -4.5rem;
        border-radius: 2px;
        background: var(--lp-rada-suave);
        opacity: .5;
    }

.lp-puerto__boya .lp-puerto__parrafo {
    margin: 0 auto .6rem;
    max-width: 18rem;
    color: var(--lp-rada-suave);
}

.lp-puerto__boya-dibujo {
    position: relative;
    display: block;
    width: 5.5rem;
    height: 8.5rem;
    margin: 0 auto 1rem;
    transform-origin: 50% 85%;
}

    /* El collar de flotación. */
    .lp-puerto__boya-dibujo::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: .7rem;
        width: 4.6rem;
        height: .9rem;
        margin-left: -2.3rem;
        border-radius: 50%;
        background: var(--lp-negro);
    }

.lp-puerto__boya-luz {
    position: absolute;
    left: 50%;
    top: 0;
    width: .8rem;
    height: .8rem;
    margin-left: -.4rem;
    border-radius: 50%;
    background: var(--lp-luz);
    box-shadow: 0 0 .6rem .2rem var(--lp-halo);
}

.lp-puerto__boya-marca {
    position: absolute;
    left: 50%;
    top: 1.05rem;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: -.8rem;
}

.lp-puerto__boya-cuerpo {
    position: absolute;
    left: 50%;
    bottom: 1.15rem;
    width: 3.8rem;
    height: 4.6rem;
    margin-left: -1.9rem;
    box-shadow: inset -.6rem 0 0 rgba(0, 0, 0, .18);
}

/* Especial: pilar amarillo con aspa amarilla. */
.lp-puerto__boya--amarilla .lp-puerto__boya-cuerpo {
    background: var(--lp-boya-amarilla);
    clip-path: polygon(34% 0, 66% 0, 86% 100%, 14% 100%);
}

.lp-puerto__boya--amarilla .lp-puerto__boya-marca {
    background: linear-gradient(45deg, transparent 40%, var(--lp-boya-amarilla-oscura) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--lp-boya-amarilla-oscura) 40% 60%, transparent 60%);
}

/* Estribor: cónica roja con cono de tope. */
.lp-puerto__boya--roja .lp-puerto__boya-cuerpo {
    background: var(--lp-boya-roja);
    clip-path: polygon(50% 0, 88% 100%, 12% 100%);
}

.lp-puerto__boya--roja .lp-puerto__boya-marca {
    background: var(--lp-boya-roja);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Babor: cilíndrica verde con cilindro de tope. */
.lp-puerto__boya--verde .lp-puerto__boya-cuerpo {
    border-radius: .5rem .5rem .2rem .2rem;
    background: var(--lp-boya-verde);
}

.lp-puerto__boya--verde .lp-puerto__boya-marca {
    width: 1.2rem;
    margin-left: -.6rem;
    border-radius: .15rem;
    background: var(--lp-boya-verde);
}

/* Aguas seguras: esférica a franjas rojas y blancas con esfera de tope. */
.lp-puerto__boya--franjas .lp-puerto__boya-cuerpo {
    border-radius: 50% 50% 42% 42%;
    background: repeating-linear-gradient(90deg, var(--lp-boya-roja) 0 .6rem, var(--lp-blanco) .6rem 1.2rem);
}

.lp-puerto__boya--franjas .lp-puerto__boya-marca {
    width: 1.3rem;
    height: 1.3rem;
    margin-left: -.65rem;
    border-radius: 50%;
    background: var(--lp-boya-roja);
}

.lp-puerto--animada .lp-puerto__boya.lp-puerto--visible .lp-puerto__boya-dibujo {
    animation: lp-puerto-mecer 2.6s ease-in-out 3 both;
}

    .lp-puerto--animada .lp-puerto__boya.lp-puerto--visible:nth-child(2) .lp-puerto__boya-dibujo {
        animation-delay: .3s;
    }

    .lp-puerto--animada .lp-puerto__boya.lp-puerto--visible:nth-child(3) .lp-puerto__boya-dibujo {
        animation-delay: .6s;
    }

    .lp-puerto--animada .lp-puerto__boya.lp-puerto--visible:nth-child(4) .lp-puerto__boya-dibujo {
        animation-delay: .9s;
    }

@keyframes lp-puerto-mecer {
    0%,
    100% {
        transform: none;
    }

    30% {
        transform: translateY(-.15rem) rotate(-3deg);
    }

    70% {
        transform: translateY(.2rem) rotate(3deg);
    }
}

.lp-puerto--animada .lp-puerto__boya.lp-puerto--visible .lp-puerto__boya-luz {
    animation: lp-puerto-destello 1.4s steps(1) .4s 4 both;
}

@keyframes lp-puerto-destello {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

.lp-puerto__boya-enlace {
    font-weight: 800;
    color: var(--lp-rada-tinta);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .25em;
}

    .lp-puerto__boya-enlace:hover {
        color: var(--lp-rada-tinta);
        text-decoration-thickness: 3px;
    }

    .lp-puerto__boya-enlace::after {
        content: " →";
        content: " →" / "";
    }

/* ═══ EL CASCO ═════════════════════════════════════════════════════════════
   Costado de un buque: obra muerta negra, línea blanca de flotación y obra viva
   roja, con remaches, marcas de calado en la proa y el disco de Plimsoll. Los
   números se pintan con una máscara que avanza, uno detrás de otro. */
.lp-puerto__casco {
    position: relative;
    margin: 0 0 2.75rem;
    padding: 1.9rem 3.25rem 4.25rem 1.5rem;
    overflow: hidden;
    border-radius: .6rem .6rem 2.5rem 2.5rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .13) 0 2px, transparent 2.5px) 0 .7rem / 1.6rem 1.6rem repeat-x, linear-gradient(0deg, var(--lp-casco-fondo) 0 3.1rem, var(--lp-casco-pintura) 3.1rem 3.45rem, var(--lp-casco) 3.45rem);
    color: var(--lp-casco-pintura);
    box-shadow: 0 16px 30px var(--lp-carta-sombra);
}

    /* Marcas de calado junto a la proa. */
    .lp-puerto__casco::before {
        content: "8M\A 6M\A 4M\A 2M";
        content: "8M\A 6M\A 4M\A 2M" / "";
        position: absolute;
        right: .9rem;
        top: 1.4rem;
        font-family: var(--lp-estarcido);
        font-size: .72rem;
        line-height: 1.9;
        white-space: pre;
        color: var(--lp-casco-marca);
    }

.lp-puerto__calado {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    margin: 0;
}

.lp-puerto__marca {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: .35rem;
    min-width: 0;
    container-type: inline-size;
}

    .lp-puerto__marca dt {
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .1em;
        line-height: 1.35;
        text-transform: uppercase;
        color: rgba(244, 244, 240, .8);
    }

.lp-puerto__cifra {
    margin: 0;
    font-family: var(--lp-estarcido);
    font-size: min(27cqi, 4.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}

.lp-puerto--animada .lp-puerto__casco .lp-puerto__cifra {
    clip-path: inset(0 100% 0 0);
}

.lp-puerto--animada .lp-puerto__casco.lp-puerto--visible .lp-puerto__cifra {
    animation: lp-puerto-pintar .9s steps(8) .4s both;
}

    .lp-puerto--animada .lp-puerto__casco.lp-puerto--visible .lp-puerto__marca:nth-child(2) .lp-puerto__cifra {
        animation-delay: .8s;
    }

    .lp-puerto--animada .lp-puerto__casco.lp-puerto--visible .lp-puerto__marca:nth-child(3) .lp-puerto__cifra {
        animation-delay: 1.2s;
    }

    .lp-puerto--animada .lp-puerto__casco.lp-puerto--visible .lp-puerto__marca:nth-child(4) .lp-puerto__cifra {
        animation-delay: 1.6s;
    }

@keyframes lp-puerto-pintar {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.lp-puerto__plimsoll {
    position: absolute;
    right: 1.75rem;
    bottom: .85rem;
    width: 2.3rem;
    height: 2.3rem;
    border: 3px solid var(--lp-casco-pintura);
    border-radius: 50%;
}

    .lp-puerto__plimsoll::before {
        content: "";
        position: absolute;
        left: -.8rem;
        right: -.8rem;
        top: 50%;
        height: 3px;
        margin-top: -1.5px;
        background: var(--lp-casco-pintura);
    }

.lp-puerto__unacino {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.lp-puerto__unacino-texto {
    min-width: 0;
}

.lp-puerto__destacado {
    margin: 1.1rem 0 0;
    padding-left: 1rem;
    border-left: 4px solid var(--lp-carta-acento);
    font-family: var(--lp-titular);
    font-size: clamp(1.3rem, 2.8vw, 1.7rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* La postal, con estampilla y matasellos. Va girada; la aparición respeta el
   giro con --lp-giro. */
.lp-puerto__postal {
    --lp-giro: 1.5deg;
    position: relative;
    width: min(100%, 32rem);
    margin: 0 auto;
    padding: .8rem .8rem 2.7rem;
    background: var(--lp-postal);
    color: var(--lp-postal-tinta);
    box-shadow: 0 14px 28px var(--lp-carta-sombra);
    transform: rotate(var(--lp-giro));
}

    .lp-puerto__postal img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        background: var(--lp-noche-alto);
    }

.lp-puerto__postal-estampilla {
    position: absolute;
    right: 1.4rem;
    top: 1.4rem;
    z-index: 1;
    width: 3.2rem;
    height: 3.8rem;
    border: 3px dotted var(--lp-postal);
    background: radial-gradient(circle at 50% 38%, var(--lp-luz) 0 .45rem, transparent .5rem), linear-gradient(180deg, var(--lp-azul) 0 64%, #2B6CB0 64%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}

.lp-puerto__postal-matasellos {
    position: absolute;
    right: 4.1rem;
    top: 2.4rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border: 2px solid rgba(20, 20, 20, .55);
    border-radius: 50%;
    color: rgba(20, 20, 20, .7);
    font-family: var(--lp-maquina);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: rotate(-14deg);
}

.lp-puerto__postal-pie {
    position: absolute;
    left: 1.1rem;
    bottom: .7rem;
    font-family: var(--lp-mano);
    font-size: 1.02rem;
}

@media (min-width: 48rem) {
    .lp-puerto__calado {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lp-puerto__casco {
        padding: 2.1rem 4rem 4.5rem 2rem;
    }
}

@media (min-width: 62rem) {
    .lp-puerto__unacino {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: 3.5rem;
    }
}

/* ═══ LA FAMILIA ═══════════════════════════════════════════════════════════
   La foto dentro de un salvavidas de ocho gajos. El aro es un degradado cónico
   con el centro calado por una máscara, así la foto se ve por el hueco. */
.lp-puerto__familia {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.lp-puerto__salvavidas {
    display: grid;
    justify-items: center;
    gap: .9rem;
    margin: 0;
}

.lp-puerto__salvavidas-aro {
    position: relative;
    display: block;
    width: min(86%, 23rem);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3));
}

    .lp-puerto__salvavidas-aro img {
        position: absolute;
        inset: 14%;
        width: 72%;
        height: 72%;
        border-radius: 50%;
        object-fit: cover;
        background: var(--lp-noche-alto);
    }

    .lp-puerto__salvavidas-aro::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: 50%;
        background: radial-gradient(circle closest-side, transparent 0 88%, rgba(0, 0, 0, .18) 91%, transparent 95%), conic-gradient(from 22.5deg, var(--lp-boya-roja) 0 12.5%, var(--lp-blanco) 0 25%, var(--lp-boya-roja) 0 37.5%, var(--lp-blanco) 0 50%, var(--lp-boya-roja) 0 62.5%, var(--lp-blanco) 0 75%, var(--lp-boya-roja) 0 87.5%, var(--lp-blanco) 0);
        -webkit-mask: radial-gradient(circle closest-side, transparent 0 71%, #000 71.5%);
        mask: radial-gradient(circle closest-side, transparent 0 71%, #000 71.5%);
    }

    /* El cabo que rodea el aro. */
    .lp-puerto__salvavidas-aro::after {
        content: "";
        position: absolute;
        inset: 11%;
        z-index: 2;
        border: 3px dashed var(--lp-cabo);
        border-radius: 50%;
        pointer-events: none;
    }

.lp-puerto__salvavidas-pie {
    font-family: var(--lp-mano);
    font-size: 1.15rem;
    color: var(--lp-carta-tinta);
}

/* El radiograma: papel de telegrama con cabecera de la estación de a bordo. */
.lp-puerto__radiograma {
    --lp-giro: .6deg;
    min-width: 0;
    padding: 0 1.4rem 1.6rem;
    overflow: hidden;
    border: 1px solid var(--lp-papel-linea);
    border-radius: .3rem;
    background: var(--lp-telegrama);
    color: var(--lp-papel-tinta);
    box-shadow: 0 14px 30px var(--lp-carta-sombra);
    font-family: var(--lp-maquina);
    transform: rotate(var(--lp-giro));
}

.lp-puerto__radiograma-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .2rem 1rem;
    margin: 0 -1.4rem 1.2rem;
    padding: .7rem 1.4rem;
    background: var(--lp-uni);
    color: var(--lp-uni-tinta);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

    .lp-puerto__radiograma-cabecera span:last-child {
        color: var(--lp-uni-oro);
    }

.lp-puerto__radiograma-titulo {
    margin: 0 0 1rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.45rem, 3.2vw, 2rem);
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.lp-puerto__radiograma-lista {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .95rem;
    line-height: 1.55;
}

.lp-puerto__stop {
    display: inline-block;
    margin-left: .5rem;
    padding: 0 .35rem;
    border: 1px solid currentColor;
    border-radius: .2rem;
    color: var(--lp-sello);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: .1em;
}

@media (min-width: 62rem) {
    .lp-puerto__familia {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 3.5rem;
    }
}

/* ═══ CONSULTAS EN EL MUELLE ═══════════════════════════════════════════════
   Etiquetas de carga: ojal a la izquierda y un cabo que las ata al borde. */
.lp-puerto__preguntas {
    display: grid;
    gap: .85rem;
    padding-left: 1.25rem;
}

.lp-puerto__pregunta {
    position: relative;
    border: 1px solid var(--lp-carta-borde);
    border-radius: .35rem .8rem .8rem .35rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 4px 12px var(--lp-carta-sombra);
}

    .lp-puerto__pregunta::before {
        content: "";
        position: absolute;
        left: -1.25rem;
        top: 1.45rem;
        width: 1.9rem;
        height: 3px;
        border-radius: 3px;
        background: var(--lp-cabo);
    }

    .lp-puerto__pregunta::after {
        content: "";
        position: absolute;
        left: .5rem;
        top: 1.15rem;
        width: .7rem;
        height: .7rem;
        border: 2px solid var(--lp-cabo);
        border-radius: 50%;
        background: var(--lp-carta);
    }

.lp-puerto__pregunta-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 1rem 1.8rem;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

    .lp-puerto__pregunta-titulo::-webkit-details-marker {
        display: none;
    }

    .lp-puerto__pregunta-titulo::after {
        content: "+";
        content: "+" / "";
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 1.7rem;
        height: 1.7rem;
        border: 2px solid var(--lp-carta-acento);
        border-radius: 50%;
        color: var(--lp-carta-acento);
        font-size: 1.1rem;
        line-height: 1;
        transition: transform .25s ease;
    }

.lp-puerto__pregunta[open] > .lp-puerto__pregunta-titulo::after {
    transform: rotate(45deg);
}

.lp-puerto__pregunta-respuesta {
    margin: 0;
    padding: 0 1.1rem 1.15rem 1.8rem;
    line-height: 1.6;
}

/* ═══ TODOS A BORDO (cierre) ═══════════════════════════════════════════════ */
.lp-puerto__cierre {
    padding-top: clamp(3.5rem, 8vw, 6rem);
    text-align: center;
}

.lp-puerto__cierre-contenido {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    padding-bottom: 1.5rem;
    container-type: inline-size;
}

.lp-puerto__mastil {
    position: relative;
    width: 5rem;
    height: 7.5rem;
    margin: 0 auto 1rem;
}

.lp-puerto__mastil-palo {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #7F8C99, #E3E9EF, #66727F);
}

    .lp-puerto__mastil-palo::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -.45rem;
        width: .8rem;
        height: .8rem;
        margin-left: -.4rem;
        border-radius: 50%;
        background: var(--lp-luz);
    }

.lp-puerto__mastil .lp-puerto__bandera--p {
    position: absolute;
    left: calc(50% + 2px);
    top: .35rem;
    width: 3.3rem;
    height: 2.3rem;
    transform-origin: 0 50%;
}

.lp-puerto--animada .lp-puerto__cierre .lp-puerto__mastil .lp-puerto__bandera--p {
    transform: translateY(4.8rem);
}

.lp-puerto--animada .lp-puerto__cierre.lp-puerto--visible .lp-puerto__mastil .lp-puerto__bandera--p {
    animation: lp-puerto-izar 1.5s cubic-bezier(.3, .7, .3, 1) .2s both, lp-puerto-ondear 1.6s ease-in-out 1.7s 2;
}

@keyframes lp-puerto-izar {
    from {
        transform: translateY(4.8rem);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes lp-puerto-ondear {
    0%,
    100% {
        transform: none;
    }

    50% {
        transform: skewY(-5deg) scaleX(.94);
    }
}

.lp-puerto__cierre-senal {
    max-width: 30rem;
    margin: 0 auto 1.1rem;
    font-family: var(--lp-maquina);
    font-size: .88rem;
    color: var(--lp-luz-clara);
}

.lp-puerto__h2--cierre {
    font-size: min(max(2.2rem, 5vw), 3.4rem, 10cqi);
    margin-bottom: 1rem;
}

.lp-puerto__cierre .lp-puerto__entrada {
    max-width: 34rem;
    margin-inline: auto;
}

.lp-puerto__cierre-nota {
    max-width: 34rem;
    margin: 1.75rem auto 0;
    font-size: .85rem;
    color: var(--lp-noche-suave);
}

    /* En el cierre el faro queda a la izquierda y su haz se abre hacia la
       derecha: se voltea el faro entero, que es simétrico. */
    .lp-puerto__horizonte--cierre .lp-puerto__faro {
        right: auto;
        left: 12%;
        transform: scaleX(-1);
    }

/* ═══ EL TIMÓN FLOTANTE ════════════════════════════════════════════════════
   Fijo, no pegajoso: no reserva hueco en el flujo. Se esconde bajando fuera de
   la pantalla y con visibility, para que tampoco reciba el foco. El anillo doble
   del foco se ve sobre la noche y sobre el papel.

   Va en la esquina inferior IZQUIERDA: la derecha es la de la mascota del sitio,
   que se dibuja por encima y lo taparía. */
.lp-puerto__timon {
    position: fixed;
    z-index: 1020;
    left: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.2rem .6rem .65rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--lp-chaleco-alto), var(--lp-chaleco));
    color: var(--lp-chaleco-tinta);
    font-family: var(--lp-titular);
    font-size: 1.05rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 -.3rem 0 rgba(255, 255, 255, .3), 0 4px 0 var(--lp-chaleco-sombra), 0 10px 24px rgba(0, 0, 0, .35);
    visibility: hidden;
    transform: translateY(calc(100% + 2rem));
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .35s;
}

    .lp-puerto__timon:hover {
        color: var(--lp-chaleco-tinta);
    }

    .lp-puerto .lp-puerto__timon:focus-visible {
        outline: 3px solid #FFFFFF;
        outline-offset: 2px;
        box-shadow: 0 0 0 6px #0E2240, 0 10px 24px rgba(0, 0, 0, .35);
    }

.lp-puerto__timon--visible {
    visibility: visible;
    transform: none;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), visibility 0s;
}

.lp-puerto__timon-rueda {
    width: 1.75rem;
    height: 1.75rem;
    transition: transform .5s ease;
}

.lp-puerto__timon:hover .lp-puerto__timon-rueda {
    transform: rotate(90deg);
}

/* ═══ Ajustes de teléfono ══════════════════════════════════════════════════ */
@media (max-width: 35.99rem) {
    .lp-puerto__acciones .lp-puerto__boton {
        width: 100%;
    }

    .lp-puerto__boton {
        padding-inline: 1.2rem;
    }

    .lp-puerto__zarpe {
        padding-inline: 1rem;
    }

    .lp-puerto__derrota {
        padding: 1rem .9rem .95rem;
    }

    .lp-puerto__buque {
        padding-inline: .9rem;
    }

    .lp-puerto__buque-casco {
        left: .9rem;
        right: .9rem;
    }

    .lp-puerto__casco {
        padding-inline: 1.1rem 2.6rem;
    }

    .lp-puerto__postal-matasellos {
        right: 3.7rem;
        width: 3.6rem;
        height: 3.6rem;
        font-size: .6rem;
    }
}

/* Por debajo de 25rem el timón, que va a la izquierda, ya no cabe entero entre
   el borde y la mascota del sitio, que ocupa la esquina derecha: se estrecha, y
   solo a lo ancho, para no perder alto donde se pulsa. Por debajo de 22.5rem ni
   así cabe, y la rueda, que es adorno, cede su sitio al texto. */
@media (max-width: 24.99rem) {
    .lp-puerto__timon {
        gap: .4rem;
        padding-inline: .5rem .9rem;
        font-size: .92rem;
        letter-spacing: .03em;
    }

    .lp-puerto__timon-rueda {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (max-width: 22.49rem) {
    .lp-puerto__timon {
        padding-left: .9rem;
    }

    .lp-puerto__timon-rueda {
        display: none;
    }
}

/* ═══ Colores forzados del sistema ═════════════════════════════════════════
   Sin fondos, los contenedores de carga y los mares de la travesía perderían su
   largo: se dibujan con borde. */
@media (forced-colors: active) {
    .lp-puerto__caja,
    .lp-puerto__zona,
    .lp-puerto__contenedor {
        border: 2px solid CanvasText;
    }

    .lp-puerto__contenedor[aria-selected="true"] {
        outline: 3px solid Highlight;
    }
}

/* ═══ Menos movimiento ═════════════════════════════════════════════════════
   Sin animaciones ni transiciones, y todo lo que esperaba su momento ya está en
   su sitio: secciones a la vista, plomada en el fondo, capas encendidas,
   bandera izada, sello puesto y números pintados. */
@media (prefers-reduced-motion: reduce) {
    .lp-puerto *,
    .lp-puerto *::before,
    .lp-puerto *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .lp-puerto--animada [data-revelar] {
        opacity: 1;
        transform: rotate(var(--lp-giro, 0deg));
    }

    .lp-puerto--animada .lp-puerto__plomada {
        top: calc(100% - 1.7rem);
    }

    .lp-puerto--animada .lp-puerto__capa,
    .lp-puerto--animada .lp-puerto__ficha .lp-puerto__ficha-sello {
        opacity: 1;
    }

    .lp-puerto--animada .lp-puerto__cierre .lp-puerto__mastil .lp-puerto__bandera--p {
        transform: none;
    }

    .lp-puerto--animada .lp-puerto__casco .lp-puerto__cifra {
        clip-path: none;
    }

    .lp-puerto__timon {
        transition: none;
    }
}