/* 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;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
	--color-primary-light: #ebeff1;
  --color-primary: #2c2c99; /* primario — titulares */
  --color-secondary: #8499c6; /* secundario */
  --color-button: #4054B2; /* texto — botones */
  --color-link: #69b5de; /* accent — hover/links */
  --color-tint: #546f9f;
  --color-footer: #5d7090; /* footer */
  --color-section-bg: #ebeff1; /* fondos de sección */
  --color-white: #ffffff;
  --color-accent: #0600df;
  --color-gold: #9F913B;
  --font-heading: 'Earth', Arial, sans-serif; /* solo título del sitio, h1 y títulos de blog */
  --font-subheading: 'Merriweather', Georgia, 'Times New Roman', serif; /* h2-h5 — la misma fuente real del sitio, empaquetada local */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-primary);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
body a { text-decoration: none; color: inherit; }
/* Tamaños reales del tema (panel de tipografía: H1 40px, H2 35px, H3 30px,
   H4 25px, H5 20px, H6 16px). El h1 se pisa más abajo con la fuente Earth. */
body h1, body h2, body h3, body h4, body h5 {
  font-family: var(--font-subheading);
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--color-primary);
}
body h1 { font-size: 40px; }
body h2 { font-size: 35px; }
body h3 { font-size: 30px; }
body h4 { font-size: 25px; }
body h5 { font-size: 20px; }
body h6 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 16px;
  color: var(--color-primary);
}

/* Regla de marca: la tipografía Earth siempre en mayúscula para el título
   del sitio (h1) y los títulos de blog/entrada (reusar esta clase cuando
   se arme la plantilla de blog más adelante). */
body h1,
body .site-title,
body .blog-title,
body .entry-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
}
body p { line-height: 1.7; margin: 0 0 14px; }

