/* ===========================================================
   IE N° 60019 "San Martín de Porres" — Hoja de estilos general
   Paleta basada en el escudo institucional:
   crema #fffdec | amarillo escudo #fff8ad | rojo #d32f2f | negro #1a1a1a
   =========================================================== */

:root {
    --rojo-primario: #d32f2f;
    --rojo-oscuro: #b71c1c;
    --rojo-claro: #eb3237;
    --crema-fondo: #fffdec;
    --amarillo-escudo: #fff8ad;
    --negro: #1a1a1a;
    --texto-secundario: #546e7a;
    --blanco: #ffffff;
    --borde-suave: #eee6c8;

    --fuente-titulos: 'Poppins', 'Segoe UI', sans-serif;
    --fuente-texto: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --sombra-suave: 0 10px 30px rgba(0,0,0,0.07);
    --radio: 18px;
}

* { box-sizing: border-box; }

/* ---------- Enlace de accesibilidad "saltar al contenido" ---------- */
.enlace-saltar {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1000;
    background: var(--rojo-primario);
    color: var(--blanco);
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    transition: top 0.2s ease;
}
.enlace-saltar:focus {
    top: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--fuente-texto);
    color: var(--negro);
    background-color: var(--crema-fondo);
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100vw;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    margin: 0 0 0.6em 0;
    line-height: 1.25;
}

p { 
    margin: 0 0 1em 0;
    text-align: justify;
}

.contenedor {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
}

section { padding: 5rem 0; }

.seccion-alterna { background-color: var(--blanco); }

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #ffeff0;
    color: var(--rojo-primario);
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(211,47,47,0.12);
}
.etiqueta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rojo-primario);
}

.titulo-seccion {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem auto;
}

.titulo-seccion h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.titulo-seccion p { color: var(--texto-secundario); font-size: 1.05rem; margin: 0; }

.linea-central {
    width: 60px;
    height: 4px;
    background-color: var(--rojo-primario);
    margin: 0.8rem auto 1.4rem auto;
    border-radius: 2px;
}

/* ---------- Botones ---------- */
.boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    font-family: var(--fuente-texto);
    position: relative;
}
.boton::after {
    content: "→";
    display: inline-block;
    transition: transform 0.25s ease;
}
.boton:hover::after { transform: translateX(4px); }

.boton-primario {
    background-color: var(--rojo-primario);
    color: var(--blanco);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.28);
}
.boton-primario:hover { background-color: var(--rojo-oscuro); transform: translateY(-2px); }

.boton-secundario {
    background-color: transparent;
    color: var(--negro);
    border-color: var(--negro);
}
.boton-secundario:hover { background-color: var(--negro); color: var(--blanco); transform: translateY(-2px); }

.boton-claro {
    background-color: var(--blanco);
    color: var(--rojo-primario);
}
.boton-claro:hover { background-color: var(--amarillo-escudo); transform: translateY(-2px); }

/* ---------- Aviso de plantilla ---------- */
.aviso-plantilla {
    background: var(--negro);
    color: #cfcfcf;
    text-align: center;
    font-size: 0.82rem;
    padding: 7px 16px;
    letter-spacing: 0.2px;
}
.aviso-plantilla strong { color: var(--amarillo-escudo); }

/* ---------- Header / Navegación ---------- */
header.principal {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 253, 236, 0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--borde-suave);
    transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* El header siempre es sólido y con texto oscuro (negro), en todas las páginas,
   incluida la portada — evita problemas de contraste sobre el carrusel. */
header.principal.con-scroll {
    background-color: rgba(255, 253, 236, 0.97);
    border-bottom-color: var(--borde-suave);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

.barra-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
}
.marca img { width: 52px; height: auto; }
.marca .texto-marca { display: flex; flex-direction: column; line-height: 1.15; }
.marca .texto-marca strong { font-family: var(--fuente-titulos); font-size: 1.02rem; }
.marca .texto-marca span { font-size: 0.75rem; color: var(--texto-secundario); }

nav.menu-principal ul {
    list-style: none;
    display: flex;
    gap: 2.1rem;
    margin: 0;
    padding: 0;
}

/* Temporal: secciones aún en trabajo interno, ocultas del menú principal.
   Para volver a mostrarlas, quita la clase "oculto-temporal" del <li>
   correspondiente en el menú de cada página (o borra esta regla). */
.menu-principal .oculto-temporal { display: none; }

