/* ===================================================================== ESCUELA RENACER · Sistema visual del sitio público Hermano de assets/ekklesia.css. Deliberadamente NO es una copia. QUÉ SE HEREDA de Ekklesia, tal cual y sin discutir: la escala de azul medianoche, las superficies, la tinta, los radios, las sombras, la disciplina de tokens y la regla de que el color sólo aparece cuando comunica algo. Los dos sitios tienen que leerse como la misma casa. QUÉ ES PROPIO DE ACÁ, y por qué: · UNA SERIF. Ekklesia es una aplicación de escritorio: densa, funcional, toda en grotesca. Este sitio presenta una escuela y cita las Escrituras. Puesto entero en Schibsted Grotesk se lee como un panel de administración con la letra grande. La serif (Newsreader) entra SÓLO en dos lugares —los títulos de despliegue y los versículos— y ahí es donde el sitio tiene voz propia. · TIPO MÁS GRANDE. Ekklesia se lee a distancia de escritorio, con el ojo yendo a una celda concreta de una tabla; su cuerpo es 13.5px. Esto se lee a distancia de brazo, seguido, y muchas veces en el teléfono. Cuerpo 17px. · LA RUTA. El programa académico no es una lista de cursos: es una secuencia con prerrequisitos, y la iglesia ya la llama «ruta de crecimiento». Se dibuja como un camino con estaciones porque el orden ES información, no adorno. Es el elemento por el que este sitio se distingue de cualquier otro sitio de iglesia. Orden del archivo: 1 · Tokens 6 · Prosa 2 · Base 7 · Tarjetas de curso 3 · Tipografía 8 · La ruta 4 · Armazón 9 · Botones 5 · Barra y héroe 10 · Pie · 11 · Responsivo · 12 · Movimiento ===================================================================== */ /* ---------------------------- 1 · TOKENS ---------------------------- */ :root{ /* ── Color. Idéntico a ekklesia.css: una sola escala de azul medianoche derivada del azul institucional. Si allá cambia, acá cambia. ── */ --renacer:#003399; --renacer-dark:#002266; --renacer-hover:#173a80; --renacer-sf:#e7ecfb; --renacer-bd:#aec3ee; --acc:#0e2a63; --acc-ink:#ffffff; --acc-sf:#eef1f8; --acc-bd:#c6cee0; --acc-nav:#7fa6ff; /* Superficies y tinta */ --bg:#f5f6f8; /* fondo de página */ --sf:#ffffff; /* tarjetas */ --sf2:#fafafb; /* bloques de apoyo */ --sf3:#f2f3f6; /* hover */ --ln:#e4e7ec; /* borde */ --ln2:#edeff3; /* separador tenue */ --ink:#14161b; /* titulares */ --ink2:#3d424d; /* párrafo */ /* ⚠️ ÚNICA divergencia de color respecto de ekklesia.css, y es a propósito. Allá --mut es #767c88, que sobre el fondo de la aplicación da 3,88:1 de contraste — por debajo del 4,5:1 que pide WCAG AA para texto normal. En Ekklesia se lo lleva un rótulo de 12px dentro de una herramienta interna, con usuarios entrenados y pantallas conocidas. Acá lo leen visitantes de cualquier edad, muchos en un teléfono a pleno sol, y los rótulos que lo usan llevan datos que importan: la fecha de un curso y la referencia de un versículo. #666c78 es el mismo gris, dos pasos más oscuro: 4,88:1 sobre --bg, 5,27:1 sobre --sf, 5,06:1 sobre --sf2. Pasa en las tres superficies. (--fnt, el gris terciario de Ekklesia, no existe acá: daba 2,40:1 y no había ningún uso que lo justificara.) */ --mut:#666c78; /* secundario */ /* ── LA ESCRITURA ── Única excepción a la regla del acento único, y con el mismo criterio con que Ekklesia se permite el verde de WhatsApp: marca una cosa que NO es de la misma naturaleza que el resto. Acá lo que marca es la Palabra. Todo el texto del sitio es la escuela hablando; los versículos son lo único que no. Que se distingan sin tener que leer la referencia es información, no adorno. Es el AZUL INSTITUCIONAL (--renacer, #003399) y no un tono nuevo: un primer intento en bronce quedó fuera de la paleta —el sitio entero es una escala de azules y un cálido se leía como de otra casa—. Este azul, además, hoy casi no se usa en ninguna otra parte, así que dedicarlo a la Escritura le da un trabajo propio en vez de repetir el acento. Se distingue de los enlaces (--acc, azul medianoche) por la TIPOGRAFÍA antes que por el tono: la Escritura va en serif y los enlaces en grotesca subrayada. Contraste: 10,04 sobre --bg · 10,86 sobre --sf. Sobre el medianoche del héroe hace falta la versión clara, y ya existe: --acc-nav, la marca sobre chrome oscuro. 7,85 de contraste. ⚠️ Estos tokens son SÓLO para Escritura. Si aparecen en otra cosa, dejan de significar. */ --escritura:#003399; --escritura-sf:#e7ecfb; --escritura-bd:#aec3ee; /* ⚠️ Se aclaró de #7fa6ff a #b0caff, y la razón es medible: el sello del banner subió de opacidad —se pedía que se distinguiera— y su parte más clara queda justo detrás de la Escritura. Con el azul anterior el contraste ahí caía a 2,92:1, por debajo del 3:1 que WCAG pide para texto grande. Con éste sube a 4,22:1, que además cumple el 4,5:1 de texto normal con margen. Es decir: el sello se ve más porque el versículo se aclaró, no a costa de él. Si alguna vez se vuelve a subir la opacidad del sello, hay que volver a medir ESTE número. */ --escritura-nav:#b0caff; /* Estados. Semánticos, nunca decorativos: si algo lleva estos colores, algo está pasando. Un curso abierto no es «verde porque sí». */ --ok:#067a55; --ok-sf:#e9f7f1; --ok-bd:#b7e2d1; --warn:#b45309; --warn-sf:#fdf5e7; --warn-bd:#f0d9a8; --danger:#c11b45; /* Chrome oscuro: la barra superior y el campo del héroe. Mismos tokens que el menú lateral de Ekklesia, para que la barra de los dos sitios sea literalmente el mismo azul. */ --nav:#071129; --nav-ink:rgba(255,255,255,.66); --nav-on:#ffffff; --nav-ln:rgba(255,255,255,.10); --nav-hov:rgba(255,255,255,.07); /* ── Tipografía ── --serif entra sólo en títulos de despliegue y versículos (§3). --sans es la de Ekklesia. --mono es la de Ekklesia, y acá sirve para lo mismo que allá: fechas y cifras, que se alinean por columna. */ /* ⚠️ Fraunces y no Newsreader (cambiado sep 2026). Newsreader es una serif de lectura: correcta, tranquila, y a tamaño de titular se lee como el Times de siempre — que es justo lo que hacía ver la página «plana». Fraunces es variable y tiene eje ÓPTICO (`opsz`): a 72pt afila los remates y abre el contraste, y a 16pt se engorda sola para que la cursiva del versículo no se rompa. Un solo archivo cubre los dos usos. Los ejes SOFT y WONK quedan en 0 a propósito: son los que le dan a Fraunces su aire de panadería artesanal, y esto es una escuela bíblica. Se usa su estructura, no su chiste. */ --serif:'Fraunces','Newsreader',Georgia,serif; --sans:'Schibsted Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* Escala tipográfica. `clamp` en vez de media queries: son cuatro tamaños que tienen que crecer con la ventana, y repetirlos en tres puntos de quiebre es tres lugares donde se desincronizan. */ --t-display:clamp(2.35rem, 1.4rem + 4.1vw, 4.5rem); /* h1 del héroe */ --t-h2:clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); /* título sección */ --t-h3:1.16rem; /* subtítulo */ --t-body:1.0625rem; /* 17px */ --t-sm:.9375rem; /* apoyo */ --t-xs:.8125rem; /* rótulo, fecha */ /* Radios y sombras: los de Ekklesia. «Una tarjeta es una superficie, no un globo». Nada de 20px de radio ni sombras de catálogo. */ --r-sm:7px; --r:10px; --sh:0 1px 2px rgba(16,24,40,.06); --sh-acc:0 1px 2px rgba(14,42,99,.10), 0 6px 16px -6px rgba(14,42,99,.28); /* Medidas del armazón. --medida es el ancho del contenido; --lectura es el ancho de un PÁRRAFO, que es otra cosa: 68ch es el largo de línea donde el ojo todavía encuentra el renglón siguiente. Hoy el sitio pone párrafos de 1200px de ancho y justificados, que es lo peor de los dos mundos. */ --medida:1180px; --lectura:68ch; /* La sangría del armazón, en un token: la usan `.ee-shell` y el sello del héroe, y tienen que ser el MISMO valor o el sello no queda alineado con el titular. */ --sangria:clamp(1.15rem, 4vw, 2.5rem); /* Relleno vertical del héroe y tamaño del sello. Van en tokens porque la POSICIÓN del sello se calcula a partir de los dos: si alguno se toca a mano en su regla, el sello deja de quedar a la altura del titular. */ --heroe-pad:clamp(3.5rem, 8vw, 6.5rem); --sello:clamp(220px, 27vw, 400px); /* Diámetro de los aros de icono. Lo comparten el riel de los cinco compromisos y cualquier esquema que cuelgue de una línea: si el diámetro cambia acá, el riel sigue pasando por el centro sin que haya que tocar dos números en dos lugares. */ --ico:52px; /* Dónde empieza el contenido dentro de un contenedor a todo el ancho. Con la ventana más angosta que --medida es la sangría a secas; más ancha, hay que sumar el margen que el armazón deja a cada lado. */ --borde-contenido:max(var(--sangria), calc(50% - (var(--medida) / 2) + var(--sangria))); --barra-h:74px; --gap:1.25rem; /* Movimiento */ --ease:cubic-bezier(.22,1,.36,1); --t-fast:120ms; --t-med:220ms; /* Capas */ --z-barra:40; --z-menu:45; --z-velo:44; } /* ----------------------------- 2 · BASE ----------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* `scroll-padding-top` y no un margen en cada ancla: la barra superior es fija, así que sin esto todo salto a `#seccion` deja el título tapado debajo de la barra. Se descuenta acá una vez, no en cada destino. */ html{ scroll-padding-top:calc(var(--barra-h) + 1.5rem); } body{ margin:0; background:var(--bg); color:var(--ink2); font-family:var(--sans); font-size:var(--t-body); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--acc); text-decoration:none; } a:hover{ text-decoration:underline; text-underline-offset:3px; } /* Foco visible SIEMPRE. El sitio actual no tiene ninguno: quien navega con teclado no sabe dónde está parado. */ :focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; } /* Sobre el chrome oscuro el azul del acento no se ve: ahí el foco es claro. */ .ee-barra :focus-visible, .ee-heroe :focus-visible, .ee-pie :focus-visible{ outline-color:var(--acc-nav); } /* Salto al contenido, para lector de pantalla y teclado. Visible sólo al enfocarlo: es el primer elemento tabulable de toda página. */ .ee-saltar{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--sf); color:var(--acc); padding:.7rem 1.1rem; border:1px solid var(--acc); border-radius:0 0 var(--r-sm) 0; font-weight:600; } .ee-saltar:focus{ left:0; } /* -------------------------- 3 · TIPOGRAFÍA -------------------------- */ /* La serif entra en DOS lugares y en ninguno más. Si aparece en un tercero, deja de ser la voz del sitio y pasa a ser decoración. */ h1,h2,h3,h4{ color:var(--ink); line-height:1.2; margin:0; font-weight:600; } /* 1 · Títulos de despliegue: el h1 del héroe y los h2 de sección. */ .ee-display{ font-family:var(--serif); font-weight:600; letter-spacing:-.028em; line-height:1.04; font-variation-settings:'opsz' 128, 'SOFT' 0, 'WONK' 0; } /* `opsz` se declara a mano: sin esto el navegador usa el valor por defecto del eje y el titular sale con el mismo grosor de remate que un párrafo. */ h1{ font-family:var(--serif); font-weight:600; font-size:var(--t-display); letter-spacing:-.028em; line-height:1.04; font-variation-settings:'opsz' 128, 'SOFT' 0, 'WONK' 0; } h2{ font-family:var(--serif); font-weight:600; font-size:var(--t-h2); letter-spacing:-.022em; line-height:1.12; font-variation-settings:'opsz' 72, 'SOFT' 0, 'WONK' 0; } /* h3 vuelve a la grotesca: a esa altura ya es rotulación, no despliegue. */ h3{ font-family:var(--sans); font-weight:600; font-size:var(--t-h3); letter-spacing:-.005em; } /* 2 · Los versículos. En cursiva de la serif, que es donde Newsreader tiene su mejor letra, y con la referencia arriba en grotesca chica: la referencia es un dato (Salmos 119:105), el versículo es la voz. */ .ee-cita{ margin:0; } .ee-cita .ref{ display:block; font-family:var(--sans); font-size:var(--t-xs); /* La cita va en NEGRITA y el pasaje no: el peso separa el dato —qué libro, qué capítulo, qué versículos— de la voz que se está citando. */ font-weight:700; letter-spacing:.03em; color:var(--escritura); margin-bottom:.5rem; } .ee-cita .txt{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.5rem; line-height:1.4; color:var(--escritura); /* Óptica baja: a este tamaño la cursiva necesita el trazo más grueso, no el afilado del titular. */ font-variation-settings:'opsz' 24, 'SOFT' 0, 'WONK' 0; } /* Rótulo de sección. Ekklesia abandonó la versalita negrita a propósito («un rótulo rotula, no compite con el dato») y acá se respeta: texto tranquilo en gris, con un filete corto delante que lo ancla sin gritar. */ .ee-rotulo{ display:flex; align-items:center; gap:.6rem; font-size:var(--t-xs); font-weight:500; color:var(--mut); margin:0 0 .75rem; text-transform:none; letter-spacing:0; } .ee-rotulo::before{ content:""; width:22px; height:1px; background:var(--acc-bd); flex:none; } /* Variante del héroe: acá el rótulo dice «Escuela Renacer», que es el nombre del ministerio y no una etiqueta de sección. Sube de tamaño y de peso, y el filete crece con él para que siga anclándolo. */ .ee-rotulo.grande{ font-size:clamp(1rem, .9rem + .5vw, 1.25rem); font-weight:600; letter-spacing:-.01em; margin-bottom:1rem; } .ee-rotulo.grande::before{ width:34px; } .ee-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; } /* --------------------------- 4 · ARMAZÓN --------------------------- */ .ee-shell{ width:100%; max-width:var(--medida); margin-inline:auto; padding-inline:var(--sangria); } /* Sección. El ritmo vertical lo pone UNA clase, no el margen suelto de cada bloque: así dos secciones seguidas nunca suman dos espacios distintos. La variante `.tenue` cambia el fondo para separar sin dibujar una caja. */ .ee-seccion{ padding-block:clamp(3rem, 7vw, 5.5rem); } .ee-seccion.tenue{ background:var(--sf2); border-block:1px solid var(--ln); } .ee-seccion.papel{ background:var(--sf); border-block:1px solid var(--ln); } /* Cabecera de sección: rótulo + título + bajada, con la bajada limitada a la medida de lectura aunque la sección sea ancha. */ .ee-sec-cab{ margin-bottom:clamp(1.75rem, 3.5vw, 2.75rem); } .ee-sec-cab p{ max-width:var(--lectura); color:var(--ink2); margin:.85rem 0 0; } /* Rejilla de dos columnas para «texto + apoyo». `auto-fit` con mínimo y no dos columnas fijas: bajo 640px se convierte sola en una sin media query. */ .ee-duo{ display:grid; gap:clamp(1.5rem, 4vw, 3rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } /* Variante PAREJA: dos columnas del mismo ancho. Para cuando las dos llevan peso —un texto con sus pasos a un lado y una demostración al otro— y ninguna es «el apoyo» de la otra. */ /* Dos columnas iguales, cada una con su altura natural. ⚠️ Hubo dos intentos de FORZAR que midieran lo mismo y los dos salieron peor. Con `space-between` en la columna de texto quedaba un vacío enorme entre la bajada y la primera ficha: separar bloques para rellenar no distribuye nada, sólo muda el hueco. Y estirando las fichas de los pasos, éstas quedaban infladas y huecas por dentro. La lección: cuando dos columnas no calzan, el problema casi nunca está en la corta. Acá estaba en la larga —la tarjeta llevaba cinco bloques— y se arregló sacándole uno, no estirando a la otra. Con las dos ya parecidas, `start` alcanza y nada tiene que deformarse. */ .ee-duo.ee-duo-par{ grid-template-columns:1fr 1fr; align-items:start; } @media (max-width: 900px){ .ee-duo.ee-duo-par{ grid-template-columns:1fr; } } /* Variante desbalanceada: el texto manda, el apoyo acompaña. */ .ee-duo.texto-manda{ grid-template-columns:1.45fr 1fr; align-items:start; } /* Variante «texto + índice lateral»: la columna de apoyo es angosta y de ancho casi fijo, porque es una lista de enlaces y no contenido. ⚠️ Es una CLASE y no un `style=` en el HTML, que es como estaba. Un estilo en línea gana por especificidad a cualquier media query, así que bajo 900px —donde `.ee-indice-lat` se oculta— la rejilla seguía reservando sus 15rem: el texto se leía en dos tercios de la pantalla del teléfono y el tercio restante quedaba en blanco. */ .ee-duo.con-indice{ grid-template-columns:1fr minmax(0, 15rem); gap:clamp(2rem, 4vw, 3.5rem); align-items:start; } /* ---------------------- 5 · BARRA Y HÉROE -------------------------- */ /* La barra es el mismo medianoche del menú de Ekklesia. Fija, UNA fila —hoy son dos y la segunda está vacía— y con estado activo, que hoy no existe: en cualquier página el menú se ve igual y no dice dónde estás. */ .ee-barra{ /* `position:sticky` ya crea contexto de posicionamiento para la línea de avance de lectura (`::after`), que se ancla a su borde inferior. */ position:sticky; top:0; z-index:var(--z-barra); background:var(--nav); border-bottom:1px solid var(--nav-ln); height:var(--barra-h); display:flex; align-items:center; } .ee-barra .ee-shell{ display:flex; align-items:center; gap:1.5rem; width:100%; } /* La barra lleva el LOGOTIPO DE LA IGLESIA («RENACER · IGLESIA»), no el emblema de la escuela. Son dos marcas distintas y cada una tiene su lugar: arriba manda la casa, y el sello de la escuela aparece como marca de agua del héroe y como firma del pie. Antes acá había un emblema de 34px que a esa medida no se leía como nada. */ .ee-marca{ display:flex; align-items:center; gap:.85rem; margin-right:auto; color:var(--nav-on); text-decoration:none; min-width:0; } .ee-marca:hover{ text-decoration:none; } .ee-marca .logo{ height:38px; width:auto; flex:none; } /* (El filete y el bloque de texto que iban acá se quitaron: la barra lleva sólo el logotipo. El nombre de la escuela lo dice el héroe.) */ .ee-marca .txt{ min-width:0; } .ee-marca b{ display:block; font-weight:600; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap; } /* ⚠️ `.txt span` y no `span` a secas: `.txt` es a su vez un , así que el selector suelto alcanzaba al contenedor y en el teléfono (§11) se llevaba puesto el nombre de la escuela junto con la bajada. */ .ee-marca .txt span{ display:block; font-size:.72rem; color:var(--nav-ink); font-weight:400; letter-spacing:.01em; white-space:nowrap; } .ee-nav{ display:flex; align-items:center; gap:.15rem; } .ee-nav a{ color:var(--nav-ink); font-size:.9rem; font-weight:500; padding:.5rem .75rem; border-radius:var(--r-sm); white-space:nowrap; transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .ee-nav a:hover{ color:var(--nav-on); background:var(--nav-hov); text-decoration:none; } /* El activo se marca con tinta plena Y un filete de acento debajo. Sólo con el color el cambio es demasiado sutil sobre este azul. */ .ee-nav a[aria-current="page"]{ color:var(--nav-on); background:var(--nav-hov); box-shadow:inset 0 -2px 0 var(--acc-nav); } /* «Aula Virtual» destaca, pero por FORMA y no por color. Es a donde va quien ya está inscrito, y es lo que más se busca desde la barra, así que merece pesar más que un ítem de menú. Lo que no puede hacer es pesar con color: en esta barra el color ya significa «estás acá» —tinta plena y filete de acento bajo el activo— y un segundo color dejaría dos señales compitiendo por el mismo significado. Un contorno resuelve las dos cosas: se lee como botón a primera vista y no toca la paleta. Antes iba apartada por un filete vertical, que la separaba del grupo pero no la destacaba de nada. */ .ee-nav .aparte{ margin-left:.85rem; display:inline-flex; align-items:center; gap:.4rem; color:var(--nav-on); border:1px solid var(--nav-ln); border-radius:99px; padding:.42rem .85rem .42rem .95rem; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .ee-nav .aparte svg{ width:13px; height:13px; opacity:.7; transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .ee-nav .aparte:hover{ background:var(--nav-hov); border-color:var(--acc-nav); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc-nav) 16%, transparent); } /* La flecha se va, que es lo que el enlace hace. */ .ee-nav .aparte:hover svg{ transform:translate(1.5px, -1.5px); opacity:1; } /* Botón del menú en teléfono. Oculto en escritorio (§11). */ .ee-menu-btn{ display:none; background:none; border:1px solid var(--nav-ln); color:var(--nav-on); width:40px; height:38px; border-radius:var(--r-sm); cursor:pointer; align-items:center; justify-content:center; } .ee-menu-btn:hover{ background:var(--nav-hov); } .ee-menu-btn i{ font-size:1rem; } /* ── El héroe ── Campo medianoche a todo el ancho con el emblema saliéndose por el borde, igual que la pantalla de acceso de Ekklesia. Es la herencia visual más reconocible que hay entre los dos sitios. ⚠️ Lo que NO se hereda: la aurora animada. Allá funciona porque es un login donde no pasa nada más; acá abajo del héroe hay una página entera que leer, y tres manchas a la deriva compiten con eso. */ /* ── El héroe, en tres capas ── El orden importa y por eso está escrito acá: fondo del elemento → el medianoche y el halo frío (un degradado, no una imagen: son 150 KB de PNG que `radial-gradient` dibuja sin descargar nada y sin pixelarse en pantalla grande) ::before (z -2) → el SELLO DE LA ESCUELA ::after (z -1) → el velo que protege el texto contenido (z 0) → el titular ⚠️ Dos errores que costó ver, y por eso quedan anotados: 1 · El sello se recortaba con FILO DURO contra el borde inferior del héroe: `overflow:hidden` lo cortaba en seco y se leía como un defecto, no como una marca de agua. Ahora lleva `mask-image`: el propio sello se disuelve en sus bordes, así que no hay ningún canto que cortar, esté donde esté. 2 · El velo era un rectángulo del ancho del contenido (`.ee-shell::before`), y sus cantos se veían como una caja más oscura encima del sello. Ahora es una capa a TODO el ancho del héroe, con el degradado muriendo antes de llegar al borde: protege la columna de texto y en ninguna parte se nota dónde empieza. */ .ee-heroe{ position:relative; overflow:hidden; isolation:isolate; color:#fff; padding-block:var(--heroe-pad); /* Capa 0 · el halo frío, sobre el medianoche. ⚠️ Arriba a la DERECHA (84%), no a la izquierda. Estaba en 16%, o sea en la misma esquina donde el velo de legibilidad es más denso: un resplandor y una sombra peleando por el mismo rincón, y el resultado era un gris sucio. A la derecha el halo cae sobre el sello y lo ilumina, que es lo único que hay para iluminar. Es además la posición que ya tenía la franja de `nosotros`, que es la que se tomó de modelo. */ background: radial-gradient(circle at 84% -20%, color-mix(in srgb, var(--renacer) 48%, transparent) 0%, color-mix(in srgb, var(--renacer) 12%, transparent) 38%, transparent 62%), var(--nav); } /* Capa 1 · el sello de la escuela. Es el artefacto propio del ministerio —el círculo «ESCUELAS RENACER» con el monograma y la cruz— usado como textura, y es el único adorno del héroe. */ .ee-heroe::before{ content:""; /* Centrado vertical y pegado a la izquierda. ⚠️ El centrado va con `inset-block:0` + `margin-block:auto`, NO con `top:50%; transform:translateY(-50%)`: el `transform` ya lo usa la animación de respiración, y el segundo pisaría al primero dejando el sello a media altura y saltando. */ /* A la DERECHA y centrado vertical, igual que en la franja de `nosotros.php` (.ee-declara::before): los dos campos azules del sitio llevan el sello en el mismo lugar, así que se leen como el mismo gesto y no como dos decisiones distintas. El centrado va con `inset-block:0` + `margin-block:auto` y NO con `translateY`: el `transform` ya lo usa la animación de respiración, y el segundo pisaría al primero. */ /* El sello va ENTERO y dentro del borde. Estuvo un rato sangrado a -19%, y ése fue un mal arreglo para un problema real: a plena opacidad, las letras del aro «ESCUELAS RENACER» se cruzaban con las del versículo y no se leía ni una cosa ni la otra. Recortar el emblema para no estorbar es resolverlo por el lado equivocado —queda un arco que ya no es el sello de nadie—. El choque se resuelve con OPACIDAD, que es para lo que existe una marca de agua: abajo está en .11, lo bastante tenue para que el versículo pase por encima sin pelear, y lo bastante presente para que el emblema se reconozca completo. */ position:absolute; inset:0 1.5rem 0 auto; margin-block:auto; /* ⚠️ El tamaño se ata al ALTO DEL HÉROE, con piso y techo. Historia de tres intentos, para que no se repitan: · `width:680px` fijo → en pantalla ancha y baja el sello era más grande que el héroe y se recortaba con filo duro contra el borde. · `height:135%` sin tope → al meter la cinta de cifras DENTRO del héroe, el héroe se hizo mucho más alto y el sello creció con él hasta quedar desproporcionado. `clamp` resuelve las dos: nunca baja de 280px —por debajo de eso el sello no se reconoce en el héroe compacto de las páginas interiores— ni pasa de 520px, que es donde empieza a comerse la composición. `width` lo resuelve `aspect-ratio`. */ /* El tamaño ya NO depende del alto del héroe: cuando la cinta de cifras entró al héroe, ese alto creció y el sello creció con él hasta quedar desproporcionado. Ahora se mide contra la VENTANA, que es lo que de verdad determina cuánto espacio hay. */ height:var(--sello); aspect-ratio:1; width:auto; background:url("img/emblema-escuela-blanco.png") center/contain no-repeat; /* ⚠️ .14, no .34. Con .34 el sello era legible como logotipo, y ése era el problema: ahora el versículo vive en la columna DERECHA, encima de él, y las letras del aro «ESCUELAS RENACER» se cruzaban con las de la Escritura. Una marca de agua que compite con el texto que tiene encima dejó de ser marca de agua. .14 es el valor que la franja de `nosotros` ya usaba, y por la misma razón: allí también había texto sobre el sello. */ /* ⚠️ El equilibrio de este número tiene historia, y conviene entenderlo antes de moverlo. A .34 el sello competía con el versículo que tiene encima y no se leía ninguno de los dos. A .11 dejó de competir, pero también dejó de verse: era una mancha, no un emblema. .26 es donde el sello se reconoce como sello. Lo que hace que a esta opacidad NO estorbe es el velo de abajo, que ahora se cierra sobre la columna derecha —donde vive la Escritura— en vez de abrirse. Es decir: el sello sube y el fondo detrás del texto se oscurece al mismo tiempo, así que el contraste del versículo no baja. Si se sube más, hay que subir el velo también, y ahí el medianoche empieza a verse sucio. */ opacity:.72; z-index:-2; pointer-events:none; /* La disolución. `closest-side` mide contra el lado más cercano del propio cuadro, así que el desvanecido es un círculo concéntrico con el sello: se apaga justo donde termina el emblema. */ /* El núcleo opaco llega al 62% —donde termina el anillo de letras del sello— y recién ahí empieza a desvanecerse. Con el 42% anterior el aro «ESCUELAS RENACER» quedaba a media transparencia y el emblema no se reconocía. El desvanecido sigue existiendo para que no haya ningún canto duro contra los bordes del héroe. */ /* El desvanecido llega más lejos que antes (72% en vez de 62%): con el sello más presente, un corte temprano dejaba ver dónde termina el círculo de la máscara, y eso se nota más que el propio emblema. */ -webkit-mask-image:radial-gradient(closest-side, #000 72%, rgba(0,0,0,.5) 88%, transparent 100%); mask-image:radial-gradient(closest-side, #000 72%, rgba(0,0,0,.5) 88%, transparent 100%); transform-origin:50% 50%; animation:eeRespira 22s ease-in-out infinite; } /* Capa 1b · los puntos de luz (assets/particulas.js). El lienzo lo crea el script, así que si el script no corre este bloque simplemente no tiene a quién aplicarse. Va ENTRE el sello y el velo: los puntos pasan por delante de la marca de agua y por detrás del texto. */ .ee-particulas{ position:absolute; inset:0; z-index:-1; pointer-events:none; /* Se desvanece hacia abajo para que ningún punto quede cortado contra el filete inferior del héroe. */ -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%); mask-image:linear-gradient(to bottom, #000 62%, transparent 100%); } /* Capa 2 · el velo de legibilidad, a todo el ancho. */ .ee-heroe::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; /* ⚠️ El velo se aclaraba hacia la derecha —12% en el borde— porque ahí sólo vivía la marca de agua y convenía dejarla respirar. Ya no: la columna derecha es la del versículo. Un velo que se rinde justo donde empieza la Escritura es exactamente al revés de lo que se necesita. Ahora sostiene los dos costados y cede apenas en el centro, que es la única franja sin texto. */ background:linear-gradient(90deg, color-mix(in srgb, var(--nav) 52%, transparent) 0%, color-mix(in srgb, var(--nav) 28%, transparent) 44%, color-mix(in srgb, var(--nav) 62%, transparent) 100%); } @keyframes eeRespira{ 0%,100%{ transform:rotate(-4deg) scale(1); } 50%{ transform:rotate(4deg) scale(1.025); } } /* El contenido va sobre el velo, que ahora está en z-index 0. */ .ee-heroe > .ee-shell{ position:relative; z-index:1; width:100%; } /* El titular cruza el ANCHO COMPLETO y las dos columnas cuelgan de él. Antes vivía dentro de la columna izquierda, y el banner se leía como una tarjeta ancha en vez de como una portada. ⚠️ Escala PROPIA, más baja que `--t-display`. A tamaño de despliegue el titular ocupaba dos renglones anchos y empujaba todo lo demás hacia abajo; el banner terminaba siendo un titular con apéndices. Bajándolo, el titular sigue mandando pero deja respirar a la bajada y al versículo, que son los que de verdad explican la página. */ .ee-heroe h1{ color:#fff; max-width:22ch; margin:0 0 clamp(1.5rem, 3vw, 2.25rem); font-size:clamp(2.05rem, 1.35rem + 2.5vw, 3.3rem); letter-spacing:-.025em; line-height:1.08; font-variation-settings:'opsz' 96, 'SOFT' 0, 'WONK' 0; } /* Titular en registro de declaración —lo pide `'frase' => true`—: serif cursiva y escala más corta. La escala del banner (hasta 4.5rem) partiría una frase larga en seis renglones. */ .ee-heroe h1.frase{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem); line-height:1.28; letter-spacing:-.015em; max-width:26ch; margin-bottom:clamp(2rem, 4vw, 3rem); font-variation-settings:'opsz' 60, 'SOFT' 0, 'WONK' 0; } .ee-heroe .bajada{ /* 46ch y no 52: con la columna a la mitad del banner, una medida más larga que ésta obliga al texto a llegar hasta el borde del canal y a rozar el versículo. */ margin:0; max-width:46ch; font-size:1.0625rem; line-height:1.6; color:rgba(255,255,255,.78); } .ee-heroe .ee-rotulo{ color:rgba(255,255,255,.6); } .ee-heroe .ee-rotulo::before{ background:var(--acc-nav); } /* El versículo dentro del héroe: es contra-texto, no subtítulo. Va a la derecha, separado por un filete, y en la cursiva de la serif. Sólo la portada lo lleva — en las páginas interiores el héroe es compacto. */ /* ⚠️ `start` y no `center`. Centradas, la bajada y el versículo flotaban una respecto de la otra según cuál fuera más larga, y ninguna de las dos arrancaba donde el ojo la esperaba. Alineadas por arriba, sus primeras líneas coinciden y se leen como dos voces en paralelo. */ /* ⚠️ Las dos columnas son IGUALES. Estuvieron en 1,35 contra 0,85 —el texto mandaba y la Escritura acompañaba—, y el resultado era un banner que se veía cargado a la izquierda: la bajada llegaba casi al centro y al versículo le quedaba un canal estrecho donde cada línea se partía en cuatro palabras. A la mitad y a la mitad, las dos voces del banner pesan lo mismo, que es lo que son: una explica y la otra da la razón. La bajada se acorta sola contra su medida y el versículo respira. */ .ee-heroe-duo{ display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:start; grid-template-columns:1fr 1fr; } /* Sin versículo no hay dos columnas: la bajada no debe estirarse a todo el ancho sólo porque quedó sola. */ .ee-heroe-duo.sola{ grid-template-columns:1fr; } /* ⚠️ ACÁ NO VA UN FONDO DETRÁS DEL VERSÍCULO. Se probó —un velo suave bajo la columna de la Escritura— y se veía como lo que era: una caja flotando sobre el banner. El problema que venía a resolver es real: el sello está a .72 de opacidad, porque se pidió que se distinguiera, y su aro de letras cae justo detrás de este texto. La solución que no se ve es el halo de abajo: una sombra oscura y difusa alrededor de cada letra. Separa la Escritura del emblema carácter por carácter, en vez de tapar una región entera. Es lo que se usa para poner texto sobre una fotografía, y funciona por lo mismo: sigue el contorno del texto y no tiene bordes propios. */ .ee-heroe .ee-cita{ border-left:1px solid rgba(255,255,255,.28); padding-left:clamp(1.25rem,3vw,2.25rem); } /* Los botones, bajo la bajada y en su misma columna. */ .ee-heroe .bajada + .ee-acciones{ margin-top:1.75rem; } /* El halo. Tres sombras superpuestas y no una: la primera pega al borde de la letra y le devuelve el filo, las otras dos abren la penumbra sin que se note dónde termina. Con una sola sombra ancha el texto se ve borroso; con tres, se ve nítido sobre cualquier fondo. */ .ee-heroe .ee-cita .ref, .ee-heroe .ee-cita .txt{ text-shadow:0 1px 2px color-mix(in srgb, var(--nav) 92%, transparent), 0 0 12px color-mix(in srgb, var(--nav) 88%, transparent), 0 0 26px color-mix(in srgb, var(--nav) 70%, transparent); } .ee-heroe .ee-cita .ref{ color:var(--escritura-nav); font-weight:700; } .ee-heroe .ee-cita .txt{ color:var(--escritura-nav); font-size:clamp(1.25rem, 2.1vw, 1.7rem); } /* El titular y la bajada también cruzan el emblema en pantallas anchas. */ .ee-heroe h1, .ee-heroe .bajada{ text-shadow:0 1px 14px color-mix(in srgb, var(--nav) 72%, transparent); } /* Héroe compacto de páginas interiores. */ /* Bloque que la página inyecta dentro del héroe (hoy, la cinta de cifras). ⚠️ Antes esto era una `
` aparte con fondo propio, y ese fondo tapaba la mitad de abajo del sello: se veía un rectángulo más oscuro encima de la marca de agua. Adentro del héroe hay un solo fondo. */ .ee-heroe-extra{ margin-top:clamp(2rem, 4vw, 3rem); } /* Héroe sin marca de agua. El halo y el velo se quedan: lo único que se va es el sello. */ .ee-heroe.sin-sello::before{ display:none; } /* ⚠️ ALTURA MÍNIMA COMÚN. Sin esto cada banner medía lo que midiera su contenido, y como el versículo de cada página tiene otro largo —Isaías 6:8 son tres líneas, Santiago 1:5 son cinco— los siete banners tenían siete alturas distintas: 472, 510, 559, 619. Al navegar entre páginas el contenido saltaba hacia arriba y hacia abajo en cada clic, y el sitio se sentía desalineado sin que se viera por qué. Con un piso común, todos los banners interiores miden lo mismo y el contenido queda quieto de una página a otra. El bloque se centra verticalmente para que el aire sobrante se reparta arriba y abajo en vez de acumularse abajo. */ .ee-heroe.compacto{ padding-block:clamp(2.5rem, 5.5vw, 3.75rem); min-height:clamp(17rem, 34vw, 31rem); display:flex; flex-direction:column; justify-content:center; } /* La portada también, un escalón más alta: lleva botones. */ .ee-heroe:not(.compacto){ min-height:clamp(20rem, 39vw, 35rem); display:flex; flex-direction:column; justify-content:center; } .ee-heroe.compacto h1{ font-size:clamp(1.9rem, 1.25rem + 2.4vw, 2.85rem); max-width:20ch; } /* Migas. Sólo en páginas interiores, y sólo un nivel: el sitio es plano. */ /* Las migas se quitaron del banner: en un sitio de un solo nivel decían siempre «Inicio · », que es lo que ya dice el menú activo. Sus reglas se van con ellas. */ /* ----------------------------- 6 · PROSA ---------------------------- */ /* Todo párrafo del sitio pasa por acá. ⚠️ Dos herencias que se cortan de raíz: · css/estilo.css declaraba `p{display:inline}`, que le quitaba el flujo de bloque a TODOS los párrafos del sitio; de ahí los

sueltos por todas partes. · el HTML usa align="justify" en columnas angostas, que abre ríos de espacio entre palabras. Acá se alinea a la izquierda, siempre. */ .ee-prosa{ max-width:var(--lectura); } .ee-prosa p{ display:block; text-align:left; margin:0 0 1.15em; color:var(--ink2); } .ee-prosa p:last-child{ margin-bottom:0; } .ee-prosa h3{ margin:2rem 0 .6rem; } .ee-prosa ul,.ee-prosa ol{ margin:0 0 1.15em; padding-left:1.3em; } .ee-prosa li{ margin-bottom:.5em; } .ee-prosa li::marker{ color:var(--mut); } /* La negrita destaca UNA cosa por párrafo. El texto actual llega a ocho fragmentos en negrita en un mismo párrafo, y con eso no destaca ninguno. Acá se le da tinta plena para que cuando aparezca, se note. */ .ee-prosa strong{ font-weight:600; color:var(--ink); } .ee-prosa a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--acc-bd); } .ee-prosa a:hover{ text-decoration-color:var(--acc); } /* Bloque de apoyo: una nota al margen del texto principal. Superficie, no caja de color. */ .ee-nota{ background:var(--sf); border:1px solid var(--ln); border-radius:var(--r); padding:1.25rem 1.35rem; box-shadow:var(--sh); } .ee-nota h3{ margin:0 0 .5rem; } .ee-nota p{ margin:0; font-size:var(--t-sm); color:var(--ink2); } /* --------------------- 7 · TARJETAS DE CURSO ----------------------- */ .ee-cursos{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } /* La tarjeta es un enlace entero, no un texto con un enlace adentro: el objetivo táctil es la tarjeta completa. */ .ee-curso{ position:relative; display:flex; flex-direction:column; gap:.9rem; background:var(--sf); border:1px solid var(--ln); border-radius:var(--r); padding:1.25rem 1.35rem 1.35rem; box-shadow:var(--sh); color:inherit; text-decoration:none; overflow:hidden; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); } /* Banda de la fase en el canto izquierdo, con los mismos cuatro tonos de la malla: la tarjeta dice a qué parte de la ruta pertenece sin gastar una línea de texto en decirlo. */ .ee-curso[data-etapa]::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--et-ink); } .ee-curso[data-etapa="1"]{ --et-sf:#e8eefb; --et-ink:#1b3a6b; --et-bd:#bdcdea; } .ee-curso[data-etapa="2"]{ --et-sf:#e4eefc; --et-ink:#12508f; --et-bd:#b3d1f0; } .ee-curso[data-etapa="3"]{ --et-sf:#e6f0f6; --et-ink:#1d5573; --et-bd:#b6d2e2; } .ee-curso[data-etapa="4"]{ --et-sf:#e2f2fe; --et-ink:#0a6ba8; --et-bd:#a8d8f5; } .ee-curso:hover{ text-decoration:none; border-color:var(--acc-bd); box-shadow:var(--sh-acc); transform:translateY(-3px); } /* ── El bloque de fecha ── Día grande, mes en versalita, año chico. Es el ancla visual que a la tarjeta le faltaba, y no es un adorno: estos cursos SON eventos con fecha, y la primera pregunta de quien mira la lista es cuándo. Antes la fecha era una línea de texto gris encima del título. */ .ee-curso .cab{ display:flex; align-items:flex-start; gap:.9rem; } .ee-curso .cuando{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; width:56px; padding:.4rem 0 .45rem; border-radius:var(--r-sm); background:var(--et-sf, var(--sf2)); border:1px solid var(--et-bd, var(--ln)); line-height:1; } .ee-curso .cuando b{ font-family:var(--mono); font-size:1.5rem; font-weight:500; color:var(--et-ink, var(--acc)); font-variant-numeric:tabular-nums; letter-spacing:-.03em; } .ee-curso .cuando em{ font-style:normal; font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--et-ink, var(--acc)); margin-top:.2rem; } .ee-curso .cuando i{ font-style:normal; font-family:var(--mono); font-size:10px; color:var(--mut); margin-top:.15rem; } .ee-curso .titulo{ min-width:0; display:flex; flex-direction:column; gap:.25rem; } .ee-curso h3{ margin:0; color:var(--ink); font-size:1.05rem; line-height:1.3; } .ee-curso .fase{ font-family:var(--mono); font-size:var(--t-xs); color:var(--mut); } /* Dónde y cómo se dicta. Dos marcas discretas bajo el resumen: son datos de referencia, no titulares, y por eso van en el gris de apoyo y no compiten con el nombre del curso. */ .ee-donde{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin-top:.15rem; font-size:var(--t-xs); color:var(--mut); } .ee-donde span{ display:inline-flex; align-items:center; gap:.35rem; min-width:0; } .ee-donde svg{ width:14px; height:14px; flex:none; opacity:.85; } .ee-curso .resumen{ margin:0; font-size:var(--t-sm); color:var(--ink2); /* Tres líneas y corta. Las descripciones de la base van de una línea a quince, y sin tope una tarjeta larga estira toda su fila. */ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .ee-curso .pie{ margin-top:auto; padding-top:.3rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .ee-curso .ver{ display:inline-flex; align-items:center; gap:.35rem; font-size:var(--t-sm); font-weight:600; color:var(--acc); } .ee-curso .ver svg{ width:14px; height:14px; transition:transform var(--t-fast) var(--ease); } .ee-curso:hover .ver svg{ transform:translateX(3px); } /* Entran escalonadas cuando el bloque se revela. */ /* `html.js`: sin script, `:not(.visible)` calza siempre y esto escondería las tarjetas para siempre. */ html.js .ee-revelar:not(.visible) .ee-curso{ opacity:0; transform:translateY(10px); } .ee-revelar .ee-curso{ transition:opacity 460ms var(--ease), transform 460ms var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); transition-delay:calc(var(--i, 0) * 80ms); } /* Estado del curso. Color SÓLO acá, y sólo porque el estado es lo único de la tarjeta que cambia lo que el visitante puede hacer hoy. */ .ee-estado{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-xs); font-weight:600; padding:.2rem .55rem; border-radius:99px; border:1px solid var(--ln); background:var(--sf2); color:var(--mut); } .ee-estado::before{ content:""; width:6px; height:6px; border-radius:99px; background:currentColor; flex-shrink:0; } .ee-estado.abierto{ color:var(--ok); background:var(--ok-sf); border-color:var(--ok-bd); } .ee-estado.pronto{ color:var(--warn); background:var(--warn-sf); border-color:var(--warn-bd); } /* «Iniciado» y «Cerrado» son neutros a propósito: no hay nada que hacer, así que no piden la atención del ojo. */ /* ---------------------------- 8 · LA RUTA --------------------------- */ /* El programa como camino. El orden ES el dato: Consolidación va antes que Discipulado porque hay prerrequisito, no porque quedara primero en la lista. Por eso hay espina y estaciones, y no tres tarjetas sueltas. La espina se dibuja con un pseudo-elemento sobre la lista completa, no con un borde por etapa: así el último tramo puede cortarse antes del final y la línea no queda colgando bajo la última estación. */ .ee-ruta{ list-style:none; margin:0; padding:0; position:relative; } .ee-ruta::before{ content:""; position:absolute; left:7px; top:.8rem; bottom:1.6rem; width:1px; background:var(--acc-bd); } .ee-etapa{ position:relative; padding-left:2.6rem; padding-bottom:2.5rem; } .ee-etapa:last-child{ padding-bottom:0; } /* La estación. Llena para las etapas que existen hoy; el modificador `futura` la deja hueca, que es cómo se dice «esto todavía no» sin escribir la palabra. */ .ee-etapa::before{ content:""; position:absolute; left:0; top:.55rem; width:15px; height:15px; border-radius:99px; background:var(--acc); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--acc-bd); } .ee-etapa.futura::before{ background:var(--bg); box-shadow:0 0 0 1px var(--acc-bd); } /* Sobre la sección de papel el anillo del punto tiene que morder el blanco, no el gris del fondo de página. */ .ee-seccion.papel .ee-etapa::before{ border-color:var(--sf); } .ee-seccion.papel .ee-etapa.futura::before{ background:var(--sf); } .ee-etapa h3{ margin:0 0 .35rem; font-size:1.05rem; } .ee-etapa .paso{ font-family:var(--mono); font-size:var(--t-xs); color:var(--mut); display:block; margin-bottom:.15rem; } .ee-etapa p{ margin:0 0 1rem; max-width:var(--lectura); font-size:var(--t-sm); } .ee-etapa .cursos{ display:flex; flex-wrap:wrap; gap:.5rem; } /* Ficha de curso dentro de una etapa: es una referencia, no una tarjeta. Si acá hubiera tarjetas grandes, la ruta se perdería debajo de ellas. */ .ee-ficha{ display:inline-flex; align-items:center; gap:.45rem; font-size:var(--t-sm); font-weight:500; color:var(--ink2); background:var(--sf); border:1px solid var(--ln); border-radius:99px; padding:.3rem .8rem; text-decoration:none; transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .ee-ficha:hover{ border-color:var(--acc); color:var(--acc); text-decoration:none; } /* --------------------- 8b · REDES Y REFERENCIAS --------------------- */ /* Los tres canales de la iglesia. Círculos neutros con el ícono en tinta: los colores de marca de Instagram, Facebook y YouTube juntos meten tres familias cromáticas ajenas en una página que tiene un solo acento. Se reconocen igual por la forma del ícono. */ .ee-redes{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; } .ee-red{ display:inline-flex; align-items:center; gap:.55rem; background:var(--sf); border:1px solid var(--ln); border-radius:99px; padding:.45rem .95rem .45rem .6rem; color:var(--ink2); font-size:var(--t-sm); font-weight:500; text-decoration:none; transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .ee-red:hover{ border-color:var(--acc); color:var(--acc); text-decoration:none; } .ee-red svg{ width:17px; height:17px; flex:none; } /* Índice de la Declaración de Fe. Trece artículos son demasiados para recorrer de arriba abajo buscando uno: el índice es navegación real, no un adorno. Va en dos o tres columnas según quepa. */ .ee-indice{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem 1.5rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .ee-indice a{ display:grid; grid-template-columns:1.6rem 1fr 3.6rem; gap:.5rem; align-items:center; padding:.45rem .6rem; border-radius:var(--r-sm); font-size:var(--t-sm); color:var(--ink2); text-decoration:none; border-left:2px solid transparent; } .ee-indice a:hover{ background:var(--sf3); color:var(--acc); border-left-color:var(--acc-bd); text-decoration:none; } .ee-indice .n{ font-family:var(--mono); font-size:var(--t-xs); color:var(--mut); } .ee-indice .tit{ min-width:0; } /* El peso del artículo: cuántos pasajes lo sostienen. Barra + cifra, no sólo la cifra: el ojo compara largos mucho más rápido que números, y la pregunta acá es cuál pesa más. */ .ee-indice .peso{ display:flex; align-items:center; gap:.4rem; justify-content:flex-end; } .ee-indice .peso i{ display:block; width:2rem; height:4px; border-radius:99px; background:var(--escritura-bd); position:relative; overflow:hidden; } .ee-indice .peso i::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--p); background:var(--escritura); border-radius:99px; } .ee-indice .peso b{ font-family:var(--mono); font-size:var(--t-xs); font-weight:500; color:var(--mut); font-variant-numeric:tabular-nums; min-width:1.1rem; text-align:right; } /* Artículo doctrinal. Sin caja: es texto para leer seguido, y trece cajas apiladas convierten una confesión de fe en un tablero de fichas. Lo que separa es el aire y un filete. */ /* Trece artículos son dos metros de párrafos con la misma forma. El filete de 1px entre uno y otro los separa, pero no les da RITMO: al quinto, el ojo ya no distingue dónde empieza cada cual y la página se lee como un bloque continuo. El numeral al margen resuelve eso sin agregar nada: es grande, quieto y en la serif, y funciona como los folios de un libro. Cada artículo arranca con una marca visible desde lejos. */ .ee-articulo{ display:grid; grid-template-columns:3.25rem 1fr; gap:clamp(.75rem, 2vw, 1.5rem); padding-block:clamp(1.75rem, 3vw, 2.5rem); border-top:1px solid var(--ln); } .ee-articulo:first-of-type{ border-top:0; padding-top:0; } /* El numeral. En la serif y a tamaño de titular, pero en gris muy claro: tiene que marcar el comienzo, no competir con el título. */ .ee-articulo .n{ font-family:var(--serif); font-size:clamp(1.75rem, 3vw, 2.35rem); line-height:.9; font-variant-numeric:lining-nums tabular-nums; color:var(--acc-bd); letter-spacing:-.03em; font-variation-settings:'opsz' 40, 'SOFT' 0, 'WONK' 0; transition:color var(--t-med) var(--ease); } /* Al leer un artículo —lo marca el índice lateral con `:target`, y el puntero al pasar— su numeral se enciende. Es la única señal de «estás acá» que se ve sin mirar la columna del índice. */ .ee-articulo:hover .n, .ee-articulo:target .n{ color:var(--acc); } .ee-articulo .cab{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.6rem; } .ee-articulo h3{ margin:0; font-size:1.12rem; } /* El numeral entra un instante antes que el texto: el artículo se anuncia y después se lee. */ html.js .ee-revelar.ee-articulo .n{ transform:translateY(6px); opacity:0; transition:transform 520ms var(--ease), opacity 520ms var(--ease), color var(--t-med) var(--ease); } html.js .ee-revelar.visible.ee-articulo .n{ transform:none; opacity:1; } @media (max-width: 620px){ /* Sin ancho para una columna de margen: el numeral pasa a ser una línea sobre el título, que es donde cabe. */ .ee-articulo{ grid-template-columns:1fr; gap:.35rem; } .ee-articulo .n{ font-size:1.4rem; } } /* Cuántos pasajes sostienen este artículo. En la familia de la Escritura, porque es lo que cuenta. */ .ee-articulo .refs{ font-family:var(--mono); font-size:var(--t-xs); color:var(--escritura); background:var(--escritura-sf); border:1px solid var(--escritura-bd); border-radius:99px; padding:.05rem .5rem; } /* Índice que acompaña la lectura de los trece artículos. */ .ee-indice-lat{ position:sticky; top:calc(var(--barra-h) + 1.5rem); align-self:start; } .ee-indice-lat .rot{ font-size:var(--t-xs); color:var(--mut); margin:0 0 .6rem .6rem; letter-spacing:.04em; } .ee-indice-lat ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--ln); } .ee-indice-lat a{ display:flex; gap:.5rem; padding:.32rem .7rem; font-size:var(--t-xs); line-height:1.35; color:var(--mut); text-decoration:none; border-left:2px solid transparent; margin-left:-1px; transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .ee-indice-lat a:hover{ color:var(--acc); text-decoration:none; } /* El artículo que se está leyendo. Lo marca assets/referencias.js. */ .ee-indice-lat a.act{ color:var(--acc); border-left-color:var(--acc); font-weight:600; } .ee-indice-lat .n{ font-family:var(--mono); color:var(--fnt, var(--mut)); flex:none; } @media (max-width:900px){ /* Sin ancho para una columna lateral, y el índice de arriba queda a un scroll de distancia. */ .ee-indice-lat{ display:none; } } /* Referencia bíblica enlazada. Discreta a propósito: en un párrafo con ocho citas, ocho enlaces azules subrayados hacen ilegible el texto. Se marcan con un punteado tenue y sólo se encienden al pasar por encima. */ /* Las referencias dentro del texto doctrinal: misma familia que los versículos, para que la Escritura se reconozca en todo el sitio por el mismo color. Discretas a propósito —punteado, no subrayado sólido—: en un párrafo con ocho citas, ocho enlaces marcados a fondo hacen ilegible el texto. */ .ee-ref{ color:var(--escritura); text-decoration:underline dotted var(--escritura-bd); text-underline-offset:3px; } .ee-ref:hover{ text-decoration:underline solid var(--escritura); } /* Acción destacada con icono y dos líneas de texto: ver la malla, imprimirla. Sirve para y para