.esn-container {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-cta {
  width: 108px;
  height: 36px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Roboto', var(--font-body);
  text-transform: uppercase;
  background: var(--color-button);
  color: #fff;
}
.hero-cta:hover { background: #fff; color: var(--color-button); }
.esn-btn-outline { background: transparent; border: 1px solid var(--color-button); color: var(--color-button); }

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  max-width: 320px;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(4,53,147,0.2);
  z-index: 999;
  font-size: 13px;
}
.cookie-banner { text-align: center; }
.cookie-banner p { margin: 0 0 12px; }
.cookie-actions { display: flex; gap: 10px; justify-content: center; }
.cookie-actions .esn-btn-primary { border: 1px solid var(--color-button); }
.cookie-actions .esn-btn-primary:hover { background: #fff; color: var(--color-button); }
.cookie-actions .esn-btn-outline:hover { background: var(--color-button); color: #fff; }
.cookie-banner.hidden { display: none; }
.logo img {
	height: 60px;
	width: auto;
	filter: brightness(0) invert(1); /* logo blanco sobre el hero */
	transition: filter 0.25s ease, height 0.25s ease;
}

/* Hero */
.hero {
  position: relative;
  padding: 120px 0 220px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(4,10,40,0.55) 0%, rgba(4,10,40,0.15) 60%);
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
}
.hero-text { min-width: 0; text-align: center; max-width: 780px; margin: 0 auto; }
.hero-wave-col {
  display: flex;
  justify-content: center;
}
.hero-wave {
  width: 100%;
  max-width: 340px;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.35));
}
.hero h1 {
  font-family: 'Sen', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  text-transform: none;
  color: #fff;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 1px;
  color: #2c2c99;
  text-shadow: 0 6px 12px rgba(255,255,255,0.8);
  margin-bottom: 0.75rem;
}
.hero-poem {
  font-family: var(--font-body);
  color: #f5f5f5;
  font-size: 1.05rem;
  margin-bottom: 2.2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.hero-cta-accent {
  display: inline-block;
  font-family: 'Roboto', var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.9rem 2.2rem;
  border-radius: 12px;
  background: #2c2c99;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}
.hero-cta-accent:hover {
  background: #fff;
  color: #2c2c99;
}
.hero-semana-aire {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 1px;
  color: #2c2c99;
  text-shadow: 0 6px 12px rgba(255,255,255,0.8);
  margin-top: 1.5rem;
}
.hero-sub {
  color: #fff;
  font-weight: 600;
  font-size: 32px; /* el doble de los 16px anteriores */
  text-transform: uppercase;
  margin-bottom: 56px; /* el doble del espacio anterior (28px) antes del botón */
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.hero-sub-line { display: block; line-height: 1.4; }

/* Section generic */
.section { position: relative; padding: 90px 0; }
.section-title {
  text-align: center;
  font-size: clamp(24px, 3vw, 35px);
  margin: 70px auto 50px;
}
.programs-title { font-size: 48px; }

/* Intro */
.intro { overflow: hidden; }
.intro-title-wrap { position: relative; }
.intro-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 40px;
  align-items: center;
}
.intro-grid h2 { font-size: 60px; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; }
.intro-text { color: var(--color-button); font-size: 28px; text-align: center; }
.intro-text p + p { margin-top: 32px; }

/* Info cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.info-card {
  background: var(--color-section-bg);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.2s ease;
}
.info-card:hover { transform: scale(1.05); }
.card-icon {
  width: 140px; /* 56px +150% */
  height: 140px;
  margin: 0 auto 32px;
  color: var(--color-link);
}
.card-icon svg, .card-icon img { width: 100%; height: 100%; object-fit: contain; }
.info-card h3 { color: var(--color-primary); font-size: 18px; text-transform: uppercase; margin-bottom: 24px; }
.info-card p { color: var(--color-button); font-size: 28px; }
.card-paypal-link { display: inline-block; margin-top: 24px; }
.card-paypal-link svg { width: 80px; height: auto; }

/* Program rows */
.program-row { padding: 50px 0; }
.program-watermark {
  position: absolute;
  width: 260px;
  opacity: 0.1;
  filter: grayscale(1);
  z-index: 0;
  pointer-events: none;
}
.program-row:nth-of-type(2) .program-watermark { left: -40px; top: 10%; }
.program-row:nth-of-type(3) .program-watermark { right: -40px; bottom: 10%; }
.program-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.program-grid.reverse .program-img-box { order: 2; }
.program-img-box {
  width: 100%;
  height: 520px;
  border-radius: 24px 24px 120px 24px; /* 24px en 3 esquinas, grande solo abajo-derecha */
  overflow: hidden;
}
.program-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.program-row:nth-of-type(4) .program-text,
.program-row:nth-of-type(5) .program-text,
.program-row:nth-of-type(6) .program-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.program-text h3 { color: var(--color-secondary); }
.program-text p { color: var(--color-button); }
.program-row:nth-of-type(4) .program-text h3,
.program-row:nth-of-type(5) .program-text h3,
.program-row:nth-of-type(6) .program-text h3 { font-size: 48px; }
.program-row:nth-of-type(4) .program-text p,
.program-row:nth-of-type(5) .program-text p,
.program-row:nth-of-type(6) .program-text p { font-size: 24px; }

/* Sister sites */
.sites-section { padding-top: 0; background: #fff; }
.sites-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: center;
  color: var(--color-button);
  font-size: clamp(16px, 2vw, 20px);
  max-width: 820px;
  margin: -20px auto 50px;
  padding: 0 24px;
}
.sites-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.06;
  z-index: -1;
}
.sites-list { display: flex; flex-direction: column; gap: 30px; max-width: 1100px; margin: 0 auto; } /* ancho real del título, dato que me diste */
.site-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-section-bg);
  border-radius: 24px;
  padding: 18px 24px;
  height: 260px;
  box-sizing: border-box;
}
.site-thumb {
  width: 372px; /* rectangular horizontal (3:2), mismo alto de 248px */
  height: 248px;
  margin: -12px 0 -12px -18px; /* cancela el padding de la tarjeta (18px/24px) y deja 6px */
  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-heading);
  text-transform: uppercase;
  font-size: 36px;
  margin-bottom: 4px;
  color: var(--color-primary);
}
.site-date { color: var(--color-button); font-family: 'Roboto', var(--font-body); font-size: 36px; margin: 0; text-transform: uppercase; }
.site-card.active .site-info h3 { text-shadow: 0 2px 12px var(--color-link); }
.site-info h3.text-green { color: var(--color-accent); text-shadow: 0 2px 12px var(--color-gold); }
.site-info h3.text-gold { color: var(--color-gold); text-shadow: 0 2px 12px var(--color-accent); }
.site-info h3.text-blue { color: #fff; text-shadow: 0 2px 12px var(--color-secondary); }
.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); }
.site-info .esn-btn { box-shadow: 0 2px 12px var(--color-link); color: var(--color-link); }
.badge {
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.badge-green { background: var(--color-accent); box-shadow: 0 2px 12px var(--color-gold); color: var(--color-gold); }
.badge-gold { background: var(--color-gold); box-shadow: 0 2px 12px var(--color-accent); color: var(--color-accent); }
.badge-blue { background: #fff; color: var(--color-secondary); box-shadow: 0 2px 12px var(--color-secondary); }

.instructors-title { margin-top: -45px; } /* gap total 270px (90+90+90) -> 135px, la mitad */
.instructors-grid {
  display: grid;
  grid-template-columns: repeat(3, 344px); /* calzan justo en el mismo ancho de contenido (1200px -48px padding) que el resto del sitio */
  justify-content: space-between; /* tarjeta 1 y 3 pegadas al mismo borde de contenido que usa todo el sitio */
  margin-top: 50px;
  margin-bottom: -42px; /* espacio hacia el newsletter en 108px (150px base -42px) */
  gap: 60px; /* el doble del gap original (30px) */
}
.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: #1a6fc4; }
.instructor-card--light { background: #e6f1f4; }
.instructor-card-wrap { display: flex; flex-direction: column; gap: 20px; }
.instructor-text { color: var(--color-button); 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: #0B6100;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.instructor-text-reveal--blue { border-color: var(--color-secondary); }
.instructor-text-reveal--blue p { color: var(--color-button); }
.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-primary); 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-button);
  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/Aire.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-button);
  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 Nosotros */
.nosotros-hero { padding: 85px 0 15px; text-align: center; }
.nosotros-title { color: var(--color-primary); }
.nosotros-subtitle { color: var(--color-link); font-size: 22px; font-style: italic; margin-top: 12px; margin-bottom: 11px; }
.nosotros-tagline { color: var(--color-button); font-size: 20px; margin-top: 12px; }
.instructors-subtitle { color: var(--color-link); 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-button); font-size: 20px; line-height: 1.6; }
.nosotros-quienes-inner p + p { margin-top: 24px; }
.nosotros-quienes-framed {
  border: 3px solid var(--color-secondary);
  border-radius: 24px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.nosotros-quienes-framed::before {
  content: '';
  position: absolute;
  inset: 36px;
  background: url('../images/EnergiasElementales/Aire.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-button); font-size: 22px; font-weight: 700; line-height: 1.6; }

.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; /* 1352px -100px */
  height: 444px; /* 480px -36px */
  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(6,0,223,0.5); /* #0600DF, intensidad 50% */
}
.newsletter-content { position: relative; z-index: 1; color: #fff; }
.newsletter-content h2 { color: #fff; }
.newsletter-content p { max-width: 900px; margin: 0 auto 28px; opacity: 0.9; white-space: nowrap; }
.newsletter-form {
  display: flex;
  max-width: 972px; /* 480px + 480px + 12px de gap */
  margin: 0 auto;
  gap: 12px;
}
.newsletter-form input,
.newsletter-form button {
  flex: 0 0 480px;
  width: 480px;
  height: 48px;
}
.newsletter-form input {
  flex: 0 0 480px;
  width: 480px;
  height: 48px;
  border: none;
  padding: 0 40px;
  border-radius: 12px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}
.newsletter-form input:focus { outline: 2px solid var(--color-link); }
.newsletter-form button {
  border-radius: 12px;
  padding: 0 64px;
  box-sizing: border-box;
}
.newsletter-form button:hover { background: #fff; color: var(--color-button); }
.newsletter-note { margin-top: 16px; font-size: 14px; }

/* Footer */
.site-footer {
  background: var(--color-section-bg);
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 30px;
  padding-bottom: 20px;
  margin: 0 auto;
  width: 100%;
}
.footer-col {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra el contenido de cada columna entre sí, aunque tengan distinta cantidad de elementos */
  padding: 22px 0;
}
.footer-horarios-col { align-items: center; text-align: center; }
.footer-col h3 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 17.5px;
  font-weight: 700;
  margin: 0;
  color: var(--color-button);
}
.footer-col p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-button);
  margin: 0;
}
/* Espaciado medido pixel a pixel en 2026.solsticiodeagua.com (getBoundingClientRect) */
.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; }
.footer-horarios-col h3 + h3 { margin-top: 0; } /* "Redes Sociales" pegado a los íconos */
.footer-contact-col { text-align: center; align-items: 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-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
}
.footer-contact-line svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-button);
}
.footer-contact-line a { transition: color 0.2s ease; }
.footer-contact-line a:hover { color: var(--color-link); }
.footer-schedule-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footer-schedule-line svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-button);
}
.footer-center { text-align: center; justify-content: flex-start; margin-top: -20px; }
.footer-quote {
  font-family: 'Roboto', var(--font-body);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 2px 12px var(--color-secondary);
  margin: 0;
}
.footer-logo-box {
  height: 68.3px; /* 55.08px +24% */
  margin: 32px auto 0; /* doble del espacio anterior (16px) respecto a "Naturalmente Natural" */
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-logo { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.social-icons { display: flex; gap: 14px; }
.social-icons a {
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid var(--color-button);
  border-radius: 50%;
  color: var(--color-button);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.social-icons a:hover { color: var(--color-link); border-color: var(--color-link); }
.social-icons svg { width: 16px; height: 16px; }
.footer-bottom { background: var(--color-white); margin-top: auto; }
.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  color: var(--color-button);
  max-width: 1290px;
  margin: 0 auto;
  text-align: center;
}
.footer-bottom-inner p {
  margin: 0;
  font-family: 'Roboto', var(--font-body);
  font-size: 15px;
  font-weight: 400;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-family: 'Roboto', var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.footer-links a:hover { color: var(--color-primary); }


/* Páginas legales (Privacidad / Términos / Cookies) */
.legal-hero { padding: 140px 0 20px; text-align: center; }
.legal-hero h1 { color: var(--color-primary); }
.legal-hero p { color: var(--color-button); font-size: 16px; margin-top: 8px; }
.legal-content { max-width: 760px; margin: 0 auto; padding: 20px 24px 100px; color: var(--color-primary); line-height: 1.7; }
.legal-content h2 { color: var(--color-primary); font-size: 24px; margin: 40px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { color: var(--color-button); 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-link); }
.legal-content blockquote {
  margin: 0 0 16px;
  padding: 12px 20px;
  border-left: 3px solid var(--color-link);
  background: var(--color-section-bg);
  font-style: italic;
  color: var(--color-button);
}
.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-section-bg); color: var(--color-primary); font-family: 'Sen', sans-serif; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }

/* Donación */
/* Página Contacto */
.contact-info-section { padding: 99px 0 24px; }
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.contact-info-card {
  background: var(--color-section-bg);
  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-button); 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-button); }

