/* Línea Recta Hacia Dios · estilos del sitio
   Concepto: un pergamino iluminado. Bandas azul de cielo (como la portada),
   oro solo en halos, filetes y la "línea recta" que une las 7 etapas.
   Requiere paleta.css antes de este archivo. */

:root {
  --f-titulo: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --f-texto: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  --f-util: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-base: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); /* 18–20 px de lectura */
  --t-chico: .95rem;
  --t-h3: 1.35rem;
  --t-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --t-h1: clamp(2.2rem, 1.6rem + 3vw, 3.8rem);
  --ancho: 72rem;
  --ancho-texto: 40rem;
  --radio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--pergamino);
  color: var(--tierra-umbra);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oro-viejo); text-underline-offset: .18em; }
a:hover { color: var(--azul-lapislazuli); }
:focus-visible { outline: 3px solid var(--oro-liturgico); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--f-titulo); color: var(--azul-lapislazuli); line-height: 1.2; text-wrap: balance; margin: 0; font-weight: 600; }
h1 { font-size: var(--t-h1); letter-spacing: .02em; }
h2 { font-size: var(--t-h2); letter-spacing: .03em; }
h3 { font-size: var(--t-h3); letter-spacing: .02em; }
p { margin: 0; }

.salto { position: absolute; left: -999px; top: 0; background: var(--marfil); padding: .5rem 1rem; z-index: 50; }
.salto:focus { left: 1rem; }

/* Envoltura con margen lateral seguro */
.envoltura {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.seccion { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); overflow-x: clip; }
.seccion > .envoltura { display: grid; gap: 2rem; }
.seccion--marfil { background: var(--marfil); border-block: 1px solid var(--linea); }
.seccion--purpura { background: var(--purpura-bizantino); color: var(--sobre-cielo); }
.seccion--purpura h2, .seccion--purpura h3 { color: var(--oro-sobre-cielo); }
.seccion--purpura a { color: var(--oro-sobre-cielo); }

.antetitulo { font-family: var(--f-titulo); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-viejo); font-weight: 600; }
.encabezado { display: grid; gap: .6rem; max-width: var(--ancho-texto); }
.encabezado--centro { justify-self: center; text-align: center; }
.entradilla { color: var(--ocre-sombra); font-size: 1.1em; }
.prosa { display: grid; gap: 1.1rem; max-width: var(--ancho-texto); }
.divisor { width: 15rem; max-width: 100%; justify-self: center; opacity: .9; }

