/* =====================================================================
   evangelizacion — Home · Red de Nueva Evangelizacion
   Handoff de Claude Design: "Landing page — escritorio" (1440) y
   "Landing page — movil 390px".
   ---------------------------------------------------------------------
   Convenciones: 1rem = 10px (html 62.5%). Los tamanos son los px EXACTOS del
   handoff. Contenedor de 1312 con 64 de respiro lateral (20 en el celular).
   Cero clases de Bootstrap 3 en el markup propio (regla dura 8).
   Radios del sistema: 14 (cards), 10 (botones y flechas), 999 (filtro).
   Quiebres: 1199 (el nav de siete items deja de caber: hamburguesa),
   991 (grids a dos columnas) y 767 (el diseno movil).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS — paleta por CANAL (--x-rgb) + solido derivado. Toda variante
   con alfa sale del canal y NUNCA repite el RGB a mano (regla dura 21).
   Lo que el cliente puede cambiar (index.php, pge_color_style) son los
   ROLES --c-gold-rgb (botones dorados) y --c-title-rgb (titulares).
   --------------------------------------------------------------------- */
:root {
	/* superficies */
	--c-crema-rgb: 250,245,234;		/* #FAF5EA — fondo de pagina, cabecera, blog, semana */
	--c-marfil-rgb: 252,250,244;	/* #FCFAF4 — banda de noticias */
	--c-white-rgb: 255,255,255;
	--c-pino-rgb: 18,48,31;			/* #12301F — barra superior, accesos, curva de recursos, pie */
	--c-musgo-rgb: 27,58,47;		/* #1B3A2F — boton solido, filtro activo, tarjeta pastoral */
	--c-video-rgb: 42,58,50;		/* #2A3A32 — fondo del video sin foto */
	--c-salvia-rgb: 220,230,218;	/* #DCE6DA — noticia sin foto */
	--c-niebla-rgb: 243,247,241;	/* #F3F7F1 — el rombo de puntos de venta */
	--c-hoja-rgb: 241,245,238;		/* #F1F5EE — fila del submenu bajo el puntero */

	/* texto */
	--c-ink-rgb: 20,32,26;			/* #14201A — titulares y texto fuerte */
	--c-title-rgb: 20,32,26;		/* ROL: color de los titulares (editable) */
	--c-texto-rgb: 74,90,82;		/* #4A5A52 — texto corrido */
	--c-muted-rgb: 107,122,113;		/* #6B7A71 — fechas y metadatos */
	--c-sub-rgb: 44,61,52;			/* #2C3D34 — enlaces del submenu */
	--c-leer-rgb: 60,76,67;			/* #3C4C43 — "Leer mas" */
	--c-lino-rgb: 199,214,197;		/* #C7D6C5 — texto sobre verde */
	--c-topbar-rgb: 217,227,216;	/* #D9E3D8 — texto de la barra superior */
	--c-banda-rgb: 228,233,222;		/* #E4E9DE — texto de la banda */
	--c-papel-rgb: 239,230,210;		/* #EFE6D2 — lema e iconos de la barra superior */
	--c-trigo-rgb: 242,231,206;		/* #F2E7CE — titulos de columna del pie */
	--c-gris-pie-rgb: 143,166,148;	/* #8FA694 — copyright */
	--c-sep-pie-rgb: 69,96,79;		/* #45604F — separador del copyright */
	--c-dir-movil-rgb: 159,184,165;	/* #9FB8A5 — direccion del pie en el celular */

	/* dorados */
	--c-gold-rgb: 138,99,41;		/* #8A6329 — ROL: botones dorados y acento (editable) */
	--c-gold-osc-rgb: 111,78,31;	/* #6F4E1F — hover del boton dorado */
	--c-oro-rgb: 195,161,95;		/* #C3A15F — filetes, chevrons, iconos del pie */
	--c-oro-claro-rgb: 217,184,119;	/* #D9B877 — acento del titular de la banda */
	--c-oro-pie-rgb: 227,201,142;	/* #E3C98E — hover de enlaces sobre verde */
	--c-calendario-rgb: 192,146,66;	/* #C09242 — icono de la fecha */

	/* lineas */
	--c-borde-rgb: 226,218,202;		/* #E2DACA — bordes de banda, cabecera */
	--c-card-rgb: 230,220,198;		/* #E6DCC6 — borde de las cards */
	--c-card-hover-rgb: 214,196,162;/* #D6C4A2 — borde de la card bajo el puntero */
	--c-filete-rgb: 217,207,184;	/* #D9CFB8 — filete bajo la portada */
	--c-btn-borde-rgb: 207,199,180;	/* #CFC7B4 — borde de flechas y buscador */
	--c-flecha-pie-rgb: 211,192,160;/* #D3C0A0 — borde de las flechas de puntos */
	--c-noticias-borde-rgb: 237,229,212; /* #EDE5D4 */
	--c-recursos-borde-rgb: 239,231,214; /* #EFE7D6 */
	--c-linea-punto-rgb: 228,234,225; /* #E4EAE1 — filete de "Ver en Google Maps" */
	--c-menu-linea-rgb: 240,234,221;/* #F0EADD — filetes del menu del celular */
	--c-verde-borde-rgb: 62,98,82;	/* #3E6252 — flechas y pastillas sobre verde */
	--c-pie-linea-rgb: 42,74,58;	/* #2A4A3A — filete del copyright en el celular */
	--c-sombra-rgb: 12,33,22;		/* #0C2116 — sombra de las portadas de libro */

	--c-crema: rgb(var(--c-crema-rgb));
	--c-marfil: rgb(var(--c-marfil-rgb));
	--c-white: rgb(var(--c-white-rgb));
	--c-pino: rgb(var(--c-pino-rgb));
	--c-musgo: rgb(var(--c-musgo-rgb));
	--c-ink: rgb(var(--c-ink-rgb));
	--c-title: rgb(var(--c-title-rgb));
	--c-texto: rgb(var(--c-texto-rgb));
	--c-muted: rgb(var(--c-muted-rgb));
	--c-lino: rgb(var(--c-lino-rgb));
	--c-gold: rgb(var(--c-gold-rgb));
	--c-oro: rgb(var(--c-oro-rgb));

	--f-serif: "Newsreader", Georgia, serif;
	--f-sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;

	--maxw: 131.2rem;				/* 1312: el contenedor del diseno (CONTENIDO, pitfall 64) */
	--gut: 6.4rem;					/* respiro lateral por FUERA del max-width */
	--pad-sec: 9.6rem;				/* el ritmo vertical de las bandas */
	--r-card: 1.4rem;
	--r-btn: 1rem;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------------
   2. BASE + reset del CSS global del CMS (cms-css-herencia.py). El core
   carga cinco hojas con reglas de ELEMENTO (p, li, h1..h6, a:hover) que le
   ganan a lo que el hijo HEREDA: se redeclaran con el mismo peso.
   --------------------------------------------------------------------- */
html { font-size: 62.5%; }
body {
	margin: 0;
	background: var(--c-crema);
	color: var(--c-ink);
	font-family: var(--f-sans);
	font-size: 1.6rem;
	/* `normal` y no 1.5: el handoff no fija line-height salvo donde lo escribe, asi
	   que todo lo demas (fechas, metadatos, botones, enlaces) mide `normal`. */
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* bootstrap-clean (a:hover subraya y azulea) y content.css (a { color:#009E91 })
   son (0,1,1): se resetea enumerando los estados con el mismo peso. */
a { color: inherit; text-decoration: none; }
a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
blockquote { padding: 0; border: 0; }   /* BS3: padding 10px 20px + borde izquierdo */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-serif); font-weight: 500; color: var(--c-title);
	line-height: 1.1; letter-spacing: 0;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
/* Una palabra sin espacios mas ancha que su caja (la escribe el cliente en Studio:
   un nombre largo, un correo, una URL) se parte en vez de estirar su caja y correr
   la seccion de lado. Global, para que cubra tambien lo que pintan los modulos
   (titulos de noticias y del blog). `anywhere` y no `break-word`: tambien achica
   el min-content, que es lo que estira un titulo dentro de un flex. Con el
   contenido normal no mueve ni un pixel (medido a 500, 768, 1024 y 1440). */
body { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
/* p/li/span { line-height: 1.42857 } del tema del CMS: regla de ELEMENTO. */
/* Con :where() el contenedor no suma especificidad: queda (0,0,1), empata con la
   regla del CMS y gana por orden (design.css va ultimo), pero NO le gana a las
   clases de los componentes (0,1,0). Con `.home-section span` (0,1,1) se comia el
   line-height de cada .acceso__titulo, .noticia__texto... (pitfall 96). */
:where(.topbar, .site-header, .home-section, .site-footer) :is(p, li, span, a, h2, h3) { line-height: inherit; }

.wrap {
	width: min(var(--maxw), 100% - var(--gut) * 2);
	margin-inline: auto;
}
/* La cabecera es sticky: un salto a #libreria (o Studio llevando el lienzo a una
   seccion) dejaba el titular debajo de ella. */
.home-section [id], .home-section .semana__card { scroll-margin-top: 16.4rem; }   /* barra 5.2 + cabecera 10.4 + aire */
@media (max-width: 767px) { .home-section [id], .home-section .semana__card { scroll-margin-top: 14.4rem; } }
/* Menu en dos lineas (ver 5. CABECERA): la cabecera crece unos 6 rem. */
html:has(.site-header.is-dos-lineas) :is(.home-section [id], .home-section .semana__card) { scroll-margin-top: 22.4rem; }

/* ---------------------------------------------------------------------
   3. PIEZAS COMUNES — titular de seccion, botones, flechas, card-lift.
   --------------------------------------------------------------------- */
.sec { padding: var(--pad-sec) 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3.2rem; }
.sec-head__txt { display: flex; flex-direction: column; gap: 1.4rem; }
.sec-title {
	font-family: var(--f-serif); font-weight: 500;
	font-size: 5.2rem; line-height: 1.05; color: var(--c-title);
}
.sec-title--sm { font-size: 4rem; line-height: 1.1; }
/* El filete dorado bajo cada titular (.sec-h2::after del handoff). */
.sec-title::after {
	content: ""; display: block; width: 5.6rem; height: 3px;
	background: var(--c-oro); margin-top: 2rem;
}
.sec-foot { display: flex; justify-content: center; padding-top: 1.2rem; }
.sec-foot:empty { display: none; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem;
	box-sizing: border-box; border: 1px solid transparent; border-radius: var(--r-btn);
	font-family: var(--f-sans); font-size: 1.7rem; font-weight: 500; line-height: normal;
	/* El texto del boton lo escribe el cliente: si no cabe, baja de linea en vez de
	   salirse de la pantalla. */
	white-space: normal; max-width: 100%; cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }
/* !important en color/fondo: el CSS global del CMS trae `a:hover { color … }`. */
.btn--gold { background: var(--c-gold) !important; color: var(--c-white) !important; padding: 1.8rem 3.4rem; font-weight: 600; gap: 1.4rem; }
.btn--gold:hover, .btn--gold:focus-visible { background: rgb(var(--c-gold-osc-rgb)) !important; color: var(--c-white) !important; }
.btn--pill { border-color: var(--c-musgo); color: var(--c-musgo) !important; padding: 1.8rem 3.6rem; }
.btn--pill:hover, .btn--pill:focus-visible { background: var(--c-musgo); border-color: var(--c-musgo); color: var(--c-crema) !important; }
.btn--light { background: var(--c-crema) !important; color: var(--c-ink) !important; padding: 1.8rem 3.2rem; font-weight: 600; gap: 1.4rem; }
.btn--light:hover, .btn--light:focus-visible { background: var(--c-white) !important; color: var(--c-pino) !important; }
.btn--solid { background: var(--c-musgo) !important; color: var(--c-crema) !important; padding: 1.5rem 2.6rem; font-size: 1.6rem; }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--c-pino) !important; color: var(--c-crema) !important; }
.btn--ghost { border-color: var(--c-oro); color: rgb(var(--c-trigo-rgb)) !important; padding: 1.5rem 2.6rem; font-size: 1.6rem; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--c-oro); border-color: var(--c-oro); color: var(--c-pino) !important; }
.arrow-x { transition: transform .45s var(--ease); }
.btn:hover .arrow-x, .card-lift:hover .arrow-x { transform: translateX(5px); }

.icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 4.8rem; height: 4.8rem; box-sizing: border-box;
	border: 1px solid rgb(var(--c-btn-borde-rgb)); border-radius: var(--r-btn);
	color: var(--c-musgo); background: transparent;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.icon-btn svg { width: 2rem; height: 2rem; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--c-musgo); border-color: var(--c-musgo); color: var(--c-crema); }
