/*
Theme Name: Adriana Ruvalcaba
Author: Adriana Ruvalcaba
Description: Tema a la medida para Adriana Ruvalcaba: desarrollo humano para personas, familias y organizaciones. Incluye inicio, Empresas, Asesoría Privada 1:1, Comunidad Luciérnaga, Trayectoria, Blog y Contacto. Al activarlo crea las páginas y el menú automáticamente.
Version: 1.9.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adriana-ruvalcaba
*/

/* ==========================================================================
   0. Tipografías (incluidas en el tema, licencia SIL OFL 1.1)
   ========================================================================== */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
}

/* ==========================================================================
   1. Variables
   ========================================================================== */
:root {
	--tinta: #211c18;
	--topo: #8a7461;
	--topo-claro: #c9b6a0;
	--arena: #f4ede4;
	--papel: #fffdf9;
	--luz: #f0b73c;
	--luz-suave: #f8dc9a;
	--noche: #17211e;
	--linea: rgba(33, 28, 24, 0.16);
	--linea-clara: rgba(255, 253, 249, 0.2);

	--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--sans: "Figtree", "Helvetica Neue", Arial, sans-serif;

	--ancho: 1200px;
	--borde: clamp(20px, 5vw, 48px);
	--aire: clamp(64px, 9vw, 128px);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

p {
	margin: 0 0 1.1em;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 500;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

:focus-visible {
	outline: 3px solid var(--luz);
	outline-offset: 3px;
}

.saltar {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--tinta);
	color: var(--papel);
}

.saltar:focus {
	left: 8px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ==========================================================================
   3. Estructura
   ========================================================================== */
.contenedor {
	width: 100%;
	max-width: calc(var(--ancho) + var(--borde) * 2);
	margin-inline: auto;
	padding-inline: var(--borde);
}

.columna {
	max-width: calc(760px + var(--borde) * 2);
}

.columna--centro {
	text-align: center;
}

.sec {
	position: relative;
	padding-block: var(--aire);
}

.sec--arena {
	background: var(--arena);
}

.sec--tinta {
	background: var(--tinta);
	color: var(--papel);
}

.sec--noche {
	background: var(--noche);
	color: var(--papel);
	overflow: hidden;
}

.sec--pegada {
	padding-top: clamp(40px, 5vw, 64px);
}

.centrado {
	margin: clamp(40px, 5vw, 64px) 0 0;
	text-align: center;
}

/* ==========================================================================
   4. Tipografía
   ========================================================================== */
.titulo {
	font-family: var(--serif);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin-bottom: 0.55em;
}

.titulo--grande {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	line-height: 1.04;
}

.titulo--enorme {
	font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
}

.titulo em {
	font-weight: 500;
	color: var(--topo);
}

.sec--tinta .titulo em,
.sec--noche .titulo em {
	color: var(--luz-suave);
}

.antetitulo {
	margin: 0 0 1.1em;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--topo);
}

.antetitulo a {
	text-decoration: none;
}

.sec--tinta .antetitulo,
.sec--noche .antetitulo {
	color: var(--luz);
}

.subtitulo {
	margin: 1.8em 0 0.8em;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--topo);
}

.entrada {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
	line-height: 1.55;
	max-width: 36em;
}

.columna--centro .entrada {
	margin-inline: auto;
}

.cita {
	font-family: var(--serif);
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.22;
	text-wrap: pretty;
	margin-bottom: 0.9em;
}

.cita--comillas {
	position: relative;
	padding: 0.9em 0 0.5em 0.2em;
}

.cita--comillas::before,
.cita--comillas::after {
	position: absolute;
	z-index: -1;
	font-family: var(--serif);
	font-size: clamp(11rem, 8rem + 14vw, 19rem);
	font-style: normal;
	font-weight: 600;
	line-height: 1;
	color: var(--luz);
	opacity: 0.38;
	pointer-events: none;
}

.cita--comillas::before {
	content: "\201C";
	top: -0.2em;
	left: -0.32em;
}

.cita--comillas::after {
	content: "\201D";
	right: -0.1em;
	bottom: -0.62em;
}

.nota {
	margin: 1.2em 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--topo);
}

.sec--tinta .nota {
	color: var(--luz);
}

.aviso {
	margin: 1.6em 0;
	padding: 18px 22px;
	border-left: 3px solid var(--luz);
	background: var(--arena);
	font-size: 0.9375rem;
}

.sec--arena .aviso {
	background: var(--papel);
}

.enlace {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--luz);
	padding-bottom: 2px;
}

.enlace:hover {
	border-bottom-color: currentColor;
}

/* ==========================================================================
   5. Botones
   ========================================================================== */
.boton {
	display: inline-block;
	padding: 17px 28px;
	border: 2px solid var(--tinta);
	border-radius: 999px;
	background: var(--tinta);
	color: var(--papel);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.boton:hover {
	background: var(--topo);
	border-color: var(--topo);
}

.boton--linea {
	background: transparent;
	color: var(--tinta);
}

.boton--linea:hover {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--papel);
}

.boton--luz {
	background: var(--luz);
	border-color: var(--luz);
	color: var(--tinta);
}

.boton--luz:hover {
	background: var(--papel);
	border-color: var(--papel);
	color: var(--tinta);
}

.boton--icono {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-left: 22px;
}

.boton--icono svg {
	flex: none;
}

.botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 2em;
}