/* ---------- Cabecera ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--cielo-hondo); }
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--cielo-hondo); color: var(--sobre-cielo); border-bottom: 1px solid color-mix(in srgb, var(--oro-sobre-cielo) 40%, transparent); }
.cabecera .envoltura { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }
.marca { display: flex; align-items: center; gap: .6rem; color: var(--oro-sobre-cielo); text-decoration: none; font-family: var(--f-titulo); font-weight: 700; letter-spacing: .06em; font-size: 1.05rem; line-height: 1.1; }
.marca img { width: 1.6rem; height: 1.6rem; }
.marca:hover { color: var(--sobre-cielo); }
.menu { margin-left: auto; display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin-block: 0; }
.menu a { display: block; padding: .5rem .7rem; color: var(--sobre-cielo); text-decoration: none; font-family: var(--f-titulo); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radio); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--oro-sobre-cielo); }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--oro-sobre-cielo); border-radius: 0; }
.menu .btn { margin-left: .5rem; }
.menu-boton { display: none; margin-left: auto; background: none; border: 1px solid color-mix(in srgb, var(--sobre-cielo) 40%, transparent); color: var(--sobre-cielo); font: 600 .85rem var(--f-titulo); letter-spacing: .1em; padding: .5rem .8rem; border-radius: var(--radio); cursor: pointer; }
@media (max-width: 62rem) {
  .menu-boton { display: block; }
  .menu { display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; background: var(--cielo-hondo); padding: .5rem max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--oro-sobre-cielo); }
  .menu.abierto { display: flex; }
  .menu a { padding: .8rem .5rem; font-size: .95rem; }
  .menu .btn { margin: .5rem 0 0; text-align: center; }
}

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: var(--radio); font-family: var(--f-titulo); font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--principal { background: var(--azul-lapislazuli); color: var(--sobre-acento); }
.btn--principal:hover { color: var(--sobre-acento); background: color-mix(in srgb, var(--azul-lapislazuli) 85%, var(--tierra-umbra)); }
.btn--youtube { background: var(--rojo-cinabrio); color: var(--sobre-acento); }
.btn--youtube:hover { color: var(--sobre-acento); }
.menu .btn--youtube { color: #FFFBF3; background: #A3302A; padding: .55rem 1rem; }
.btn--contorno { border-color: var(--oro-viejo); color: var(--oro-viejo); background: transparent; }
.btn--contorno:hover { background: color-mix(in srgb, var(--oro-liturgico) 15%, transparent); color: var(--oro-viejo); }
.btn--oro { background: var(--oro-sobre-cielo); color: #2B1F16; }
.btn--oro:hover { color: #2B1F16; }
.btn--claro { border-color: color-mix(in srgb, var(--sobre-cielo) 70%, transparent); color: var(--sobre-cielo); }
.btn--claro:hover { color: var(--oro-sobre-cielo); border-color: var(--oro-sobre-cielo); }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Portada (hero) ---------- */
.portada { position: relative; background: var(--cielo-hondo); color: var(--sobre-cielo); overflow: hidden; isolation: isolate; }
.portada::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/escena-camino.jpg") center 60% / cover no-repeat; }
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--cielo-hondo) 0%, color-mix(in srgb, var(--cielo-hondo) 88%, transparent) 42%, color-mix(in srgb, var(--cielo-hondo) 25%, transparent) 75%, transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--cielo-hondo) 70%, transparent), transparent 40%); }
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.portada__texto { display: grid; gap: 1.4rem; }
.portada h1 { color: var(--oro-sobre-cielo); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.portada__sub { font-size: 1.35em; font-style: italic; }
.lema { font-family: var(--f-titulo); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-sobre-cielo); display: flex; flex-wrap: wrap; gap: .2rem .7rem; list-style: none; padding: 0; margin: 0; }
.lema li + li::before { content: "·"; margin-right: .7rem; opacity: .7; }
.portada__cita { border-left: 2px solid var(--oro-sobre-cielo); padding-left: 1rem; font-style: italic; max-width: 32rem; }
.portada__cita cite { display: block; font-style: normal; font-size: var(--t-chico); opacity: .85; margin-top: .25rem; }