.flechas { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }
.flechas.is-quieto { visibility: hidden; }
.flechas--oscuro .icon-btn { border-color: rgb(var(--c-verde-borde-rgb)); color: var(--c-crema); }
.flechas--oscuro .icon-btn:hover, .flechas--oscuro .icon-btn:focus-visible { background: var(--c-crema); border-color: var(--c-crema); color: var(--c-pino); }

.card-lift { transition: box-shadow .32s ease, border-color .32s ease, transform .32s var(--ease); }

/* CARRIL: el carrusel de todas las bandas. Scroll horizontal nativo con snap
   (tactil sin libreria); las flechas desplazan de a una tarjeta y dan la vuelta
   al llegar al final. --n tarjetas visibles. El padding + margen negativo deja
   respirar la sombra de las cards, que el overflow si no recortaria. */
.rail { --n: 1; --gap: 2.4rem; --sx: 0px; --sy1: 0px; --sy2: 0px; position: relative; }
.rail__track {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
	gap: var(--gap);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none;
	padding: var(--sy1) var(--sx) var(--sy2);
	margin: calc(-1 * var(--sy1)) calc(-1 * var(--sx)) calc(-1 * var(--sy2));
	scroll-padding-inline: var(--sx);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; min-width: 0; }

/* ---------------------------------------------------------------------
   4. BARRA SUPERIOR
   --------------------------------------------------------------------- */
.topbar { background: var(--c-pino); color: rgb(var(--c-topbar-rgb)); }
.topbar__inner { height: 5.2rem; display: flex; align-items: center; justify-content: space-between; gap: 3.2rem; }
.topbar__ubicacion { display: flex; align-items: center; gap: 1rem; font-size: 1.5rem; letter-spacing: .01em; }
.topbar__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--c-oro); flex-shrink: 0; }
.topbar__lema, .topbar__lema-corto { font-family: var(--f-serif); font-style: italic; font-size: 1.7rem; color: rgb(var(--c-papel-rgb)); }
.topbar__lema-corto { display: none; }

/* ROTOR: el lema y la noticia mas reciente se turnan en el mismo renglon. La que
   entra sube desde abajo y la que sale se va hacia arriba (scripts.js, 5). La caja
   tiene alto fijo de un renglon y recorta; cada texto va en una linea con
   ellipsis, asi un titulo largo nunca empuja las redes. Sin JS, o sin noticia, se
   lee el lema fijo (nace `is-on`). */
.topbar__rotor { position: relative; flex: 1 1 0; min-width: 0; height: 2.8rem; overflow: hidden; }
.topbar__rotor .rotor__item {
	position: absolute; left: 0; right: 0; top: 50%; margin: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
	opacity: 0; transform: translateY(60%);
	transition: transform .7s cubic-bezier(.22,.7,.18,1), opacity .5s ease;
}
.topbar__rotor .rotor__item.is-on { opacity: 1; transform: translateY(-50%); }
.topbar__rotor .rotor__item.is-out { opacity: 0; transform: translateY(-160%); }
.topbar__rotor .rotor__item.is-reset { transition: none; }
.topbar__noticia, .topbar__noticia:hover, .topbar__noticia:focus { display: block; color: rgb(var(--c-papel-rgb)); text-decoration: none; }
.topbar__noticia-tag {
	font-family: var(--f-sans); font-style: normal; font-size: 1.15rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: rgb(var(--c-oro-pie-rgb)); margin-right: 1rem; vertical-align: .15em;
}
.topbar__noticia-titulo { font-family: var(--f-serif); font-style: italic; font-size: 1.7rem; transition: color .2s ease; }
a.topbar__noticia:hover .topbar__noticia-titulo, a.topbar__noticia:focus-visible .topbar__noticia-titulo { color: rgb(var(--c-oro-pie-rgb)); }
@media (prefers-reduced-motion: reduce) {
	.topbar__rotor .rotor__item, .topbar__rotor .rotor__item.is-out { transform: translateY(-50%); transition: opacity .4s ease; }
}
.topbar__social { display: flex; align-items: center; gap: 2.2rem; font-size: 1.5rem; }
.topbar__redes { display: flex; align-items: center; gap: 2rem; }
.topbar__redes a, .topbar__redes a:hover, .topbar__redes a:focus { display: flex; color: rgb(var(--c-papel-rgb)); transition: color .2s ease; }
.topbar__redes a:hover, .topbar__redes a:focus-visible { color: rgb(var(--c-oro-pie-rgb)); }
.topbar__redes svg { width: 1.7rem; height: 1.7rem; }

/* ---------------------------------------------------------------------
   5. CABECERA — la barra superior y la cabecera quedan SIEMPRE visibles
   arriba: las dos van dentro de .site-top, que es el sticky (pedido del cliente,
   2026-10-02; el handoff dejaba ir la barra con el scroll). Nunca translateY(-100%).
   --------------------------------------------------------------------- */
.site-top { position: sticky; top: 0; z-index: 60; }
.site-header {
	position: relative;
	background: var(--c-crema);
	border-bottom: 1px solid rgb(var(--c-borde-rgb));
	box-shadow: 0 6px 20px rgba(var(--c-ink-rgb), .06);
}
.header__inner { height: 10.4rem; display: flex; align-items: center; justify-content: space-between; gap: 4rem; }
.nav-brand, .nav-brand:hover, .nav-brand:focus { display: flex; align-items: center; flex-shrink: 0; }
.nav-brand__img { width: auto; height: 7.6rem; max-width: 20rem; object-fit: contain; }

