/* Instituto de Ciencias Bíblicas del Perú · portada, TEMA CLARO (2026-10-25). Base: tema índigo sin modo oscuro + ajustes al final.
   Marca del Observatorio: índigo #28235D, violeta #5B4FCF, ámbar #E3A13B; Roboto Condensed (titulares), Roboto (texto), Lora (voz editorial).
   Sin colores planos: degradados índigo → violeta y la trama de triángulos del logo que se desplaza lenta, como en datos.icbp.org.pe. */
:root {
    --noche: #17143a;
    --indigo: #28235d;
    --indigo-2: #3b3290;
    --violeta: #5b4fcf;
    --lila: #cfcaf9;
    --ambar: #e3a13b;
    --ambar-2: #f0b552;
    --tinta: #15132b;
    --tinta-2: #5d5b70;
    --papel: #fbfbfe;
    --linea: rgba(40, 35, 93, .14);
    --cond: "Roboto Condensed", "Arial Narrow", sans-serif;
    --serif: Lora, Georgia, serif;
    --sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --degradado: radial-gradient(120% 140% at 85% 10%, #5b4fcf 0%, rgba(91, 79, 207, 0) 55%), radial-gradient(80% 90% at 0% 100%, rgba(227, 161, 59, .16) 0%, rgba(227, 161, 59, 0) 50%), linear-gradient(135deg, #17143a 0%, #28235d 55%, #3b3290 100%);
    --lavanda: radial-gradient(90% 120% at 100% 0%, rgba(91, 79, 207, .10) 0%, rgba(91, 79, 207, 0) 60%), linear-gradient(180deg, #fbfbfe 0%, #f2f1fa 100%);
    --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M8 9h12l-6 10z' fill='%23fff'/%3E%3Cpath d='M29 26v12l10-6z' fill='%23fff'/%3E%3C/svg%3E");
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--sans); font-weight: 300; font-size: 1.0625rem; line-height: 1.65; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.marco { width: min(1240px, 100% - 32px); margin-inline: auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ambar); color: var(--noche); padding: .5rem 1rem; }
.saltar:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { animation: none !important; transition: none !important; } }