/* El libro con halo dorado */
.libro-halo { position: relative; justify-self: center; width: min(19rem, 80%); }
.libro-halo::before { content: ""; position: absolute; inset: -18%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--oro-liturgico) 55%, transparent) 0%, color-mix(in srgb, var(--oro-liturgico) 15%, transparent) 45%, transparent 70%); animation: respira 6s ease-in-out infinite; }
.libro-halo img { position: relative; z-index: 1; border: 1px solid var(--oro-liturgico); outline: 6px solid color-mix(in srgb, var(--oro-liturgico) 25%, transparent); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
@keyframes respira { 50% { transform: scale(1.06); opacity: .8; } }
@media (max-width: 48rem) {
  .portada .envoltura { grid-template-columns: 1fr; }
  .portada::after { background: linear-gradient(0deg, color-mix(in srgb, var(--cielo-hondo) 92%, transparent), color-mix(in srgb, var(--cielo-hondo) 80%, transparent)); }
  .libro-halo { width: min(14rem, 70%); }
}

/* ---------- Definición ---------- */
.definicion { margin: 0; max-width: 50rem; justify-self: center; text-align: center; display: grid; gap: 1.25rem; }
.definicion p { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); line-height: 1.5; color: var(--tierra-umbra); }
.definicion p::first-letter { font-family: var(--f-titulo); color: var(--oro-viejo); }
.definicion footer { color: var(--ocre-sombra); font-size: var(--t-chico); font-family: var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- La línea recta: las 7 etapas ---------- */
.linea { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: etapa; }
.linea::before { content: ""; position: absolute; top: 1.6rem; left: 7%; right: 7%; height: 2px; background: linear-gradient(90deg, var(--oro-liturgico), var(--oro-liturgico)); }
.linea li { position: relative; }
.linea a { display: grid; justify-items: center; text-align: center; gap: .55rem; padding: 0 .35rem 1rem; text-decoration: none; color: var(--tierra-umbra); border-radius: var(--radio); }
.linea__num { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--pergamino); border: 2px solid var(--oro-liturgico); font-family: var(--f-titulo); font-weight: 700; color: var(--oro-viejo); font-size: 1.1rem; position: relative; z-index: 1; transition: background-color .2s, color .2s, box-shadow .2s; }
.seccion--marfil .linea__num { background: var(--marfil); }
.linea__nombre { font-family: var(--f-titulo); font-weight: 600; color: var(--azul-lapislazuli); font-size: .95rem; letter-spacing: .03em; line-height: 1.25; }
.linea__frase { font-size: .9rem; color: var(--ocre-sombra); line-height: 1.35; }
.linea a:hover .linea__num, .linea a:focus-visible .linea__num { background: var(--oro-liturgico); color: #2B1F16; box-shadow: 0 0 0 6px color-mix(in srgb, var(--oro-liturgico) 25%, transparent); }
.linea__meta { display: flex; justify-content: center; align-items: center; gap: .6rem; color: var(--ocre-sombra); font-style: italic; }
.linea__meta img { width: 1.6rem; }
@media (max-width: 56rem) {
  .linea { grid-template-columns: 1fr; gap: .25rem; max-width: 30rem; justify-self: center; width: 100%; }
  .linea::before { top: 1.6rem; bottom: 1.6rem; left: calc(1.6rem - 1px); right: auto; width: 2px; height: auto; }
  .linea a { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 1rem; row-gap: .1rem; padding: .4rem 0; }
  .linea__num { grid-row: span 2; }
  .linea__nombre { align-self: end; }
  .linea__meta { justify-content: flex-start; padding-left: .8rem; }
}

/* ---------- Bloques en dos columnas ---------- */
.dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.dupla--inversa { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.dupla > * { min-width: 0; }
@media (max-width: 48rem) { .dupla, .dupla--inversa { grid-template-columns: 1fr; } }
.contenido { display: grid; gap: 1.1rem; align-content: start; }
.lista-adornada { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lista-adornada li { padding-left: 1.6rem; position: relative; }
.lista-adornada li::before { content: "✠"; position: absolute; left: 0; color: var(--oro-viejo); font-size: .9em; top: .1em; }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem; }
.tarjeta { background: var(--marfil); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; display: grid; gap: .8rem; align-content: start; min-width: 0; }
.seccion--marfil .tarjeta { background: var(--pergamino); }
.tarjeta h3 { font-size: 1.15rem; }
.tarjeta p { color: var(--ocre-sombra); }
.etiqueta { display: inline-block; justify-self: start; font-family: var(--f-util); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-oliva); border: 1px solid currentColor; border-radius: 99px; padding: .15rem .6rem; }

/* Videos (enlace al canal; el sitio real puede incrustar el reproductor) */
.video { text-decoration: none; color: inherit; display: grid; gap: .7rem; }
.video__miniatura { aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radio); position: relative; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--oro-liturgico) 55%, transparent), transparent 60%), linear-gradient(160deg, var(--cielo), var(--cielo-hondo)); }
.video__miniatura span { font-family: var(--f-titulo); color: var(--oro-sobre-cielo); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; position: absolute; left: .9rem; bottom: .7rem; }
.video__play { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #A3302A; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s; }
.video__play::after { content: ""; border-left: 15px solid #FFFBF3; border-block: 9px solid transparent; margin-left: 4px; }
.video:hover .video__play { transform: scale(1.08); }
.video h3 { font-size: 1.05rem; }
.video p { color: var(--ocre-sombra); font-size: var(--t-chico); }

/* Citas bíblicas */
.cita { margin: 0; display: grid; gap: .6rem; max-width: 46rem; justify-self: center; text-align: center; }
.cita p { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-style: italic; line-height: 1.4; }
.cita cite { font-style: normal; font-family: var(--f-titulo); letter-spacing: .14em; font-size: .85rem; text-transform: uppercase; color: var(--oro-sobre-cielo); }

/* Captación */
.captacion { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 48rem) { .captacion { grid-template-columns: 1fr; } }
.formulario { display: grid; gap: .9rem; }
.campo { display: grid; gap: .3rem; }
.campo label { font-family: var(--f-titulo); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ocre-sombra); font-weight: 600; }
.campo input, .campo textarea, .campo select { font: inherit; font-size: 1rem; color: var(--tierra-umbra); background: var(--pergamino); border: 1px solid var(--linea); border-bottom: 2px solid var(--oro-viejo); border-radius: var(--radio); padding: .7rem .8rem; width: 100%; }
.seccion--marfil .campo input, .seccion--marfil .campo textarea, .seccion--marfil .campo select { background: var(--marfil); }
.campo textarea { min-height: 8rem; resize: vertical; }
.aviso { font-family: var(--f-util); font-size: .9rem; color: var(--verde-oliva); }
.nota { font-size: var(--t-chico); color: var(--ocre-sombra); }

/* Tabla de tiendas */
.tabla-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-family: var(--f-titulo); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-sombra); font-weight: 600; }