.main-nav__list { display: flex; align-items: center; gap: 4px; }
.main-nav__list > li { position: relative; }
.main-nav__link, .main-nav__link:link, .main-nav__link:visited {
	display: block; padding: 1rem 1.4rem;
	font-size: 1.6rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
	color: var(--c-ink); border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.main-nav__link:hover, .main-nav__link:focus-visible, .main-nav__link.is-active,
.main-nav__item--sub:hover > .main-nav__link,
.main-nav__item--sub:focus-within > .main-nav__link,
.main-nav__item--sub.is-open > .main-nav__link { color: var(--c-gold); border-color: var(--c-gold); }
/* SUBMENU (2o nivel de menuplus): la caja blanca de 320 del handoff. Va con
   visibility + opacity (no display:none) para que mida cerrado y la caja de
   seleccion de Studio caiga donde va. El padding-top es el PUENTE entre el
   enlace y la caja: sin el, el puntero cruza un hueco y pierde el :hover. */
.main-nav__sub {
	position: absolute; top: 100%; left: -.8rem; z-index: 40;
	width: 32rem; padding-top: .6rem;
	visibility: hidden; opacity: 0; transform: translateY(.4rem);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.main-nav__sub::before {
	content: ""; position: absolute; inset: .6rem 0 0; z-index: -1;
	background: var(--c-white); border-radius: 1.2rem;
	box-shadow: 0 24px 48px rgba(var(--c-ink-rgb), .14);
}
.main-nav__sub li:first-child { padding-top: 1.4rem; }
.main-nav__sub li:last-child { padding-bottom: 1.4rem; }
.main-nav__sub li { padding-inline: 1.4rem; }
.main-nav__sub a, .main-nav__sub a:link, .main-nav__sub a:visited {
	display: block; padding: 1.2rem 1.4rem; border-radius: .8rem;
	font-size: 1.6rem; line-height: 1.35; color: rgb(var(--c-sub-rgb));
	transition: background-color .15s ease, color .15s ease;
}
.main-nav__sub li + li { margin-top: 2px; }
.main-nav__sub a:hover, .main-nav__sub a:focus-visible { background: rgb(var(--c-hoja-rgb)); color: var(--c-gold); outline: none; }
.main-nav__item--sub:hover > .main-nav__sub,
.main-nav__item--sub:focus-within > .main-nav__sub,
.main-nav__item--sub.is-open > .main-nav__sub {
	visibility: visible; opacity: 1; transform: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.header__right { display: flex; align-items: center; gap: 1.4rem; flex-shrink: 0; }
.header__buscar { width: 4.6rem; height: 4.6rem; }
.header__cta { padding: 1.5rem 2.6rem; font-size: 1.6rem; gap: 1rem; letter-spacing: .01em; }
.nav-burger { display: none; }
/* MENU QUE NO CABE: el del diseno trae siete items cortos, pero el cliente carga el
   suyo (en el sitio de la Red, ocho, uno de 45 caracteres) y a 1440 desbordaba la
   cabecera y se comia el buscador y el boton. El menu NUNCA se esconde por largo
   (pedido del cliente, 2026-10-23): la cabecera sigue en el contenedor de 1312 y,
   si no cabe, scripts.js pone `is-dos-lineas`: el menu se queda en su sitio del
   diseno (entre el logo y los botones, justificado a la derecha) y parte en dos
   lineas ahi mismo; la cabecera crece lo que haga falta, nunca abre una fila aparte.
   La hamburguesa queda solo para el quiebre de 1199 del diseno. */
.site-header.is-dos-lineas .header__inner { height: auto; min-height: 10.4rem; padding-block: 1.2rem; gap: 2.4rem; }
.site-header.is-dos-lineas .main-nav { flex: 1 1 auto; min-width: 0; }
.site-header.is-dos-lineas .main-nav__list { flex-wrap: wrap; justify-content: flex-end; gap: 0; }
.site-header.is-dos-lineas .main-nav__link { padding: .6rem .8rem; font-size: 1.5rem; }   /* el de la Red (9 items) queda en dos filas desde 1200 */

.buscador { border-top: 1px solid rgb(var(--c-borde-rgb)); background: var(--c-crema); padding: 1.6rem 0; }
.buscador__form { display: flex; gap: 1.2rem; }
.buscador__input {
	flex: 1; min-width: 0; height: 4.8rem; box-sizing: border-box; padding: 0 1.6rem;
	border: 1px solid rgb(var(--c-btn-borde-rgb)); border-radius: var(--r-btn);
	background: var(--c-white); color: var(--c-ink); font: inherit; font-size: 1.7rem;
}
.buscador__input:focus { outline: none; border-color: var(--c-gold); }

/* MENU DEL CELULAR (mmenu). Antes de que la lib lo tome, el <nav> no se ve (sin esto
   parpadea la lista cruda al cargar). La lib se pinta sola (#f3f3f3): se repinta con
   la paleta, el verde del pie y el crema del texto (regla dura 22). */
.main-nav-mobile:not(.mm-menu) { display: none; }
.mm-menu {
	--mm-color-background: var(--c-pino);
	--mm-color-text: var(--c-crema);
	--mm-color-text-dimmed: rgba(var(--c-crema-rgb), .6);
	--mm-color-border: rgba(var(--c-oro-rgb), .3);
	--mm-color-button: var(--c-oro);
	--mm-listitem-size: 5.2rem;
	background: var(--c-pino) !important;
	color: var(--c-crema) !important;
	font-family: var(--f-sans);
}
.mm-menu .mm-navbar { background: var(--c-pino) !important; border-color: rgba(var(--c-oro-rgb), .3) !important; }
.mm-menu .mm-navbar__title, .mm-menu .mm-navbar__title > span {
	color: rgb(var(--c-trigo-rgb)) !important; font-family: var(--f-serif); font-size: 2rem;
}
.mm-menu .mm-listview > .mm-listitem > a,
.mm-menu .mm-listview > .mm-listitem > a:hover,
.mm-menu .mm-listview > .mm-listitem > a:focus { color: var(--c-crema) !important; font-size: 1.7rem; font-weight: 500; }
.mm-menu .mm-panel:not(.mm-panel_opened) .mm-listview > .mm-listitem > a,
.mm-menu .mm-listview .mm-listview > .mm-listitem > a { font-weight: 400; }
.mm-menu .mm-listitem::after { border-color: rgba(var(--c-oro-rgb), .25) !important; }
.mm-menu .mm-listitem > a:hover { background: rgba(var(--c-crema-rgb), .06); }
.mm-menu .mm-btn_next::after, .mm-menu .mm-btn_prev::before { border-color: var(--c-oro) !important; }
/* La Libreria, ultima del panel principal: el boton dorado de la cabecera. Por
   CLASE y no por :last-child (cada subpanel de mmenu tiene su propio ultimo). */
.mm-menu .mm-listitem.menu-mobile__cta { margin: 2rem 2rem 1rem; }
.mm-menu .mm-listitem.menu-mobile__cta::after { content: none; }
.mm-menu .mm-listitem.menu-mobile__cta > a,
.mm-menu .mm-listitem.menu-mobile__cta > a:hover,
.mm-menu .mm-listitem.menu-mobile__cta > a:focus {
	justify-content: center; text-align: center; padding: 1.6rem 2rem;
	background: var(--c-gold) !important; color: var(--c-white) !important;
	border-radius: var(--r-btn); font-weight: 600;
}

/* ---------------------------------------------------------------------
   6. PORTADA — solo imagen. La caja la fija el aspect-ratio del diseno y la
   imagen la llena con cover: un banner de otra proporcion se recorta, no
   estira la pagina (gate aspecto).
   --------------------------------------------------------------------- */
.hero { position: relative; background: var(--c-crema); border-bottom: 1px solid rgb(var(--c-borde-rgb)); }
.hero__slider .rail__track { scroll-behavior: smooth; cursor: grab; }
/* Arrastre con el mouse (scripts.js): sin snap ni smooth mientras se arrastra,
   o el navegador pelea con el scrollLeft que pone el puntero. */
.hero__slider .rail__track.is-arrastrando { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.hero__slide { display: block; position: relative; aspect-ratio: 1920 / 640; overflow: hidden; }
.hero__slider--movil { display: none; }
.hero__slider--movil .hero__slide { aspect-ratio: 780 / 929; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__flecha {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 5.2rem; height: 5.2rem;
	border-color: rgba(var(--c-gold-rgb), .45); background: rgba(var(--c-crema-rgb), .62); color: var(--c-gold);
}
.hero__flecha:hover, .hero__flecha:focus-visible { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-crema); }
.hero__flecha--prev { left: 3.2rem; }
.hero__flecha--next { right: 3.2rem; }
.rail.is-quieto .hero__flecha { display: none; }

.respiro { height: 8.8rem; display: flex; align-items: center; background: var(--c-crema); }
.respiro span { display: block; width: min(var(--maxw), 100% - var(--gut) * 2); margin-inline: auto; height: 1px; background: rgb(var(--c-filete-rgb)); }

/* ---------------------------------------------------------------------
   7. ACCESOS DIRECTOS
   --------------------------------------------------------------------- */
.sec--verde { background: var(--c-pino); }
.accesos { padding: 5.6rem 0 6rem; }
.accesos .sec-title { color: var(--c-crema); }
.accesos .sec-head { margin-bottom: 2.8rem; }
.accesos__rail { --n: 4; --gap: 2.4rem; --sx: 1.2rem; --sy1: 1.2rem; --sy2: 4rem; }
.acceso, .acceso:hover, .acceso:focus {
	display: flex; align-items: center; gap: 1.8rem; box-sizing: border-box;
	background: var(--c-white); border: 1px solid rgb(var(--c-card-rgb)); border-radius: var(--r-card);
	padding: 2.2rem 2rem 2.2rem 2.4rem; color: var(--c-ink);
}
.acceso:hover { box-shadow: 0 16px 36px rgba(var(--c-ink-rgb), .15); border-color: rgb(var(--c-card-hover-rgb)); }
.acceso__icono { width: 5.4rem; height: 5.4rem; object-fit: contain; flex-shrink: 0; }
.acceso__titulo { flex-grow: 1; font-family: var(--f-serif); font-size: 2.1rem; line-height: 1.25; color: var(--c-ink); }
.acceso__chevron { width: 2.2rem; height: 2.2rem; flex-shrink: 0; color: var(--c-oro); }

/* ---------------------------------------------------------------------
   8. NOTICIAS
   --------------------------------------------------------------------- */
.sec--marfil { background: var(--c-marfil); }
.noticias { border-bottom: 1px solid rgb(var(--c-noticias-borde-rgb)); }
.noticias .sec-head { margin-bottom: 4rem; }
.noticias__rail { --n: 3; --gap: 3.2rem; --sx: 1.2rem; --sy1: 1.2rem; --sy2: 4rem; }
.noticia, .noticia:hover, .noticia:focus {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--c-white); border: 1px solid rgb(var(--c-card-rgb)); border-radius: var(--r-card); color: var(--c-ink);
}
a.noticia:hover { box-shadow: 0 16px 36px rgba(var(--c-ink-rgb), .15); border-color: rgb(var(--c-card-hover-rgb)); }
.noticia__foto { width: 100%; height: 24rem; object-fit: cover; flex-shrink: 0; }
.noticia__foto--vacia { display: block; background: rgb(var(--c-salvia-rgb)); }
.noticia__body { flex-grow: 1; padding: 2.8rem 2.8rem 3.2rem; display: flex; flex-direction: column; gap: 1.4rem; }
.noticia__fecha { display: flex; align-items: center; gap: .9rem; font-size: 1.5rem; color: var(--c-muted); }
.noticia__fecha svg { width: 1.7rem; height: 1.7rem; color: rgb(var(--c-calendario-rgb)); flex-shrink: 0; }
.noticia__titulo { font-family: var(--f-serif); font-size: 3rem; line-height: 1.15; color: var(--c-ink); }
.noticia__texto { font-size: 1.7rem; line-height: 1.6; color: var(--c-texto); }
/* MISMO ALTO EN TODAS LAS TARJETAS: el titulo corta en la 2a linea y el texto en la 3a
   con "…" (line-clamp), y los dos reservan ese alto aunque el texto sea corto. El alto
   va en em de su propio line-height, asi sigue al tamano de cada quiebre. Vienen de
   los modulos Eventos y Blog: el largo no lo controla el diseno. */
.noticia__titulo, .post__titulo {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
	overflow: hidden; min-height: calc(2em * 1.15);
}
.post__titulo { min-height: calc(2em * 1.2); }
.noticia__texto, .post__resumen {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
	overflow: hidden; min-height: calc(3em * 1.6);
}
.noticia__mas { margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center; gap: 1rem; font-size: 1.6rem; font-weight: 500; color: rgb(var(--c-leer-rgb)); }
.noticia__mas svg { width: 1.8rem; height: 1.8rem; color: var(--c-gold); }
.noticias .sec-foot { padding-top: 5.2rem; }

/* ---------------------------------------------------------------------
   9. BANDA "VIVE LA EXPERIENCIA" — foto a sangre + velo
   --------------------------------------------------------------------- */
.banda { position: relative; overflow: hidden; min-height: 47rem; display: flex; align-items: flex-end; background: var(--c-pino); }
.banda__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banda__velo {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(var(--c-pino-rgb), .12) 0%, rgba(var(--c-pino-rgb), .30) 38%, rgba(var(--c-pino-rgb), .74) 72%, rgba(var(--c-pino-rgb), .94) 100%);
}
.banda__inner { position: relative; padding-bottom: 6.4rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 7.2rem; }
.banda__titulo {
	max-width: 64rem; font-size: 5.2rem; line-height: 1.08; color: var(--c-crema);
	text-shadow: 0 2px 16px rgba(var(--c-ink-rgb), .45);
}
.banda__acento { display: block; color: rgb(var(--c-oro-claro-rgb)); }
.banda__lado { max-width: 43rem; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2.2rem; text-align: right; }
.banda__texto { font-size: 1.8rem; line-height: 1.6; color: rgb(var(--c-banda-rgb)); text-shadow: 0 2px 16px rgba(var(--c-ink-rgb), .45); }

/* ---------------------------------------------------------------------
   10. DESDE EL BLOG — 7 + 5 de 12 columnas
   --------------------------------------------------------------------- */
.sec--crema { background: var(--c-crema); }
.blog { border-bottom: 1px solid rgb(var(--c-borde-rgb)); }
.blog .sec-head { margin-bottom: 4rem; }
.blog__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.2rem; }
.post, .post:hover, .post:focus {
	display: flex; overflow: hidden; color: var(--c-ink);
	background: var(--c-white); border: 1px solid rgb(var(--c-card-rgb)); border-radius: var(--r-card);
}
a.post:hover { box-shadow: 0 16px 36px rgba(var(--c-ink-rgb), .15); border-color: rgb(var(--c-card-hover-rgb)); }
.post--destacado { grid-column: span 7; flex-direction: column; }
.post--destacado .post__foto { width: 100%; height: 26rem; object-fit: cover; }
.post--destacado .post__body { padding: 3.2rem; gap: 1.6rem; }
.post--destacado .post__titulo { font-size: 3.8rem; line-height: 1.1; min-height: calc(2em * 1.1); }
.blog__lista { grid-column: span 5; display: flex; flex-direction: column; gap: 2rem; }
.blog__lista .post { height: 16.8rem; align-items: stretch; gap: 2.2rem; }
.blog__lista .post__foto { width: 19rem; flex-shrink: 0; height: 100%; object-fit: cover; }
.blog__lista .post__body { padding: 2.2rem 2.6rem 2.2rem 0; justify-content: center; gap: .9rem; }
.post__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.post__linea { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.4rem; }
.post__cat { font-size: 1.3rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold); }
.post--destacado .post__cat { letter-spacing: .1em; }
.post__titulo { font-family: var(--f-serif); font-size: 2.4rem; line-height: 1.2; color: var(--c-ink); }
.post__resumen { font-size: 1.8rem; line-height: 1.6; color: var(--c-texto); }
.post__meta { font-size: 1.6rem; color: var(--c-muted); }
.post--destacado .post__meta { font-size: 1.5rem; }
.blog .sec-foot { padding-top: 5.2rem; }