.contact-section { padding-top: 24px; padding-bottom: 100px; }
.contact-box { max-width: 800px; margin: 0 auto; text-align: center; }
.contact-eyebrow {
  color: var(--color-secondary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.contact-cta-heading { color: var(--color-primary); margin-bottom: 32px; }
.contact-note { color: var(--color-button); font-size: 18px; border: 1px dashed var(--color-link); 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: 29%;
  top: 83%;
  width: 42%;
  height: 9%;
}

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

/* Página Donación — mismo diseño que aporte.html de Equinoccio de Tierra */
.donate-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 24px 220px;
}
.donate-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 44, 153, 0.35);
  z-index: 0;
}
.donate-hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-top: 36px;
}
.donate-hero-title {
  font-family: var(--font-subheading);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: #2c2c99;
  text-shadow: 0 2px 12px #fff;
  margin: 0 0 3.5rem;
  white-space: nowrap;
}
.donate-hero-text {
  font-family: 'Roboto', var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 #2c2c99;
  margin: 0 0 1.5rem;
}
.donate-hero-cta-text {
  color: #2c2c99;
  text-shadow: 1.5px 1.5px 0 var(--color-gold);
}
.esn-btn-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #001c64;
  color: #fff;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
}
.esn-btn-donate:hover { background: #0070e0; }

.donate-amor-title {
  text-align: center;
  font-family: var(--font-subheading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-primary);
  padding: 5rem 24px 0;
  margin: 0 0 36px;
}
.donate-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;
  gap: 40px;
}
.donate-amor-text p {
  color: #2c2c99;
  font-family: 'Roboto', var(--font-body);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0 0 2rem;
}
.donate-amor-text p:last-child { margin-bottom: 0; }
.donate-amor-image {
  height: 100%;
  min-height: 400px;
  border-radius: 24px;
  overflow: hidden;
}
.donate-amor-image img { width: 100%; height: 100%; object-fit: cover; }