.partido__texto > .boton,
.partido__texto > .enlace,
.columna > .boton {
	margin-top: 1.2em;
}

.solucion__cuerpo > .boton {
	margin-top: 2em;
}

/* ==========================================================================
   6. Cinta y cabecera
   ========================================================================== */
.cinta {
	overflow: hidden;
	background: var(--tinta);
	color: var(--papel);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cinta__pista {
	display: flex;
	width: max-content;
	padding-block: 10px;
	animation: cinta 48s linear infinite;
}

.cinta__pista span {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.cinta__pista span::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-inline: 22px;
	border-radius: 50%;
	background: var(--luz);
	box-shadow: 0 0 8px 2px rgba(240, 183, 60, 0.7);
}

@keyframes cinta {
	to {
		transform: translateX(-50%);
	}
}

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--papel);
	border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 84px;
}

.logo,
.custom-logo-link {
	display: block;
	flex: none;
}

.logo img,
.custom-logo-link img {
	width: auto;
	height: 56px;
}

.menu {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.7vw, 26px);
	list-style: none;
}

.menu a {
	display: block;
	padding: 8px 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.menu a:hover,
.menu .current-menu-item > a,
.menu .current_page_parent > a {
	border-bottom-color: var(--luz);
}

.menu > li:last-child > a {
	padding: 11px 20px;
	border: 2px solid var(--tinta);
	border-radius: 999px;
	background: var(--tinta);
	color: var(--papel);
}

.menu > li:last-child > a:hover {
	background: var(--topo);
	border-color: var(--topo);
}

.menu .sub-menu {
	display: none;
}

.menu-boton {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--tinta);
	font: 600 0.75rem/1 var(--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.menu-boton__lineas,
.menu-boton__lineas::before {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s;
}

.menu-boton__lineas {
	position: relative;
	transform: translateY(-4px);
}

.menu-boton__lineas::before {
	content: "";
	position: absolute;
	top: 8px;
}

.menu-abierto .menu-boton__lineas {
	transform: rotate(45deg);
}

.menu-abierto .menu-boton__lineas::before {
	top: 0;
	transform: rotate(-90deg);
}

@media (max-width: 1179px) {
	.cabecera__fila {
		min-height: 68px;
	}

	.logo img,
	.custom-logo-link img {
		height: 44px;
	}

	.menu-boton {
		display: inline-flex;
	}

	.navegacion {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 68px);
		overflow-y: auto;
		padding: 8px var(--borde) 28px;
		background: var(--papel);
		border-bottom: 1px solid var(--linea);
	}

	.menu-abierto .navegacion {
		display: block;
	}

	.menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu a {
		padding: 16px 0;
		border-bottom: 1px solid var(--linea);
		font-family: var(--serif);
		font-size: 1.375rem;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	.menu > li:last-child > a {
		margin-top: 20px;
		padding: 16px;
		font-family: var(--sans);
		font-size: 0.8125rem;
		letter-spacing: 0.12em;
		text-align: center;
		text-transform: uppercase;
	}
}

/* ==========================================================================
   7. Portada (inicio)
   ========================================================================== */
.portada {
	overflow: hidden;
	background: var(--arena);
}

.portada__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: end;
	gap: clamp(32px, 5vw, 80px);
}

.portada__texto {
	align-self: center;
	padding-block: clamp(48px, 7vw, 104px);
}

.portada__nombre {
	margin: 0 0 0.9em;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--topo);
}

.portada__titulo {
	font-family: var(--serif);
	font-size: clamp(2.75rem, 1.4rem + 5.2vw, 5.5rem);
	font-weight: 600;
	line-height: 0.96;
	letter-spacing: -0.025em;
	text-wrap: balance;
	margin-bottom: 0.4em;
}

.portada__secundario {
	margin: 1.8em 0 0;
}

.portada__foto {
	position: relative;
	align-self: end;
	padding-top: clamp(32px, 5vw, 64px);
}

.portada__foto img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 999px 999px 0 0;
}

.portada__luz {
	position: absolute;
	top: 0;
	left: -9%;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 183, 60, 0.85) 0%, rgba(240, 183, 60, 0.35) 38%, rgba(240, 183, 60, 0) 70%);
	animation: pulso 5s ease-in-out infinite;
}

@keyframes pulso {
	50% {
		opacity: 0.55;
		transform: scale(0.94);
	}
}

@media (max-width: 860px) {
	.portada__rejilla {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.portada__texto {
		padding-bottom: 8px;
	}

	.portada__foto {
		max-width: 440px;
		margin-inline: auto;
	}
}

/* ==========================================================================
   8. Bloques partidos (texto + foto)
   ========================================================================== */
.partido {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
}

.partido--inverso > .partido__texto {
	order: 2;
}

.partido__texto > :last-child {
	margin-bottom: 0;
}

.foto {
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.partido__foto .foto {
	aspect-ratio: 4 / 3;
}

.partido__foto--alta .foto {
	aspect-ratio: 4 / 5;
	object-position: 50% 20%;
}

.espacios {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 30px);
}

.espacio {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 2.6vw, 34px);
	border-radius: 22px;
	background: var(--arena);
	font-size: 0.9375rem;
}

.espacio__icono {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--luz);
	color: var(--tinta);
	box-shadow: 0 0 0 8px rgba(240, 183, 60, 0.22);
}

.espacio__titulo {
	font-family: var(--serif);
	font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	margin-bottom: 0.35em;
}