/* ---------------------------------------------------------------------
   11. RECURSOS DESTACADOS — la curva verde arriba, portadas con sombra
   --------------------------------------------------------------------- */
.recursos { position: relative; overflow: hidden; background: var(--c-white); padding-bottom: 10rem; border-bottom: 1px solid rgb(var(--c-recursos-borde-rgb)); }
.recursos__curva { position: absolute; top: 0; left: 0; width: 100%; height: 44.2rem; background: var(--c-pino); border-radius: 0 0 18rem 0; }
.recursos__inner { position: relative; }
.recursos .sec-head { margin-bottom: 4rem; }
.recursos .sec-title { color: var(--c-crema); }
.recursos__lead { max-width: 62rem; font-size: 1.9rem; line-height: 1.55; color: var(--c-lino); }
.recursos__rail { --n: 5; --gap: 2rem; --sx: 1.8rem; --sy1: 2rem; --sy2: 5.4rem; }
.libro, .libro:hover, .libro:focus { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; color: var(--c-ink); }
.libro__marco { display: block; aspect-ratio: 190 / 240; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 18px 26px -10px rgba(var(--c-sombra-rgb), .42); transition: transform .32s var(--ease), box-shadow .32s ease; background: rgb(var(--c-salvia-rgb)); }
a.libro:hover .libro__marco { transform: translateY(-4px); box-shadow: 0 24px 32px -12px rgba(var(--c-sombra-rgb), .50); }
.libro__portada { width: 100%; height: 100%; object-fit: cover; }
.libro__texto { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.libro__titulo, .libro__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.libro__titulo { font-family: var(--f-serif); font-size: 1.9rem; line-height: 1.25; color: var(--c-ink); }
.libro__desc { font-size: 1.4rem; line-height: 1.45; color: var(--c-muted); }
.recursos .sec-foot { padding-top: 4.8rem; }

/* ---------------------------------------------------------------------
   12. CONTENIDO DE LA SEMANA — dos tarjetas de 6 columnas
   --------------------------------------------------------------------- */
.semana .sec-head { margin-bottom: 4rem; }
.semana__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; }
.semana__card {
	display: flex; align-items: stretch; min-height: 32rem;
	background: var(--c-white); border: 1px solid rgb(var(--c-card-rgb)); border-radius: var(--r-card);
}
.semana__txt { width: 45%; flex-shrink: 0; box-sizing: content-box; padding: 4.4rem 2rem 4.4rem 4rem; display: flex; flex-direction: column; gap: 1.8rem; }
.semana__titulo { font-size: 2.8rem; line-height: 1.18; color: var(--c-title); white-space: pre-line; }
.semana__texto { font-size: 1.7rem; line-height: 1.6; color: var(--c-texto); }
.semana__btn { margin-top: auto; align-self: flex-start; }
.semana__media {
	position: relative; flex-grow: 1; margin: 2.4rem 2.4rem 2.4rem 0; overflow: hidden;
	border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center;
}
.semana__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.semana__card--pastoral { background: var(--c-musgo); border-color: rgba(var(--c-oro-rgb), .3); }
.semana__card--pastoral .semana__titulo { color: var(--c-crema); }
.semana__card--pastoral .semana__texto { color: var(--c-lino); }
.semana__media--video { background: rgb(var(--c-video-rgb)); }
.semana__play, .semana__play:hover, .semana__play:focus {
	position: relative; z-index: 1;
	width: 6.2rem; height: 6.2rem; border-radius: 50%; padding-left: 4px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-crema); color: var(--c-ink);
	transition: transform .25s var(--ease);
}
.semana__play:hover { transform: scale(1.06); }
.semana__play svg { width: 2.2rem; height: 2.2rem; }