nav.menu-principal a {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 6px 2px;
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

nav.menu-principal a:hover,
nav.menu-principal a.activo {
    color: var(--rojo-primario);
    border-color: var(--rojo-primario);
}

/* ---------- Submenú desplegable ---------- */
.item-submenu { position: relative; }
.item-submenu > a::after {
    content: "▾";
    font-size: 0.65rem;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.2s ease;
}
.item-submenu.abierto > a::after { transform: rotate(180deg); }

.submenu {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 210px;
    background: var(--blanco);
    border-radius: 14px;
    box-shadow: var(--sombra-suave);
    border: 1px solid var(--borde-suave);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.item-submenu:hover .submenu,
.item-submenu.abierto .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.submenu li a {
    display: block;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 500;
    border-bottom: none !important;
    color: var(--negro);
}
.submenu li a:hover { background: #ffeff0; color: var(--rojo-primario); }

.acciones-nav { display: flex; align-items: center; gap: 1rem; }

.boton-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.boton-toggle span {
    width: 26px;
    height: 3px;
    background-color: var(--negro);
    border-radius: 3px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- Hero / Carrusel ---------- */
.hero-carrusel {
    position: relative;
    overflow: hidden;
    height: min(78vh, 620px);
    min-height: 420px;
}

.carrusel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
    overflow: hidden;
}
.carrusel-slide.activo { opacity: 1; z-index: 1; }

.carrusel-fondo {
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center;
    transform: scale(1);
}
.carrusel-slide.activo .carrusel-fondo {
    animation: efectoKenBurns 6.8s ease-out forwards;
}
@keyframes efectoKenBurns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.09) translate(-0.5%, -0.5%); }
}

.carrusel-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20,10,10,0.55) 0%, rgba(20,10,10,0.28) 38%, rgba(20,10,10,0.42) 70%, rgba(20,10,10,0.72) 100%),
        linear-gradient(100deg, rgba(211,47,47,0.28) 0%, rgba(20,10,10,0) 45%);
}

.indicador-scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--blanco);
    opacity: 0.85;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.indicador-scroll span.flecha {
    width: 22px;
    height: 22px;
    border-right: 2px solid var(--blanco);
    border-bottom: 2px solid var(--blanco);
    transform: rotate(45deg);
    animation: rebote-suave 1.8s ease-in-out infinite;
}
@keyframes rebote-suave {
    0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 0.6; }
    50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

.carrusel-contenido {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: var(--blanco);
    max-width: 620px;
}

.carrusel-contenido .etiqueta {
    background-color: rgba(255,255,255,0.14);
    color: var(--amarillo-escudo);
    border: 1px solid rgba(255,248,173,0.35);
    backdrop-filter: blur(3px);
}
.carrusel-contenido .etiqueta::before { background: var(--amarillo-escudo); }
.carrusel-contenido h1 {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    color: var(--blanco);
    text-shadow: 0 4px 24px rgba(0,0,0,0.35);
    letter-spacing: -0.5px;
}
.carrusel-contenido p { font-size: 1.12rem; color: #f1f1f1; max-width: 520px; }
.acciones-hero { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }

/* Entrada escalonada del texto del slide activo */
.carrusel-contenido > * {
    opacity: 0;
    transform: translateY(18px);
    animation: aparecerTexto 0.7s ease forwards;
}
.carrusel-contenido > *:nth-child(1) { animation-delay: 0.15s; }
.carrusel-contenido > *:nth-child(2) { animation-delay: 0.28s; }
.carrusel-contenido > *:nth-child(3) { animation-delay: 0.41s; }
.carrusel-contenido > *:nth-child(4) { animation-delay: 0.54s; }
@keyframes aparecerTexto {
    to { opacity: 1; transform: translateY(0); }
}

.controles-carrusel {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.controles-carrusel button {
    pointer-events: all;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.25);
    color: var(--blanco);
    font-size: 1.3rem;
    cursor: pointer;
    margin: 0 1.2rem;
    transition: background-color 0.2s ease;
}
.controles-carrusel button:hover { background: rgba(255,255,255,0.45); }

/* Envoltorio de los controles inferiores: botón de pausa + puntos + barra de
   progreso, todo centrado como una sola fila (antes solo estaban los puntos). */
.controles-inferior-carrusel {
    position: absolute;
    z-index: 3;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
}

.puntos-carrusel {
    display: flex;
    gap: 10px;
}
.puntos-carrusel button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--blanco);
    background: transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.puntos-carrusel button.activo { background: var(--blanco); }

/* Botón para pausar/reanudar el avance automático: le da control a la
   persona sobre el movimiento del carrusel (accesibilidad + quien quiera
   mirar una foto con calma). */
