:root{
  --bg:#1A423A;
  --fg:#F6FFE0;
  --fg-soft:color-mix(in srgb,#F6FFE0 72%,#1A423A);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --gutter:clamp(20px,5vw,40px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{
  font-family:var(--mono);font-size:15px;line-height:1.75;
  min-height:100vh;background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--fg);color:var(--bg)}
a{color:inherit}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:12px;background:var(--fg);color:var(--bg);padding:4px 10px;z-index:2}

main{
  width:min(100% - 2*var(--gutter),440px);
  margin:clamp(64px,14vh,140px) auto 0;
  padding-bottom:clamp(64px,10vh,110px);
}
section+section{margin-top:3.2rem}
.label{
  font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--fg-soft);
  margin-bottom:1.4rem;
}
p+p{margin-top:1.15rem}
strong{font-weight:700}
.soft{color:var(--fg-soft)}

h1.brand{margin-bottom:1.6rem;line-height:0}
.logo{display:block;width:80%;height:auto;margin-inline:auto}
.sub{font-family:var(--serif);font-style:italic;font-size:clamp(18px,4.6vw,21px);line-height:1.45}

h2{font:inherit;text-transform:uppercase;font-size:12px;letter-spacing:.02em;color:var(--fg-soft);margin-bottom:1.4rem}

.motto{font-weight:700}
blockquote{margin:0}
blockquote footer{padding:0;color:var(--fg-soft);font-size:13px}
.verse{margin-top:2.4rem}
.verse p{font-weight:700}

.end{margin-top:3.2rem;font-size:13px;color:var(--fg-soft);text-transform:uppercase}
.end b{color:var(--fg)}

@media (max-width:480px){
  body{font-size:14.5px}
}
@media (prefers-reduced-motion:no-preference){
  main{animation:in .9s ease both}
  @keyframes in{from{opacity:0}to{opacity:1}}
}

/* ——— Menú inferior ——— */
:root{--tabbar-h:52px}
/* flow-root: el margen superior del main queda dentro del body y una página corta no hace scroll. */
body{display:flow-root}
body.con-menu{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
/* La barra ya reserva su alto; basta un respiro moderado tras el último texto. */
body.con-menu main{padding-bottom:clamp(40px,6vh,56px)}
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:#1A423A;
  border-top:1px solid rgba(246,255,224,.2);
  padding-bottom:env(safe-area-inset-bottom);
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .tabbar{background:rgba(26,66,58,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
.tabbar ul{
  list-style:none;padding:0;height:var(--tabbar-h);
  display:flex;justify-content:center;align-items:stretch;gap:clamp(24px,6vw,72px);
}
.tabbar a{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:100%;min-height:44px;padding:0 12px;
  font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:rgba(246,255,224,.6);
  transition:color 150ms ease;
}
.tabbar a:hover{color:var(--fg)}
.tabbar a:focus-visible{color:var(--fg);outline:1px solid var(--fg);outline-offset:-6px}
.tabbar a[aria-current="page"]{color:var(--fg);font-weight:700}
.tabbar a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:9px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--fg);
}
@media (max-width:600px){
  :root{--tabbar-h:58px}
  .tabbar ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
}

/* ——— Accesos del inicio ——— */
.acceso{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:2rem;padding:18px 22px;
  border:1px solid rgba(246,255,224,.3);text-decoration:none;
  transition:border-color 150ms ease;
}
.acceso:hover,.acceso:focus-visible{border-color:rgba(246,255,224,.75)}
.acceso:focus-visible{outline-offset:3px}
.acceso-titulo{display:block;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.3}
.acceso-linea{display:block;margin-top:.35rem;font-size:12px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-soft)}
.acceso-flecha{flex:none;transition:transform 150ms ease}
.acceso:hover .acceso-flecha,.acceso:focus-visible .acceso-flecha{transform:translateX(3px)}

/* ——— Páginas interiores ——— */
.marca{display:block;width:64%;margin:0 auto clamp(48px,8vh,72px);color:inherit;line-height:0}
.marca .logo{width:100%}
.encabezado{margin-bottom:2.8rem}
.encabezado .label{margin-bottom:1.6rem}
.titulo{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,7vw,36px);line-height:1.15;letter-spacing:-.01em}
.titulo+.sub{margin-top:.9rem}
.ejemplo{
  display:inline-block;margin:0 0 1.6rem;padding:4px 10px;
  border:1px dashed rgba(246,255,224,.6);
  font-size:11px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);
}
.encabezado .ejemplo{margin-bottom:1.2rem}

/* Índice de estudios */
.testamento+.testamento{margin-top:3.2rem}
.libro+.libro{margin-top:1.8rem}
.libro h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.3;margin-bottom:.5rem}
.libro ul{list-style:none;padding:0}
.libro li+li{margin-top:.35rem}
.libro a,.paginacion a{text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(246,255,224,.45);transition:text-decoration-color 150ms ease}
.libro a:hover,.paginacion a:hover{text-decoration-color:var(--fg)}