/* ---------------------------------------------------------------------
   13. PUNTOS DE VENTA — filtro + carril de cuatro
   --------------------------------------------------------------------- */
.puntos {
	position: relative; z-index: 0; overflow: hidden; background: var(--c-white);
	padding: 9.6rem 0 8.8rem;
	border-top: 1px solid rgb(var(--c-recursos-borde-rgb)); border-bottom: 1px solid rgb(var(--c-recursos-borde-rgb));
}
.puntos__rombo { position: absolute; z-index: -1; left: -8rem; bottom: 7.4rem; width: 22rem; height: 22rem; border-radius: 4.4rem; background: rgb(var(--c-niebla-rgb)); transform: rotate(45deg); }
.puntos__ramo { position: absolute; z-index: -1; bottom: 14.3rem; right: -5px; width: 23rem; height: auto; opacity: .5; transform-origin: bottom right; transform: scaleX(-1) rotate(30deg); }
.puntos__inner { position: relative; display: flex; flex-direction: column; gap: 4rem; }
.puntos .sec-title { margin-bottom: -1.4rem; }
.puntos__filtro {
	align-self: center; display: flex; align-items: center; gap: 4px; padding: 5px;
	background: var(--c-white); border: 1px solid rgb(var(--c-card-rgb)); border-radius: 999px;
	box-shadow: 0 8px 22px rgba(var(--c-ink-rgb), .07);
}
.puntos__zona { padding: 1.3rem 3.4rem; font-size: 1.6rem; font-weight: 500; border-radius: 999px; color: var(--c-texto); transition: background-color .2s ease, color .2s ease; }
.puntos__zona:hover { color: var(--c-musgo); }
.puntos__zona.is-on, .puntos__zona.is-on:hover { background: var(--c-musgo); color: var(--c-crema); }
.puntos__rail { --n: 4; --gap: 2.4rem; --sx: 2.2rem; --sy1: 1.6rem; --sy2: 5rem; }
/* Sombras RECOGIDAS (spread negativo): caen bajo la tarjeta y no se abren a los
   lados, donde el carril (overflow) las cortaba con un borde recto. El aire
   lateral del carril (--sx) tiene que quedar POR DEBAJO del --gap: si no, asoma
   el borde de la tarjeta siguiente. */
.punto { display: flex; flex-direction: column; overflow: hidden; background: var(--c-white); border-radius: var(--r-card); box-shadow: 0 16px 28px -10px rgba(var(--c-ink-rgb), .20); }
.punto:hover { transform: translateY(-4px); box-shadow: 0 24px 34px -12px rgba(var(--c-ink-rgb), .28); }
.punto__foto { width: 100%; height: 16.8rem; object-fit: cover; object-position: center 58%; }
.punto__body { padding: 2.6rem 2.4rem 2.8rem; display: flex; flex-direction: column; gap: 1.4rem; }
.punto__ciudad { font-size: 2.5rem; line-height: 1.15; color: var(--c-ink); }
.punto__dir { font-size: 1.7rem; line-height: 1.5; color: var(--c-texto); }
.punto__tel, .punto__mapa, .punto__tel:hover, .punto__mapa:hover { display: flex; align-items: center; gap: 1rem; color: var(--c-musgo); }
.punto__tel { font-size: 1.7rem; }
.punto__mapa { font-size: 1.6rem; font-weight: 600; border-top: 1px solid rgb(var(--c-linea-punto-rgb)); padding-top: 1.6rem; }
.punto__tel:hover, .punto__mapa:hover { color: var(--c-gold); }
.punto svg { width: 1.7rem; height: 1.7rem; flex-shrink: 0; }
.flechas--pie { align-self: flex-end; }
.flechas--pie .icon-btn { border-color: rgb(var(--c-flecha-pie-rgb)); }

/* ---------------------------------------------------------------------
   14. PIE
   --------------------------------------------------------------------- */
.site-footer { background: var(--c-pino); color: var(--c-lino); padding: 5.6rem 0 3.2rem; }
.footer__inner { display: flex; flex-direction: column; gap: 4rem; }
.footer__cols { display: flex; align-items: stretch; }
.footer__brand { min-width: 28.6rem; flex-shrink: 0; box-sizing: border-box; padding-right: 4.8rem; display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; }
.footer__logo, .footer__logo:hover, .footer__logo:focus { display: block; }
/* El diseno lo dibuja a 215x127; se acota a 120 de alto, el tope de logo del sistema
   (aspecto-gate --logos): un logo cuadrado subido por el cliente no puede crecer el pie. */
.footer__logo-img { width: 20.4rem; height: 12rem; object-fit: contain; object-position: left center; }
.footer__redes { display: flex; align-items: center; gap: 1.2rem; }
.footer__redes a, .footer__redes a:hover, .footer__redes a:focus {
	width: 4.2rem; height: 4.2rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-crema); color: var(--c-pino); transition: background-color .28s ease;
}
.footer__redes a:hover, .footer__redes a:focus-visible { background: var(--c-oro); color: var(--c-pino); }
.footer__redes svg { width: 2rem; height: 2rem; }
.footer__col { flex-grow: 1; padding: 4px 4rem; display: flex; flex-direction: column; gap: 1.6rem; border-left: 1px solid rgba(var(--c-oro-rgb), .5); }
.footer__coltitle { font-family: var(--f-serif); font-size: 2.3rem; line-height: 1.2; color: rgb(var(--c-trigo-rgb)); }
.footer__list { display: flex; flex-direction: column; gap: 1.6rem; }
.footer__list li { display: flex; align-items: center; gap: 1.3rem; font-size: 1.6rem; line-height: 1.5; }
.footer__list li.footer__tels { align-items: flex-start; }
.footer__tels svg { margin-top: 4px; }
.footer__tels > span { display: flex; flex-direction: column; gap: 4px; }
.footer__list svg { width: 1.7rem; height: 1.7rem; color: var(--c-oro); flex-shrink: 0; }
.footer__list a, .footer__list a:link, .footer__list a:visited { color: var(--c-lino); overflow-wrap: anywhere; }
.footer__dir { font-size: 1.6rem; line-height: 1.75; }
.site-footer a:hover, .site-footer a:focus-visible { color: rgb(var(--c-oro-pie-rgb)); }
.footer__redes a:hover { color: var(--c-pino); }
/* La fila de enlaces del pie: el <ul class="footer__menu"> que arma CargarMenu("Menú
   Inferior"), en horizontal. El primer item va destacado, como en el diseno. Sin
   items no queda ni el filete. */
