/* ============================================================
Comunidad AVIVA · sitio público
============================================================
La paleta es la de la app (app/lib/core/tema.dart), no una propia:
marino, trigo y hueso. Hasta septiembre de 2026 el sitio iba en negro
y naranja, y quien pasaba de la página a la app sentía que eran dos
iglesias distintas. El naranja (`brasa`) en la app significa
"pendiente"; aquí no se usa.
El acento es trigo desde el 29-sep-2026 (antes lima, #CBF24D), igual
que en la app. La regla es la misma: solo sobre superficies oscuras,
o como relleno con texto marino encima. Trigo sobre blanco da 1.68:1
y no se lee; sobre noche, 11.25:1.
============================================================ */
@font-face {
font-family: 'Sora';
src: url('fuentes/Sora-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Sora';
src: url('fuentes/Sora-600.woff2') format('woff2');
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'Sora';
src: url('fuentes/Sora-700.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
:root {
--noche: #0E1119;
--noche-2: #131826;
--noche-3: #1B2131;
--marino: #232A4A;
--marino-osc: #161C2E;
--marino-cl: #3A456B;
--trigo: #E2C48E;
--trigo-tenue: rgba(226, 196, 142, .14);
--hueso: #EFEFEA;
--papel: #F7F7F3;
--blanco: #FFFFFF;
/* Texto sobre claro. El más tenue sigue arriba de 4.5:1 sobre hueso. */
--tinta: #161C2E;
--tinta-2: #3F4563;
--tinta-3: #585E7C;
/* Texto sobre oscuro. */
--claro: #F2F3EE;
--claro-2: rgba(242, 243, 238, .74);
--claro-3: rgba(242, 243, 238, .56);
--linea-osc: rgba(255, 255, 255, .09);
--linea-cl: rgba(22, 28, 46, .10);
--radio: 24px;
--radio-m: 18px;
--radio-s: 12px;
--sombra: 0 1px 2px rgba(22, 28, 46, .05), 0 12px 32px -12px rgba(22, 28, 46, .18);
--sombra-alta: 0 30px 80px -30px rgba(0, 0, 0, .55);
--sans: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* La Escritura va en serifa, de la que ya trae el sistema: se
distingue de lo que decimos nosotros sin descargar otra fuente. */
--serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
--ancho: 1200px;
--margen: clamp(16px, 4.5vw, 44px);
--alto-cabecera: 72px;
}
/* Transiciones entre páginas sin una línea de JavaScript. El navegador
que no las conoce navega como siempre. */
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--alto-cabecera) + 16px);
}
body {
margin: 0;
font-family: var(--sans);
font-size: 17px;
line-height: 1.65;
color: var(--tinta);
background: var(--noche);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
margin: 0;
font-weight: 700;
line-height: 1.12;
letter-spacing: -.02em;
text-wrap: balance;
}
p, li { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible {
outline: 3px solid var(--trigo);
outline-offset: 3px;
border-radius: 6px;
}
.claro :focus-visible, .papel :focus-visible { outline-color: var(--marino); }
.caja {
width: 100%;
max-width: calc(var(--ancho) + 2 * var(--margen));
margin: 0 auto;
padding: 0 var(--margen);
}
.saltar {
position: absolute;
left: 16px;
top: -80px;
z-index: 100;
padding: 10px 18px;
border-radius: 999px;
background: var(--trigo);
color: var(--marino);
font-weight: 600;
text-decoration: none;
}
.saltar:focus { top: 12px; }
.solo-lector {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ------------------------------------------------------------
Superficies
------------------------------------------------------------ */
.oscuro { background: var(--noche); color: var(--claro); }
.oscuro-2 { background: var(--noche-2); color: var(--claro); }
.marino { background: var(--marino); color: var(--claro); }
.claro { background: var(--hueso); color: var(--tinta); }
.papel { background: var(--papel); color: var(--tinta); }
.bloque { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.bloque.corto { padding: clamp(56px, 7vw, 88px) 0; }
/* Las secciones se enciman como hojas: cada una sube un poco sobre la
anterior con las esquinas redondeadas. Es lo que separa lo oscuro de
lo claro sin una raya dura entre los dos. */
.hoja {
border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
margin-top: calc(-1 * clamp(28px, 4vw, 48px));
z-index: 1;
}
.hoja + .hoja { z-index: 2; }
.hoja + .hoja + .hoja { z-index: 3; }
/* ------------------------------------------------------------
Texto
------------------------------------------------------------ */
.antetitulo {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--marino-cl);
}
.oscuro .antetitulo, .oscuro-2 .antetitulo, .marino .antetitulo { color: var(--trigo); }
.antetitulo::before {
content: '';
width: 22px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.encabezado { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.encabezado.centro { margin-left: auto; margin-right: auto; text-align: center; }
.encabezado.centro .antetitulo { justify-content: center; }
.encabezado h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.encabezado p { margin: 18px 0 0; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--tinta-2); }
.oscuro .encabezado p, .oscuro-2 .encabezado p, .marino .encabezado p { color: var(--claro-2); }
.encabezado-con-accion {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: clamp(36px, 5vw, 56px);
}
.encabezado-con-accion .encabezado { margin-bottom: 0; }
.acento {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
letter-spacing: -.01em;
}
.oscuro .acento, .oscuro-2 .acento, .marino .acento { color: var(--trigo); }
.claro .acento, .papel .acento { color: var(--marino-cl); }
/* ------------------------------------------------------------
Botones y enlaces
------------------------------------------------------------ */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
padding: 0 24px;
border: 1.5px solid transparent;
border-radius: 999px;
font: 600 15.5px/1 var(--sans);
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
white-space: nowrap;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton svg { width: 18px; height: 18px; flex: none; }
/* Sobre oscuro la acción es trigo con texto marino; sobre claro, marino
con texto blanco. Igual que en la app. */
.boton.trigo { background: var(--trigo); color: var(--marino); }
.boton.trigo:hover { background: #E8D0A5; }
.boton.marino { background: var(--marino); color: var(--blanco); }
.boton.marino:hover { background: var(--marino-cl); }
.boton.linea { border-color: rgba(242, 243, 238, .28); color: var(--claro); }
.boton.linea:hover { border-color: var(--claro); background: rgba(255, 255, 255, .06); }
.claro .boton.linea, .papel .boton.linea { border-color: rgba(22, 28, 46, .22); color: var(--tinta); }
.claro .boton.linea:hover, .papel .boton.linea:hover { border-color: var(--tinta); background: rgba(22, 28, 46, .04); }
.boton.chico { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.flecha {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
text-decoration: none;
}
.flecha::after {
content: '';
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .18s ease;
}
.flecha:hover::after { transform: translateX(4px); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
/* ------------------------------------------------------------
Cabecera
------------------------------------------------------------ */
.cabecera {
position: sticky;
top: 0;
z-index: 50;
height: var(--alto-cabecera);
/* Casi opaca: translúcida de más, sobre las secciones claras se
volvía un gris deslavado. */
background: rgba(14, 17, 25, .92);
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
border-bottom: 1px solid var(--linea-osc);
color: var(--claro);
}
.cabecera .caja {
height: 100%;
display: flex;
align-items: center;
gap: 20px;
}
.marca {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--claro);
text-decoration: none;
margin-right: auto;
}
.marca svg { width: 64px; height: auto; }
.marca span {
font-size: 15px;
font-weight: 600;
letter-spacing: .02em;
color: var(--claro-2);
}
.menu { display: flex; align-items: center; gap: 4px; }
.menu a:not(.boton) {
padding: 8px 12px;
border-radius: 999px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
color: var(--claro-2);
transition: color .15s ease, background-color .15s ease;
}
.menu a:not(.boton):hover { color: var(--claro); background: rgba(255, 255, 255, .06); }
.menu a[aria-current="page"] { color: var(--claro); }
.menu .boton { margin-left: 10px; }
/* EN VIVO: lo enciende sitio.js cuando la transmisión está al aire. */
.pildora-vivo {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 12px;
border-radius: 999px;
background: var(--trigo);
color: var(--marino);
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
}
.punto-vivo {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.8); }
}
/* El menú del teléfono es un `popover` nativo: abre y cierra, se va al
tocar afuera y con Escape, sin JavaScript. */
.abrir-menu {
display: none;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid var(--linea-osc);
border-radius: 14px;
background: rgba(255, 255, 255, .04);
color: var(--claro);
cursor: pointer;
}
.abrir-menu svg { width: 22px; height: 22px; }
.menu-movil {
inset: 0;
width: 100%;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 20px var(--margen) 32px;
border: 0;
background: var(--noche);
color: var(--claro);
overflow-y: auto;
}
.menu-movil:popover-open { display: flex; flex-direction: column; }
.menu-movil .arriba {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.menu-movil .arriba svg.logo { width: 64px; color: var(--claro); }
.menu-movil nav { display: flex; flex-direction: column; }
.menu-movil nav a {
padding: 14px 0;
border-bottom: 1px solid var(--linea-osc);
font-size: 26px;
font-weight: 600;
letter-spacing: -.02em;
text-decoration: none;
}
.menu-movil nav a[aria-current="page"] { color: var(--trigo); }
.menu-movil .boton { margin-top: 28px; }
.menu-movil .pie-menu { margin-top: auto; padding-top: 28px; color: var(--claro-3); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
.menu-movil:popover-open { animation: entrar-menu .22s ease-out; }
}
@keyframes entrar-menu {
from { opacity: 0; transform: translateY(-8px); }
}
/* En el teléfono el EN VIVO va junto al botón del menú, no dentro. */
.cabecera .pildora-vivo.solo-movil { display: none; }
@media (max-width: 960px) {
.menu { display: none; }
.abrir-menu { display: grid; }
.marca span { display: none; }
.cabecera .pildora-vivo.solo-movil { display: inline-flex; }
}
/* ------------------------------------------------------------
Las aguas: el motivo de la visión ("como las aguas cubren el mar").
Tres olas que se mueven despacio al pie de las portadas oscuras.
------------------------------------------------------------ */
.aguas {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: clamp(90px, 14vw, 180px);
overflow: hidden;
pointer-events: none;
}
.aguas svg {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100%;
max-width: none;
}
.aguas .ola-1 { fill: rgba(58, 69, 107, .28); animation: marea 28s linear infinite; }
.aguas .ola-2 { fill: rgba(35, 42, 74, .55); animation: marea 20s linear infinite reverse; bottom: -8%; }
.aguas .ola-3 { fill: var(--siguiente, var(--noche-2)); animation: marea 34s linear infinite; bottom: -18%; }
@keyframes marea { to { transform: translateX(-50%); } }
/* ------------------------------------------------------------
Portada de inicio
------------------------------------------------------------ */
.portada {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(56px, 9vw, 120px) 0 clamp(150px, 18vw, 230px);
min-height: min(92svh, 920px);
display: flex;
align-items: center;
}
.portada .brillo {
position: absolute;
inset: -20% -10% auto -10%;
height: 120%;
z-index: -2;
background:
radial-gradient(40% 50% at 78% 30%, rgba(58, 69, 107, .55), transparent 70%),
radial-gradient(35% 40% at 15% 20%, rgba(35, 42, 74, .8), transparent 70%),
radial-gradient(25% 30% at 70% 75%, rgba(226, 196, 142, .08), transparent 70%);
filter: blur(10px);
}
@media (prefers-reduced-motion: no-preference) {
.portada .brillo { animation: respirar 16s ease-in-out infinite alternate; }
}
@keyframes respirar {
to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
/* Foto de fondo (portada y llamado final). Es un ![]()
y no un
background-image para poder darle `srcset`: el teléfono baja la de
1000 px y la pantalla grande la de 2000. Encima va un velo, oscuro
del lado del texto, para que el titular se lea sobre cualquier foto. */
.foto-fondo {
position: absolute;
inset: 0;
z-index: -3;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.velo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.portada .foto-fondo { object-position: 58% 40%; }
.portada .velo {
background:
linear-gradient(90deg, rgba(14, 17, 25, .95) 0%, rgba(14, 17, 25, .84) 36%, rgba(14, 17, 25, .5) 72%, rgba(14, 17, 25, .38) 100%),
linear-gradient(180deg, rgba(14, 17, 25, .35) 0%, transparent 30%, transparent 62%, var(--noche) 100%);
}
.portada.con-foto .brillo { opacity: .45; }
@media (max-width: 880px) {
.portada .foto-fondo { object-position: 62% 30%; }
.portada .velo { background: linear-gradient(180deg, rgba(14, 17, 25, .62) 0%, rgba(14, 17, 25, .86) 45%, var(--noche) 100%); }
}
.portada-rejilla {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: clamp(36px, 5vw, 72px);
align-items: center;
}
.portada h1 {
font-size: clamp(2.6rem, 6.4vw, 5.6rem);
line-height: 1;
letter-spacing: -.035em;
margin-bottom: 26px;
}
.portada h1 .acento { display: block; margin-top: .08em; letter-spacing: -.02em; }
.portada .entrada {
max-width: 540px;
margin-bottom: 34px;
font-size: clamp(1.05rem, 1.5vw, 1.22rem);
color: var(--claro-2);
}
.ubicacion-chica {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
padding: 7px 16px 7px 8px;
border: 1px solid var(--linea-osc);
border-radius: 999px;
background: rgba(255, 255, 255, .04);
font-size: 14px;
color: var(--claro-2);
}
.ubicacion-chica b {
padding: 3px 10px;
border-radius: 999px;
background: var(--trigo-tenue);
color: var(--trigo);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
}
/* La tarjeta del domingo. Estática dice los horarios; sitio.js le pone
la fecha del próximo domingo, y el domingo en vivo se vuelve la
tarjeta de la transmisión. */
.domingo {
position: relative;
padding: clamp(24px, 3vw, 34px);
border: 1px solid var(--linea-osc);
border-radius: var(--radio);
background: linear-gradient(160deg, rgba(58, 69, 107, .38), rgba(22, 28, 46, .55));
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: var(--sombra-alta);
}
.domingo .cuando {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--trigo);
}
.domingo .faltan {
letter-spacing: 0;
text-transform: none;
font-weight: 500;
color: var(--claro-3);
}
.domingo h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 22px; }
.horas { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin-bottom: 22px; }
.hora {
padding: 14px 10px;
border: 1px solid var(--linea-osc);
border-radius: var(--radio-s);
background: rgba(14, 17, 25, .35);
text-align: center;
}
.hora b { display: block; font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.1; }
.hora span { font-size: 12.5px; color: var(--claro-3); text-transform: uppercase; letter-spacing: .08em; }
.domingo .donde {
display: flex;
gap: 12px;
align-items: flex-start;
padding-top: 20px;
border-top: 1px solid var(--linea-osc);
font-size: 14.5px;
color: var(--claro-2);
}
.domingo .donde svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--trigo); }
.domingo .donde a { color: var(--claro); font-weight: 600; }
.domingo .vivo { display: none; }
.domingo[data-estado="vivo"] .normal { display: none; }
.domingo[data-estado="vivo"] .vivo { display: block; }
.domingo[data-estado="vivo"] {
border-color: rgba(226, 196, 142, .35);
box-shadow: 0 0 0 1px rgba(226, 196, 142, .15), var(--sombra-alta);
}
/* En tinte y no en relleno: el relleno de la tarjeta es "Ver la
transmisión". Con los dos en trigo, ninguno señalaba (la misma regla
de la app: un relleno de acento por pantalla). */
.domingo .vivo .etiqueta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 6px 12px;
border-radius: 999px;
background: var(--trigo-tenue);
color: var(--trigo);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.domingo .vivo img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radio-s);
margin-bottom: 18px;
}
.domingo .vivo h2 { margin-bottom: 18px; }
/* Las rejillas de una columna van con minmax(0, 1fr) y NUNCA con 1fr a
secas: 1fr no deja que la columna sea más angosta que su contenido,
y una sola palabra larga (la CLABE) ensanchaba la página en el
teléfono. */
@media (max-width: 880px) {
.portada { min-height: 0; }
.portada-rejilla { grid-template-columns: minmax(0, 1fr); }
}
/* ------------------------------------------------------------
Versículo del día
------------------------------------------------------------ */
.versiculo { text-align: center; }
.versiculo .comillas {
width: 44px;
height: 44px;
margin: 0 auto 22px;
color: var(--trigo);
}
.versiculo blockquote {
max-width: 880px;
margin: 0 auto;
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.45rem, 3vw, 2.25rem);
line-height: 1.38;
letter-spacing: -.005em;
text-wrap: balance;
}
.versiculo .cita {
margin-top: 22px;
font-size: 14px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--trigo);
}
.versiculo .titulo-devocional { margin-top: 6px; color: var(--claro-2); font-size: 15px; }
/* La licencia de la NVI pide el aviso y el enlace a Biblica CADA vez
que se muestra el texto. Chico, pero siempre. */
.licencia {
max-width: 640px;
margin: 26px auto 0;
font-size: 12px;
line-height: 1.5;
color: var(--claro-3);
}
.licencia a { color: var(--claro-2); }
/* ------------------------------------------------------------
Mensajes
------------------------------------------------------------ */
.mensajes-rejilla {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: clamp(24px, 3vw, 40px);
align-items: start;
}
/* Un video es una miniatura que se vuelve reproductor al tocarla.
Cargar el iframe de YouTube de entrada pesa más de medio mega; así
solo lo baja quien de verdad le da play. Sin JavaScript es un enlace
a YouTube y funciona igual. */
.video {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radio);
background: var(--noche-3);
color: var(--claro);
text-decoration: none;
isolation: isolate;
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.video:hover img { transform: scale(1.03); }
.video::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(14, 17, 25, .55));
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reproducir {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: clamp(58px, 7vw, 84px);
height: clamp(58px, 7vw, 84px);
border-radius: 50%;
background: var(--trigo);
color: var(--marino);
transform: translate(-50%, -50%);
box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
transition: transform .2s ease;
}
.reproducir svg { width: 42%; height: 42%; margin-left: 6%; }
.video:hover .reproducir { transform: translate(-50%, -50%) scale(1.07); }
.video.chico .reproducir { width: 44px; height: 44px; }
.video.cargado::after, .video.cargado .reproducir, .video.cargado img { display: none; }
.destacado-meta { margin-top: 22px; }
.serie {
display: inline-block;
margin-bottom: 10px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--trigo);
}
.claro .serie, .papel .serie { color: var(--marino-cl); }
.destacado-meta h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.meta { margin-top: 8px; font-size: 14.5px; color: var(--claro-3); }
.claro .meta, .papel .meta { color: var(--tinta-3); }
.lista-mensajes { display: grid; gap: 6px; }
.lista-mensajes > .etiqueta-lista {
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--claro-3);
}
.mensaje-fila {
display: grid;
grid-template-columns: 148px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 10px;
margin: 0 -10px;
border-radius: var(--radio-m);
text-decoration: none;
transition: background-color .15s ease;
}
.mensaje-fila:hover { background: rgba(255, 255, 255, .05); }
.mensaje-fila .miniatura {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radio-s);
background: var(--noche-3);
}
.mensaje-fila img { width: 100%; height: 100%; object-fit: cover; }
.mensaje-fila h4 { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.mensaje-fila .meta { margin-top: 4px; font-size: 13px; }
.lista-mensajes .boton { margin-top: 18px; justify-self: start; }
@media (max-width: 880px) {
.mensajes-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
.mensaje-fila { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
}
/* ------------------------------------------------------------
Tu primera visita
------------------------------------------------------------ */
.visita {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.paso {
padding: 28px 24px;
border-radius: var(--radio);
background: var(--blanco);
box-shadow: var(--sombra);
}
.paso .icono {
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: 22px;
border-radius: 16px;
background: var(--marino);
color: var(--trigo);
}
.paso .icono svg { width: 26px; height: 26px; }
.paso h3 { font-size: 1.2rem; margin-bottom: 10px; }
.paso p { margin: 0; font-size: 15.5px; color: var(--tinta-2); }
.visita-pie {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-top: 28px;
padding: 26px 30px;
border-radius: var(--radio);
background: var(--marino);
color: var(--claro);
}
.visita-pie p { margin: 0; max-width: 620px; color: var(--claro-2); }
/* La franja es marina aunque viva en una sección clara: sus botones de
contorno van en claro, no en el marino de la sección. */
.claro .visita-pie .boton.linea { border-color: rgba(242, 243, 238, .28); color: var(--claro); }
.claro .visita-pie .boton.linea:hover { border-color: var(--claro); background: rgba(255, 255, 255, .06); }
.visita-pie strong { color: var(--claro); }
@media (max-width: 980px) { .visita { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* El mosaico de "Tu primera visita": fotos de un domingo de verdad. La
de en medio baja un poco, para que no se lea como una tabla. En el
teléfono se vuelve una tira que se desliza con el dedo. */
.mosaico {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: clamp(36px, 5vw, 56px);
}
.mosaico figure {
position: relative;
margin: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radio);
background: var(--marino);
box-shadow: var(--sombra);
}
.mosaico figure:nth-child(2) { transform: translateY(36px); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.mosaico figure:hover img { transform: scale(1.04); }
.mosaico figcaption {
position: absolute;
left: 14px;
bottom: 14px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(14, 17, 25, .7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--claro);
font-size: 13px;
font-weight: 600;
}
@media (max-width: 760px) {
.mosaico {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 74%;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-left: calc(-1 * var(--margen));
margin-right: calc(-1 * var(--margen));
padding: 0 var(--margen) 8px;
scroll-padding: 0 var(--margen);
scrollbar-width: none;
}
.mosaico figure { scroll-snap-align: start; }
.mosaico figure:nth-child(2) { transform: none; }
}
@media (max-width: 560px) { .visita { grid-template-columns: minmax(0, 1fr); } }
/* ------------------------------------------------------------
Eventos
------------------------------------------------------------ */
.eventos {
display: grid;
/* auto-fit y no auto-fill: con dos eventos, cada uno toma la mitad
en vez de dejar un hueco del tamaño de un tercero. */
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 18px;
}
.eventos:has(> :nth-child(4)) { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.evento {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radio);
background: var(--blanco);
box-shadow: var(--sombra);
}
.evento .imagen { aspect-ratio: 16 / 9; background: var(--hueso); overflow: hidden; }
.evento .imagen img { width: 100%; height: 100%; object-fit: cover; }
.evento .cuerpo { display: flex; gap: 18px; padding: 22px; }
.fecha-evento {
flex: none;
width: 64px;
padding: 8px 0 10px;
border-radius: 14px;
background: var(--hueso);
text-align: center;
line-height: 1;
}
.fecha-evento .mes { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-cl); }
.fecha-evento .dia { display: block; margin-top: 4px; font-size: 1.8rem; font-weight: 700; letter-spacing: -.03em; color: var(--marino); }
.evento h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 8px; }
.evento .detalle { display: grid; gap: 4px; font-size: 14px; color: var(--tinta-3); }
.evento .detalle span { display: flex; gap: 8px; align-items: center; }
.evento .detalle svg { width: 15px; height: 15px; flex: none; }
.evento p { margin: 12px 0 0; font-size: 14.5px; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ------------------------------------------------------------
Encuentra tu lugar (baldosas)
------------------------------------------------------------ */
.baldosas {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: minmax(210px, auto);
gap: 16px;
}
.baldosa {
position: relative;
display: flex;
flex-direction: column;
grid-column: span 2;
padding: clamp(24px, 2.6vw, 32px);
overflow: hidden;
border-radius: var(--radio);
background: var(--blanco);
color: var(--tinta);
text-decoration: none;
box-shadow: var(--sombra);
transition: transform .25s ease, box-shadow .25s ease;
}
.baldosa:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(22, 28, 46, .05), 0 22px 48px -18px rgba(22, 28, 46, .28); }
.baldosa.ancha { grid-column: span 4; }
.baldosa.mitad { grid-column: span 3; }
.baldosa.oscura { background: var(--marino); color: var(--claro); }
.baldosa.noche { background: var(--noche-2); color: var(--claro); }
.baldosa .icono {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: auto;
border-radius: 14px;
background: var(--hueso);
color: var(--marino);
}
.baldosa.oscura .icono, .baldosa.noche .icono { background: rgba(255, 255, 255, .08); color: var(--trigo); }
.baldosa .icono svg { width: 24px; height: 24px; }
.baldosa h3 { margin-top: 28px; font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.baldosa p { margin: 10px 0 0; font-size: 15px; color: var(--tinta-2); max-width: 440px; }
.baldosa.oscura p, .baldosa.noche p { color: var(--claro-2); }
.baldosa .flecha { margin-top: 18px; }
.baldosa .cifra {
position: absolute;
top: clamp(20px, 2.4vw, 28px);
right: clamp(24px, 2.6vw, 32px);
font-size: clamp(3rem, 6vw, 4.8rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.05em;
color: var(--trigo);
text-align: right;
}
/* Baldosa con foto de fondo: la foto abajo, un degradado que oscurece
la mitad donde va el texto, y el texto encima en claro. */
.baldosa.con-foto { background: var(--noche-2); color: var(--claro); }
.baldosa .fondo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%;
transition: transform .8s ease;
}
.baldosa.con-foto::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(14, 17, 25, .2) 0%, rgba(14, 17, 25, .5) 40%, rgba(14, 17, 25, .93) 100%);
}
.baldosa.con-foto > :not(.fondo) { position: relative; z-index: 1; }
.baldosa.con-foto p { color: var(--claro-2); }
.baldosa.con-foto .icono {
background: rgba(255, 255, 255, .14);
color: var(--trigo);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.baldosa.con-foto:hover .fondo { transform: scale(1.05); }
.baldosa .cifra small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--claro-2); text-transform: uppercase; }
@media (max-width: 980px) {
.baldosas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.baldosa, .baldosa.mitad { grid-column: span 1; }
.baldosa.ancha { grid-column: span 2; }
}
@media (max-width: 600px) {
.baldosas { grid-template-columns: minmax(0, 1fr); }
.baldosa, .baldosa.ancha, .baldosa.mitad { grid-column: span 1; }
}
/* ------------------------------------------------------------
Pastores
------------------------------------------------------------ */
.pastores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pastor .retrato {
aspect-ratio: 4 / 5;
overflow: hidden;
margin-bottom: 18px;
border-radius: var(--radio);
background: var(--marino);
}
.pastor .retrato img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pastor:hover .retrato img { transform: scale(1.04); }
.pastor .inicial {
display: grid;
place-items: center;
height: 100%;
font-size: 3rem;
font-weight: 700;
color: var(--trigo);
}
.pastor h3 { font-size: 1.15rem; }
.pastor .rol {
margin-top: 4px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--marino-cl);
}
.pastor .bio { margin-top: 12px; font-size: 15px; color: var(--tinta-2); }
.pastores.con-bio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pastores.con-bio .pastor {
display: grid;
grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
gap: 24px;
align-items: start;
padding: 20px;
border-radius: var(--radio);
background: var(--blanco);
box-shadow: var(--sombra);
}
.pastores.con-bio .retrato { margin: 0; border-radius: var(--radio-m); }
@media (max-width: 980px) {
.pastores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pastores.con-bio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
.pastores.con-bio .pastor { grid-template-columns: minmax(0, 1fr); }
.pastores.con-bio .retrato { max-width: 240px; }
}
/* ------------------------------------------------------------
La app
------------------------------------------------------------ */
.app-rejilla {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.ventajas { display: grid; gap: 14px; margin: 30px 0 34px; padding: 0; list-style: none; }
.ventajas li { display: flex; gap: 14px; align-items: flex-start; color: var(--claro-2); }
.ventajas li strong { color: var(--claro); font-weight: 600; }
.ventajas svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--trigo); }
.tiendas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tienda {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 8px 22px 8px 18px;
border-radius: 16px;
background: var(--claro);
color: var(--marino-osc);
text-decoration: none;
transition: transform .18s ease;
}
.tienda:hover { transform: translateY(-2px); }
.tienda svg { width: 26px; height: 26px; }
.tienda span { display: grid; line-height: 1.15; font-size: 12px; }
.tienda b { font-size: 17px; letter-spacing: -.01em; }
.tienda.pronto { background: transparent; color: var(--claro-2); border: 1px dashed rgba(242, 243, 238, .3); cursor: default; }
.tienda.pronto:hover { transform: none; }
.telefonos {
position: relative;
height: clamp(430px, 48vw, 600px);
}
.telefono {
position: absolute;
width: clamp(200px, 21vw, 270px);
aspect-ratio: 1320 / 2868;
padding: 9px;
border-radius: clamp(34px, 3.4vw, 44px);
background: #05070C;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--sombra-alta);
}
.telefono img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: clamp(26px, 2.8vw, 36px);
}
.telefono.atras { left: 4%; top: 6%; transform: rotate(-7deg); opacity: .92; }
.telefono.frente { right: 6%; top: 0; transform: rotate(4deg); }
@media (max-width: 880px) {
.app-rejilla { grid-template-columns: minmax(0, 1fr); }
.telefonos { height: clamp(420px, 110vw, 540px); max-width: 520px; width: 100%; margin: 0 auto; }
}
/* ------------------------------------------------------------
Dar
------------------------------------------------------------ */
.dar-rejilla {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
.banco {
padding: clamp(24px, 3vw, 34px);
border-radius: var(--radio);
background: var(--blanco);
box-shadow: var(--sombra);
}
.banco .fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--linea-cl);
}
.banco .fila:last-child { border-bottom: 0; padding-bottom: 0; }
.banco .fila:first-child { padding-top: 0; }
.banco dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.banco .fila > div { min-width: 0; }
.banco dd {
margin: 4px 0 0;
font-size: clamp(1rem, 4vw, 1.12rem);
font-weight: 600;
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
/* 18 dígitos sin espacios: sin esto, en un teléfono angosto la CLABE
empujaba la página entera hacia los lados. */
overflow-wrap: anywhere;
}
.copiar {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 16px;
border: 1.5px solid rgba(22, 28, 46, .18);
border-radius: 999px;
background: transparent;
color: var(--tinta);
font: 600 14px/1 var(--sans);
cursor: pointer;
}
.copiar:hover { border-color: var(--tinta); }
.copiar[data-copiado] { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.copiar svg { width: 16px; height: 16px; }
@media (max-width: 880px) { .dar-rejilla { grid-template-columns: minmax(0, 1fr); } }
/* ------------------------------------------------------------
Ubicación y datos
------------------------------------------------------------ */
.ubicacion-rejilla {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: clamp(28px, 4vw, 56px);
align-items: stretch;
}
.dato {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 0;
border-bottom: 1px solid var(--linea-cl);
}
.dato:first-child { padding-top: 0; }
.dato svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--marino-cl); }
.dato .etiqueta { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.dato .valor { margin-top: 2px; font-weight: 500; }
.dato a { text-decoration-color: rgba(22, 28, 46, .3); text-underline-offset: 3px; }
.ubicacion-rejilla .acciones { margin-top: 28px; }
.marco-mapa {
position: relative;
min-height: 360px;
overflow: hidden;
border-radius: var(--radio);
background: var(--noche-3);
box-shadow: var(--sombra);
}
.marco-mapa iframe, .marco-mapa #mapa-grupos { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.marco-mapa.alto { min-height: clamp(380px, 56vh, 560px); }
@media (max-width: 880px) { .ubicacion-rejilla { grid-template-columns: minmax(0, 1fr); } }
/* ------------------------------------------------------------
Llamado final
------------------------------------------------------------ */
.llamado {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(80px, 11vw, 150px) 0 clamp(150px, 17vw, 220px);
text-align: center;
}
.llamado .brillo {
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(50% 60% at 50% 30%, rgba(58, 69, 107, .5), transparent 70%);
}
.llamado .foto-fondo { object-position: 60% 35%; }
.llamado .velo {
background:
radial-gradient(60% 70% at 50% 45%, rgba(14, 17, 25, .55), rgba(14, 17, 25, .85) 100%),
linear-gradient(180deg, var(--noche) 0%, transparent 25%, transparent 70%, var(--noche-2) 100%);
}
.llamado h2 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); letter-spacing: -.035em; line-height: 1.02; }
.llamado p { max-width: 580px; margin: 22px auto 34px; font-size: 1.12rem; color: var(--claro-2); }
.llamado .acciones { justify-content: center; }
/* ------------------------------------------------------------
Pie
------------------------------------------------------------ */
.pie { padding: 72px 0 36px; background: var(--noche-2); color: var(--claro-2); font-size: 15px; }
.pie-rejilla {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
gap: 40px;
}
.pie .logo { width: 76px; color: var(--claro); margin-bottom: 20px; }
.pie h4 { margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--claro); }
.pie .columna a { display: block; padding: 5px 0; text-decoration: none; }
.pie a:hover { color: var(--claro); }
.pie .contacto div { margin-top: 6px; }
.pie .contacto a { text-decoration: none; }
.redes { display: flex; gap: 10px; margin-top: 22px; }
.redes a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--linea-osc);
border-radius: 50%;
transition: background-color .15s ease, color .15s ease;
}
.redes a:hover { background: var(--trigo); color: var(--marino); border-color: var(--trigo); }
.redes svg { width: 18px; height: 18px; }
.pie .tiendas { margin-top: 24px; }
.pie .tienda { min-height: 50px; padding: 6px 18px 6px 14px; }
.pie .tienda b { font-size: 15px; }
.legal {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin-top: 56px;
padding-top: 26px;
border-top: 1px solid var(--linea-osc);
font-size: 13.5px;
color: var(--claro-3);
}
.legal a { text-decoration: none; }
.legal .derecha { margin-left: auto; }
@media (max-width: 880px) {
.pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie-rejilla > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.legal .derecha { margin-left: 0; }
}
/* ------------------------------------------------------------
Páginas interiores
------------------------------------------------------------ */
.cabecera-pagina {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(64px, 9vw, 120px) 0 clamp(130px, 15vw, 190px);
}
.cabecera-pagina .brillo {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(40% 70% at 85% 10%, rgba(58, 69, 107, .5), transparent 70%),
radial-gradient(30% 50% at 5% 90%, rgba(35, 42, 74, .8), transparent 70%);
}
/* Cabecera con retrato: el texto a la izquierda y una foto vertical a
la derecha. Las fotos de un domingo casi siempre son verticales, y
así se usan enteras en vez de recortarlas a una franja. */
.cabecera-pagina .rejilla-cabecera {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.foto-cabecera {
position: relative;
justify-self: end;
width: 100%;
max-width: 380px;
margin: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radio);
box-shadow: var(--sombra-alta);
transform: rotate(2deg);
}
.foto-cabecera img { width: 100%; height: 100%; object-fit: cover; }
.foto-cabecera::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@media (max-width: 880px) {
.cabecera-pagina .rejilla-cabecera { grid-template-columns: minmax(0, 1fr); }
.foto-cabecera { justify-self: stretch; max-width: none; aspect-ratio: 16 / 10; transform: none; }
.foto-cabecera img { object-position: center 30%; }
}
.cabecera-pagina h1 { max-width: 900px; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.035em; }
.cabecera-pagina .entrada { max-width: 640px; margin: 24px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--claro-2); }
/* Texto largo que viene de la base (info_comunidad). */
.prosa { max-width: 70ch; font-size: 1.06rem; color: var(--tinta-2); }
.prosa.ancha { max-width: 78ch; }
.prosa > :first-child { margin-top: 0; }
.prosa p { margin: 0 0 1.1em; }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa h2 { margin: 1.8em 0 .6em; font-size: 1.6rem; color: var(--tinta); }
.prosa h3 { margin: 1.9em 0 .6em; font-size: 1.28rem; color: var(--tinta); }
.prosa ul, .prosa ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prosa li { margin: .45em 0; padding-left: .3em; }
.prosa li::marker { color: var(--marino-cl); font-weight: 700; }
.prosa blockquote {
margin: 1.4em 0;
padding: 4px 0 4px 24px;
border-left: 3px solid var(--marino-cl);
font-family: var(--serif);
font-size: 1.18em;
font-style: italic;
line-height: 1.5;
color: var(--tinta);
}
.prosa blockquote p { margin: 0 0 .5em; }
.prosa blockquote p:last-child { margin: 0; }
.prosa blockquote strong { font-family: var(--sans); font-style: normal; font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-cl); }
.prosa hr { margin: 2em 0 1.2em; border: 0; border-top: 1px solid var(--linea-cl); }
.prosa hr + p { font-size: 12.5px; line-height: 1.5; color: var(--tinta-3); }
.prosa a { color: var(--marino); text-underline-offset: 3px; }
.oscuro .prosa, .marino .prosa, .oscuro-2 .prosa { color: var(--claro-2); }
.oscuro .prosa strong, .marino .prosa strong { color: var(--claro); }
.marino .prosa blockquote, .oscuro .prosa blockquote { border-color: var(--trigo); color: var(--claro); }
.marino .prosa blockquote strong { color: var(--trigo); }
/* Nosotros */
.cifras {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: clamp(56px, 7vw, 88px);
}
.cifra-bloque {
padding: 26px 24px;
border-radius: var(--radio);
background: var(--blanco);
box-shadow: var(--sombra);
}
.cifra-bloque b { display: block; font-size: clamp(2.3rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; color: var(--marino); }
.cifra-bloque span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--tinta-3); }
@media (max-width: 880px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.historia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); }
.historia h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); position: sticky; top: calc(var(--alto-cabecera) + 32px); align-self: start; }
@media (max-width: 880px) { .historia { grid-template-columns: minmax(0, 1fr); } .historia h2 { position: static; } }
.vision-mision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tarjeta-vm {
padding: clamp(28px, 3.4vw, 44px);
border-radius: var(--radio);
background: var(--marino);
color: var(--claro);
}
.tarjeta-vm .prosa > p:first-child strong {
display: block;
margin-bottom: 8px;
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -.02em;
color: var(--claro);
}
@media (max-width: 880px) { .vision-mision { grid-template-columns: minmax(0, 1fr); } }
/* En qué creemos: índice fijo al costado */
.con-indice { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.indice {
position: sticky;
top: calc(var(--alto-cabecera) + 32px);
display: grid;
gap: 2px;
}
.indice .etiqueta { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.indice a {
padding: 9px 14px;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
color: var(--tinta-2);
text-decoration: none;
}
.indice a:hover { background: rgba(22, 28, 46, .06); color: var(--tinta); }
.capitulo { padding-bottom: clamp(48px, 6vw, 72px); margin-bottom: clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--linea-cl); }
.capitulo:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.capitulo h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 24px; }
@media (max-width: 880px) {
.con-indice { grid-template-columns: minmax(0, 1fr); }
.indice { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
.indice .etiqueta { width: 100%; margin-bottom: 0; }
.indice a { border: 1px solid var(--linea-cl); border-radius: 999px; font-size: 14px; }
}
.areas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
margin-top: 28px;
}
.area {
padding: 18px 20px;
border-radius: var(--radio-m);
background: var(--blanco);
box-shadow: var(--sombra);
}
.area h3 { font-size: 1.02rem; margin-bottom: 6px; }
.area p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-3); }
/* Los equipos por clasificación (Los domingos, Niños…), como en la app. */
.equipos h4 {
margin: 32px 0 0;
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--marino-cl);
}
.equipos h4 + .areas { margin-top: 12px; }
/* Grupos */
.grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.grupo {
padding: 22px;
border-radius: var(--radio-m);
background: var(--blanco);
box-shadow: var(--sombra);
}
.grupo .colonia { font-weight: 600; font-size: 1.05rem; }
.grupo .horarios { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--tinta-2); }
.grupo .horarios li { padding: 3px 0; }
.grupo .cuantos {
display: inline-block;
margin-top: 12px;
padding: 4px 10px;
border-radius: 999px;
background: var(--hueso);
font-size: 12.5px;
font-weight: 600;
color: var(--marino-cl);
}
.nota { margin-top: 22px; font-size: 14.5px; color: var(--tinta-3); max-width: 720px; }
.oscuro .nota, .oscuro-2 .nota { color: var(--claro-3); }
.buscar-colonia {
width: 100%;
max-width: 420px;
margin-bottom: 22px;
}
/* ------------------------------------------------------------
Formularios
------------------------------------------------------------ */
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contacto-rejilla h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.contacto-rejilla .prosa { margin-top: 16px; }
@media (max-width: 880px) { .contacto-rejilla { grid-template-columns: minmax(0, 1fr); } }
.forma {
display: grid;
gap: 8px;
padding: clamp(24px, 3vw, 36px);
border-radius: var(--radio);
background: var(--blanco);
box-shadow: var(--sombra);
}
.forma label:not(.casilla) { margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.forma label:first-child { margin-top: 0; }
.forma small { font-weight: 400; color: var(--tinta-3); }
.campo, .forma input[type="text"], .forma input[type="tel"], .forma input[type="email"], .forma input[type="search"], .forma textarea, .forma select {
width: 100%;
min-height: 52px;
padding: 13px 16px;
border: 1.5px solid rgba(22, 28, 46, .16);
border-radius: 14px;
background: var(--papel);
color: var(--tinta);
font: 400 16px/1.4 var(--sans);
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.forma textarea { resize: vertical; min-height: 130px; }
.campo:focus, .forma input:focus, .forma textarea:focus, .forma select:focus {
outline: none;
border-color: var(--marino);
background: var(--blanco);
box-shadow: 0 0 0 4px rgba(35, 42, 74, .12);
}
.casilla { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 4px; cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marino); flex: none; }
.casilla span { font-size: 15px; font-weight: 600; }
.casilla small { display: block; font-weight: 400; }
.ayuda { margin: 4px 0 0; font-size: 13px; color: var(--tinta-3); }
.forma .boton { margin-top: 18px; justify-self: start; }
.estado { margin: 6px 0 0; font-size: 14.5px; min-height: 1.4em; }
.estado.bien { color: #1F6B3A; font-weight: 600; }
.estado.mal { color: #A3261B; font-weight: 600; }
/* El campo trampa para bots: fuera de la vista y del lector de pantalla. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ------------------------------------------------------------
Mensajes (catálogo)
------------------------------------------------------------ */
.herramientas {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.buscador { position: relative; flex: 1 1 320px; max-width: 460px; }
.buscador svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.buscador input { padding-left: 48px; background: var(--blanco); }
.cuenta { font-size: 14.5px; color: var(--tinta-3); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 32px; scrollbar-width: thin; }
.chip {
flex: none;
min-height: 42px;
padding: 0 18px;
border: 1.5px solid rgba(22, 28, 46, .16);
border-radius: 999px;
background: var(--blanco);
color: var(--tinta-2);
font: 600 14.5px/1 var(--sans);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--marino); color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px 20px; }
.tarjeta-mensaje { text-decoration: none; color: var(--tinta); }
.tarjeta-mensaje .video { border-radius: var(--radio-m); margin-bottom: 14px; box-shadow: var(--sombra); }
.tarjeta-mensaje .video .reproducir { width: 50px; height: 50px; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.tarjeta-mensaje:hover .video .reproducir, .tarjeta-mensaje:focus-visible .video .reproducir { opacity: 1; }
.tarjeta-mensaje h3 { font-size: 1.06rem; line-height: 1.3; letter-spacing: -.01em; }
.tarjeta-mensaje .meta { font-size: 13.5px; }
.sin-resultados { padding: 48px 0; text-align: center; color: var(--tinta-3); }
/* En el teléfono, 161 tarjetas a lo ancho son una lista interminable:
se vuelven filas, miniatura a la izquierda y texto a la derecha. */
@media (max-width: 640px) {
.catalogo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tarjeta-mensaje {
display: grid;
grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
column-gap: 14px;
align-content: center;
align-items: center;
}
.tarjeta-mensaje .video { grid-row: span 3; margin: 0; border-radius: var(--radio-s); }
.tarjeta-mensaje .serie { margin: 0 0 2px; font-size: 11px; align-self: end; }
.tarjeta-mensaje h3 { font-size: .98rem; }
.tarjeta-mensaje .meta { margin-top: 2px; font-size: 12.5px; align-self: start; }
.tarjeta-mensaje .video .reproducir { display: none; }
}
/* El reproductor del catálogo: un