.espacio__frase {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.25;
	color: var(--topo);
	margin-bottom: 0.9em;
}

.espacio .lista {
	margin-bottom: 26px;
	border-top: 1px solid var(--linea);
}

.espacio .boton {
	margin-top: auto;
	padding: 15px 16px;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

/* Alinea título, frase, texto, lista y botón entre los tres cuadros. */
@supports (grid-template-rows: subgrid) {
	.espacio {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.espacio .boton {
		align-self: end;
	}
}

@media (max-width: 1020px) {
	.espacios {
		grid-template-columns: 1fr;
	}

	.espacio .boton {
		justify-self: start;
		align-self: flex-start;
		padding-inline: 26px;
	}
}

.encabezado {
	max-width: 880px;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.encabezado > :last-child {
	margin-bottom: 0;
}

.encabezado--fila {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	flex-wrap: wrap;
	max-width: none;
}

@media (max-width: 860px) {
	.partido {
		grid-template-columns: 1fr;
	}

	.partido--inverso > .partido__texto {
		order: 0;
	}

	.partido__foto--alta {
		max-width: 460px;
	}
}

/* ==========================================================================
   9. Luciérnagas (secciones de noche)
   ========================================================================== */
.sec--noche > .contenedor {
	position: relative;
}

.sec--noche .partido__foto .foto {
	aspect-ratio: 1;
	object-position: 50% 15%;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(240, 183, 60, 0.5), 0 0 90px rgba(240, 183, 60, 0.22);
}

.noche-cabeza {
	padding-block: clamp(88px, 12vw, 176px);
}

.luciernagas {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.luciernagas span {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff1c2;
	box-shadow: 0 0 10px 3px rgba(240, 183, 60, 0.95), 0 0 36px 14px rgba(240, 183, 60, 0.32);
	animation: vuelo 16s ease-in-out infinite, titilar 2.8s ease-in-out infinite;
	will-change: transform, opacity;
}

.luciernagas span:nth-child(even) {
	animation-name: vuelo-b, titilar;
	animation-duration: 21s, 3.7s;
}

.luciernagas span:nth-child(3n) {
	animation-name: vuelo-c, titilar-lento;
	animation-duration: 26s, 5.2s;
}

.luciernagas span:nth-child(1) { left: 6%; top: 22%; animation-delay: -2s, -0.37s; }
.luciernagas span:nth-child(2) { left: 14%; top: 71%; animation-delay: -8s, -1.48s; }
.luciernagas span:nth-child(3) { left: 23%; top: 12%; animation-delay: -14s, -2.59s; }
.luciernagas span:nth-child(4) { left: 33%; top: 86%; animation-delay: -5s, -0.93s; }
.luciernagas span:nth-child(5) { left: 44%; top: 8%; animation-delay: -11s, -2.04s; }
.luciernagas span:nth-child(6) { left: 52%; top: 92%; animation-delay: -16s, -2.96s; }
.luciernagas span:nth-child(7) { left: 61%; top: 16%; animation-delay: -6s, -1.11s; }
.luciernagas span:nth-child(8) { left: 70%; top: 80%; animation-delay: -12s, -2.22s; }
.luciernagas span:nth-child(9) { left: 79%; top: 9%; animation-delay: -1s, -0.18s; }
.luciernagas span:nth-child(10) { left: 88%; top: 62%; animation-delay: -9s, -1.67s; }
.luciernagas span:nth-child(11) { left: 95%; top: 28%; animation-delay: -15s, -2.77s; }
.luciernagas span:nth-child(12) { left: 3%; top: 90%; animation-delay: -4s, -0.74s; }
.luciernagas span:nth-child(13) { left: 48%; top: 50%; animation-delay: -13s, -2.40s; width: 4px; height: 4px; }
.luciernagas span:nth-child(14) { left: 28%; top: 45%; animation-delay: -7s, -1.29s; width: 4px; height: 4px; }
.luciernagas span:nth-child(15) { left: 10%; top: 44%; animation-delay: -10s, -1.85s; width: 4px; height: 4px; }
.luciernagas span:nth-child(16) { left: 39%; top: 28%; animation-delay: -17s, -3.15s; }
.luciernagas span:nth-child(17) { left: 66%; top: 55%; animation-delay: -3s, -0.55s; width: 4px; height: 4px; }
.luciernagas span:nth-child(18) { left: 84%; top: 36%; animation-delay: -12s, -2.22s; }
.luciernagas span:nth-child(19) { left: 91%; top: 86%; animation-delay: -6s, -1.11s; }
.luciernagas span:nth-child(20) { left: 57%; top: 70%; animation-delay: -18s, -3.33s; width: 4px; height: 4px; }
.luciernagas span:nth-child(21) { left: 19%; top: 30%; animation-delay: -8s, -1.48s; width: 4px; height: 4px; }
.luciernagas span:nth-child(22) { left: 74%; top: 26%; animation-delay: -14s, -2.59s; }

@keyframes vuelo {
	0% { transform: translate(0, 0); }
	20% { transform: translate(46px, -38px); }
	45% { transform: translate(92px, 14px); }
	70% { transform: translate(28px, 52px); }
	100% { transform: translate(0, 0); }
}

@keyframes vuelo-b {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-58px, -44px); }
	50% { transform: translate(-104px, 22px); }
	75% { transform: translate(-36px, 64px); }
	100% { transform: translate(0, 0); }
}

@keyframes vuelo-c {
	0% { transform: translate(0, 0) scale(1); }
	30% { transform: translate(64px, -86px) scale(1.25); }
	55% { transform: translate(-22px, -128px) scale(0.8); }
	80% { transform: translate(-70px, -40px) scale(1.1); }
	100% { transform: translate(0, 0) scale(1); }
}

@keyframes titilar {
	0%, 100% { opacity: 0.1; }
	12% { opacity: 1; }
	24% { opacity: 0.35; }
	38% { opacity: 1; }
	62% { opacity: 0.2; }
	80% { opacity: 0.9; }
}

@keyframes titilar-lento {
	0%, 100% { opacity: 0; }
	30% { opacity: 1; }
	45% { opacity: 0.4; }
	60% { opacity: 1; }
	85% { opacity: 0.05; }
}

/* ==========================================================================
   10. Libro y radio
   ========================================================================== */
.medios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: clamp(24px, 4vw, 56px);
}

.medio .foto {
	aspect-ratio: 1;
	object-position: 50% 28%;
}

.medio .foto--centro {
	object-position: 50% 52%;
}

.medio__texto {
	padding-top: 24px;
	max-width: 30em;
}

.medio__texto .antetitulo {
	margin-bottom: 0.6em;
}

.medio__texto .boton {
	margin-top: 0.6em;
}

@media (max-width: 760px) {
	.medios {
		grid-template-columns: 1fr;
	}

}

/* Podcast y videos */
.canales {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
}

.canal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.canal > p:not(.antetitulo) {
	max-width: 30em;
	color: var(--topo-claro);
}

.canal__marco {
	width: 100%;
	height: 352px;
	margin: auto 0 24px;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(255, 253, 249, 0.08);
}

.canal__marco iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.boton--icono .icono {
	width: 20px;
	height: 20px;
	color: inherit;
}

@supports (grid-template-rows: subgrid) {
	.canal {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: 0;
		justify-items: start;
	}

	.canal__marco {
		margin-top: 8px;
	}
}

@media (max-width: 860px) {
	.canales {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   11. Tarjetas del blog
   ========================================================================== */
.tarjetas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 36px);
}

.tarjeta {
	display: flex;
	flex-direction: column;
	background: var(--papel);
	border-top: 3px solid var(--tinta);
}

.tarjeta__imagen img {
	width: 100%;
	border-radius: 5px 5px 0 0;
	aspect-ratio: 44 / 31;
	object-fit: cover;
}

.tarjeta__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 26px 26px 24px;
}