.control-pausa {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: var(--blanco);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.control-pausa:hover { background: rgba(255,255,255,0.4); }

/* Barra de progreso: se llena de 0% a 100% durante los 6s de cada
   diapositiva (ver @keyframes avanceCarrusel), y se pausa junto con el
   autoplay (mouse encima, botón de pausa o al deslizar en móvil). */
.barra-progreso-carrusel {
    width: 110px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,0.25);
    overflow: hidden;
    flex-shrink: 0;
}
.barra-progreso-carrusel span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--amarillo-escudo);
    border-radius: 3px;
}
.barra-progreso-carrusel span.avanzando {
    animation: avanceCarrusel 6s linear forwards;
}
.barra-progreso-carrusel span.pausada {
    animation-play-state: paused;
}
@keyframes avanceCarrusel {
    from { width: 0%; }
    to { width: 100%; }
}

@media (max-width: 600px) {
    .barra-progreso-carrusel { width: 70px; }
}

/* ---------- Tarjetas de datos rápidos ---------- */
.franja-datos {
    background-color: var(--negro);
    color: var(--blanco);
}
.grid-datos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
    padding: 2.6rem 0;
}
.grid-datos .dato strong {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    color: var(--amarillo-escudo);
}
.grid-datos .dato span { font-size: 0.9rem; color: #d8d8d8; }

/* ---------- Tarjetas / grids generales ---------- */
.grid-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.grid-dos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; align-items: center; }

.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio);
    padding: 2.1rem 1.8rem;
    box-shadow: var(--sombra-suave);
    border-top: 4px solid var(--rojo-primario);
    border-left: 1px solid var(--borde-suave);
    border-right: 1px solid var(--borde-suave);
    border-bottom: 1px solid var(--borde-suave);
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.tarjeta:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 40px rgba(211,47,47,0.14);
    border-color: rgba(211,47,47,0.25);
}

.tarjeta .icono {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffeff0, #ffd9da);
    color: var(--rojo-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 1.2rem;
    box-shadow: inset 0 0 0 1px rgba(211,47,47,0.08);
    transition: transform 0.3s ease;
}
.tarjeta:hover .icono { transform: scale(1.08) rotate(-4deg); }

.tarjeta h3 { font-size: 1.22rem; }
.tarjeta p { color: var(--texto-secundario); font-size: 0.98rem; margin-bottom: 0; }

/* ---------- Accesos rápidos / plataformas (SieWeb, correo, Canva) ---------- */
.tarjeta-acceso {
    position: relative;
    overflow: hidden;
    border-top-width: 0;
    text-align: center;
}
.tarjeta-acceso::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
}
.acceso-sieweb::before  { background: linear-gradient(90deg, #6a1dbb, #2dd4bf); }
.acceso-correo::before  { background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc05, #34a853); }
.acceso-canva::before   { background: linear-gradient(90deg, #00c4cc, #7d2ae8); }

.acceso-sieweb { --acento: #6a1dbb; }
.acceso-correo { --acento: #4285f4; }
.acceso-canva  { --acento: #7d2ae8; }

.tarjeta-acceso .logo-acceso {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blanco);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--borde-suave);
    margin-bottom: 1.3rem;
    padding: 0.9rem 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tarjeta-acceso .logo-acceso img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}
.tarjeta-acceso:hover .logo-acceso {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--borde-suave), 0 10px 20px rgba(0,0,0,0.08);
}

.tarjeta-acceso h3 { font-size: 1.14rem; }
.tarjeta-acceso p { margin-bottom: 1.3rem; }

.tarjeta-acceso .enlace-externo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--acento);
    background: rgba(0,0,0,0.04);
    background: color-mix(in srgb, var(--acento) 12%, white);
    transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease, transform 0.25s ease;
}
.tarjeta-acceso .enlace-externo span { transition: transform 0.25s ease; }
.tarjeta-acceso:hover .enlace-externo {
    background: var(--acento);
    color: var(--blanco);
    gap: 0.6rem;
}
.tarjeta-acceso:hover .enlace-externo span { transform: translate(2px, -2px); }

/* ---------- Galería ---------- */
.grid-galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.item-galeria {
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
}
.item-galeria img { width: 100%; height: 230px; object-fit: cover; transition: transform 0.4s ease; }
.item-galeria:hover img { transform: scale(1.08); }
.item-galeria span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
    color: var(--blanco);
    padding: 0.9rem 1rem 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
}

/* ---------- Timeline (proceso de admisión) ---------- */
.timeline { position: relative; margin-top: 2.5rem; }
.paso-timeline {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.4rem;
    margin-bottom: 2.2rem;
}
.paso-timeline .numero {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--rojo-primario);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-titulos);
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}
.paso-timeline h3 { margin-bottom: 0.3rem; font-size: 1.15rem; }
.paso-timeline p { color: var(--texto-secundario); margin: 0; }