/* Trama de triángulos que se desplaza (fondo de datos.icbp.org.pe) */
.con-trama { position: relative; isolation: isolate; overflow: hidden; }
.con-trama::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; pointer-events: none; background-image: var(--trama);
    -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 80%); mask-image: linear-gradient(100deg, transparent 25%, #000 80%); animation: deriva 60s linear infinite; }
@keyframes deriva { to { background-position: 440px 0; } }

/* Cabecera: transparente sobre el héroe; al bajar, vidrio claro */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.cab-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.logo { height: 60px; width: auto; }
.logo-claro { display: none; }
.cab.solida { background: rgba(251, 251, 254, .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--linea); }
.cab.solida .logo-claro { display: block; }
.cab.solida .logo-oscuro { display: none; }

.menu { display: flex; align-items: center; gap: .15rem; }
.menu a { font-family: var(--cond); font-size: 1.05rem; font-weight: 400; color: #fff; text-decoration: none; padding: .4rem .75rem; opacity: .88; }
.menu a:hover { opacity: 1; }
.cab.solida .menu a { color: var(--tinta); }
.menu .menu-aula { margin-left: .5rem; padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); opacity: 1; }
.cab.solida .menu .menu-aula { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--indigo), var(--violeta)); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.menu-btn span:not(.oculto) { position: absolute; left: 11px; width: 22px; height: 2px; background: #fff; transition: transform .25s, top .25s; }
.menu-btn span:nth-child(1) { top: 17px; } .menu-btn span:nth-child(2) { top: 25px; }
.cab.solida .menu-btn span:not(.oculto) { background: var(--tinta); }
@media (max-width: 920px) {
    .menu-btn { display: block; }
    .menu { position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 16px 1.5rem; background: var(--degradado); display: none; }
    .menu.abierto { display: flex; }
    .menu a, .cab.solida .menu a { color: #fff; font-size: 1.5rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .menu .menu-aula, .cab.solida .menu .menu-aula { margin: 1rem 0 0; text-align: center; background: var(--ambar); color: var(--noche); border: 0; }
    .menu-btn[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
    .menu-btn[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
    .logo { height: 48px; }
}

/* Héroe: el titular es la imagen */
.heroe { background: var(--degradado); color: #fff; min-height: 100svh; display: flex; align-items: flex-end; padding: 120px 0 clamp(2.5rem, 6vw, 4.5rem); }
.heroe-titulo { font-family: var(--cond); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 12.5vw, 11.5rem); line-height: .86; letter-spacing: -.02em; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.heroe-titulo .linea { display: block; overflow: hidden; padding: .14em 0 .04em; margin-top: -.14em; }
.heroe-titulo .linea > span { display: inline-block; animation: subir 1s cubic-bezier(.16, 1, .3, 1) both; }
.heroe-titulo .linea:nth-child(2) > span { animation-delay: .12s; }
.heroe-titulo .linea:nth-child(3) > span { animation-delay: .24s; }
@keyframes subir { from { transform: translateY(105%); } }
/* El punto final es el triángulo del logo */
.punto { display: inline-block; width: .42em; height: .36em; margin-left: .08em; vertical-align: baseline; background: linear-gradient(180deg, var(--ambar-2), var(--ambar)); clip-path: polygon(0 0, 100% 0, 50% 100%); animation: caer .7s cubic-bezier(.3, 1.4, .5, 1) 1s both; }
@keyframes caer { from { transform: translateY(-1.2em); opacity: 0; } }
.heroe-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 1.75rem; }
.heroe-entrada { font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; max-width: 46ch; color: rgba(255, 255, 255, .86); }
.heroe-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
@media (max-width: 760px) { .heroe-pie { grid-template-columns: 1fr; } }

/* Botones y enlaces */
.boton { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--cond); font-weight: 700; font-size: 1.08rem; letter-spacing: .01em; text-decoration: none; color: #fff;
    padding: .9rem 1.6rem; border-radius: 999px; background: linear-gradient(135deg, var(--indigo) 0%, var(--violeta) 100%); box-shadow: 0 10px 30px -10px rgba(59, 50, 144, .6); transition: transform .2s, box-shadow .2s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(59, 50, 144, .75); }
.heroe .boton, .boton-ambar { color: var(--noche); background: linear-gradient(135deg, var(--ambar-2) 0%, var(--ambar) 100%); box-shadow: 0 10px 30px -10px rgba(227, 161, 59, .55); }
.enlace { font-family: var(--cond); font-size: 1.08rem; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.heroe .enlace, .enlace-claro { color: #fff; border-color: rgba(255, 255, 255, .5); }
.enlace:hover { border-bottom-width: 2px; }

/* Bloques con rótulo a la izquierda */
.bloque { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.bloque-sin-arriba { padding-top: 0; }
.rejilla { display: grid; grid-template-columns: 3fr 9fr; gap: 2rem clamp(2rem, 4vw, 4rem); }
@media (max-width: 860px) { .rejilla { grid-template-columns: 1fr; } }
.rotulo { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--tinta-2); padding-top: .55rem; }
.rotulo::before { content: ""; display: block; width: 18px; height: 15px; margin-bottom: .8rem; background: linear-gradient(180deg, var(--violeta), var(--indigo)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.rotulo-claro { color: var(--lila); }
.rotulo-claro::before { background: linear-gradient(180deg, var(--ambar-2), var(--ambar)); }
.declaracion { font-family: var(--cond); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 3.3rem); line-height: 1.08; letter-spacing: -.01em; max-width: 24ch; margin-bottom: 2.5rem;
    background: linear-gradient(120deg, var(--tinta) 30%, var(--indigo-2) 70%, var(--violeta)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; max-width: 820px; color: var(--tinta-2); }
@media (max-width: 640px) { .columnas { grid-template-columns: 1fr; } }

/* Índice de lo que hacemos: palabras grandes, filas que se iluminan con degradado */
.indice { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); }
.indice li { border-bottom: 1px solid var(--linea); }
.fila { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem 2.5rem; align-items: center; padding: clamp(1.4rem, 2.6vw, 2.2rem) 1.25rem; text-decoration: none; color: inherit; isolation: isolate; overflow: hidden; }
a.fila::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--degradado); clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.16, 1, .3, 1); }
a.fila:hover::before, a.fila:focus-visible::before { clip-path: inset(0 0 0 0); }
a.fila:hover, a.fila:focus-visible { color: #fff; }
.fila-titulo { font-family: var(--cond); font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: .95; overflow-wrap: anywhere; letter-spacing: -.015em; }
.fila-texto { color: var(--tinta-2); font-size: 1rem; transition: color .3s; }
a.fila:hover .fila-texto, a.fila:focus-visible .fila-texto { color: rgba(255, 255, 255, .85); }
.fila-ir { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; font-family: var(--cond); font-weight: 700; color: var(--indigo-2); }

a.fila:hover .fila-ir { color: var(--ambar-2); }
.fila-ir i { width: 11px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .3s; }
a.fila:hover .fila-ir i { transform: translateX(6px); }
@media (max-width: 760px) { .fila { grid-template-columns: 1fr; padding-inline: .5rem; } }

/* Observatorio */
.observatorio { background: var(--degradado); color: #fff; padding-block: clamp(4.5rem, 10vw, 8rem); }
.observatorio .rejilla { position: relative; }
.obs-cuerpo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.5rem clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 980px) { .obs-cuerpo { grid-template-columns: 1fr; } }
.obs-titular { font-family: var(--cond); font-weight: 900; text-transform: uppercase; font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: .95; letter-spacing: -.015em; margin-bottom: 1.6rem; }
.obs-texto { font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .84); max-width: 50ch; margin-bottom: 2rem; }
.obs-texto a { color: var(--ambar-2); }
.convocatorias { border-radius: 20px; padding: 1.75rem; background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.convocatorias h3 { font-family: var(--cond); font-weight: 700; font-size: 1.5rem; margin-bottom: .5rem; }
.convocatorias > p { color: rgba(255, 255, 255, .78); font-size: .98rem; margin-bottom: 1.2rem; }
.convocatorias ul { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.convocatorias li a { display: block; padding: .85rem 0; border-top: 1px solid rgba(255, 255, 255, .14); text-decoration: none; }
.convocatorias li a strong { font-family: var(--cond); font-weight: 700; font-size: 1.12rem; display: block; }
.convocatorias li a span { font-size: .9rem; color: var(--lila); }
.convocatorias li a:hover strong { color: var(--ambar-2); }
.conv-vacio { font-family: var(--serif); font-style: italic; color: rgba(255, 255, 255, .7); margin-bottom: 1.3rem !important; }

/* Cita de Evangelio.pe */
.cita { margin: 0; }
.cita blockquote { margin: 0 0 1.75rem; }
.cita blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.25; max-width: 28ch;
    background: linear-gradient(120deg, var(--indigo) 0%, var(--violeta) 60%, #8a7cf0); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cita figcaption { color: var(--tinta-2); max-width: 58ch; }
.cita figcaption a { color: var(--tinta); }

/* Contacto */
.contacto-bloque { background: var(--lavanda); }
.correo-grande { display: inline-block; font-family: var(--cond); font-weight: 900; font-size: clamp(1.9rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -.02em; text-decoration: none; word-break: break-all;
    background: linear-gradient(120deg, var(--indigo) 0%, var(--violeta) 55%, var(--ambar) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .6s; margin-bottom: 2.5rem; }
.correo-grande:hover { background-position: 100% 0; }

.datos-contacto { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.5rem 3.5rem; margin: 0; }
@media (max-width: 760px) { .datos-contacto { grid-template-columns: 1fr; } }
.datos-contacto dt { font-family: var(--serif); font-style: italic; color: var(--tinta-2); font-size: .95rem; }
.datos-contacto dd { margin: .2rem 0 0; font-family: var(--cond); font-size: 1.2rem; }
.datos-contacto a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.datos-contacto a:hover { border-color: currentColor; }

/* Pie */
.pie { background: var(--degradado); color: rgba(255, 255, 255, .78); padding-block: 3.5rem 2.5rem; }
.pie-in { display: grid; grid-template-columns: auto 1fr; gap: 2rem 3rem; align-items: end; }
.pie-logo { height: 76px; width: auto; }
.pie nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.75rem; font-family: var(--cond); font-size: 1.05rem; }
.pie nav a { color: #fff; text-decoration: none; }
.pie nav a:hover { color: var(--ambar-2); }
.pie-legal { grid-column: 1 / -1; font-size: .88rem; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.25rem; }
@media (max-width: 640px) { .pie-in { grid-template-columns: 1fr; } .pie nav { justify-content: flex-start; } }

/* Logo de Evangelio.pe en una sola tinta (negro en claro, blanco en oscuro), para no romper la paleta del Instituto */
.cita-logo { display: inline-block; margin-bottom: 2.25rem; opacity: .92; transition: opacity .2s; }
.cita-logo:hover { opacity: 1; }
.cita-logo img { height: clamp(34px, 4vw, 46px); width: auto; }
.cita-logo .ev-oscuro { display: none; }

.pie-logo-color { display: none; }

/* ─── Tema claro: fondo blanco con veladuras de lavanda y luz ámbar; índigo solo en letras y acentos ─── */
:root {
    color-scheme: light;
    --claro: radial-gradient(70% 85% at 92% 0%, rgba(91, 79, 207, .17) 0%, rgba(91, 79, 207, 0) 62%), radial-gradient(55% 70% at 0% 100%, rgba(227, 161, 59, .13) 0%, rgba(227, 161, 59, 0) 58%), linear-gradient(180deg, #ffffff 0%, #f6f5fd 100%);
    --trama-indigo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M8 9h12l-6 10z' fill='%2328235d'/%3E%3Cpath d='M29 26v12l10-6z' fill='%2328235d'/%3E%3C/svg%3E");
    --texto-degradado: linear-gradient(110deg, #17143a 0%, #28235d 45%, #5b4fcf 100%);
}
.con-trama::before { background-image: var(--trama-indigo); opacity: .07; }

/* Cabecera: logo a color y menú oscuro sobre el fondo claro */
.logo-claro { display: block; }
.logo-oscuro { display: none; }
.menu a { color: var(--tinta); opacity: 1; }
.menu a:hover { color: var(--violeta); }
.menu .menu-aula { color: #fff; border: 0; background: linear-gradient(135deg, var(--indigo), var(--violeta)); box-shadow: 0 8px 22px -10px rgba(59, 50, 144, .6); }
.menu .menu-aula:hover { color: #fff; }
.menu-btn span:not(.oculto) { background: var(--tinta); }
.cab.solida { background: rgba(255, 255, 255, .8); }
@media (max-width: 920px) {
    .menu { background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -20px rgba(40, 35, 93, .25); }
    .menu a, .cab.solida .menu a { color: var(--tinta); border-bottom-color: var(--linea); }
    .menu .menu-aula, .cab.solida .menu .menu-aula { color: var(--noche); background: linear-gradient(135deg, var(--ambar-2), var(--ambar)); }
}

/* Héroe claro: letras en degradado índigo → violeta */
.heroe { background: var(--claro); color: var(--tinta); }
.heroe-titulo .linea > span { background: var(--texto-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroe-pie { border-top-color: rgba(40, 35, 93, .14); }
.heroe-entrada { color: var(--tinta-2); }
.heroe .enlace { color: var(--indigo); border-color: rgba(40, 35, 93, .4); }

/* Índice: al pasar, una veladura lavanda → ámbar en lugar del bloque oscuro */
a.fila::before { background: linear-gradient(90deg, rgba(91, 79, 207, .11), rgba(227, 161, 59, .10)); }
a.fila:hover, a.fila:focus-visible { color: var(--tinta); }
a.fila:hover .fila-texto, a.fila:focus-visible .fila-texto { color: var(--tinta-2); }
a.fila:hover .fila-titulo { background: var(--texto-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
a.fila:hover .fila-ir { color: var(--violeta); }

/* Observatorio: un panel claro con degradado suave, ya no una franja oscura */
.observatorio { background: #fff; color: var(--tinta); }
.observatorio > .marco { background: var(--claro); border: 1px solid rgba(91, 79, 207, .14); border-radius: 28px; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
    box-shadow: 0 30px 80px -40px rgba(40, 35, 93, .35); }
.rotulo-claro { color: var(--tinta-2); }
.obs-titular { background: var(--texto-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.obs-texto { color: var(--tinta-2); }
.obs-texto a { color: var(--violeta); }
.enlace-claro, .heroe .enlace-claro { color: var(--indigo); border-color: rgba(40, 35, 93, .4); }
.convocatorias { background: rgba(255, 255, 255, .75); border-color: rgba(91, 79, 207, .18); box-shadow: 0 16px 40px -28px rgba(40, 35, 93, .4); }
.convocatorias > p { color: var(--tinta-2); }
.convocatorias li a { border-top-color: var(--linea); }
.convocatorias li a span { color: var(--tinta-2); }
.convocatorias li a:hover strong { color: var(--violeta); }
.conv-vacio { color: var(--tinta-2); }
.convocatorias .enlace-claro { color: var(--indigo); }

/* Pie claro con el filete en degradado */
.pie { background: linear-gradient(90deg, var(--indigo), var(--violeta) 65%, var(--ambar)) top / 100% 3px no-repeat, linear-gradient(180deg, #fbfbfe 0%, #f1effa 100%); color: var(--tinta-2); }
.pie-logo-blanco { display: none; }
.pie-logo-color { display: block; }
.pie nav a { color: var(--tinta); }
.pie nav a:hover { color: var(--violeta); }
.pie-legal { border-top-color: var(--linea); }
.heroe-titulo .linea > span { padding-top: .16em; margin-top: -.16em; }

/* Menú superior en Roboto negrita y mayúsculas (2026-10-25, pedido de Aníbal) */
.menu a, .menu .menu-aula { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: .95rem; letter-spacing: .03em; }
@media (max-width: 920px) { .menu a { font-size: 1.05rem; } }