/* Responsive */

body.nav-locked { overflow: hidden; }

.mobile-break { display: none; }

@media (max-width: 900px) {
  .mobile-break { display: block; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .program-row:nth-of-type(4) .program-text h3,
  .program-row:nth-of-type(5) .program-text h3,
  .program-row:nth-of-type(6) .program-text h3 { font-size: 32px; }
  .program-row:nth-of-type(4) .program-text p,
  .program-row:nth-of-type(5) .program-text p,
  .program-row:nth-of-type(6) .program-text p { font-size: 18px; }
  .intro-grid, .program-grid, .cards-grid, .footer-grid, .hero-content, .instructors-grid, .sites-intro { grid-template-columns: 1fr; }
  .donate-hero { padding: 200px 24px 150px; }
  .donate-hero-title { white-space: normal; font-size: 2rem; }
  .donate-hero-text { font-size: 1.15rem; }
  .donate-amor { grid-template-columns: 1fr; }
  .donate-amor-image { min-height: 260px; }
  .intro-grid h2 { font-size: 36px; }
  .intro-watermark { width: 220px; }
  .intro-text { text-align: center; }
  .intro-text p { font-size: 18px; }
  .hero-wave-col { order: -1; max-width: 220px; margin: 0 auto; }
  .program-grid.reverse .program-img-box { order: 0; }
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero-wave { width: 180px; }
  .site-card {
    flex-direction: column;
    height: auto;
    padding: 20px;
  }
  .site-thumb {
    width: 100%;
    height: 180px;
    margin: 0 0 12px;
    border-radius: 14px;
  }
  .site-info h3 { font-size: 22px; } /* 60% de 36px, mismo criterio que programs-title, evita que se corte */
  .site-date { font-size: 22px; }
  .instructor-card { width: 80%; margin: 0 auto; }
  .gallery-track img { height: 160px; }
  .nosotros-hero { padding: 110px 0 24px; }
  .instructors-parents { grid-template-columns: 1fr; justify-items: center; }
  .elements-grid { grid-template-columns: 1fr; justify-items: center; gap: 32px; margin-top: 40px; }
  .element-card { width: 80%; }
  .element-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .programs-title { font-size: 28.8px; } /* 60% de 48px */
  .site-footer { height: auto; overflow: visible; } /* en mobile las columnas se apilan y necesitan más alto */
  .footer-col { padding: 24px 0; }
  .newsletter { height: auto; padding: 48px 24px; }
  .newsletter-content p { white-space: normal; max-width: 320px; }
  .newsletter-form { flex-direction: column; max-width: 320px; }
  .newsletter-form input,
  .newsletter-form button { width: 100%; flex: 1 1 auto; }
  .newsletter { margin: 40px 16px; max-width: none; }
  .elemento-row { padding: 40px 0; }
  .elemento-row-inner { grid-template-columns: 1fr; gap: 24px; }
  .elemento-row-image { order: -1; }
  .elemento-row-image img { max-height: 260px; }}

/* Página Aire (Elemento) — layout en 2 columnas, portado de Equinoccio de Tierra / Solsticio de Agua */
.hero-contain {
  background: var(--color-section-bg);
  padding-bottom: 36px;
}
.hero-title-earth {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-button);
  font-size: 48px;
  letter-spacing: 1px;
  text-align: center;
}
.elemento-row { padding: 70px 0; overflow: hidden; }
.elemento-row--alt { background: var(--color-section-bg); }
.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-title {
  font-family: 'Sen', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.elemento-lead { color: var(--color-button); font-size: 18px; line-height: 1.7; }
.elemento-lead p + p { margin-top: 16px; }
.elemento-lead-single { color: var(--color-button); 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: 'Sen', sans-serif;
  font-weight: 700;
  color: var(--color-button);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  margin-bottom: 4px;
}
.elemento-ficha-item dd {
  color: var(--color-primary);
  font-size: 19px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Pagina Elementos ---------- */
.elementos-hero { padding: 160px 0 20px; text-align: center; }
.elementos-title {
  font-family: var(--font-heading);
  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(105,181,222,0.35);
}
.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; }}