.footer__nav { border-top: 1px solid rgba(var(--c-oro-rgb), .3); padding-top: 3rem; }
.footer__nav:not(:has(li)) { display: none; }
.footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 3.2rem; }
.footer__menu li { margin: 0; padding: 0; list-style: none; }
.footer__menu li::before { content: none; }
.footer__menu a, .footer__menu a:link, .footer__menu a:visited { font-size: 1.6rem; color: var(--c-lino); text-decoration: none; transition: color .2s ease; }
.footer__menu a:hover, .footer__menu a:focus-visible { color: rgb(var(--c-oro-pie-rgb)); }
.footer__menu li:first-child a { font-weight: 500; color: rgb(var(--c-trigo-rgb)); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem 2.4rem; font-size: 1.5rem; color: rgb(var(--c-gris-pie-rgb)); }
.footer__legal { display: flex; align-items: center; gap: 2.2rem; }
.footer__legal:empty { display: none; }
.footer__legal a, .footer__legal a:link, .footer__legal a:visited,
.footer__credit a, .footer__credit a:link, .footer__credit a:visited { color: rgb(var(--c-gris-pie-rgb)); }
.footer__sep { color: rgb(var(--c-sep-pie-rgb)); }
.footer__credit { width: 100%; text-align: center; font-size: 1.3rem; }

/* ---------------------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1360px) {
	.main-nav__link, .main-nav__link:link, .main-nav__link:visited { padding-inline: 1rem; }
	.header__inner { gap: 2.4rem; }
}
@media (max-width: 1199px) {
	:root { --gut: 3.2rem; }
	.main-nav { display: none; }
	.nav-burger { display: inline-flex; }
	.header__cta { display: none; }
	.accesos__rail { --n: 3; }
	.recursos__rail { --n: 4; }
	.puntos__rail { --n: 3; }
	.footer__cols { flex-wrap: wrap; row-gap: 4rem; }
	.footer__brand { width: 100%; padding-right: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 2.4rem; }
	.footer__col:first-of-type { border-left: 0; padding-left: 0; }
	.footer__redes { flex-wrap: wrap; justify-content: flex-end; }
	.topbar__lema { display: none; }
	.topbar__rotor { display: none; }   /* entre 768 y 1199 la barra no lleva lema (diseno) */
}
@media (max-width: 991px) {
	:root { --pad-sec: 7.2rem; }
	.sec-title { font-size: 4.4rem; }
	.accesos__rail { --n: 2; }
	.noticias__rail { --n: 2; }
	.recursos__rail { --n: 3; }
	.puntos__rail { --n: 2; }
	.post--destacado, .blog__lista { grid-column: span 12; }
	.semana__grid { grid-template-columns: 1fr; }
	.banda__inner { flex-direction: column; align-items: flex-start; gap: 2.4rem; }
	.banda__lado { align-items: flex-start; text-align: left; max-width: 64rem; }
	.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 4rem; }
	.footer__brand { grid-column: 1 / -1; }
	.footer__col, .footer__col:first-of-type { border-left: 0; padding: 2.4rem 0 0; border-top: 1px solid rgba(var(--c-oro-rgb), .5); }
}

/* EL DISENO MOVIL (390) */
@media (max-width: 767px) {
	:root { --gut: 2rem; --pad-sec: 4.4rem; }
	.topbar__inner { height: auto; padding: 1.2rem 0; justify-content: center; }
	.topbar__ubicacion, .topbar__social, .topbar__lema { display: none; }
	.topbar__lema-corto { display: block; font-size: 1.5rem; text-align: center; }
	.topbar__rotor { display: block; flex: 1 1 auto; width: 100%; height: 2.4rem; }
	.topbar__noticia-titulo { font-size: 1.5rem; }
	.topbar__noticia-tag { font-size: 1rem; margin-right: .8rem; }

	.header__inner { height: auto; padding: 1.6rem 0; gap: 1.2rem; }
	.nav-brand__img { height: 6.1rem; }
	.header__buscar { display: none; }

	.hero__slider--escritorio { display: none; }
	.hero__slider--movil { display: block; }
	.hero__flecha { width: 4.2rem; height: 4.2rem; }
	.hero__flecha--prev { left: 1.4rem; }
	.hero__flecha--next { right: 1.4rem; }
	.respiro { height: 5.6rem; }

	.sec-title { font-size: 3.8rem; }
	.sec-title--sm { font-size: 3.2rem; }
	.sec-title::after { width: 4.8rem; margin-top: 1.6rem; }

	/* Accesos: se apilan (sin carril) */
	.accesos { padding: 3.4rem 0 3.8rem; }
	.accesos .sec-head { margin-bottom: 1.6rem; }
	.accesos .flechas { display: none; }
	.accesos__rail .rail__track {
		grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding: 0; margin: 0;
	}
	.accesos__rail .rail__track { gap: 1.6rem; }
	.acceso { padding: 2rem; gap: 1.6rem; }
	.acceso__icono { width: 4.8rem; height: 4.8rem; }
	.acceso__titulo { font-size: 2.2rem; line-height: 1.2; }

	/* Noticias: una a la vez, con flechas */
	.noticias .sec-head { margin-bottom: 2.2rem; gap: 1.6rem; }
	.noticias .flechas { gap: 1rem; }
	.noticias__rail { --n: 1; --gap: 2rem; }
	.noticia__foto { height: 20rem; }
	.noticia__body { padding: 2.4rem 2.2rem 2.6rem; gap: 1.2rem; }
	.noticia__titulo { font-size: 2.8rem; }
	.noticia__texto { line-height: 1.55; }
	.noticias .sec-foot { padding-top: 2.8rem; }
	.noticias__todas, .blog__todos, .recursos__btn { width: 100%; padding: 1.7rem 2rem; }

	/* Banda */
	.banda { min-height: 46rem; }
	.banda__velo { background: linear-gradient(180deg, rgba(var(--c-pino-rgb), .14) 0%, rgba(var(--c-pino-rgb), .48) 24%, rgba(var(--c-pino-rgb), .84) 56%, rgba(var(--c-pino-rgb), .96) 100%); }
	.banda__inner { padding: 4rem 0 3.6rem; gap: 1.8rem; }
	.banda__titulo { font-size: 3.4rem; line-height: 1.1; text-shadow: 0 2px 14px rgba(var(--c-ink-rgb), .45); }
	.banda__acento { display: inline; }
	.banda__lado { gap: 1.8rem; width: 100%; }
	.banda__btn { width: 100%; justify-content: space-between; padding: 1.8rem 2.2rem; }

	/* Blog: las cuatro en lista, todas chicas */
	.blog .sec-head { margin-bottom: 2rem; }
	.blog__grid, .blog__lista { gap: 2rem; }
	.blog__grid { display: flex; flex-direction: column; }
	/* La miniatura va FUERA del flujo: el alto lo pone el texto de la tarjeta y la foto
	   lo llena con cover. En el flujo, una foto vertical estiraba la tarjeta (aspecto-gate). */
	.post, .post--destacado, .blog__lista .post { position: relative; flex-direction: row; height: auto; gap: 0; padding-left: 12rem; min-height: 12rem; }
	.post--destacado .post__foto, .blog__lista .post__foto { position: absolute; left: 0; top: 0; width: 10.4rem; height: 100%; }
	.post--destacado .post__body, .blog__lista .post__body { padding: 1.8rem 1.8rem 1.8rem 0; gap: .7rem; justify-content: center; }
	.post__linea { display: contents; }
	.post__cat { order: 1; font-size: 1.2rem; letter-spacing: .12em; }
	.post__titulo, .post--destacado .post__titulo { order: 2; font-size: 2.2rem; line-height: 1.2; min-height: calc(2em * 1.2); }
	.post__meta, .post--destacado .post__meta { order: 3; font-size: 1.5rem; }
	.post__resumen { display: none; }
	.blog .sec-foot { padding-top: 2.8rem; }

	/* Recursos: grilla de dos */
	.recursos { padding-bottom: 4.8rem; }
	.recursos__curva { height: 29rem; border-radius: 0 0 9rem 0; }
	.recursos .sec-head { margin-bottom: 2rem; }
	.recursos__lead { font-size: 1.7rem; }
	.recursos__rail { --n: 2; --gap: 1.6rem; --sx: 1.4rem; --sy1: 1.2rem; --sy2: 4rem; }
	/* El titular va en dos lineas: las flechas bajan bajo el texto, a la derecha. */
	.recursos .sec-head { flex-wrap: wrap; gap: 1.6rem; }
	.recursos .sec-head__txt { flex-basis: 100%; }
	.recursos .flechas { gap: 1rem; margin-left: auto; }
	.libro { gap: 1.2rem; }
	.libro__marco { box-shadow: 0 14px 24px -8px rgba(var(--c-sombra-rgb), .40); }
	.libro__texto { gap: 4px; }
	.recursos .sec-foot { padding-top: 2rem; }
	.recursos__btn .arrow-x { display: none; }

	/* Semana: las tarjetas en columna */
	.semana .sec-head { margin-bottom: 2rem; }
	.semana__grid { gap: 2rem; }
	.semana__card { flex-direction: column; min-height: 0; }
	.semana__txt { width: auto; padding: 2.8rem 2.2rem 2.4rem; gap: 1.4rem; }
	.semana__btn { margin-top: .4rem; }
	.semana__media { flex-grow: 0; height: 22rem; margin: 0 2rem 2rem; }

	/* Puntos: lista */
	.puntos { padding: 4.4rem 0 4.8rem; }
	.puntos__inner { gap: 2rem; }
	.puntos .sec-title { margin-bottom: 0; }
	.puntos__zona { padding: 1.3rem 3rem; }
	.puntos__rail { --n: 1; --gap: 2rem; --sx: 1.6rem; --sy1: 1.2rem; --sy2: 4.4rem; }
	.punto { box-shadow: 0 14px 26px -8px rgba(var(--c-ink-rgb), .20); }
	.punto__foto { height: 14rem; }
	.punto__body { padding: 2.2rem 2rem; gap: 1.2rem; }
	.punto__ciudad { font-size: 2.3rem; }
	.punto__mapa { padding-top: 1.4rem; }
	.puntos__rombo { bottom: -9.6rem; width: 24rem; height: 24rem; border-radius: 4.8rem; }
	.puntos__ramo { bottom: 0; right: -2.8rem; width: 12.2rem; transform: scaleX(-1); }

	/* Pie: el mismo del escritorio, apilado. (El handoff movil traia las redes como
	   pastillas de texto y escondia columnas: estaba roto.) */
	.site-footer { padding: 4rem 0 2.8rem; }
	.footer__inner { gap: 3.2rem; }
	.footer__cols { grid-template-columns: 1fr; gap: 2.4rem; }
	.footer__brand { flex-direction: column; align-items: flex-start; gap: 2rem; }
	.footer__redes { justify-content: flex-start; gap: 1rem; }
	.footer__logo-img { width: 19rem; height: 11.2rem; }
	.footer__coltitle { font-size: 2.1rem; }
	.footer__nav { padding-top: 2.4rem; }
	.footer__menu { justify-content: flex-start; gap: 1.2rem 2.4rem; }
	.footer__bottom { flex-direction: column; align-items: flex-start; gap: 1rem; font-size: 1.4rem; }
	.footer__legal { flex-wrap: wrap; gap: .8rem 1.6rem; }
	.footer__credit { text-align: left; }
}

