/* Fuentes propias del sitio. Sin estos @font-face el navegador
   cae a Arial: las familias se referencian por nombre y no existen. */
@font-face {
	font-family: 'Earth';
	src: url('../fonts/Earth.woff') format('woff'),
	     url('../fonts/Earth.ttf') format('truetype'),
	     url('../fonts/Earth.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-primary: #a1981f;
	--color-primary-light: #CDBB61;
	--color-accent: #856E39;
	--color-accent2: #bfb100;
	--color-tint: #ECE8D1;
	--color-muted: #9F913B;
	--color-white: #ffffff;
	--color-dark: #3d331a;
	--font-heading: 'Sen', sans-serif;
	--font-earth: 'Earth', Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--site-max-width: 1900px;
	--side-padding: 5vw;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	color: #1a1a1a;
	background: var(--color-white);
	line-height: 1.6;
}

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

body a { text-decoration: none; color: inherit; }

.esn-container {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.mobile-break { display: none; }
@media (max-width: 900px) {
	.mobile-break { display: block; }}

body h1, body h2, body h3, body h4, body h5 {
	font-family: var(--font-heading);
	font-weight: 700;
}

/* Regla de marca (calcada de Solsticio de Agua): la tipografía Earth siempre
   en mayúscula para el título del sitio (h1) y títulos de blog/entrada. */
body h1,
body .site-title,
body .blog-title,
body .entry-title {
	font-family: var(--font-earth);
	text-transform: uppercase;
}

.eyebrow {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--color-primary);
	text-transform: uppercase;
	font-size: 0.9rem;
	margin-bottom: 0.75rem;
}

.eyebrow-earth {
	font-family: var(--font-earth);
	text-transform: uppercase;
	font-size: 36px;
	letter-spacing: 1px;
	color: var(--color-accent);
	text-shadow: 0 6px 12px rgba(255,255,255,0.8), 0 -6px 12px rgba(255,255,255,0.8);
}

.section-title {
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	margin: 0 auto 2.5rem;
	max-width: 800px;
	padding: 0 1.5rem;
}

.templo-title {
	color: var(--color-accent);
}

.esn-btn-paypal {
	background: #001c64;
	color: #fff;
}

.esn-btn-paypal:hover {
	background: #0070e0;
	color: #fff;
}

.esn-btn-ghost-green {
	background: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	display: block;
	width: fit-content;
	margin: 0 auto;
}

.esn-btn-ghost-white {
	border: 1.5px solid rgba(255,255,255,0.7);
	color: #fff;
	padding: 0.5rem 1.3rem;
	font-size: 0.85rem;
}

/* ---------- HERO ---------- */
.hero {
	position: relative;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 120px var(--side-padding) 220px;
}

/* Página Contacto */
.contact-info-section { background: var(--color-tint); padding: 99px 0 24px; }
.contact-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.contact-info-card {
	background: #fff;
	border-radius: 10px;
	padding: 20px 12px;
	text-align: center;
}
.contact-info-icon { width: 45px; height: 45px; object-fit: contain; margin: 0 auto 12px; }
.contact-info-title { color: var(--color-accent); font-size: 16px; margin-bottom: 8px; }
.contact-info-text { color: var(--color-primary); font-size: 16px; margin: 0; }
.contact-info-text a { color: inherit; text-decoration: none; }
.contact-info-text a:hover { color: var(--color-accent); }

.contact-section { padding-top: 24px; padding-bottom: 100px; background: var(--color-tint); }
.contact-box { max-width: 800px; margin: 0 auto; text-align: center; }
.contact-cta-heading { color: var(--color-accent); margin-bottom: 32px; }
.contact-note { color: var(--color-accent); font-size: 18px; border: 1px dashed var(--color-primary); border-radius: 12px; padding: 40px 24px; }

/* Página 404 */
.error-404-hero {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}
.error-404-image-wrap {
	position: relative;
	width: 70%;
}
.error-404-image {
	width: 100%;
	height: auto;
	display: block;
}
.error-404-btn-link {
	position: absolute;
	left: 7.5%;
	top: 77.5%;
	width: 15%;
	height: 5.5%;
}

.hero--tall {
	padding-top: 150px;
	padding-bottom: 220px;
}

.hero-contain {
	background: var(--color-tint);
	padding-bottom: 36px;
}
.hero-contain-image {
	max-width: 900px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}
.hero-title-earth {
	font-family: var(--font-earth);
	text-transform: uppercase;
	color: var(--color-primary);
	font-size: 48px;
	letter-spacing: 1px;
}

.hero-overlay {
	display: none;
}
.aporte-hero .hero-overlay {
	display: block;
	position: absolute;
	inset: 0;
	background: rgba(44, 44, 153, 0.35);
	z-index: 0;
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

.dar-amor {
	max-width: 1290px;
	margin: 0 auto 48px;
	padding: 0 24px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 400px;
}

.dar-amor-text {
	padding: 3rem 2rem;
}

.dar-amor-text p {
	color: var(--color-accent);
	font-size: 1.6rem;
	line-height: 1.5;
	margin-bottom: 2rem;
}

.dar-amor-text p:last-child {
	margin-bottom: 0;
}

.dar-amor-title {
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	color: var(--color-primary);
	padding: 5rem 24px 0;
	margin: 0 0 36px;
}

.dar-amor-image {
	height: 100%;
	min-height: 400px;
	border-radius: 24px;
	overflow: hidden;
}

.dar-amor-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-content h1 {
	font-family: 'Sen', sans-serif;
	font-weight: 700;
	text-transform: none;
	color: #fff;
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	line-height: 1.2;
	margin-bottom: 1.5rem;
	text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

.hero-semana-tierra {
	font-family: var(--font-earth);
	text-transform: uppercase;
	font-size: 36px;
	letter-spacing: 1px;
	color: var(--color-primary);
	text-shadow: 0 6px 12px rgba(255,255,255,0.8), 0 -6px 12px rgba(255,255,255,0.8);
	margin-top: 1.5rem;
}

.hero-title-red {
	color: var(--color-accent) !important;
	text-shadow: 0 2px 12px #fff !important;
	margin-bottom: 3.5rem !important;
	white-space: nowrap;
}

.hero-text {
	color: #f5f5f5;
	font-size: 1.05rem;
	margin-bottom: 2.2rem;
	text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.hero--tall .hero-text--cta {
	color: var(--color-accent) !important;
	text-shadow: 1.5px 1.5px 0 #9F913B !important;
}

.hero--tall .hero-text {
	font-size: 1.5rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: #9F913B;
	text-shadow: 2px 2px 0 var(--color-accent), 0 0 10px var(--color-accent);
}

/* ---------- NUESTRA TIERRA, NUESTRO TEMPLO ---------- */
.templo {
	padding: 5rem 0;
	background: var(--color-white);
}

.templo-grid {
	width: 100%;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	gap: 30px;
	box-sizing: border-box;
}

.templo-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

.templo-card--side { height: 270px; }
.templo-card--center { height: 570px; }

.templo-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.templo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.templo-card:hover img { transform: scale(1.06); }

.templo-card-poem {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 35px 110px;
	text-align: center;
	background: rgba(148,233,160,0.6);
}

.templo-poem-title {
	font-size: 36px;
	font-weight: 700;
	color: #fff;
	text-shadow: 3px 3px 0 var(--color-primary);
	margin-bottom: 24px;
}

.templo-poem-body {
	font-size: 22px;
	line-height: 1.6;
	color: #fff;
	text-shadow: 3px 3px 0 var(--color-primary);
	margin-bottom: 1.2em;
}

.templo-poem-body:last-child {
	margin-bottom: 0;
}

.templo-card--center .templo-card-poem {
	background: rgba(133,110,57,0.6);
}

.templo-card--center .templo-poem-title,
.templo-card--center .templo-poem-body {
	color: #fff;
}

.templo-card--side .templo-card-poem {
	padding: 12px 12px 20px;
	background: none;
}

.templo-card--side .templo-card-text {
	padding: 12px;
}

.templo-card--side .templo-card-text h5 {
	font-size: 0.75rem;
}

.templo-card--side .templo-card-text p {
	font-size: 0.65rem;
}

.templo-card--side .templo-poem-title {
	font-size: 26px;
	margin-bottom: 16px;
}

.templo-card--side .templo-poem-body {
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 1.4em;
}

.practica-poem {
	background: rgba(133,110,57,0.78);
}

.practica-poem .templo-poem-body {
	font-size: 16px;
	margin-bottom: 0.6em;
}

.practica-poem .templo-poem-title {
	margin-bottom: 8px;
}

.templo-poem-body.templo-poem-body--right {
	text-align: right;
	width: 100%;
	font-size: 30px;
	font-family: 'Roboto', sans-serif;
	text-shadow: 3px 3px 0 var(--color-primary);
}

.templo-poem-body.templo-poem-body--left {
	text-align: left;
	width: 100%;
	font-size: 30px;
	font-family: 'Roboto', sans-serif;
	text-shadow: 3px 3px 0 var(--color-primary);
}

.templo-card-text {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 35px;
	background: linear-gradient(0deg, rgba(15,14,23,0.85) 0%, transparent 100%);
	color: #fff;
	text-align: left;
}

.templo-card-text h5 {
	font-size: 1rem;
	margin-bottom: 0.05rem;
}

.templo-card-text p {
	font-size: 0.85rem;
	color: #e5e5e5;
}

/* ---------- BLOG CTA ---------- */
.instructors-section {
	padding: 5rem 0;
	text-align: center;
	background: var(--color-tint);
}

.instructors-title { margin-top: -45px; font-family: 'Roboto', sans-serif; color: var(--color-primary); }

.instructors-grid {
	display: grid;
	grid-template-columns: repeat(3, 344px);
	justify-content: center;
	margin-top: 50px;
	gap: 60px;
}

.instructor-card {
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.instructor-card:hover { transform: scale(1.05); }
.instructor-card img { width: 100%; height: 100%; object-fit: cover; }
.instructor-card--rose { background: #e2a3a3; }
.instructor-card--blue { background: var(--color-primary); }
.instructor-card--light { background: var(--color-primary-light); }
.instructor-card-wrap { display: flex; flex-direction: column; gap: 20px; }
.instructor-text { color: var(--color-accent); font-size: 16px; line-height: 1.5; text-align: center; }
.instructor-card-wrap--hover { position: relative; }
.instructor-text-reveal {
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 280px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var(--color-accent);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 25;
}
.instructor-card-wrap--hover:hover .instructor-text-reveal,
.instructor-card-wrap--hover:focus-within .instructor-text-reveal {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.instructor-text-reveal p {
	margin: 0;
	color: var(--color-primary);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.instructor-text-reveal--blue { border-color: var(--color-primary); }
.instructor-text-reveal--blue p { color: var(--color-accent); }
.instructors-parents {
	display: grid;
	grid-template-columns: repeat(2, 210px);
	justify-content: center;
	gap: 60px;
	margin-top: 50px;
}
.elements-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 60px;
}
.element-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.element-card img {
	width: 210px;
	height: 210px;
	object-fit: contain;
	transition: transform 0.2s ease;
}
.element-card:hover img { transform: scale(1.08); }
.element-card span { color: var(--color-accent); font-weight: 700; text-transform: uppercase; font-size: 14px; text-align: center; line-height: 1.5; }
.element-card--hover { position: relative; }
.element-text-reveal {
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 240px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var(--color-accent);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 25;
	overflow: hidden;
}
.element-text-reveal::before {
	content: '';
	position: absolute;
	inset: 12px;
	background-image: var(--watermark, url('../images/EnergiasElementales/Luz.webp'));
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.08;
	z-index: 0;
}
.element-text-reveal p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	line-height: 1.5;
	text-align: center;
}
.element-card--hover:hover .element-text-reveal,
.element-card--hover:focus-within .element-text-reveal {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Página Login */
.login-section { padding-top: 120px; padding-bottom: 120px; }
.login-box { max-width: 480px; margin: 0 auto; text-align: center; }
.login-title { color: var(--color-accent); margin-bottom: 16px; }
.login-note { color: var(--color-accent); font-size: 18px; border: 1px dashed var(--color-primary); border-radius: 12px; padding: 40px 24px; }

/* Página Tierra (equivalente a Nosotros/Agua) */
.nosotros-hero { padding: 85px 0 15px; text-align: center; }
.nosotros-title { color: var(--color-accent); }
.nosotros-subtitle { color: var(--color-primary); font-size: 22px; font-style: italic; margin-top: 12px; margin-bottom: 11px; }
.nosotros-tagline { color: var(--color-accent); font-size: 20px; margin-top: 12px; }
.instructors-subtitle { color: var(--color-primary); font-size: 18px; text-align: center; margin-top: -8px; margin-bottom: 30px; }
.nosotros-quienes { padding: 10px 0 60px; }
.nosotros-quienes-inner { max-width: 820px; margin: 0 auto; text-align: center; color: var(--color-accent); font-size: 20px; line-height: 1.6; }
.nosotros-quienes-inner p + p { margin-top: 24px; }
.nosotros-quienes-framed {
	border: 3px solid var(--color-primary);
	border-radius: 24px;
	padding: 20px;
	position: relative;
	overflow: hidden;
}
.nosotros-quienes-framed::before {
	content: '';
	position: absolute;
	inset: 36px;
	background: url('../images/EnergiasElementales/Luz.webp') center / contain no-repeat;
	opacity: 0.25;
	z-index: 0;
}
.nosotros-quienes-framed p {
	position: relative;
	z-index: 1;
}
.nosotros-cierre { padding: 60px 0 100px; text-align: center; }
.nosotros-cierre p { color: var(--color-accent); font-size: 22px; font-weight: 700; line-height: 1.6; }

/* Página Tierra (Elemento) — layout en 2 columnas */
.elemento-row { padding: 70px 0; overflow: hidden; }
.elemento-row--alt { background: var(--color-tint); }
.elemento-row-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.elemento-row--reverse .elemento-row-image { order: -1; }
.elemento-row-image img {
	width: 100%;
	height: 100%;
	max-height: 440px;
	object-fit: cover;
	border-radius: 24px;
}
.elemento-eyebrow { margin-bottom: 4px; }
.elemento-title {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-accent);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	letter-spacing: 1px;
	margin-bottom: 20px;
}
.elemento-lead { color: var(--color-primary); font-size: 18px; line-height: 1.7; }
.elemento-lead p + p { margin-top: 16px; }
.elemento-lead-single { color: var(--color-primary); font-size: 18px; line-height: 1.7; margin-bottom: 16px; }

.elemento-ficha { margin-top: 8px; }
.elemento-ficha-item { margin-bottom: 18px; }
.elemento-ficha-item dt {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	margin-bottom: 4px;
}
.elemento-ficha-item dd {
	color: var(--color-accent);
	font-size: 19px;
	line-height: 1.5;
	margin: 0;
}

.gallery-section { padding: 0; overflow: hidden; }
.gallery-marquee { width: 100%; overflow: hidden; }
.gallery-track {
	display: flex;
	width: max-content;
	animation: gallery-scroll 40s linear infinite;
}
.gallery-track img {
	height: 280px;
	width: auto;
	object-fit: cover;
	margin-right: 16px;
	border-radius: 12px;
	flex-shrink: 0;
}
@keyframes gallery-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }}

/* ---------- NEWSLETTER ---------- */
.newsletter {
	position: relative;
	max-width: 1252px;
	height: 444px;
	margin: 60px auto;
	padding: 0 24px;
	border-radius: 24px;
	overflow: hidden;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.newsletter-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newsletter-overlay {
	position: absolute;
	inset: 0;
	background: rgba(11,97,0,0.5);
}

.newsletter-content {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
	color: #fff;
}

.newsletter-content .eyebrow {
	color: #fff;
}

.newsletter-content h2 {
	color: #fff;
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin-bottom: 16px;
}

.newsletter-heading {
	font-family: 'Roboto', sans-serif;
	font-size: 35px;
}

.newsletter-desc {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: #fff;
	max-width: 900px;
	margin: 0 auto 28px;
	opacity: 0.9;
}

.newsletter-form {
	display: flex;
	max-width: 972px;
	margin: 0 auto;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.newsletter-form input,
.newsletter-form button {
	flex: 0 0 480px;
	width: 480px;
	height: 48px;
	box-sizing: border-box;
}

.newsletter-form input {
	border: none;
	padding: 0 40px;
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: 14px;
	background: #fff;
}

.newsletter-form input:focus { outline: 2px solid var(--color-primary); }

.newsletter-form button {
	padding: 0 32px;
	background: var(--color-primary);
}

.newsletter-form button:hover {
	background: var(--color-accent);
}

.newsletter-note {
	margin-top: 16px;
	font-size: 14px;
	color: #fff;
}

/* ---------- LOS 4 RETIROS DEL AÑO (sección compartida con los 3 sitios hermanos) ---------- */
.sites-section {
	position: relative;
	padding: 5rem 0;
	background: #fff;
}

.sites-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.06;
	z-index: 0;
}

.programs-title {
	position: relative;
	z-index: 1;
	font-size: 48px;
	font-family: 'Roboto', sans-serif;
	color: var(--color-primary);
}

.sites-intro {
	color: var(--color-primary);
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	text-align: center;
	font-size: clamp(16px, 2vw, 20px);
	max-width: 820px;
	padding: 0 24px;
	box-sizing: border-box;
	margin: -10px auto 50px;
}

.sites-list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: 1100px;
	margin: 0 auto;
}

.site-card {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--color-tint);
	border-radius: 24px;
	padding: 18px 24px;
	height: 260px;
	box-sizing: border-box;
}

.site-thumb {
	width: 372px;
	height: 248px;
	margin: -12px 0 -12px -18px;
	border-radius: 18px;
	object-fit: cover;
	flex-shrink: 0;
}

.site-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
}

.site-info h3 {
	font-family: var(--font-earth);
	text-transform: uppercase;
	font-size: 36px;
	margin-bottom: 4px;
	color: #1a1a1a;
}

.site-date {
	color: var(--color-primary);
	font-family: 'Roboto', var(--font-body);
	font-size: 36px;
	margin: 0;
	text-transform: uppercase;
}

.site-info h3.text-green { color: var(--color-primary); text-shadow: 0 2px 12px var(--color-primary-light); }
.site-info h3.text-gold { color: #9F913B; text-shadow: 0 2px 12px rgba(255,255,255,0.8); }
.site-info h3.text-blue { color: #69b5de; text-shadow: 0 2px 12px rgba(255,255,255,0.8); }
.site-info h3.text-cyan { color: #2c2c99; text-shadow: 0 2px 12px rgba(255,255,255,0.8); }
.site-info h3.text-red-gold { color: #c90012; text-shadow: 0 2px 12px rgba(255,255,255,0.8); }

.badge,
.site-info .esn-btn {
	width: 212px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: 'Roboto', var(--font-body);
	text-transform: uppercase;
	font-size: 16px;
	transition: transform 0.2s ease;
}

.badge:hover,
.site-info .esn-btn:hover { transform: scale(1.05); }

.badge {
	border-radius: 12px;
	color: #fff;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

.badge-green { background: var(--color-primary); box-shadow: 0 2px 12px var(--color-primary-light); color: #fff; }
.badge-gold { background: #9F913B; box-shadow: 0 2px 12px rgba(255,255,255,0.8); color: #fff; }
.badge-blue { background: #69b5de; box-shadow: 0 2px 12px rgba(255,255,255,0.8); color: #fff; }
.badge-cyan { background: #2c2c99; box-shadow: 0 2px 12px rgba(255,255,255,0.8); color: #fff; }
.badge-red-gold { background: #c90012; box-shadow: 0 2px 12px rgba(255,255,255,0.8); color: #fff; }

/* ---------- FOOTER ---------- */
.site-footer {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
	color: #fff;
}

.footer-top {
	max-width: 1290px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2.5rem;
	padding: 2rem 24px 1.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-horarios-col { align-items: center; text-align: center; }
.footer-horarios-col .footer-schedule-line:nth-of-type(1) { margin-top: 24px; }
.footer-horarios-col .footer-schedule-line:nth-of-type(2) { margin-top: 15px; }
.footer-horarios-col .social-icons { margin-top: 36px; justify-content: center; }
.footer-horarios-col h3 + h3 { margin-top: 12px; }

.footer-schedule-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 0.9rem;
	color: #fff;
}
.footer-schedule-line svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.footer-contact-col { text-align: center; }
.footer-contact-col .footer-contact-line:nth-of-type(1) { margin-top: 26px; }
.footer-contact-col .footer-contact-line:nth-of-type(2) { margin-top: 20px; }
.footer-contact-col .footer-contact-line:nth-of-type(3) { margin-top: 18px; }

.footer-contact-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 0.9rem;
	color: #fff;
}
.footer-contact-line svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #fff;
}
.footer-contact-line a {
	color: #fff;
	transition: color 0.2s ease;
}
.footer-contact-line a:hover { color: var(--color-primary-light); }

.footer-col h3, .footer-col h4 {
	color: #fff;
	font-size: 1rem;
	margin-bottom: 1rem;
}

.footer-center {
	text-align: center;
}

.footer-quote {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.5;
	color: #fff;
	text-shadow: 2px 2px 0 #9F913B;
	margin: 0;
}

.footer-logo-box {
	height: 88px;
	margin: 2rem auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-logo {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.footer-col a {
	display: inline-block;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
	color: #cfcfcf;
}
.footer-col a:hover { color: var(--color-primary-light); }

.social-icons {
	display: flex;
	gap: 0.9rem;
}
.social-icons a {
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 50%;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.social-icons a:hover { background: #ECE8D1; border-color: #ECE8D1; }
.social-icons a:hover svg { fill: var(--color-dark); }
.social-icons svg { fill: #fff; width: 16px; height: 16px; }

.footer-bottom {
	background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
}

.footer-bottom-inner {
	max-width: 1290px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 20px 24px;
	color: #fff;
	text-align: center;
}

.footer-bottom-inner p {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.footer-links a {
	color: #fff;
}

.footer-links a:hover {
	color: #ECE8D1;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 999px) {
	.hero { padding: 200px 1.5rem 150px; }
	.hero-contain { padding-bottom: 36px; }
	.hero--tall { padding-top: 200px; padding-bottom: 150px; }
	.hero-title-red { white-space: normal; font-size: 2rem; }
	.hero--tall .hero-text { font-size: 1.15rem; }
	.hero--tall .hero-text--cta { font-size: 1.15rem; }}

@media (max-width: 689px) {
	.hero { padding: 150px 1.5rem 70px; }
	.hero-contain { padding-bottom: 36px; }
	.hero--tall { padding-top: 150px; padding-bottom: 70px; }
	.hero-title-red { font-size: 1.5rem; }
	.hero--tall .hero-text { font-size: 1rem; }
	.hero--tall .hero-text--cta { font-size: 1rem; }
	.esn-btn-paypal { padding: 0.7rem 1.5rem; }}

/* Páginas legales (Privacidad / Términos / Cookies / Aviso Legal / Propiedad Intelectual / Reembolsos) */
.legal-hero { padding: 140px 0 20px; text-align: center; }
.legal-hero h1 { color: var(--color-accent); font-family: var(--font-heading); }
.legal-hero p { color: var(--color-primary); font-size: 16px; margin-top: 8px; }
.legal-content { max-width: 760px; margin: 0 auto; padding: 20px 24px 100px; color: var(--color-dark); line-height: 1.7; }
.legal-content h2 { color: var(--color-accent); font-family: var(--font-heading); font-size: 24px; margin: 40px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { color: var(--color-primary); font-size: 18px; margin: 24px 0 8px; }
.legal-content p { margin: 0 0 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--color-primary); }
.legal-content blockquote {
	margin: 0 0 16px;
	padding: 12px 20px;
	border-left: 3px solid var(--color-accent);
	background: var(--color-tint);
	font-style: italic;
	color: var(--color-primary);
}
.legal-table-wrap { overflow-x: auto; margin-bottom: 24px; }
.legal-content table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
.legal-content th, .legal-content td { border: 1px solid var(--color-tint); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-content th { background: var(--color-tint); color: var(--color-accent); font-family: var(--font-heading); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }

/* Footer-bottom en 2 filas centradas, consistente con el resto del portfolio */
.footer-bottom-inner { flex-direction: column; text-align: center; }

/* Banner de cookies, consistente con Agua/Aire */
.cookie-banner {
	position: fixed;
	left: 20px;
	bottom: 20px;
	max-width: 320px;
	background: #fff;
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	z-index: 999;
	font-size: 13px;
	text-align: center;
	color: var(--color-dark);
}
.cookie-banner p { margin: 0 0 12px; }
.cookie-actions { display: flex; gap: 10px; justify-content: center; }
.cookie-actions .esn-btn {
	padding: 0.5rem 1.3rem;
	font-size: 0.85rem;
	border: 1px solid var(--color-accent);
}
.cookie-actions .esn-btn-accent { background: var(--color-accent); color: #fff; }
.cookie-actions .esn-btn-accent:hover { background: #fff; color: var(--color-accent); }
.cookie-actions .esn-btn-outline { background: transparent; color: var(--color-accent); }
.cookie-actions .esn-btn-outline:hover { background: var(--color-accent); color: #fff; }
.cookie-banner.hidden { display: none; }

/* ---------- Pagina Elementos ---------- */
.elementos-hero {
	padding: 160px 0 20px;
	text-align: center;
}
.elementos-title {
	font-family: var(--font-earth);
	text-transform: uppercase;
	color: var(--color-primary);
	font-size: clamp(1.6rem, 6vw, 40px);
	word-break: break-word;
}
.elementos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	max-width: 900px;
	margin: 40px auto 100px;
	padding: 0 24px;
}
.elemento-card-full {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	border: 1px solid var(--color-primary);
	border-radius: 32px;
	padding: 24px 16px;
	max-width: 240px;
	margin: 0 auto;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.elemento-card-full:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(161,152,31,0.15);
}
.elemento-card-full img {
	width: 210px;
	height: 210px;
	object-fit: contain;
	border-radius: 24px;
}
.elemento-card-full p {
	color: var(--color-primary);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

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

body.nav-locked { overflow: hidden; }

/* ---------- Pagina Actividades (portada de Esenia Ur) ---------- */
.act-hero {
  padding: 160px 0 60px;
  background: #fff;
}
.act-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.act-hero-eyebrow { font-family: var(--font-earth); color: var(--color-primary); font-weight: 400; font-size: 18px; text-transform: uppercase; margin-bottom: 8px; }
.act-hero-title { font-family: 'Roboto', var(--font-body); color: var(--color-accent); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; margin-bottom: 16px; }
.act-hero-sub { color: var(--color-primary); font-size: 16px; font-weight: 400; line-height: 1.7; margin: 0; }
.act-hero-photo { border-radius: 24px; overflow: hidden; width: 62.5%; aspect-ratio: 1 / 1; margin-left: auto; }
.act-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.act-llamados {
  padding: 80px 0;
}
.act-llamados-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}
.act-compound-image { position: relative; height: 88%; }
.act-compound-main { border-radius: 20px; overflow: hidden; height: 100%; }
.act-compound-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-compound-inset {
  position: absolute;
  right: -24px;
  bottom: -40px;
  width: 45%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-accent);
  background: #fff;
}
.act-compound-inset img { width: 100%; height: 100%; object-fit: cover; }
.act-llamados-title { color: var(--color-primary); font-size: 28px; margin-bottom: 56px; }
.act-llamados-list { display: flex; flex-direction: column; gap: 28px; }
.act-llamados-item { display: flex; gap: 16px; align-items: flex-start; }
.act-check {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.act-check svg { width: 22px; height: 22px; }
.act-llamados-item h3 { color: var(--color-accent); font-size: 22px; margin-bottom: 6px; }
.act-llamados-item p { margin: 0; }
.act-cta { padding: 40px 0 80px; }
.act-cta-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.act-cta-title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.act-cta-title .accent { color: var(--color-accent); }
.act-cta-title .primary { color: var(--color-primary); display: block; }
.act-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.act-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 900px) {
  .act-llamados-inner { grid-template-columns: 1fr; }
  .act-gallery { grid-template-columns: repeat(2, 1fr); }
  .act-compound-inset { width: 55%; right: 0; }
}

/* ==================== Pagina Servicios ==================== */
.servicios-hero { padding: 160px 0 20px; text-align: center; }
.servicios-hero-titulo {
  font-family: var(--font-earth);
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 48px;
  letter-spacing: 1px;
  margin: 0;
}

.eyebrow-claro { color: rgba(255,255,255,0.78); }

.servicios-intro { background: #f2efd8; padding: 70px 0; }
.servicios-intro-inner,
.servicios-belleza-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.servicios-intro h2,
.servicios-belleza h2 {
  color: var(--color-primary);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  margin-bottom: 20px;
}
.servicios-intro p,
.servicios-belleza p { color: var(--color-accent); line-height: 1.7; margin-bottom: 24px; }

.servicios-pastillas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.servicio-pastilla {
  background: #e6dfba;
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
}
.servicio-pastilla .servicio-icono { color: var(--color-accent); margin-bottom: 12px; }
.servicio-pastilla h5 {
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.servicios-belleza { background: #f2efd8; padding: 20px 0 80px; }
.servicios-belleza-foto img { width: 100%; height: auto; border-radius: 18px; display: block; }

.servicios-listado { background: var(--color-primary); padding: 64px 0 80px; text-align: center; }
.servicios-listado-titulo { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 40px; }
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}
.servicio-card {
  position: relative;
  min-height: 240px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.servicio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 100%);
}
.servicio-card-inner { position: relative; z-index: 1; padding: 22px; }
.servicio-card h3 {
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.servicio-card p {
  color: #f2f2f2;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

@media (max-width: 980px) {
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .servicios-hero-titulo { font-size: 32px; }
  .servicios-intro-inner,
  .servicios-belleza-inner { grid-template-columns: 1fr; gap: 32px; }
  .servicios-belleza-inner .servicios-belleza-foto { order: -1; }
  .servicios-grid { grid-template-columns: 1fr; }
}

/* ==================== Pagina Planes ====================
   Calcada de academia-esenia-ur.local/membresias-2/, con la paleta de este sitio.
   Pestañas por nivel, tarjetas por periodo: los 4 periodos quedan a la vista
   para poder compararlos, que es la decision real al elegir. */
.esi-tabs-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 140px 1rem 80px;
  text-align: center;
}
.esi-title {
  font-size: 2rem;
  font-weight: 800;
  color: #856e39;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.esi-subtitle { color: #7d7418; margin-bottom: 2rem; font-size: 1.05rem; }

.esi-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e5e7eb;
  justify-content: center;
}
.esi-nav button {
  padding: 10px 22px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  color: #856e39;
  margin-bottom: -2px;
  border-radius: 6px 6px 0 0;
  transition: all .2s;
}
.esi-nav button.active,
.esi-nav button:hover {
  color: #7d7418;
  border-bottom-color: #7d7418;
  background: #f7f4e4;
}

.esi-panel { display: none; }
.esi-panel.active {
  display: inline-grid;
  grid-template-columns: repeat(4, 280px);
  gap: 1.25rem;
}

.esi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #7d7418;
  border-radius: 14px;
  padding: 2.75rem 1.5rem 2rem;
  text-align: center;
  background: #f2efd8;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .15s, background-color .2s;
}
.esi-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
  background: #efe7cf;
}
.esi-card.featured { border-color: #856e39; border-width: 2px; }

.esi-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #856e39;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.esi-card__dur {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #7d7418;
  letter-spacing: .08em;
  margin-bottom: .75rem;
}
.esi-card__price { font-size: 2.4rem; font-weight: 900; color: #7d7418; line-height: 1; }
.esi-card__per { font-size: .85rem; color: #7d7418; margin: .3rem 0 .75rem; }
.esi-card__equiv { font-size: .8rem; color: #856e39; font-weight: 700; margin-bottom: .75rem; }
.esi-card__desc {
  font-size: .88rem;
  color: #7d7418;
  margin-bottom: 1.25rem;
  min-height: 2.4em;
  line-height: 1.4;
  flex: 1;
}

.esi-card__btn {
  display: block;
  width: 100%;
  padding: 11px;
  border: 2px solid #7d7418;
  border-radius: 8px;
  background: #7d7418;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all .2s;
}
.esi-card__btn:hover { background: #856e39; border-color: #856e39; color: #fff; }
.esi-card.featured .esi-card__btn { background: #856e39; border-color: #856e39; }
.esi-card.featured .esi-card__btn:hover { background: #7d7418; border-color: #7d7418; }

@media (max-width: 1200px) {
  .esi-panel.active { grid-template-columns: repeat(2, 280px); }
}
@media (max-width: 640px) {
  .esi-tabs-wrap { padding-top: 120px; }
  .esi-panel.active { grid-template-columns: 1fr; }
  .esi-nav button { padding: 8px 14px; font-size: .85rem; }
}

/* ============ Blindaje contra el CSS de los plugins ============
   Blocksy y algunos plugins definen `input`, `[type="submit"]` y las clases
   genericas `.container` y `.btn` con la misma especificidad que la nuestra, y
   ganan porque sus hojas cargan despues. Las clases propias ya se renombraron a
   esn-container / esn-btn; esto repone lo que se pierde por orden de carga.
   Aplicado el 2026-08-17, igual que en Academia Esenia Ur. */
.esn-btn[type="submit"] {
  font-family: 'Roboto', var(--font-body);
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
body .newsletter-form input {
  height: 48px;
  font-size: 14px;
  border-radius: 12px;
}

/* ============ Refuerzo del body y los titulos ============
   Blocksy declara `body` y los titulos con la misma especificidad que esta
   hoja y gana por orden de carga: cambiaba el color del texto y estiraba los
   altos. Se repiten aca las mismas declaraciones con `html body`, que pesa
   mas. Los valores salen de este mismo archivo, no son nuevos.
   Aplicado el 2026-08-17. */
html body {
  font-family: var(--font-body);
  color: #1a1a1a;
  background: var(--color-white);
  line-height: 1.6;
}
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  line-height: inherit;
}.esn-btn:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}.esn-btn-accent {
	background: var(--color-accent);
	color: #fff;
}.esn-btn-small { padding: 0.5rem 1.3rem; font-size: 0.85rem; }/* Header transparente v2 — nunca pasa a fijo/sólido {
	transition: background 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
}

.esn-btn {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.9rem 2.2rem;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}.esn-btn:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}.esn-btn-accent {
	background: var(--color-accent);
	color: #fff;
}.esn-btn-small { padding: 0.5rem 1.3rem; font-size: 0.85rem; }/* Header transparente v2 — nunca pasa a fijo/sólido {
	transition: background 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
}

/* ==================== HEADER ====================
   Fijo arriba, fondo transparente. Desaparece al pasar los 60px de scroll
   y vuelve al subir. Logo de color. Menu blanco, rojo al pasar el cursor,
   verde en la pagina actual. Boton rojo con letra blanca, verde al pasar
   el cursor. Todo el texto en 12px. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	/* capa negra suave detras del header, en todas las paginas */
	background: rgba(0, 0, 0, 0.24);
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.site-header.hidden-on-scroll {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 24px;
}

.site-logo img {
	display: block;
	height: 60px;
	width: auto;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.main-nav a {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a:focus {
	color: var(--color-accent);
}

.main-nav a.current {
	color: var(--color-primary);
}

/* --- desplegable Retiros --- */
.nav-item-dropdown {
	position: relative;
}

/* puente invisible sobre el hueco: sin esto el panel se cierra al bajar el cursor */
.nav-item-dropdown::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}

.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	flex-direction: column;
	gap: 0.8rem;
	margin-top: 14px;
	padding: 14px 22px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
	display: flex;
}

.nav-dropdown-menu a {
	color: var(--color-accent);
	text-align: center;
}

.nav-dropdown-menu a:hover {
	color: var(--color-primary);
}

/* --- boton --- */
.header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-login {
	display: inline-block;
	padding: 10px 22px;
	background: var(--color-accent);
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: 12px;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.header-login:hover,
.header-login:focus {
	background: var(--color-primary);
	color: #ffffff;
}

/* Las paginas sin hero arrancan debajo del header, que mide 88px y es fijo.
   Sin esto los primeros 88px de contenido quedan tapados por la banda. */
main.sin-hero {
	padding-top: 60px;
}


/* Columna Contacto del footer, calcada de Academia Esenia Ur */
.footer-contact-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 26px;
	margin: 0;
}

.footer-contact-list svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: currentColor;
}

.footer-contact-list a,
.footer-contact-list span {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-contact-list a:hover {
	color: var(--color-accent);
}

.footer-col-title {
	font-family: 'Roboto', var(--font-body);
	font-size: 17.5px;
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 20px;
}

/* El campo y el boton del newsletter pedian 480px fijos cada uno mas 12 de
   separacion: 972 dentro de un formulario de 952, asi que el boton saltaba de
   linea. El campo pasa a ocupar lo que sobre y el boton lo que necesite. */

/* ==================== HEADER EN MOBILE ====================
   Hasta 980px el menu se guarda detras del boton de hamburguesa y se
   despliega como panel debajo del header. */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	background: var(--color-accent);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 980px) {
	.menu-toggle {
		display: flex;
	}

	.header-inner {
		padding: 10px 16px;
		gap: 1rem;
	}

	.site-logo img {
		height: 44px;
	}

	.main-nav {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: center;
		gap: 1.2rem;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.94);
		transition: max-height 0.3s ease, padding 0.3s ease;
	}

	.site-header.nav-open .main-nav {
		max-height: calc(100vh - 64px);
		padding: 24px 0 32px;
		overflow-y: auto;
	}

	/* dentro del panel oscuro el menu va blanco, sea cual sea el color que
	   tenga esa pagina en escritorio */
	.site-header.nav-open .main-nav a {
		color: #ffffff;
	}

	.site-header.nav-open .main-nav a:hover,
	.site-header.nav-open .main-nav a.current {
		color: var(--color-primary-light);
	}

	.nav-dropdown-menu {
		position: static;
		transform: none;
		display: flex;
		margin-top: 10px;
		padding: 10px 0;
		background: transparent;
		box-shadow: none;
	}

	.header-login {
		padding: 8px 16px;
		font-size: 11px;
	}

	body.nav-locked {
		overflow: hidden;
	}
}

/* Reglas base del boton, recuperadas: se habian borrado al limpiar el header */
.esn-btn {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.9rem 2.2rem;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.esn-btn:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.esn-btn-accent {
	background: var(--color-accent);
	color: #fff;
}

.esn-btn-small { padding: 0.5rem 1.3rem; font-size: 0.85rem; }

.esn-btn {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.9rem 2.2rem;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.esn-btn:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.esn-btn-accent {
	background: var(--color-accent);
	color: #fff;
}

.esn-btn-small { padding: 0.5rem 1.3rem; font-size: 0.85rem; }

/* Hero del index: dos botones propios, con las mismas medidas que el boton
   del header. No dependen de .esn-btn ni de ninguna regla general. */
.hero-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.hero-btn {
	display: inline-block;
	padding: 10px 22px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	border: none;
	border-radius: 12px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hero-btn-rojo {
	background: var(--color-accent);
	color: #ffffff;
}

.hero-btn-rojo:hover,
.hero-btn-rojo:focus {
	background: var(--color-primary);
	color: #ffffff;
}

.hero-btn-verde {
	background: var(--color-primary);
	color: #ffffff;
}

.hero-btn-verde:hover,
.hero-btn-verde:focus {
	background: var(--color-accent);
	color: #ffffff;
}

/* ==================== PIE EN MOBILE ====================
   Hasta 980px las tres columnas se apilan. Eran lo unico que rompia el
   ancho en 12 de las 13 paginas. */
@media (max-width: 980px) {
	.footer-top {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.footer-col {
		width: 100%;
		max-width: 420px;
		text-align: center;
	}

	.footer-logo {
		max-width: 240px;
		height: auto;
	}

	.footer-bottom-inner {
		flex-direction: column;
		align-items: center;
		gap: 14px;
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
	}

	.footer-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 18px;
	}
}

/* ==================== INICIO, CONTACTO Y NOSOTROS EN MOBILE ====================
   Hasta 980px las grillas de varias columnas pasan a una sola y las tarjetas
   dejan de ponerse en fila. Eran lo que sobraba de ancho en esas tres. */
@media (max-width: 980px) {

	/* inicio: las tarjetas de los 4 retiros se apilan */
	.site-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.site-thumb {
		width: 100%;
		max-width: 320px;
		height: auto;
	}

	.site-info {
		width: 100%;
		max-width: 320px;
		align-items: center;
	}

	.badge,
	.site-info .esn-btn {
		width: 100%;
		max-width: 260px;
	}

	/* contacto: las tres tarjetas de datos, una debajo de la otra */
	.contact-info-grid {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 28px;
	}

	.contact-info-card {
		width: 100%;
		max-width: 320px;
		text-align: center;
	}

	/* nosotros: los instructores en una sola columna */
	.instructors-parents,
	.instructors-grid {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 28px;
	}

	.instructor-card-wrap,
	.instructor-card {
		width: 100%;
		max-width: 300px;
	}

	.instructor-text-reveal,
	.element-text-reveal {
		width: 100%;
		max-width: 300px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
}

/* ==================== HEADER EN MOBILE ====================
   Hasta 980px el menu se guarda detras del boton de hamburguesa y se
   despliega como panel verde debajo del header. El boton de Iniciar sesion
   viaja dentro del menu: en la barra de arriba solo quedan el logo y la
   hamburguesa. */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	background: var(--color-accent);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 980px) {
	.menu-toggle {
		display: flex;
	}

	.header-inner {
		padding: 10px 16px;
		gap: 1rem;
	}

	.site-logo img {
		height: 44px;
	}

	.main-nav {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: center;
		gap: 1.2rem;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		background: var(--color-primary);
		transition: max-height 0.3s ease, padding 0.3s ease;
	}

	.site-header.nav-open .main-nav {
		max-height: calc(100vh - 64px);
		padding: 24px 0 32px;
		overflow-y: auto;
	}

	.site-header.nav-open .main-nav a {
		color: #ffffff;
	}

	.site-header.nav-open .main-nav a:hover,
	.site-header.nav-open .main-nav a.current {
		color: var(--color-primary-light);
	}

	/* el boton dentro del menu: rojo, y no cambia de color al pasar el dedo */
	.site-header.nav-open .main-nav .header-login {
		margin-top: 10px;
		background: var(--color-accent);
		color: #ffffff;
	}

	.nav-dropdown-menu {
		position: static;
		transform: none;
		display: flex;
		margin-top: 10px;
		padding: 10px 0;
		background: transparent;
		box-shadow: none;
	}

	body.nav-locked {
		overflow: hidden;
	}
}

/* Hero del index en mobile: los dos botones, uno debajo del otro */
@media (max-width: 980px) {
	.hero-botones {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.hero-btn {
		width: 100%;
		max-width: 260px;
		text-align: center;
	}
}

/* Los 4 Retiros del Ano en mobile: el contenido medía 406px de alto dentro de
   una tarjeta de 260 y se cortaban el subtitulo y el boton. Se achican las
   letras y la tarjeta crece con su contenido. */
@media (max-width: 980px) {
	.site-card {
		height: auto;
		min-height: 0;
		padding-bottom: 24px;
	}

	.site-info {
		height: auto;
		gap: 10px;
	}

	.site-info h3 {
		font-size: 20px;
		line-height: 1.25;
		margin: 0;
	}

	.site-info h3 small {
		display: block;
		font-size: 15px;
		line-height: 1.3;
		margin-top: 4px;
	}

	.site-date {
		font-size: 16px;
		line-height: 1.3;
		margin: 0;
	}

	.badge,
	.site-info .esn-btn {
		height: 34px;
		font-size: 12px;
	}
}

/* Nuestra Tierra Nuestro Templo y Suscribete, en mobile.
   Las 5 fotos iban en fila a 89px cada una; el recuadro del newsletter medía
   480px fijos dentro de una pantalla de 375. */
@media (max-width: 980px) {
	.templo-grid {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.templo-card {
		width: 100%;
		max-width: 320px;
	}

	/* la foto llena su tarjeta: antes con height:auto crecia a 491px dentro de
	   una tarjeta de 270 y se salia por abajo, dejando el texto fuera de la foto */
	.templo-card img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}

	.newsletter-content {
		width: 100%;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.newsletter-form {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 12px;
	}

	.newsletter-form input,
	.newsletter-form .esn-btn,
	.newsletter-form button {
		width: 100%;
		box-sizing: border-box;
	}
}

/* El boton de Iniciar sesion existe dos veces: el de escritorio va en la barra,
   a la derecha; el de mobile viaja dentro del menu desplegable. Cada uno se
   esconde donde no corresponde. */
.header-login--mobile {
	display: none;
}

@media (max-width: 980px) {
	.header-login--pc {
		display: none;
	}

	.site-header.nav-open .main-nav .header-login--mobile {
		display: inline-block;
		margin-top: 10px;
		background: var(--color-accent);
		color: #ffffff;
	}

	/* el campo y el boton del newsletter traen flex: 0 0 480px, que en fila es
	   ancho y en columna se convierte en alto: de ahi los bloques gigantes */
	.newsletter-form input,
	.newsletter-form button,
	.newsletter-form .esn-btn {
		flex: 0 0 auto;
		height: auto;
		min-height: 48px;
	}
}

/* Los 4 Retiros del Ano y Nuestra Tierra Nuestro Templo, en mobile.
   Los dos parrafos iban en dos columnas de 151px cada una. Los titulos sobre
   las fotos llegaban a 36px y quedaban al borde del ancho de la imagen. */
@media (max-width: 980px) {
	.sites-intro {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center;
	}

}

/* La tarjeta del newsletter tocaba los dos bordes de la pantalla en mobile */
@media (max-width: 980px) {
	.newsletter {
		width: auto;
		margin-left: 16px;
		margin-right: 16px;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}

/* El poema sobre cada foto: en mobile la tarjeta pasa a 320px de ancho y el
   texto seguia en 22px con 35 de interlinea, asi que no entraba y se derramaba
   sobre la tarjeta de abajo. Se achica el texto y los margenes internos. */
@media (max-width: 980px) {
	.templo-card-poem {
		padding: 24px 20px 34px;
	}

	.templo-poem-body {
		font-size: 15px;
		line-height: 1.45;
		margin: 0 0 10px;
	}

	.templo-poem-title {
		font-size: 18px;
		line-height: 1.25;
		margin: 0 0 10px;
	}
}

/* La tarjeta con borde de Nosotros llegaba al filo de la pantalla en mobile y
   el borde quedaba cortado a los costados */
@media (max-width: 980px) {
	.nosotros-quienes-framed {
		width: auto;
		margin-left: 16px;
		margin-right: 16px;
		box-sizing: border-box;
	}
}

/* Las 6 Energias Elementales en mobile: iban en 3 columnas de 82px con la
   imagen encajada en una caja de 210px de alto, asi que quedaba un hueco
   vacio entre el icono y su texto. Pasan a 2 columnas y la imagen toma su
   alto natural. */
@media (max-width: 980px) {
	.elements-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		justify-items: center;
		gap: 28px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.element-card {
		height: auto;
		width: 100%;
		max-width: 300px;
	}

	.element-card img {
		width: 100%;
		height: auto;
		max-width: 300px;
	}

	.element-card span {
		font-size: 18px;
		line-height: 1.3;
	}
}

/* tierra.html en mobile: cada fila era una grilla de dos columnas, foto y
   texto al costado, en 375px de ancho. Pasan a una sola columna, con la foto
   arriba tambien en las filas invertidas. */
@media (max-width: 980px) {
	.elemento-row-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 20px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.elemento-row--reverse .elemento-row-inner > * {
		order: 0;
	}

	.elemento-row-inner img {
		width: 100%;
		max-width: 320px;
		height: auto;
	}

	.elemento-row-inner p,
	.elemento-row-inner h2,
	.elemento-row-inner h3 {
		text-align: center;
	}
}

/* actividades.html en mobile: el hero era una grilla de dos columnas y la foto
   quedaba aplastada a 33px al costado del texto. Pasa a una sola columna con
   la foto abajo, a tamano util. */
@media (max-width: 980px) {
	.act-hero-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 24px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.act-hero-photo {
		width: 100%;
		max-width: 320px;
	}

	.act-hero-photo img {
		width: 100%;
		height: auto;
		border-radius: 24px;
	}
}

/* aporte.html en mobile: la seccion Dar por Amor era una grilla de dos
   columnas, texto y foto al costado, y el texto quedaba en 220px */
@media (max-width: 980px) {
	.dar-amor {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 24px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.dar-amor-text,
	.dar-amor-image {
		width: 100%;
		max-width: 320px;
	}

	.dar-amor-image img {
		width: 100%;
		height: auto;
	}
}

/* Color del menu en todas las paginas menos inicio y aporte, que quedan como
   estaban: dorado oscuro, amarillo al pasar el cursor y blanco en la actual. */
.site-header:not(.header-inicio):not(.header-aporte) .main-nav a {
	color: #856e39;
}

.site-header:not(.header-inicio):not(.header-aporte) .main-nav a:hover,
.site-header:not(.header-inicio):not(.header-aporte) .main-nav a:focus {
	color: #ead641;
}

.site-header:not(.header-inicio):not(.header-aporte) .main-nav a.current {
	color: #ffffff;
}

/* Inicio y aporte: los tres colores rotados. Lo que era hover pasa a ser el
   color normal, el blanco pasa a la pagina actual y lo que marcaba la actual
   pasa a ser el hover. */
.site-header.header-inicio .main-nav a,
.site-header.header-aporte .main-nav a {
	color: #856e39;
}

.site-header.header-inicio .main-nav a:hover,
.site-header.header-inicio .main-nav a:focus,
.site-header.header-aporte .main-nav a:hover,
.site-header.header-aporte .main-nav a:focus {
	color: #a1981f;
}

.site-header.header-inicio .main-nav a.current,
.site-header.header-aporte .main-nav a.current {
	color: #ffffff;
}

/* Los dos botones del hero, con los colores de Luz: dorado oscuro el primero
   y dorado el segundo, cada uno toma el del otro al pasar el cursor. */
.hero-btn-rojo {
	background: #856e39;
	color: #ffffff;
}

.hero-btn-rojo:hover,
.hero-btn-rojo:focus {
	background: #a1981f;
	color: #ffffff;
}

.hero-btn-verde {
	background: #a1981f;
	color: #ffffff;
}

.hero-btn-verde:hover,
.hero-btn-verde:focus {
	background: #856e39;
	color: #ffffff;
}

/* Planes: el contenido arranca 48px mas arriba que el resto de las paginas
   sin hero. */
main.sin-hero.main-planes {
	padding-top: 12px;
}

/* Titulo de las paginas legales: 24 en pantalla grande y 18 en el telefono,
   igual en los 7 sitios. */
.legal-hero h1 {
	font-size: 24px;
}

@media (max-width: 700px) {
	.legal-hero h1 {
		font-size: 18px;
	}
}

/* Tarjeta del submenu Retiros: transparente, sin sombra, y la letra en
   #0600df al pasar el cursor. Igual que en Esenia Ur. */
.site-header .main-nav .nav-dropdown-menu {
	background: transparent;
	box-shadow: none;
}

.site-header .main-nav .nav-dropdown-menu a:hover,
.site-header .main-nav .nav-dropdown-menu a:focus {
	color: #0600df;
	background: transparent;
}

/* El botón de la charla, debajo de SEMANA DE ... */
.hero-botones-charla {
	margin-top: 16px;
}

/* Un botón apagado no desaparece: se ve en gris y no se puede tocar.
   Que se vea es el punto — cuenta que el retiro va a tener inscripciones
   aunque todavía no estén abiertas. Lo dibuja el tema como <span>, no como
   enlace, así no hay nada que clickear ni con el teclado. */
.hero-btn-apagado {
	background: #999999;
	color: #ffffff;
	cursor: default;
	opacity: .7;
}

.hero-btn-apagado:hover {
	background: #999999;
	color: #ffffff;
}