/* ---------- 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-heading); 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-heading);
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 48px;
  letter-spacing: 1px;
  margin: 0;
}

.eyebrow {
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-button);
  margin-bottom: 10px;
}
.eyebrow-claro { color: rgba(255,255,255,0.78); }

.servicios-intro { background: #eef1fb; 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-button); line-height: 1.7; margin-bottom: 24px; }

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

.servicios-belleza { background: #eef1fb; 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: var(--color-accent);
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.esi-subtitle { color: #2c2c99; 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: var(--color-accent);
  margin-bottom: -2px;
  border-radius: 6px 6px 0 0;
  transition: all .2s;
}
.esi-nav button.active,
.esi-nav button:hover {
  color: #2c2c99;
  border-bottom-color: #2c2c99;
  background: #f0f4ff;
}

.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 #2c2c99;
  border-radius: 14px;
  padding: 2.75rem 1.5rem 2rem;
  text-align: center;
  background: #e2e1f5;
  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: #ebeff1;
}
.esi-card.featured { border-color: var(--color-accent); border-width: 2px; }

.esi-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  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: #2c2c99;
  letter-spacing: .08em;
  margin-bottom: .75rem;
}
.esi-card__price { font-size: 2.4rem; font-weight: 900; color: #2c2c99; line-height: 1; }
.esi-card__per { font-size: .85rem; color: #2c2c99; margin: .3rem 0 .75rem; }
.esi-card__equiv { font-size: .8rem; color: var(--color-accent); font-weight: 700; margin-bottom: .75rem; }
.esi-card__desc {
  font-size: .88rem;
  color: #2c2c99;
  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 #2c2c99;
  border-radius: 8px;
  background: #2c2c99;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all .2s;
}
.esi-card__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.esi-card.featured .esi-card__btn { background: var(--color-accent); border-color: var(--color-accent); }
.esi-card.featured .esi-card__btn:hover { background: #2c2c99; border-color: #2c2c99; }

@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 {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-primary);
  overflow-x: hidden;
  line-height: normal;
}
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;
	background: rgba(0, 0, 0, 0);
	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;
}

/* tierra y nosotros: menu en verde, rojo al pasar el cursor, verde claro en la actual */
.site-header.header-tierra .main-nav a,
.site-header.header-nosotros .main-nav a {
	color: var(--color-primary);
}

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

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