/* ---------------------------------------------------------------------
   16. TEMA CMS — PAGINAS INTERNAS (pge-maquetacion-cms-theme). TODO va
   prefijado con `.site-content`: sin el prefijo pisa tambien la HOME.
   --------------------------------------------------------------------- */
:root {
	--cms-bg:            var(--c-crema);
	--cms-surface:       var(--c-white);
	--cms-surface-alt:   rgba(var(--c-ink-rgb), .04);
	--cms-border:        rgb(var(--c-card-rgb));
	--cms-field:         rgba(var(--c-ink-rgb), .03);
	--cms-field-focus:   var(--c-white);
	--cms-field-border:  rgb(var(--c-btn-borde-rgb));
	--cms-muted:         var(--c-muted);
	--cms-title:         var(--c-title);
	--cms-text:          var(--c-texto);
	--cms-primary:       var(--c-musgo);
	--cms-on-accent:     var(--c-crema);
	--cms-danger-rgb:    176,69,58;
	--cms-danger:        rgb(var(--cms-danger-rgb));
	--cms-font:          var(--f-sans);
	--cms-font-title:    var(--f-serif);
	--cms-radius:        var(--r-btn);
	--cms-radius-lg:     var(--r-card);
}
.site-content { padding: 6.4rem 0 9.6rem; }
/* BANNER DE INTERNAS (index.php): relacion 16:5 a todo el ancho (600 de alto a 1920), la
   imagen en cover y el titulo del contenido encima, centrado, sobre un velo pino. */
.banner-interna { position: relative; aspect-ratio: 16 / 5; overflow: hidden; background: var(--c-pino); }
.banner-interna__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-interna::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(var(--c-ink-rgb), .28); }
.banner-interna__titulo {
	position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: min(var(--maxw), 100% - var(--gut) * 2); margin: 0; text-align: center;
	font-family: var(--f-serif); font-weight: 500; font-size: 5.2rem; line-height: 1.1;
	color: var(--c-white); text-shadow: 0 2px 24px rgba(var(--c-ink-rgb), .45);
}
.site-content--con-banner { padding-top: 5.6rem; }
.site-content .content-box, .site-content .mod-box { width: min(var(--maxw), 100% - var(--gut) * 2); margin: 0 auto 4rem; }
.site-content .content-box-title, .site-content .mod-box-title { font-family: var(--f-serif); font-weight: 500; font-size: 4.4rem; line-height: 1.1; color: var(--cms-title); margin: 0 0 3.2rem; }
.site-content .content-box-title::after, .site-content .mod-box-title::after { content: ""; display: block; width: 5.6rem; height: 3px; background: var(--c-oro); margin-top: 2rem; }
.site-content .content-area { font-size: 1.7rem; line-height: 1.65; color: var(--cms-text); }
.site-content .content-area a { color: var(--c-gold); text-decoration: underline; }
.site-content h1, .site-content h2, .site-content h3, .site-content h4 { font-family: var(--f-serif); font-weight: 500; color: var(--cms-title); line-height: 1.15; }
.site-content h1 { font-size: 4.4rem; }
.site-content h2 { font-size: 3.4rem; }
.site-content h3 { font-size: 2.6rem; }
.site-content p { margin: 0 0 1.6rem; }
.site-content ul, .site-content ol { margin: 0 0 1.6rem 2.4rem; padding: 0; }
.site-content ul { list-style: disc; }
.site-content ol { list-style: decimal; }
.site-content img { height: auto; }
.site-content hr { border: 0; border-top: 1px solid var(--cms-border); margin: 3.2rem 0; }
.site-content blockquote { margin: 0 0 1.6rem; padding-left: 2rem; border-left: 3px solid var(--c-oro); font-family: var(--f-serif); font-style: italic; font-size: 2rem; }
.site-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; }
.site-content th, .site-content td { border: 1px solid var(--cms-border); padding: 1.2rem; text-align: left; }
.site-content th { background: var(--cms-surface-alt); color: var(--cms-title); }

/* Controles de formulario (se resetea el look de Bootstrap 3) */
.site-content .form-control,
.site-content input[type="text"], .site-content input[type="email"],
.site-content input[type="tel"],  .site-content input[type="number"],
.site-content input[type="password"], .site-content input[type="search"],
.site-content select, .site-content textarea,
form.formgenerator .form-control,
form.formgenerator input.inputformgenerator {
	width: 100%; height: 5rem; box-sizing: border-box; padding: 0 1.6rem;
	border: 1px solid var(--cms-field-border); border-radius: var(--cms-radius);
	background: var(--cms-field); font-family: var(--cms-font); font-size: 1.7rem;
	color: var(--cms-title); box-shadow: none;
}
.site-content textarea, form.formgenerator textarea { height: auto; min-height: 14rem; padding: 1.4rem 1.6rem; line-height: 1.6; }
.site-content .form-control:focus, .site-content input:focus, .site-content textarea:focus,
form.formgenerator .form-control:focus, form.formgenerator input.inputformgenerator:focus {
	background: var(--cms-field-focus); border-color: var(--c-gold); outline: none; box-shadow: none;
}
.site-content ::placeholder, form.formgenerator ::placeholder { color: var(--cms-muted); }
.site-content select, form.formgenerator select { -webkit-appearance: none; appearance: none; }
.site-content input[type="file"] { height: auto; padding: 1.2rem 1.6rem; }
.site-content fieldset { border: 0; margin: 0 0 1.8rem; padding: 0; }
.site-content label, form.formgenerator label, form.formgenerator .control-label {
	display: block; margin-bottom: .8rem; font-family: var(--cms-font); font-size: 1.6rem; font-weight: 500; line-height: 1.4; color: var(--cms-text);
}

/* Formgenerator: el submit del core es el boton solido del tema */
.site-content form.formgenerator .form-group { margin-bottom: 2rem; }
.site-content form.formgenerator #fg_buttons { margin-top: 2.4rem; }
.site-content form.formgenerator #fg_submit {
	min-height: 5.2rem; padding: 0 3.2rem; border: 0; border-radius: var(--cms-radius);
	background: var(--cms-primary) !important; color: var(--cms-on-accent) !important;
	font-family: var(--cms-font); font-size: 1.7rem; font-weight: 500; cursor: pointer;
}
.site-content form.formgenerator #fg_submit:hover { background: var(--c-pino) !important; }

/* Migas */
.site-content .breadcrumb { background: transparent; padding: 0; margin-bottom: 2.4rem; font-size: 1.4rem; color: var(--cms-muted); }
.site-content .breadcrumb a { color: var(--c-gold); }