.tarjeta__cat {
	margin: 0 0 0.9em;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--topo);
}

.tarjeta__cat a,
.tarjeta__titulo a {
	text-decoration: none;
}

.tarjeta__titulo {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
	margin-bottom: 0.6em;
}

.tarjeta__titulo a:hover {
	text-decoration: underline;
	text-decoration-color: var(--luz);
	text-decoration-thickness: 2px;
}

.tarjeta__extracto {
	font-size: 0.9375rem;
}

.tarjeta__meta {
	margin: auto 0 0;
	padding-top: 1em;
	font-size: 0.8125rem;
	color: var(--topo);
}

.tarjeta--proxima {
	border-top-color: var(--topo-claro);
}

@media (max-width: 900px) {
	.tarjetas {
		grid-template-columns: 1fr;
	}
}

.filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(28px, 4vw, 44px);
}

.filtros a {
	padding: 10px 18px;
	border: 1.5px solid var(--tinta);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.filtros a:hover,
.filtros a[aria-current] {
	background: var(--tinta);
	color: var(--papel);
}

.blog-intro {
	max-width: 760px;
	margin-top: 1.6em;
}

.vacio {
	max-width: 640px;
}

.navigation.pagination {
	margin-top: clamp(40px, 5vw, 64px);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.page-numbers {
	padding: 10px 18px;
	border: 1.5px solid var(--tinta);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.page-numbers.current,
a.page-numbers:hover {
	background: var(--tinta);
	color: var(--papel);
}

/* ==========================================================================
   12. Hablemos (cierre con tres caminos)
   ========================================================================== */
.caminos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--linea-clara);
}

.camino {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 220px;
	padding: 30px 30px 30px 0;
	border-bottom: 1px solid var(--linea-clara);
	text-decoration: none;
	transition: background-color 0.2s, padding 0.2s;
}

.camino + .camino {
	padding-left: 30px;
	border-left: 1px solid var(--linea-clara);
}

.camino__quien {
	font-family: var(--serif);
	font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: 600;
	line-height: 1.08;
	text-wrap: balance;
}

.camino__accion {
	align-self: flex-start;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--luz);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.camino:hover {
	padding-left: 30px;
	background: rgba(255, 253, 249, 0.07);
}

.caminos--claros,
.caminos--claros .camino,
.caminos--claros .camino + .camino {
	border-color: var(--linea);
}

.caminos--claros {
	margin-top: clamp(32px, 5vw, 56px);
}

.caminos--claros .camino:hover {
	background: var(--arena);
}

.cierre .titulo {
	margin-bottom: 0.8em;
}

@media (max-width: 860px) {
	.caminos {
		grid-template-columns: 1fr;
	}

	.camino,
	.camino + .camino {
		min-height: 0;
		gap: 22px;
		padding: 26px 0;
		border-left: 0;
	}

	.camino:hover {
		padding-left: 14px;
	}
}

/* ==========================================================================
   13. Cabezas de página interiores
   ========================================================================== */
.cabeza {
	padding-block: clamp(48px, 7vw, 96px);
}

.cabeza--corta {
	padding-bottom: clamp(40px, 5vw, 64px);
}

.cabeza .titulo--enorme {
	max-width: 17em;
}

.partido--cabeza {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.cabeza .partido__foto .foto {
	aspect-ratio: 1;
	object-position: 30% 50%;
}

.cabeza .partido__foto--alta .foto {
	aspect-ratio: 4 / 5;
	object-position: 50% 20%;
}

@media (max-width: 860px) {
	.partido--cabeza {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   14. Empresas
   ========================================================================== */
.solucion {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(24px, 6vw, 96px);
	padding-block: clamp(40px, 6vw, 80px);
	border-top: 1px solid var(--linea);
}

.solucion__cabeza {
	position: sticky;
	top: 120px;
	align-self: start;
}

.solucion__num {
	display: block;
	margin-bottom: 14px;
	font-family: var(--serif);
	font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
	font-style: italic;
	font-weight: 500;
	line-height: 0.9;
	color: var(--luz);
}

.solucion__frase {
	font-family: var(--serif);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-style: italic;
	line-height: 1.3;
	color: var(--topo);
	margin: 0;
}

.solucion__cuerpo > :first-child {
	margin-top: 0;
}

.lista {
	list-style: none;
}

.lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--linea);
	font-size: 0.9375rem;
	line-height: 1.4;
	break-inside: avoid;
}

.icono {
	flex: none;
	color: var(--topo);
}

.lista .icono {
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.lista--dos {
	columns: 2;
	column-gap: 32px;
}

.pasos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	list-style: none;
	counter-reset: paso;
}

.paso {
	counter-increment: paso;
	padding-top: 20px;
	border-top: 3px solid var(--tinta);
	font-size: 0.9375rem;
}

.paso::before {
	content: "0" counter(paso);
	display: block;
	margin-bottom: 18px;
	font-family: var(--serif);
	font-size: 2.5rem;
	font-style: italic;
	line-height: 1;
	color: var(--topo);
}

.paso__titulo {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 0.5em;
}

.paso p {
	margin: 0;
}

@media (max-width: 860px) {
	.solucion {
		grid-template-columns: 1fr;
	}

	.solucion__cabeza {
		position: static;
	}

	.pasos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.lista--dos {
		columns: 1;
	}

	.pasos {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   15. Asesoría Privada
   ========================================================================== */
.cuando {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 6vw, 96px);
	list-style: none;
	border-top: 1px solid var(--linea);
}

.cuando li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--linea);
	font-family: var(--serif);
	font-size: clamp(1.3125rem, 1.1rem + 0.7vw, 1.625rem);
	font-weight: 500;
	line-height: 1.22;
	text-wrap: balance;
}

.mirada {
	list-style: none;
}

.mirada li {
	display: flex;
	align-items: center;
	gap: 18px;
}

.mirada .icono {
	width: 30px;
	height: 30px;
	color: var(--luz);
}

.cuando .icono {
	box-sizing: content-box;
	width: 24px;
	height: 24px;
	padding: 11px;
	border-radius: 50%;
	background: var(--arena);
	color: var(--tinta);
}

.modalidad__icono {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--luz);
	box-shadow: 0 0 0 8px rgba(240, 183, 60, 0.22);
}