/* index y aporte: capa BLANCA al 0.60 detras del header, para que se lea el
   logo azul sobre la foto. */
.site-header.header-inicio,
.site-header.header-aporte {
	background: rgba(255, 255, 255, 0.6);
}

/* 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;
	}
}


/* Los dos botones del hero con los colores del sitio: azul el primero, acento
   el segundo, y cada uno toma el del otro al pasar el cursor. */
.hero-btn-rojo {
	background: var(--color-primary);
	color: #ffffff;
}

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

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

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

/* Paginas sin hero que no tienen <main>: el contenido arranca en la primera
   seccion y quedaba debajo del header fijo. */
.site-header.header-sin-hero + section,
.site-header.header-sin-hero + main {
	padding-top: 60px;
}

/* El boton del header y los del hero median 34px contra los 39 de Tierra: el
   cuerpo de este sitio no define interlinea y heredaban 'normal'. Se fija en
   1.6, que es la de Tierra, para que los cuatro sitios midan igual. */
.header-login,
.hero-btn {
	line-height: 1.6;
}

/* Nosotros, contacto y las 6 paginas legales: el contenido arranca mas abajo
   que en el resto de las paginas sin hero. */
.site-header.header-sin-hero + section.nosotros-hero {
	padding-top: 96px;
}