/* ---------- Tabla de requisitos ---------- */
.tabla-requisitos { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.tabla-requisitos th, .tabla-requisitos td {
    text-align: left;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--borde-suave);
}
.tabla-requisitos th { background: var(--amarillo-escudo); font-family: var(--fuente-titulos); }
.tabla-requisitos tr:last-child td { border-bottom: none; }

/* ---------- CTA banda (ancho completo, de extremo a extremo) ---------- */
.cta-banda {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--rojo-primario), var(--rojo-oscuro));
    color: var(--blanco);
    padding: 3.4rem 0;
}
/* "Media luna": dos círculos recortados por el borde de la franja */
.cta-banda::before,
.cta-banda::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cta-banda::before {
    width: 480px;
    height: 480px;
    right: -180px;
    top: -260px;
    border: 2px solid rgba(255,255,255,0.16);
}
.cta-banda::after {
    width: 240px;
    height: 240px;
    right: -30px;
    bottom: -150px;
    border: 2px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.06);
}
.cta-banda__fila {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
}
.cta-banda__texto { max-width: 620px; }
.cta-banda h2 {
    color: var(--blanco);
    text-align: left;
    margin-bottom: 0.4rem;
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}
.cta-banda p { color: #ffe3e3; max-width: 560px; margin: 0; text-align: left; }
.cta-banda__acciones {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .cta-banda__fila { flex-direction: column; align-items: flex-start; }
}

/* ---------- Sección dividida imagen + texto (Nuestra Sede / Patrono) ---------- */
.seccion-dividida {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.seccion-dividida.invertida { direction: rtl; }
.seccion-dividida.invertida > * { direction: ltr; }
.seccion-dividida img {
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    width: 100%;
    height: 380px;
    object-fit: cover;
}
.seccion-dividida .acciones-hero { margin-top: 1.4rem; }

/* ---------- Composición de fotos apiladas (estilo "dos tarjetas") ---------- */
.foto-apilada {
    position: relative;
    min-height: 440px;
}
.foto-apilada .foto-atras,
.foto-apilada .foto-principal {
    width: 76%;
    border-radius: var(--radio);
    overflow: hidden;
}
.foto-apilada .foto-atras img,
.foto-apilada .foto-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.foto-apilada .foto-atras {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 340px;
    transform: rotate(4deg);
    box-shadow: var(--sombra-suave);
}
.foto-apilada .foto-principal {
    position: relative;
    height: 400px;
    box-shadow: 0 26px 48px rgba(0,0,0,0.18);
    border: 6px solid var(--blanco);
    z-index: 2;
}
.flecha-apilada {
    position: absolute;
    top: 52%;
    right: 6%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--blanco);
    box-shadow: var(--sombra-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--rojo-primario);
    z-index: 3;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.flecha-apilada:hover {
    background: var(--rojo-primario);
    color: var(--blanco);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 14px 26px rgba(211,47,47,0.28);
}

@media (max-width: 760px) {
    .foto-apilada { min-height: 320px; margin-bottom: 1rem; }
    .foto-apilada .foto-atras,
    .foto-apilada .foto-principal { width: 86%; }
    .foto-apilada .foto-atras { height: 240px; }
    .foto-apilada .foto-principal { height: 280px; }
    .flecha-apilada { width: 44px; height: 44px; font-size: 1.05rem; }
}

/* ---------- Franja de frase institucional (tagline) ---------- */
.franja-tagline {
    background: var(--negro);
    color: var(--blanco);
    text-align: center;
    padding: 3.6rem 0;
    position: relative;
    overflow: hidden;
}
.franja-tagline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(211,47,47,0.25), transparent 60%);
}
.franja-tagline p {
    position: relative;
    font-family: var(--fuente-titulos);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 600;
    max-width: 780px;
    margin: 0 auto;
    color: var(--blanco);
}
.franja-tagline p span { color: var(--amarillo-escudo); }

/* ---------- Noticias / Blog ---------- */
.grid-noticias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.tarjeta-noticia {
    background: var(--blanco);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    border: 1px solid var(--borde-suave);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.tarjeta-noticia:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0,0,0,0.1); }