/* Paginador (a.linkButton). BS3 trae `.btn.disabled { opacity: .65 }`. */
.site-content .pagination > li > a, .site-content .pagination > li > span { background: var(--cms-surface); border-color: var(--cms-border); color: var(--cms-text); }
.site-content .pagination > .active > a, .site-content .pagination > .active > span { background: var(--cms-primary); border-color: var(--cms-primary); color: var(--cms-on-accent); }
.site-content a.linkButton, .site-content input[type="button"] {
	display: inline-block; margin: 0 .4rem; padding: .8rem 1.4rem;
	border: 1px solid var(--cms-border); border-radius: var(--cms-radius);
	background: transparent; color: var(--cms-text) !important;
	font-family: var(--cms-font); font-size: 1.6rem; text-decoration: none; opacity: 1;
}
.site-content a.linkButton:hover, .site-content a.linkButton:focus { background: var(--cms-surface-alt); color: var(--cms-primary) !important; }
.site-content #currentPaginator { background: var(--cms-primary) !important; color: var(--cms-on-accent) !important; border-color: var(--cms-primary); opacity: 1; }

/* Listados de noticias / blog / eventos. El modulo de noticias carga su main.css
   con `body { background-color: #f0f6fb !important }` y azulea el sitio. */
html body { background: var(--cms-bg) !important; }
.site-content .grid--style--list { display: grid; gap: 3rem; }
.site-content .article__style--list {
	background: var(--cms-surface); border: 1px solid var(--cms-border);
	border-radius: var(--cms-radius-lg); padding: 2.4rem; overflow: hidden;
}
.site-content .style--list__title { font-size: 2.6rem; margin-bottom: 1rem; }
.site-content .style--list__date, .site-content .style--list__author { color: var(--cms-muted); font-size: 1.5rem; }
/* La caratula del detalle viene con width="99%" de ATRIBUTO (pitfall 43). */
.site-content .imagen_ver_evento { width: auto !important; max-width: 100%; max-height: 52rem; height: auto; }

/* Buscador: el input flex:1 y el boton flex:0, o el boton sale del viewport. */
.site-content .input-group { display: flex; }
.site-content .input-group > .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
.site-content .input-group-btn { flex: 0 0 auto; display: flex; width: auto; }
.site-content .media { display: flex; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--cms-border); }
.site-content .media-left { flex: 0 0 auto; }
.site-content .media-heading { margin: 0 0 .8rem; font-size: 2.2rem; }

/* FAQ (acordeon de BS3) */
.site-content .panel { background: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: var(--cms-radius-lg); box-shadow: none; margin-bottom: 1.6rem; overflow: hidden; }
.site-content .panel-heading { background: transparent; border: 0; padding: 1.8rem 2.2rem; }
.site-content .panel-title { font-size: 2.2rem; margin: 0; }
.site-content .panel-title a, .site-content .panel-title a:link, .site-content .panel-title a:visited { color: var(--cms-title); text-decoration: none; }
.site-content .panel-title a:hover, .site-content .panel-title a:focus { color: var(--c-gold); }
.site-content .panel-body { border-top: 1px solid var(--cms-border); padding: 1.8rem 2.2rem; }

/* Tabs (nav-tabs) */
.site-content .nav-tabs { border-bottom: 1px solid var(--cms-border); }
.site-content .nav-tabs > li > a { color: var(--cms-muted); border: 0; border-radius: 0; font-family: var(--cms-font); text-decoration: none; }
.site-content .nav-tabs > li > a:hover { background: var(--cms-surface-alt); color: var(--cms-title); }
.site-content .nav-tabs > li.active > a, .site-content .nav-tabs > li.active > a:hover, .site-content .nav-tabs > li.active > a:focus {
	background: transparent; color: var(--cms-title); border: 0; border-bottom: 2px solid var(--c-gold);
}

/* Grid BS3 dentro del contenido: el .row trae margenes de -15px. */
.site-content .row { margin-left: -1.5rem; margin-right: -1.5rem; }
.site-content [class*="col-"] { padding-left: 1.5rem; padding-right: 1.5rem; }

/* Login (modulo `login`): su main.css esta TOKENIZADO con --pgl-*. */
.site-content .pg-login {
	--pgl-font-primary:     var(--cms-font-title);
	--pgl-font-secondary:   var(--cms-font);
	--pgl-bg:               var(--cms-bg);
	--pgl-surface:          var(--cms-surface);
	--pgl-line:             var(--cms-border);
	--pgl-line-soft:        var(--cms-border);
	--pgl-text:             var(--cms-title);
	--pgl-text-body:        var(--cms-text);
	--pgl-muted:            var(--cms-muted);
	--pgl-primary:          var(--cms-primary);
	--pgl-primary-dark:     var(--cms-primary);
	--pgl-primary-soft:     var(--cms-surface-alt);
	--pgl-icon-bg:          var(--cms-surface-alt);
	--pgl-link:             var(--c-gold);
	--pgl-danger:           var(--cms-danger);
	--pgl-radius-sm:        var(--cms-radius);
	--pgl-radius-md:        var(--cms-radius);
	--pgl-radius-lg:        var(--cms-radius-lg);
	--pgl-shadow-modal:     none;
	--pgl-cta:              var(--cms-primary);
	--pgl-cta-bg:           var(--cms-primary);
	--pgl-cta-bg-hover:     var(--c-pino);
	--pgl-cta-border:       var(--cms-primary);
	--pgl-cta-border-hover: var(--c-pino);
	--pgl-cta-text:         var(--cms-on-accent);
	--pgl-cta-text-hover:   var(--cms-on-accent);
	padding: 0; min-height: 0; font-family: var(--cms-font);
}
.site-content .pg-login__card { max-width: 80rem; margin: 0 auto; background: var(--cms-surface); border-color: var(--cms-border); border-radius: var(--cms-radius-lg); }
.site-content .pg-login__header { padding: 3.2rem 3.2rem .4rem; }
.site-content .pg-login__body   { padding: 2.4rem 3.2rem 3.2rem; }
.site-content .pg-login__alert  { margin: 0 3.2rem; }
.site-content .pg-login h1.pg-login__title {
	font-family: var(--cms-font-title); font-size: 2.8rem; font-weight: 500; line-height: 1.2;
	color: var(--cms-title); margin: 0 0 .6rem; padding: 0; text-transform: none;
}
.site-content .pg-login h1.pg-login__title::after { content: none; }
.site-content .pg-login p { margin: 0; max-width: none; }
.site-content .pg-login a, .site-content .pg-login a:link, .site-content .pg-login a:visited { text-decoration: none; }
.site-content .pg-login a.pg-login__link { color: var(--cms-text); }
.site-content .pg-login a.pg-login__link:hover, .site-content .pg-login a.pg-login__link:focus { color: var(--c-gold); }
.site-content .pg-login label { color: var(--cms-text); margin-bottom: .6rem; }
.site-content .pg-login .pg-login__input,
.site-content .pg-login__form input[type="text"],
.site-content .pg-login__form input[type="password"],
.site-content .pg-login__form input[type="email"],
.site-content .pg-login__form input[type="tel"] { background: var(--cms-field); color: var(--cms-title); border-color: var(--cms-field-border); }
.site-content .pg-login .pg-login__input:focus, .site-content .pg-login__form input:focus { background: var(--cms-field-focus); border-color: var(--c-gold); }
.site-content .pg-login__check-mark { background: var(--cms-field); border-color: var(--cms-field-border); }
.site-content .pg-login__social-btn,
.site-content .pg-login__social-btn--google,
.site-content .pg-login__social-btn--facebook,
.site-content .pg-login__social-btn--x { background: var(--cms-surface-alt); color: var(--cms-title) !important; border: .1rem solid var(--cms-border); }
.site-content .pg-login__social-btn:hover,
.site-content .pg-login__social-btn--google:hover,
.site-content .pg-login__social-btn--facebook:hover,
.site-content .pg-login__social-btn--x:hover { background: var(--cms-surface); color: var(--cms-primary) !important; border-color: var(--cms-primary); }
.site-content .pg-login__social-btn--facebook svg, .site-content .pg-login__social-btn--x svg { fill: currentColor; }
.site-content .pg-login__alert { background: var(--cms-surface-alt); color: var(--cms-danger); border-color: var(--cms-danger); }
.site-content .pg-login__alert svg { fill: var(--cms-danger); }
@media (max-width: 767px) {
	.site-content { padding: 4rem 0 6.4rem; }
	.banner-interna__titulo { font-size: 2.6rem; }
	.site-content--con-banner { padding-top: 4rem; }
	.site-content .content-box-title, .site-content .mod-box-title { font-size: 3.4rem; }
	.site-content .pg-login__header { padding: 2.4rem 2rem .4rem; }
	.site-content .pg-login__body   { padding: 2rem; }
	.site-content .pg-login__alert  { margin: 0 2rem; }
}

/* ---------------------------------------------------------------------
   17. Modo ADMINISTRANDO — la cabecera pasa a static para no pisar la barra
   del admin (unica excepcion a "siempre visible").
   --------------------------------------------------------------------- */
body.pg-adm .site-top { position: static; }

/* 18. Widget SSL del core (regla dura 10): el harness no lo pinta, prod si. */
#pge_ssl_widget { display: none; }

@media (prefers-reduced-motion: reduce) {
	.rail__track { scroll-behavior: auto; }
	.card-lift, .arrow-x, .libro__marco { transition: none; }
}