.site-header.header-sin-hero + section.legal-hero {
	padding-top: 108px;
}

/* Contacto arranca 24px mas abajo que las legales. */
.site-header.header-sin-hero + section.contact-info-section {
	padding-top: 132px;
}

/* Boton SUSCRIBETE del newsletter: azul fijo, acento al pasar el cursor y las
   letras siempre blancas. */
.newsletter-form button {
	background: #2c2c99;
	color: #ffffff;
}

.newsletter-form button:hover,
.newsletter-form button:focus {
	background: #0600df;
	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;
}

/* Boton del header: el azul #2c2c99 queda fijo y el acento pasa al hover. */
.header-login {
	background: var(--color-primary);
}

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

/* Menu del header transparente (inicio y aporte): azul fijo, el celeste del
   sitio al pasar el cursor y el acento en la pagina actual. */
.site-header.header-inicio .main-nav a,
.site-header.header-aporte .main-nav a {
	color: #2c2c99;
}

.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: #69b5de;
}

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

/* Header del resto de las paginas (todas menos inicio y aporte): el mismo gris
   celeste del pie, en vez de transparente. */
.site-header:not(.header-inicio):not(.header-aporte) {
	background: #ebeff1;
}

/* Menu del resto de las paginas (todas menos inicio y aporte): azul fijo,
   celeste al pasar el cursor y el acento en la pagina actual. Igual que Agua. */
.site-header:not(.header-inicio):not(.header-aporte) .main-nav a {
	color: #2c2c99;
}

.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: #0d77db;
}

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

/* Menu mobile: el mismo fondo del pie. Como el panel pasa a ser claro, las
   letras van en azul, y las 3 rayitas del boton tambien. */
.menu-toggle span {
	background: #2c2c99;
}

@media (max-width: 980px) {
	.main-nav {
		background: #ebeff1;
	}

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

	.site-header.nav-open .main-nav a:hover,
	.site-header.nav-open .main-nav a.current {
		color: #0600df;
	}
}

/* Boton de Iniciar sesion dentro del menu mobile: azul fijo, acento al tocarlo
   y las letras siempre blancas. La regla del menu claro le pisaba el color al
   tocarlo y quedaba azul sobre azul. */
@media (max-width: 980px) {
	.site-header.nav-open .main-nav a.header-login,
	.site-header.nav-open .main-nav a.header-login:hover,
	.site-header.nav-open .main-nav a.header-login:focus {
		color: #ffffff;
	}

	.site-header.nav-open .main-nav a.header-login {
		background: #2c2c99;
	}

	.site-header.nav-open .main-nav a.header-login:hover,
	.site-header.nav-open .main-nav a.header-login:focus {
		background: #0600df;
	}
}

/* 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;
	}
}

/* Submenu de Retiros, SOLO en inicio y aporte. Las paginas internas no se
   tocan: alla manda la regla de menu de cada pagina. */
.site-header.header-inicio .main-nav .nav-dropdown-menu,
.site-header.header-aporte .main-nav .nav-dropdown-menu {
	background: transparent;
	box-shadow: none;
}

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

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

/* Submenu de Retiros en las paginas internas: tarjeta transparente, letra azul
   y celeste al pasar el cursor, igual que el menu de esas paginas. Solo lo usa
   este submenu. */
.site-header:not(.header-inicio):not(.header-aporte) .main-nav .nav-dropdown-menu {
	background: transparent;
	box-shadow: none;
}

.site-header:not(.header-inicio):not(.header-aporte) .main-nav .nav-dropdown-menu a {
	color: #2c2c99;
}

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

/* 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;
}