.tarjeta-noticia img { width: 100%; height: 170px; object-fit: cover; }
.tarjeta-noticia .cuerpo-noticia { padding: 1.3rem 1.3rem 1.5rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.tarjeta-noticia .categoria-noticia {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rojo-primario);
    margin-bottom: 0.6rem;
}
.tarjeta-noticia h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.tarjeta-noticia p { color: var(--texto-secundario); font-size: 0.9rem; margin-bottom: 1rem; }
.tarjeta-noticia .enlace-noticia {
    margin-top: auto;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--rojo-primario);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Franja de egresados ---------- */
.franja-egresados {
    background: linear-gradient(135deg, var(--amarillo-escudo), var(--crema-fondo));
    border-radius: var(--radio);
    padding: 3rem 2rem;
    text-align: center;
}
.franja-egresados h2 { margin-bottom: 0.6rem; }
.franja-egresados p { color: var(--texto-secundario); max-width: 560px; margin: 0 auto 1.5rem auto; }

/* ---------- Documentos importantes ---------- */
.grid-documentos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}
.tarjeta-documento {
    background: var(--blanco);
    border-radius: var(--radio);
    padding: 1.9rem 1.6rem;
    box-shadow: var(--sombra-suave);
    border: 1px solid var(--borde-suave);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tarjeta-documento:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(0,0,0,0.1);
    border-color: rgba(211,47,47,0.25);
}
.tarjeta-documento .icono-documento {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffeff0, #ffd9da);
    color: var(--rojo-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}
.tarjeta-documento h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.tarjeta-documento p { color: var(--texto-secundario); font-size: 0.9rem; margin-bottom: 1.2rem; flex: 1; }
.tarjeta-documento .meta-documento {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #90a4ae;
    margin-bottom: 1rem;
}
.enlace-descarga {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 50px;
    background: var(--crema-fondo);
    color: var(--negro);
    font-weight: 600;
    font-size: 0.9rem;
    border: 1.5px solid var(--borde-suave);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.enlace-descarga:hover {
    background: var(--rojo-primario);
    color: var(--blanco);
    border-color: var(--rojo-primario);
}
.enlace-descarga svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 980px) {
    .grid-documentos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-documentos { grid-template-columns: 1fr; }
}

/* ---------- Convenios y alianzas: tarjeta flotante + carrusel con puntos ---------- */
.franja-convenios {
    background: linear-gradient(180deg, var(--crema-fondo), #f7edc0 140%);
    padding: 4.5rem 0;
}
.tarjeta-convenios {
    background: var(--blanco);
    border-radius: 28px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.08);
    padding: 2.6rem 3rem;
    display: grid;
    grid-template-columns: 230px 1px minmax(0, 1fr);
    align-items: center;
    gap: 2.4rem;
    overflow: hidden;
}
.convenios-titulo h2 {
    font-size: 1.5rem;
    color: var(--negro);
    margin-bottom: 0;
    line-height: 1.25;
}
.convenios-divisor { width: 1px; height: 84px; background: var(--borde-suave); justify-self: center; }

/* Envoltorio del carrusel: min-width:0 es necesario para que, dentro de una
   columna de grid, el elemento pueda encogerse al ancho disponible en vez
   de expandirse al tamaño total de su contenido (lo que sacaba los logos
   fuera de la tarjeta). */
.tarjeta-convenios > div:last-child { min-width: 0; }

.carrusel-snap {
    display: flex;
    gap: 2.2rem;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.4rem 0.2rem;
}
.carrusel-snap::-webkit-scrollbar { display: none; }
.carrusel-snap .chip-institucion {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--texto-secundario);
    font-weight: 700;
    font-size: 0.92rem;
    text-align: center;
    padding: 0.6rem;
    transition: transform 0.25s ease, color 0.25s ease;
}
.carrusel-snap .chip-institucion:hover { color: var(--rojo-primario); transform: translateY(-2px); }

/* Logos dentro de cada chip: mismo criterio que .tarjeta-acceso .logo-acceso img
   (max-width/height + object-fit: contain para que ningún logo se deforme,
   sin importar el tamaño original de cada imagen). El filtro en escala de
   grises es opcional: da un look más uniforme mientras no llegan los logos
   reales y "resalta a color" al pasar el mouse. Si prefieres los logos
   siempre a color, borra las dos líneas de "filter". */
.carrusel-snap .chip-institucion img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.75);
    transition: filter 0.25s ease, transform 0.25s ease;
}
.carrusel-snap .chip-institucion:hover img {
    filter: grayscale(0%) opacity(1);
}

.puntos-convenios {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.6rem;
}
.puntos-convenios button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: #cfd0d3;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.puntos-convenios button.activo { background: var(--rojo-primario); transform: scale(1.25); }