.modalidad__icono .icono {
	width: 26px;
	height: 26px;
	color: var(--tinta);
}

.centro li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mirada li {
	padding: 12px 0;
	border-bottom: 1px solid var(--linea-clara);
	font-family: var(--serif);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.1;
}

.mirada li:last-child {
	border-bottom: 0;
	color: var(--luz-suave);
}

.modalidades {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 36px);
}

.modalidad {
	padding: 32px 30px 34px;
	border-radius: 22px;
	background: var(--arena);
}

.modalidad p {
	margin: 0;
}

@media (max-width: 860px) {
	.cuando,
	.modalidades {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   16. Trayectoria
   ========================================================================== */
.centro {
	list-style: none;
	margin-top: 1.6em;
}

.centro li {
	padding: 10px 0;
	border-bottom: 1px solid var(--linea);
	font-family: var(--serif);
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	font-style: italic;
}

.ficha {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 6vw, 96px);
}

.grados,
.certificaciones {
	margin: 0;
	border-top: 1px solid var(--linea);
}

.grados > div,
.certificaciones > div {
	padding: 22px 0;
	border-bottom: 1px solid var(--linea);
}

.grados dt {
	font-family: var(--serif);
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
}

.grados dd,
.certificaciones dd {
	margin: 6px 0 0;
	color: var(--topo);
}

.certificaciones > div {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	align-items: baseline;
	gap: 8px 24px;
}

.certificaciones dt {
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
}

.certificaciones dd {
	margin: 0;
	color: var(--tinta);
}

@media (max-width: 860px) {
	.ficha {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.certificaciones > div {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   17. Contacto y formularios
   ========================================================================== */
.contacto {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.formulario {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.campo {
	margin: 0;
}

.campo--ancho {
	grid-column: 1 / -1;
}

.formulario__trampa {
	position: absolute;
	left: -9999px;
}

label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.875rem;
	font-weight: 600;
}

.opcional {
	font-weight: 400;
	color: var(--topo);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--tinta);
	border-radius: 8px;
	background: var(--papel);
	color: var(--tinta);
	font: inherit;
	font-size: 1rem;
}

textarea {
	resize: vertical;
}

.mensaje {
	padding: 16px 20px;
	border-left: 4px solid;
	background: var(--papel);
	font-weight: 500;
}

.mensaje--ok {
	border-color: #3d7a55;
}

.mensaje--error {
	border-color: #b3402e;
}

.contacto__directo .foto {
	aspect-ratio: 1;
}

.directo {
	list-style: none;
	border-top: 1px solid var(--linea);
}

.directo li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--linea);
}

.directo span {
	font-weight: 600;
}

.directo a {
	overflow-wrap: anywhere;
	text-align: right;
}

@media (max-width: 860px) {
	.contacto {
		grid-template-columns: 1fr;
	}

	.contacto__directo .foto {
		max-width: 420px;
	}
}

@media (max-width: 560px) {
	.formulario {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   18. Artículo y contenido del editor
   ========================================================================== */
.articulo__meta {
	margin: 0;
	color: var(--topo);
}

.articulo__imagen {
	margin-bottom: clamp(32px, 5vw, 56px);
}

.articulo__imagen img {
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	border-radius: 5px;
}

.contenido {
	font-size: 1.1875rem;
	line-height: 1.75;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.contenido--pagina {
	padding-bottom: var(--aire);
}

.contenido > * {
	margin-block: 0 1.3em;
}

.contenido h2,
.contenido h3,
.contenido h4 {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
}

.contenido h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.contenido h3 {
	font-size: 1.625rem;
}

.contenido h4 {
	font-size: 1.375rem;
}

.contenido a {
	text-decoration-color: var(--luz);
	text-decoration-thickness: 2px;
}

.contenido ul,
.contenido ol {
	padding-left: 1.3em;
}

.contenido li {
	margin-bottom: 0.4em;
}

.contenido blockquote {
	margin-inline: 0;
	padding-left: 24px;
	border-left: 3px solid var(--luz);
	font-family: var(--serif);
	font-size: 1.625rem;
	font-style: italic;
	line-height: 1.3;
}

.contenido blockquote cite {
	display: block;
	margin-top: 0.6em;
	font-family: var(--sans);
	font-size: 0.875rem;
	font-style: normal;
	color: var(--topo);
}

.contenido img {
	border-radius: 5px;
}

.contenido img,
.contenido figure {
	max-width: 100%;
	height: auto;
	margin-inline: 0;
}

.contenido figcaption {
	margin-top: 8px;
	font-size: 0.875rem;
	color: var(--topo);
}

.contenido hr {
	border: 0;
	border-top: 1px solid var(--linea);
	margin-block: 2.4em;
}

.contenido .wp-block-button__link {
	padding: 17px 28px;
	border-radius: 999px;
	background: var(--tinta);
	color: var(--papel);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.alignwide {
	width: min(1100px, 100vw - var(--borde) * 2);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.aligncenter {
	margin-inline: auto;
}

.contenido .credito-foto {
	margin-top: 2.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--linea);
	font-size: 0.875rem;
	color: var(--topo);
}

.contenido .wp-block-image img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
}

.articulo__pie {
	padding-bottom: var(--aire);
}

.articulo__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding-block: 28px;
	border-block: 1px solid var(--linea);
}

.articulo__nav div:last-child {
	text-align: right;
}

.articulo__nav span {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--topo);
}

.articulo__nav a {
	font-family: var(--serif);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
}

.articulo__nav a:hover {
	text-decoration: underline;
	text-decoration-color: var(--luz);
}

.comentarios {
	margin-top: 56px;
}

.comentarios__lista,
.comentarios__lista .children {
	list-style: none;
}

.comentarios__lista .children {
	padding-left: 28px;
}

.comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--linea);
}

.comment-author img {
	float: left;
	margin-right: 12px;
	border-radius: 50%;
}

.comment-metadata {
	font-size: 0.8125rem;
	color: var(--topo);
}

.comment-form p {
	margin-bottom: 18px;
}

/* ==========================================================================
   19. Pie de página
   ========================================================================== */
.pie {
	background: var(--noche);
	color: var(--papel);
	padding-top: clamp(56px, 7vw, 96px);
	font-size: 0.9375rem;
}

.pie__rejilla {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	gap: 40px clamp(24px, 5vw, 80px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

.pie__marca .logo img {
	height: 76px;
	margin-bottom: 20px;
}

.pie__marca p {
	max-width: 22em;
	color: var(--topo-claro);
}

.pie__titulo {
	margin-bottom: 16px;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--luz);
}

.pie__col ul {
	list-style: none;
}

.pie__titulo--sig {
	margin-top: 30px;
}

.pie__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pie__col .pie__redes li {
	margin: 0;
}

.pie__redes a {
	display: block;
	padding: 8px 16px;
	border: 1px solid var(--linea-clara);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.pie__col .pie__redes a:hover {
	border-color: var(--luz);
	background: var(--luz);
	color: var(--tinta);
	text-decoration: none;
}

.pie__nota {
	font-size: 0.8125rem;
	color: var(--topo-claro);
}

.pie__col li {
	margin-bottom: 10px;
}

.pie__col a {
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pie__col a:hover {
	text-decoration: underline;
	text-decoration-color: var(--luz);
}

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 22px;
	border-top: 1px solid var(--linea-clara);
	font-size: 0.8125rem;
	color: var(--topo-claro);
}

.pie__legal p {
	margin: 0;
}

@media (max-width: 860px) {
	.pie__rejilla {
		grid-template-columns: 1fr 1fr;
	}

	.pie__marca {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   20. Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.cinta__pista,
	.portada__luz {
		animation: none;
	}

	.luciernagas span {
		animation: none;
		opacity: 0.8;
	}

	* {
		transition: none !important;
	}
}

/* ==========================================================================
   21. Fondos decorativos: puntos, anillos de luz y resplandores
   ========================================================================== */
.sec > .contenedor,
.cabeza > .contenedor,
.portada > .contenedor,
.pie > .contenedor {
	position: relative;
	z-index: 1;
}

.cabeza,
.portada,
.pie {
	position: relative;
}

.sec::before,
.sec::after,
.cabeza::before,
.portada::before,
.pie::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Secciones claras: anillos de luz arriba y puntos abajo. */
.sec:not([class*="sec--"])::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%238a7461' stroke-opacity='.24'%3E%3Ccircle cx='320' cy='320' r='60'/%3E%3Ccircle cx='320' cy='320' r='110'/%3E%3Ccircle cx='320' cy='320' r='160'/%3E%3Ccircle cx='320' cy='320' r='210'/%3E%3Ccircle cx='320' cy='320' r='260'/%3E%3Ccircle cx='320' cy='320' r='310'/%3E%3C/svg%3E") no-repeat right -220px top -240px / 640px;
}

.sec:not([class*="sec--"])::after {
	background: radial-gradient(rgba(138, 116, 97, 0.3) 1.3px, transparent 1.7px) 0 0 / 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 420px 340px at 0% 100%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 420px 340px at 0% 100%, #000 10%, transparent 70%);
}

/* Secciones arena: puntos que se desvanecen, anillos y un resplandor dorado. */
.sec--arena::before,
.portada::before {
	background: radial-gradient(rgba(138, 116, 97, 0.34) 1.3px, transparent 1.7px) 0 0 / 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 520px 420px at 100% 0%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 520px 420px at 100% 0%, #000 10%, transparent 70%);
}

.sec--arena::after {
	background:
		radial-gradient(ellipse 520px 380px at 0% 100%, rgba(240, 183, 60, 0.2), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%238a7461' stroke-opacity='.24'%3E%3Ccircle cx='320' cy='320' r='60'/%3E%3Ccircle cx='320' cy='320' r='110'/%3E%3Ccircle cx='320' cy='320' r='160'/%3E%3Ccircle cx='320' cy='320' r='210'/%3E%3Ccircle cx='320' cy='320' r='260'/%3E%3Ccircle cx='320' cy='320' r='310'/%3E%3C/svg%3E") no-repeat left -260px bottom -300px / 640px;
}

.portada::before {
	-webkit-mask-image: radial-gradient(ellipse 480px 420px at 0% 100%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 480px 420px at 0% 100%, #000 10%, transparent 70%);
}

.portada {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%238a7461' stroke-opacity='.24'%3E%3Ccircle cx='320' cy='320' r='60'/%3E%3Ccircle cx='320' cy='320' r='110'/%3E%3Ccircle cx='320' cy='320' r='160'/%3E%3Ccircle cx='320' cy='320' r='210'/%3E%3Ccircle cx='320' cy='320' r='260'/%3E%3Ccircle cx='320' cy='320' r='310'/%3E%3C/svg%3E") no-repeat right -160px top -200px / 720px,
		radial-gradient(ellipse 700px 500px at 85% 20%, rgba(240, 183, 60, 0.16), transparent 70%),
		var(--arena);
}

/* Cabezas de páginas interiores. */
.cabeza {
	background: linear-gradient(180deg, var(--arena) 0%, var(--papel) 85%);
}

.cabeza::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%238a7461' stroke-opacity='.24'%3E%3Ccircle cx='320' cy='320' r='60'/%3E%3Ccircle cx='320' cy='320' r='110'/%3E%3Ccircle cx='320' cy='320' r='160'/%3E%3Ccircle cx='320' cy='320' r='210'/%3E%3Ccircle cx='320' cy='320' r='260'/%3E%3Ccircle cx='320' cy='320' r='310'/%3E%3C/svg%3E") no-repeat right -200px top -260px / 640px,
		radial-gradient(ellipse 520px 360px at 0% 0%, rgba(240, 183, 60, 0.14), transparent 70%);
}

/* Secciones oscuras: anillos dorados, puntos y resplandor. */
.sec--tinta::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%23f0b73c' stroke-opacity='.2'%3E%3Ccircle cx='320' cy='320' r='60'/%3E%3Ccircle cx='320' cy='320' r='110'/%3E%3Ccircle cx='320' cy='320' r='160'/%3E%3Ccircle cx='320' cy='320' r='210'/%3E%3Ccircle cx='320' cy='320' r='260'/%3E%3Ccircle cx='320' cy='320' r='310'/%3E%3C/svg%3E") no-repeat right -200px bottom -260px / 640px,
		radial-gradient(ellipse 600px 420px at 0% 0%, rgba(240, 183, 60, 0.12), transparent 70%);
}

.sec--tinta::after {
	background: radial-gradient(rgba(255, 253, 249, 0.16) 1.2px, transparent 1.6px) 0 0 / 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 460px 360px at 0% 100%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 460px 360px at 0% 100%, #000 10%, transparent 70%);
}

.sec--noche::before {
	background:
		radial-gradient(ellipse 700px 480px at 80% 50%, rgba(240, 183, 60, 0.1), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%23f0b73c' stroke-opacity='.2'%3E%3Ccircle cx='320' cy='320' r='60'/%3E%3Ccircle cx='320' cy='320' r='110'/%3E%3Ccircle cx='320' cy='320' r='160'/%3E%3Ccircle cx='320' cy='320' r='210'/%3E%3Ccircle cx='320' cy='320' r='260'/%3E%3Ccircle cx='320' cy='320' r='310'/%3E%3C/svg%3E") no-repeat left -280px top -300px / 640px;
}

.pie::before {
	background:
		radial-gradient(rgba(255, 253, 249, 0.14) 1.2px, transparent 1.6px) 0 0 / 24px 24px,
		radial-gradient(ellipse 640px 300px at 100% 0%, rgba(240, 183, 60, 0.1), transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
	mask-image: linear-gradient(180deg, #000, transparent 75%);
}

@media (max-width: 760px) {
	.sec:not([class*="sec--"])::before,
	.cabeza::before {
		background-size: 420px, auto;
	}
}

/* Tarjetas: reserva el espacio de la imagen mientras carga. */
.tarjeta__imagen {
	display: block;
	aspect-ratio: 44 / 31;
	overflow: hidden;
	background: var(--topo-claro);
}

.tarjeta__imagen img {
	height: 100%;
}

/* ==========================================================================
   22. Luz que acompaña al puntero (solo con ratón; la activa main.js)
   ========================================================================== */
.puntero {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
}

.puntero.es-visible {
	opacity: 1;
}

.puntero__halo {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
}

.puntero__halo::before {
	content: "";
	position: absolute;
	top: -140px;
	left: -140px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 214, 110, 0.5) 0%, rgba(240, 183, 60, 0.22) 30%, rgba(240, 183, 60, 0) 68%);
	animation: puntero-halo 2.4s ease-in-out infinite;
	transition: transform 0.3s;
}

.puntero.es-enlace .puntero__halo::before {
	transform: scale(1.3);
}

@keyframes puntero-halo {
	0%, 100% { opacity: 0.55; }
	35% { opacity: 1; }
	55% { opacity: 0.7; }
	75% { opacity: 0.95; }
}

@media (max-width: 860px) {
	.cita--comillas {
		padding-left: 0;
	}

	.cita--comillas::before {
		left: -0.06em;
	}

	.cita--comillas::after {
		right: -0.04em;
	}
}

/* ==========================================================================
   23. Comunidad Luciérnaga: grupo de WhatsApp y formulario propio
   ========================================================================== */
.botones--centro {
	justify-content: center;
}

.boton--clara {
	background: transparent;
	border-color: var(--papel);
	color: var(--papel);
}

.boton--clara:hover {
	background: var(--papel);
	border-color: var(--papel);
	color: var(--tinta);
}

.modalidad--papel {
	background: var(--papel);
}

.lista--grande li {
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	font-size: 1.0625rem;
}

.lista--grande .icono {
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 10px;
	border-radius: 50%;
	background: var(--arena);
	color: var(--tinta);
}

/* Fila verde del grupo de WhatsApp */
.grupo {
	position: relative;
	padding-block: clamp(40px, 5vw, 64px);
	background:
		radial-gradient(rgba(255, 255, 255, 0.22) 1.4px, transparent 1.8px) 0 0 / 22px 22px,
		radial-gradient(ellipse 600px 300px at 100% 50%, rgba(255, 255, 255, 0.25), transparent 70%),
		#25d366;
	color: #0b2e1a;
}

.grupo__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px 48px;
	flex-wrap: wrap;
}

.grupo__texto {
	flex: 1 1 420px;
}

.grupo__titulo {
	font-family: var(--serif);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin-bottom: 0.3em;
}

.grupo__texto p {
	max-width: 34em;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
}

.grupo__boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 22px 38px;
	border-radius: 999px;
	background: #0b2e1a;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.2s, background-color 0.2s;
}

.grupo__boton .icono {
	width: 26px;
	height: 26px;
	color: #25d366;
}

.grupo__boton::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(11, 46, 26, 0.55);
	animation: grupo-pulso 2s ease-out infinite;
}

.grupo__boton:hover {
	background: #06200f;
	transform: scale(1.04);
}

@keyframes grupo-pulso {
	0% { box-shadow: 0 0 0 0 rgba(11, 46, 26, 0.55); }
	70%, 100% { box-shadow: 0 0 0 22px rgba(11, 46, 26, 0); }
}

.grupo__nota {
	margin: 18px auto 0;
	font-size: 0.875rem;
}

/* Formulario de la comunidad */
.contacto--comunidad {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
}

.tarjeta-form {
	padding: clamp(24px, 3vw, 40px);
	border-radius: 22px;
	background: var(--papel);
	color: var(--tinta);
	box-shadow: 0 0 0 1px rgba(240, 183, 60, 0.55), 0 24px 60px -24px rgba(138, 116, 97, 0.45), 0 0 90px rgba(240, 183, 60, 0.22);
}

.tarjeta-form .mensaje {
	margin-bottom: 20px;
	background: var(--arena);
}

@media (max-width: 860px) {
	.contacto--comunidad {
		grid-template-columns: 1fr;
	}

	.grupo__boton {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grupo__boton::after {
		animation: none;
	}
}