:root {
--azul-marino: #0c2750;
--azul-marino-profundo: #081b3a;
--gris-editorial: #6f7176;
--marfil: #f7f4ee;
--gris-claro: #eceae4;
--linea: rgba(12, 39, 80, 0.18);
--linea-clara: rgba(255, 255, 255, 0.25);
}

body {
font-family: 'Lora', Georgia, serif;
color: var(--azul-marino);
background-color: var(--marfil);
overflow-x: hidden;
}

h1, h2, h3, .titulo-principal, .titulo-seccion {
font-family: 'Playfair Display', 'Times New Roman', serif;
}

.barra-lateral {
width: 270px;
border-right: 1px solid var(--linea);
z-index: 1040;
}

.logo-lateral {
max-width: 170px;
}

.logo-superior {
height: 44px;
width: auto;
}

.logo-pie {
height: 54px;
width: auto;
background-color: #ffffff;
padding: 4px 10px;
border-radius: 4px;
}

.lema-lateral {
font-family: 'Jost', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.22em;
color: var(--gris-editorial);
}

.barra-superior {
border-bottom: 1px solid var(--linea);
}

.boton-menu {
border: none;
color: var(--azul-marino);
}

.boton-menu:focus {
box-shadow: none;
}

.menu-movil {
background-color: var(--marfil);
}

.contenido-principal {
margin-left: 0;
}

@media (min-width: 992px) {
.contenido-principal {
margin-left: 270px;
}
}

.enlace-nav {
font-family: 'Jost', sans-serif;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gris-editorial);
padding: 0.7rem 1rem;
border-left: 2px solid transparent;
transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.enlace-nav:hover,
.enlace-nav.activo {
color: var(--azul-marino);
border-left-color: var(--azul-marino);
background-color: rgba(12, 39, 80, 0.05);
}

.icono-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--linea);
border-radius: 50%;
color: var(--azul-marino);
font-size: 1.05rem;
transition: all 0.3s ease;
}

.icono-social:hover {
background-color: var(--azul-marino);
color: var(--marfil);
border-color: var(--azul-marino);
transform: translateY(-2px);
}

.portada {
background:
linear-gradient(rgba(247, 244, 238, 0.94), rgba(247, 244, 238, 0.97)),
url('../imgs/bienvenida.jpg') center / cover no-repeat;
}

.kicker {
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gris-editorial);
}

.kicker-claro {
color: rgba(247, 244, 238, 0.75);
}

.titulo-principal {
font-size: clamp(3rem, 8.5vw, 6.5rem);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--azul-marino);
}

.titulo-principal em {
font-weight: 400;
font-style: italic;
color: var(--gris-editorial);
}

.subtitulo-portada {
font-family: 'Jost', sans-serif;
font-size: clamp(0.78rem, 1.6vw, 0.95rem);
font-weight: 500;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--azul-marino);
margin-top: 1.5rem;
}

.bajada-portada {
font-family: 'Lora', serif;
font-style: italic;
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
color: var(--gris-editorial);
max-width: 640px;
margin-top: 1rem;
}

.titulo-seccion {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 1rem;
}

.standfirst {
font-family: 'Lora', serif;
font-style: italic;
font-size: 1.08rem;
color: var(--gris-editorial);
}

.standfirst-claro {
color: rgba(247, 244, 238, 0.8);
}

.texto-cuerpo {
font-size: 1.02rem;
line-height: 1.85;
text-align: justify;
}

.texto-claro {
color: rgba(247, 244, 238, 0.92);
}

.capitel::first-letter {
font-family: 'Playfair Display', serif;
font-size: 3.6em;
font-weight: 700;
float: left;
line-height: 0.82;
padding: 0.08em 0.12em 0 0;
color: var(--azul-marino);
}

.capitel-claro::first-letter {
color: var(--marfil);
}

.regla-fina {
width: 72px;
border: 0;
border-top: 1px solid var(--linea);
opacity: 1;
margin: 1.25rem auto;
}