@media (max-width: 760px) {
    .tarjeta-convenios {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.4rem;
    }
    .convenios-divisor { display: none; }
}

/* ---------- Nuestras áreas: tarjetas foto + bloque de color ---------- */
.grid-areas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}
.tarjeta-area {
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    display: flex;
    flex-direction: column;
    color: var(--blanco);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tarjeta-area:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(0,0,0,0.14); }
.tarjeta-area .foto-area { height: 190px; overflow: hidden; }
.tarjeta-area .foto-area img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tarjeta-area:hover .foto-area img { transform: scale(1.08); }
.tarjeta-area .bloque-color {
    flex: 1;
    padding: 1.4rem 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.tarjeta-area .bloque-color h3 { color: var(--blanco); font-size: 1.05rem; margin: 0; line-height: 1.25; }
.tarjeta-area .flecha-area {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.tarjeta-area:hover .flecha-area { background: rgba(255,255,255,0.2); transform: translateX(3px); }

.tarjeta-area.color-1 .bloque-color { background: var(--amarillo-escudo); }
.tarjeta-area.color-1 .bloque-color h3 { color: var(--negro); }
.tarjeta-area.color-1 .flecha-area { border-color: rgba(26,26,26,0.6); color: var(--negro); }
.tarjeta-area.color-2 .bloque-color { background: var(--negro); }
.tarjeta-area.color-3 .bloque-color { background: var(--rojo-primario); }
.tarjeta-area.color-4 .bloque-color { background: var(--rojo-oscuro); }

.franja-acento-inferior {
    height: 16px;
    background: var(--rojo-primario);
    border-radius: 0 0 var(--radio) var(--radio);
    margin-top: -0.2rem;
}

@media (max-width: 980px) {
    .grid-areas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-areas { grid-template-columns: 1fr; }
}

/* ---------- Niveles educativos (Inicial / Primaria / Secundaria) ---------- */
.grid-niveles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}
.tarjeta-nivel {
    background: var(--blanco);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.tarjeta-nivel:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 40px rgba(0,0,0,0.12);
}
.tarjeta-nivel .foto-nivel {
    height: 190px;
    position: relative;
    overflow: hidden;
}
.tarjeta-nivel .foto-nivel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.tarjeta-nivel:hover .foto-nivel img { transform: scale(1.08); }
.tarjeta-nivel .edad-nivel {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(26,26,26,0.72);
    color: var(--blanco);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    backdrop-filter: blur(2px);
}
.tarjeta-nivel .cuerpo-nivel {
    padding: 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 4px solid var(--acento-nivel, var(--rojo-primario));
}
.tarjeta-nivel.nivel-inicial { --acento-nivel: var(--amarillo-escudo); }
.tarjeta-nivel.nivel-primaria { --acento-nivel: var(--rojo-primario); }
.tarjeta-nivel.nivel-secundaria { --acento-nivel: var(--negro); }
.tarjeta-nivel h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.tarjeta-nivel p { color: var(--texto-secundario); font-size: 0.94rem; margin-bottom: 1.3rem; flex: 1; }
.tarjeta-nivel .enlace-nivel {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--rojo-primario);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tarjeta-nivel .enlace-nivel span { transition: transform 0.25s ease; }
.tarjeta-nivel:hover .enlace-nivel span { transform: translateX(4px); }

.grid-niveles .aparecer:nth-child(1) { transition-delay: 0s; }
.grid-niveles .aparecer:nth-child(2) { transition-delay: 0.12s; }
.grid-niveles .aparecer:nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 900px) {
    .grid-niveles { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ---------- Formulario de contacto ---------- */
.formulario-contacto {
    background: var(--blanco);
    border-radius: var(--radio);
    padding: 2.4rem;
    box-shadow: var(--sombra-suave);
}
.campo { margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.campo label { font-weight: 600; font-size: 0.92rem; }
.campo input, .campo select, .campo textarea {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--borde-suave);
    font-family: var(--fuente-texto);
    font-size: 0.98rem;
    background: var(--crema-fondo);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--rojo-primario);
}
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.mensaje-envio {
    display: none;
    margin-top: 1rem;
    padding: 12px 16px;
    border-radius: 10px;
    background: #e6f6e9;
    color: #1c6b32;
    font-size: 0.92rem;
}
.mensaje-envio.visible { display: block; }

.info-contacto { display: flex; flex-direction: column; gap: 1.6rem; }
.item-contacto { display: flex; gap: 1rem; align-items: flex-start; }
.item-contacto .icono {
    width: 46px; height: 46px; border-radius: 12px;
    background: #ffeff0; color: var(--rojo-primario);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.item-contacto h4 { margin: 0 0 0.2rem 0; font-size: 1rem; }
.item-contacto p { margin: 0; color: var(--texto-secundario); font-size: 0.95rem; }

.mapa-marcador {
    width: 100%;
    height: 260px;
    border-radius: var(--radio);
    overflow: hidden;
    border: 1px solid var(--borde-suave);
}
.mapa-marcador iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Autoridades / equipo ---------- */
.tarjeta-persona { text-align: center; }
.tarjeta-persona img {
    width: 120px; height: 120px; border-radius: 50%;
    object-fit: cover; margin: 0 auto 1rem auto;
    border: 4px solid var(--amarillo-escudo);
}
.tarjeta-persona h4 { margin-bottom: 0.15rem; }
.tarjeta-persona span { color: var(--rojo-primario); font-size: 0.9rem; font-weight: 600; }

/* ---------- Valores ---------- */
.grid-valores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.chip-valor {
    background: linear-gradient(160deg, var(--amarillo-escudo), #fff2c2);
    border-radius: 18px;
    padding: 1.9rem 1rem;
    text-align: center;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.chip-valor:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,0.09); }
.chip-valor .icono-valor {
    width: 46px;
    height: 46px;
    margin: 0 auto 0.8rem auto;
    border-radius: 50%;
    background: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

/* ---------- Aparición escalonada dentro de una misma fila ---------- */
.grid-tres .aparecer:nth-child(1),
.grid-galeria .aparecer:nth-child(1),
.grid-valores .aparecer:nth-child(1) { transition-delay: 0s; }
.grid-tres .aparecer:nth-child(2),
.grid-galeria .aparecer:nth-child(2),
.grid-valores .aparecer:nth-child(2) { transition-delay: 0.1s; }
.grid-tres .aparecer:nth-child(3),
.grid-galeria .aparecer:nth-child(3),
.grid-valores .aparecer:nth-child(3) { transition-delay: 0.2s; }
.grid-galeria .aparecer:nth-child(4),
.grid-valores .aparecer:nth-child(4) { transition-delay: 0.3s; }
.grid-galeria .aparecer:nth-child(5) { transition-delay: 0.4s; }
.grid-galeria .aparecer:nth-child(6) { transition-delay: 0.5s; }

/* ---------- Franja de banderas / acento peruano ---------- */
.franja-acento {
    height: 10px;
    background: linear-gradient(90deg, var(--rojo-primario) 0 33%, var(--blanco) 33% 66%, var(--rojo-primario) 66% 100%);
}

/* ---------- Encabezado de página interna ---------- */
.encabezado-pagina {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 3rem 0;
    background: linear-gradient(135deg, var(--amarillo-escudo) 0%, var(--crema-fondo) 65%);
    text-align: center;
}
.encabezado-pagina::before,
.encabezado-pagina::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
}
.encabezado-pagina::before {
    width: 260px; height: 260px;
    background: rgba(211,47,47,0.16);
    top: -110px; right: 8%;
}
.encabezado-pagina::after {
    width: 200px; height: 200px;
    background: rgba(211,47,47,0.1);
    bottom: -90px; left: 6%;
}
.encabezado-pagina .contenedor { position: relative; z-index: 1; }
.encabezado-pagina h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.migas { font-size: 0.85rem; color: var(--texto-secundario); margin-bottom: 0.8rem; }
.migas a { color: var(--rojo-primario); font-weight: 600; }

/* ---------- Footer (franja de contacto + insignia animada) ---------- */
footer.principal {
    position: relative;
    background: linear-gradient(120deg, var(--rojo-primario), var(--rojo-oscuro));
    color: var(--blanco);
    overflow: hidden;
}
footer.principal::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--negro), var(--amarillo-escudo), var(--negro));
}