/* Rejilla de salmos */
.rejilla{list-style:none;padding:0;display:grid;grid-template-columns:repeat(10,1fr);text-align:center}
.rejilla a,.rejilla span{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px}
.rejilla span{color:rgba(246,255,224,.5)}
.rejilla a{font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.rejilla a:focus-visible{outline-offset:-2px}
.leyenda{margin-top:1.6rem;font-size:12px;letter-spacing:.02em;color:var(--fg-soft)}
@media (max-width:600px){.rejilla{grid-template-columns:repeat(8,1fr)}}

/* Plantilla de estudio y salmo */
.pasaje{margin:0 0 2.4rem}
.pasaje p{font-weight:700}
.pasaje footer{margin-top:.4rem;color:var(--fg-soft);font-size:13px}
.cuerpo p+p{margin-top:1.15rem}
.paginacion{margin-top:3.6rem;padding-top:1.6rem;border-top:1px solid rgba(246,255,224,.2)}
.paginacion ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.paginacion li:last-child{text-align:right}
.paginacion ul a{display:block;text-decoration:none}
.paginacion-dir{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-soft)}
.paginacion-titulo{display:block;margin-top:.25rem;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.35;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(246,255,224,.45)}
.paginacion ul a:hover .paginacion-titulo{text-decoration-color:var(--fg)}
.paginacion-indice{margin-top:1.8rem;font-size:13px}

/* ——— Nota de derechos de la NVI ——— */
.creditos{margin-top:4rem;font-size:11px;line-height:1.6;color:var(--fg-soft)}

/* ——— Retoño en el menú inferior ——— */
.tabbar-isotipo{width:auto;height:15px;margin-right:9px;flex:none}

/* ——— Barra superior: aparece al hacer scroll (solo CSS) ——— */
.topbar{display:none}
@supports (animation-timeline:scroll()){
  .topbar{
    position:fixed;left:0;right:0;top:0;z-index:10;
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
    height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0;
    background:#1A423A;border-bottom:1px solid rgba(246,255,224,.2);
    animation:topbar-aparece linear both;animation-timeline:scroll(root);animation-range:0 260px;
  }
  @supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
    .topbar{background:rgba(26,66,58,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  }
}
/* Oculta (y fuera del orden de tabulación) hasta que el logo grande ya salió de la vista. */
@keyframes topbar-aparece{
  0%,65%{opacity:0;visibility:hidden;transform:translateY(-100%)}
  100%{opacity:1;visibility:visible;transform:none}
}
.topbar a{
  display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.12em;text-transform:uppercase;
  transition:color 150ms ease;
}
.topbar a:focus-visible{outline-offset:-4px}
.topbar-volver{color:rgba(246,255,224,.6)}
.topbar-volver:hover,.topbar-volver:focus-visible{color:var(--fg)}
.topbar-flecha{display:inline-block;margin-right:.6em;transition:transform 150ms ease}
.topbar-volver:hover .topbar-flecha{transform:translateX(-3px)}
.topbar-marca{color:var(--fg);font-weight:700}
.topbar-isotipo{width:auto;height:20px;margin-right:10px;flex:none}
/* En móvil el retorno queda solo como flecha (el texto sigue para lectores de pantalla). */
@media (max-width:600px){
  .topbar-volver{min-width:44px;font-size:16px}
  .topbar-flecha{margin-right:0}
  .topbar-volver-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:350px){
  .topbar-marca span{display:none}
  .topbar-isotipo{height:24px;margin-right:0}
}

/* Flecha del enlace de retorno al pie: fuera del subrayado. */
.paginacion-indice a span{display:inline-block;margin-right:.5em;transition:transform 150ms ease}
.paginacion-indice a:hover span{transform:translateX(-3px)}

@media (prefers-reduced-motion:reduce){
  .tabbar a,.acceso,.acceso-flecha,.topbar a,.topbar-flecha,.paginacion-indice a span{transition:none}
  @keyframes topbar-aparece{0%,65%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
}

/* ——— Entrada al panel ——— */
.boton{
  display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:2.4rem;
  background:var(--fg);color:var(--bg);text-decoration:none;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--fg);transition:background-color 150ms ease,color 150ms ease;
}
.boton:hover{background:transparent;color:var(--fg)}
.boton:focus-visible{outline-offset:4px}
.entrar .marca{width:44%}
.entrar-volver{margin-top:2.4rem;text-align:center;font-size:14px}
.entrar-volver a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(246,255,224,.45);color:var(--fg-soft)}
.entrar-volver a:hover{color:var(--fg);text-decoration-color:var(--fg)}
.entrar-volver span{display:inline-block;margin-right:.4em;transition:transform 150ms ease}
.entrar-volver a:hover span{transform:translateX(-3px)}
@media (prefers-reduced-motion:reduce){.boton,.entrar-volver span{transition:none}}

/* Páginas sin menú (entrada y panel): el bloque queda centrado en la pantalla, un poco por encima del medio. */
body.sin-menu{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
body.sin-menu main{width:min(100% - 2*var(--gutter),440px);margin:0 auto;padding:48px 0 clamp(64px,12vh,120px)}