/* Marcadores de contenido pendiente (bórralos al completar) */
.pendiente { font-family: var(--f-util); font-size: .78rem; font-style: normal; font-weight: 600; letter-spacing: .02em; color: var(--rojo-cinabrio); background: color-mix(in srgb, var(--rojo-cinabrio) 10%, transparent); border: 1px dashed var(--rojo-cinabrio); border-radius: 3px; padding: .05rem .4rem; display: inline-block; line-height: 1.5; }
.marco-pendiente { border: 2px dashed color-mix(in srgb, var(--rojo-cinabrio) 60%, transparent); border-radius: var(--radio); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--ocre-sombra); }

/* ---------- Páginas interiores ---------- */
.titular { background: linear-gradient(180deg, var(--cielo-hondo), var(--cielo)); color: var(--sobre-cielo); }
.titular .envoltura { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: grid; gap: .9rem; }
.titular h1 { color: var(--oro-sobre-cielo); }
.titular .antetitulo { color: var(--sobre-cielo); opacity: .85; }
.titular p { max-width: var(--ancho-texto); font-size: 1.1em; }
.miga { font-size: var(--t-chico); }
.miga a { color: var(--sobre-cielo); }

/* Página de etapa */
.etapa-num { font-family: var(--f-titulo); font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 1; color: var(--oro-sobre-cielo); opacity: .9; }
.etapa-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.etapa-nav a { display: grid; gap: .1rem; text-decoration: none; font-family: var(--f-titulo); color: var(--azul-lapislazuli); }
.etapa-nav small { font-family: var(--f-texto); color: var(--ocre-sombra); font-size: .9rem; }
.etapa-nav a:last-child { text-align: right; margin-left: auto; }
.mini-linea { display: flex; gap: .4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.mini-linea a { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--oro-sobre-cielo); color: var(--sobre-cielo); text-decoration: none; font-family: var(--f-titulo); font-size: .85rem; }
.mini-linea a[aria-current="page"] { background: var(--oro-sobre-cielo); color: #2B1F16; }

/* Autor */
.retrato { aspect-ratio: 4 / 5; max-width: 100%; width: min(20rem, 100%); justify-self: center; position: relative; }
.retrato::before { content: ""; position: absolute; inset: -12% -12% 30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--oro-liturgico) 50%, transparent), transparent 65%); z-index: 0; }
.retrato .marco-pendiente { position: relative; z-index: 1; height: 100%; background: var(--marfil); }
.firma { font-family: var(--f-titulo); color: var(--oro-viejo); letter-spacing: .06em; }

/* Oraciones */
.oracion { background: var(--marfil); border: 1px solid var(--linea); border-top: 3px solid var(--oro-liturgico); padding: 1.75rem; border-radius: var(--radio); display: grid; gap: .9rem; }
.oracion p { white-space: pre-line; font-style: italic; }

/* ---------- Pie ---------- */
.pie { background: var(--cielo-hondo); color: var(--sobre-cielo); font-size: 1rem; }
.pie .envoltura { padding-block: 3rem 2rem; display: grid; gap: 2rem; }
.pie__columnas { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 48rem) { .pie__columnas { grid-template-columns: 1fr 1fr; } .pie__columnas > :first-child { grid-column: 1 / -1; } }
.pie h2 { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-sobre-cielo); margin-bottom: .7rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.pie a { color: var(--sobre-cielo); text-decoration: none; }
.pie a:hover { color: var(--oro-sobre-cielo); text-decoration: underline; }
.pie__base { border-top: 1px solid color-mix(in srgb, var(--sobre-cielo) 20%, transparent); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .9rem; opacity: .85; }
.pie .marca { font-size: 1.1rem; margin-bottom: .6rem; }