.pie-nuevo__fila {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 2.4rem 0;
}

/* Insignia del colegio, a la izquierda y centrada verticalmente,
   recortada como máscara para poder cambiarle el color con CSS puro. */
.pie-nuevo__insignia {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.insignia-animada {
    width: 88px;
    height: 88px;
    /* El escudo real (con "SMP", "60019" y el detalle interior) se pinta tal
       cual como imagen de fondo; su transparencia original ya recorta la
       forma, así que no hace falta máscara ni color de relleno. La animación
       solo alterna el filtro entre blanco y negro y su color original. */
    background-image: url('../img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: pie-nuevo-color-insignia 6s steps(1) infinite;
}
@keyframes pie-nuevo-color-insignia {
    0%   { filter: grayscale(1); }
    50%  { filter: grayscale(0); }
    100% { filter: grayscale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .insignia-animada { animation: none; filter: none; }
}

.pie-nuevo__cuerpo { flex: 1; min-width: 0; }

.pie-nuevo__contacto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4rem 1.6rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.22);
}
.pie-nuevo__dato { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; line-height: 1.4; }
.pie-nuevo__dato strong { color: var(--blanco); }
.pie-nuevo__icono {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pie-nuevo__icono svg { width: 20px; height: 20px; }
.pie-nuevo__separador { width: 1px; align-self: stretch; background: rgba(255,255,255,0.25); }
.pie-nuevo__redes { display: flex; gap: 0.6rem; margin-left: auto; }
.pie-nuevo__redes a {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center;
    color: var(--blanco);
    transition: background-color 0.2s ease;
}
.pie-nuevo__redes a:hover { background: var(--negro); }
.pie-nuevo__redes svg { width: 19px; height: 19px; }

.pie-nuevo__inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-top: 1.6rem;
    font-size: 0.85rem;
}
.pie-nuevo__legal { display: flex; flex-wrap: wrap; }
.pie-nuevo__legal a { color: var(--blanco); opacity: 0.85; padding: 0 1.1rem; }
.pie-nuevo__legal a:first-child { padding-left: 0; }
.pie-nuevo__legal a:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.3); }
.pie-nuevo__legal a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 760px) {
    .pie-nuevo__fila { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
    .pie-nuevo__insignia { align-self: center; }
    .pie-nuevo__contacto { flex-direction: column; align-items: flex-start; }
    .pie-nuevo__separador { display: none; }
    .pie-nuevo__redes { margin-left: 0; }
    .pie-nuevo__inferior { flex-direction: column; align-items: flex-start; }
}

/* ---------- Botones flotantes ---------- */
.flotante-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}
.flotante-whatsapp:hover { transform: scale(1.08); }