.regla-clara {
border-top-color: var(--linea-clara);
}

.fondo-marfil {
background-color: var(--marfil);
}

.fondo-marino {
background-color: var(--azul-marino);
background-image: linear-gradient(160deg, var(--azul-marino) 0%, var(--azul-marino-profundo) 100%);
}

.fondo-gris {
background-color: var(--gris-claro);
}

.marco-imagen {
position: relative;
padding: 0 0 1.6rem 1.6rem;
}

.marco-imagen::before {
content: "";
position: absolute;
top: 1.6rem;
right: -1.2rem;
bottom: 0;
left: 0;
border: 1px solid var(--linea);
z-index: 0;
}

.marco-claro::before {
border-color: var(--linea-clara);
}

.imagen-editorial {
position: relative;
z-index: 1;
width: 100%;
object-fit: cover;
box-shadow: 0 24px 48px rgba(8, 27, 58, 0.22);
filter: saturate(0.92);
transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.imagen-editorial:hover {
transform: translateY(-6px);
box-shadow: 0 32px 60px rgba(8, 27, 58, 0.3);
}

.proporcion-panoramica {
aspect-ratio: 3 / 2;
}

.proporcion-retrato {
aspect-ratio: 2 / 3;
}

.pie-imagen {
position: relative;
z-index: 1;
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gris-editorial);
margin-top: 0.9rem;
}

.pie-claro {
color: rgba(247, 244, 238, 0.75);
}

.boton-solido {
background-color: var(--azul-marino);
border: 1px solid var(--azul-marino);
color: var(--marfil);
font-family: 'Jost', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 0;
padding: 0.9rem 2.2rem;
transition: all 0.3s ease;
}

.boton-solido:hover {
background-color: var(--azul-marino-profundo);
border-color: var(--azul-marino-profundo);
color: var(--marfil);
transform: translateY(-2px);
}

.boton-contorno {
background-color: transparent;
border: 1px solid var(--azul-marino);
color: var(--azul-marino);
font-family: 'Jost', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 0;
padding: 0.9rem 2.2rem;
transition: all 0.3s ease;
}

.boton-contorno:hover {
background-color: var(--azul-marino);
color: var(--marfil);
transform: translateY(-2px);
}

.boton-claro {
background-color: var(--marfil);
border: 1px solid var(--marfil);
color: var(--azul-marino);
font-family: 'Jost', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 0;
padding: 0.9rem 2.2rem;
transition: all 0.3s ease;
}

.boton-claro:hover {
background-color: transparent;
color: var(--marfil);
transform: translateY(-2px);
}

.boton-contorno-claro {
background-color: transparent;
border: 1px solid var(--linea-clara);
color: var(--marfil);
font-family: 'Jost', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 0;
padding: 0.9rem 2.2rem;
transition: all 0.3s ease;
}

.boton-contorno-claro:hover {
border-color: var(--marfil);
color: var(--marfil);
background-color: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}

.flecha-desplaz {
font-size: 1.6rem;
color: var(--gris-editorial);
animation: flotar 2.2s ease-in-out infinite;
}

@keyframes flotar {
0%, 100% {
transform: translateY(0);
opacity: 0.6;
}
50% {
transform: translateY(8px);
opacity: 1;
}
}

.pie-pagina {
background-color: var(--azul-marino-profundo);
border-top: 1px solid var(--linea-clara);
}

.pie-pagina .icono-social {
color: var(--marfil);
border-color: var(--linea-clara);
}

.pie-pagina .icono-social:hover {
background-color: var(--marfil);
color: var(--azul-marino);
border-color: var(--marfil);
}

.pie-pagina .texto-mini {
color: rgba(247, 244, 238, 0.7);
}

.texto-mini {
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gris-editorial);
}

.js .revelar {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s ease, transform 0.9s ease;
}

.js .revelar.visible {
opacity: 1;
transform: translateY(0);
}

::selection {
background-color: var(--azul-marino);
color: var(--marfil);
}

html {
scroll-behavior: smooth;
}