.flotante-arriba {
    position: fixed;
    right: 22px;
    bottom: 90px;
    z-index: 200;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--negro);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
.flotante-arriba.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.flotante-arriba:hover { background-color: var(--rojo-primario); }

/* ---------- Animación de aparición ---------- */
.aparecer {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.aparecer.visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .grid-datos { grid-template-columns: repeat(2, 1fr); }
    .grid-tres { grid-template-columns: repeat(2, 1fr); }
    .grid-dos { grid-template-columns: 1fr; }
    .grid-galeria { grid-template-columns: repeat(2, 1fr); }
    .grid-footer { grid-template-columns: 1fr 1fr; }
    .grid-valores { grid-template-columns: repeat(2, 1fr); }
    .seccion-dividida { grid-template-columns: 1fr; }
    .seccion-dividida.invertida { direction: ltr; }
    .seccion-dividida img { order: -1; height: 300px; }
    .grid-noticias { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    nav.menu-principal {
        position: fixed;
        top: 74px;
        left: 0;
        right: 0;
        background: var(--crema-fondo);
        border-bottom: 1px solid var(--borde-suave);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    nav.menu-principal.abierto { max-height: 400px; }
    nav.menu-principal ul { flex-direction: column; gap: 0; padding: 1rem 0; }
    nav.menu-principal ul li { width: 100%; }
    nav.menu-principal a { display: block; padding: 12px 6%; }
    .boton-toggle { display: flex; }
    .acciones-nav .boton-primario.solo-escritorio { display: none; }

    /* Submenú en versión móvil: se expande en línea, sin flotar */
    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(0,0,0,0.03);
        border-radius: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.3s ease;
    }
    .item-submenu.abierto .submenu { max-height: 200px; padding: 0.4rem 0; }
    .item-submenu > a { display: flex; align-items: center; justify-content: space-between; padding-right: 6%; }

    .carrusel-contenido h1 { font-size: 1.9rem; }
    .grid-tres { grid-template-columns: 1fr; }
    .grid-galeria { grid-template-columns: 1fr; }
    .grid-datos { grid-template-columns: repeat(2, 1fr); }
    .fila-campos { grid-template-columns: 1fr; }
    .grid-footer { grid-template-columns: 1fr; text-align: left; }
    .grid-valores { grid-template-columns: 1fr 1fr; }
    .grid-noticias { grid-template-columns: 1fr; }
}

/* ===========================================================
   PRELOADER — pantalla de carga con el escudo institucional
   =========================================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--crema-fondo);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader__escudo {
    width: 96px;
    height: auto;
    animation: preloader-latido 1.3s ease-in-out infinite;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12));
}
@keyframes preloader-latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.preloader--oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .preloader__escudo { animation: none; }
}