/* Fuentes propias del sitio.
   Earth y Merriweather se cargaban aca y no se usaban en ningun lado: la
   tipografia de auyua.net es Jost + Manrope, que llegan de Google Fonts, y
   el :root del final ya pisaba las tres variables. Eran 224 KB que todo
   visitante bajaba para nada. Se fueron, con sus cinco archivos.
   Roboto se queda: hay treinta y dos reglas que la nombran a proposito. */
@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-academia-azul: #100270; /* azul de la Academia — menú y botón de la cabecera */
  --color-primary: #2c2c99;      /* azul de marca — botones, eyebrow, CTA */
  --color-primary-bright: #4054B2; /* variante clara del primario — hover */
  --color-link: #69b5de;         /* azul claro — hover/links sobre fondo oscuro */
  --color-tint: #ebeff1;         /* fondo lavanda/gris claro — header al hacer scroll */
  --color-pastilla: #e3e3ec;     /* pastilla del menú — medida del header de WordPress */
  --color-academia-footer: #043593; /* títulos y línea del footer — medida del de WordPress */
  --color-footer: #5d7090;       /* footer */
  --color-section-bg: #f7f5fc;   /* fondos de sección */
  --color-white: #ffffff;
  --color-accent: #C90012;       /* rojo compartido de la red */
  --color-gold: #9F913B;
  --color-indigo: #05046c;    /* franja legal del footer */
  --color-azul3: #0d77db;     /* Azul3 del sistema de headers — hover/activo del menú */
  --color-azul2: #0600df;     /* Azul2 del sistema de headers — activo del menú en Header Fijo 1 */
  /* Los valores buenos de estas tres estan en el :root del final del archivo
     (Jost y Manrope). Aca quedan solo los respaldos del sistema, por si esa
     hoja no llega: nombrar fuentes que ya no existen daba una pista falsa. */
  --font-heading: Arial, Helvetica, sans-serif;
  --font-subheading: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.mobile-break { display: none; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-primary);
  overflow-x: hidden;
}
body img { max-width: 100%; display: block; }
body a { text-decoration: none; color: inherit; }

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

.esn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* generoso, por encima del minimo de 44px */
  font-family: 'Roboto', var(--font-body);
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  font-size: 14px;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.esn-btn:hover { transform: translateY(-1px); }
.esn-btn-small {
  font-size: 12px;
}
.esn-btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%); color: #fff; }
.esn-btn-primary:hover { background: linear-gradient(135deg, var(--color-primary-bright) 0%, var(--color-primary) 100%); }
.esn-btn-outline { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  width: auto;
  max-width: 320px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(44,44,153,0.2);
  z-index: 999;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}
.cookie-banner p { margin: 0 0 12px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cookie-actions .esn-btn-primary { border: 1px solid var(--color-primary); }
.cookie-actions .esn-btn-primary:hover { background: #fff; color: var(--color-primary); }
.cookie-actions .esn-btn-outline:hover { background: var(--color-primary); color: #fff; }
.cookie-banner.hidden { display: none; }

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.scrolled {
  background: transparent;
}
/* Barra flotante tipo "pill": el fondo/blur/radio van en header-inner, no en
   site-header a lo ancho completo, para que quede inset del borde del viewport. */
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 10px 24px;
  background: var(--color-primary);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(44,44,153,0.12);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.logo img {
  height: 38px;
  width: auto;
  transition: height 0.25s ease;
}
.site-header.scrolled .logo img { height: 32px; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; transition: color 0.25s ease; }
.main-nav a:hover { color: var(--color-azul3); }
.main-nav a.current { color: var(--color-indigo); }
.site-header.scrolled .main-nav a.current { color: var(--color-indigo); }
.header-cta {
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 28px;
  font-size: 12px;
}
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span { width: 24px; height: 2px; background: #fff; transition: background-color 0.25s ease; }
.site-header.scrolled .menu-toggle span { background: var(--color-primary); }

/* Header transparente v2 — nunca pasa a sólido, desaparece al hacer scroll */
.site-header.header-v2 {
  background: transparent;
  box-shadow: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-header.header-v2.hidden-on-scroll {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.site-header.header-v2 .header-cta {
  background: var(--color-indigo);
  color: #fff;
}
.site-header.header-v2 .header-cta:hover {
  background: #fff;
  color: var(--color-indigo);
}

/* Header Fijo 1 — barra fija a lo ancho completo, fondo blanco sólido,
   logo/menú azules. Sin pastilla flotante: el fondo va en site-header. */
.site-header.header-fixed1 {
  background: #fff;
  box-shadow: none;
}
/* Medidas tomadas del header renderizado en WordPress (academia-esenia-ur.local)
   y replicadas acá: alto 120, contenedor 1290, logo 48, links 16/600 con caja
   de 40 + 1px pedido, separación 15, botón 50 de alto con padding 5/30. */
.site-header.header-fixed1 .header-inner {
  background: transparent;
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 120px;
  padding: 0 24px;
}
.site-header.header-fixed1 .main-nav { gap: 15px; }
.site-header.header-fixed1 .main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 41px;
  color: var(--color-academia-azul);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  padding: 0 17.5px;
  border-radius: 12px;
  background: transparent;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.site-header.header-fixed1 .main-nav a:hover,
.site-header.header-fixed1 .main-nav a:focus-visible,
.site-header.header-fixed1 .main-nav a.current {
  color: var(--color-accent);
  background: var(--color-pastilla);
}
.site-header.header-fixed1 .menu-toggle span { background: var(--color-academia-azul); }
.site-header.header-fixed1 .logo img { height: 48px; }
.site-header.header-fixed1 .header-cta {
  background: var(--color-academia-azul);
  color: #fff;
  min-height: 50px;
  padding: 5px 30px;
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 12px;
}
.site-header.header-fixed1 .header-cta:hover { background: var(--color-accent); color: #fff; }
/* Login duplicado dentro del menú: solo se ve en mobile. Va después del bloque
   de header-fixed1 porque empatan en specificity y gana el último. */
.site-header .main-nav a.nav-login { display: none; }

/* Hero */
.hero {
  position: relative;
  padding: 120px 0 220px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10,10,50,0.6) 0%, rgba(10,10,50,0.2) 60%);
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
}
.hero-text { text-align: center; max-width: 1050px; margin: 0 auto; }
.hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  margin-bottom: 0.5rem;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #fff 0%, var(--color-indigo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45)) drop-shadow(0 0 10px rgba(255,255,255,0.3));
}
.hero-poem {
  font-family: var(--font-subheading);
  font-style: italic;
  color: #f5f5f5;
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 auto 2.2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.esn-btn-accent {
  background: var(--color-accent);
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}
.esn-btn-accent:hover {
  background: #fff;
  color: var(--color-accent);
}
.esn-btn-newsletter { background: var(--color-primary); color: #fff; }
.esn-btn-newsletter:hover { background: var(--color-accent); color: #fff; }
.esn-btn-indigo { background: var(--color-indigo); color: #fff; }
.esn-btn-indigo:hover { background: #fff; color: var(--color-indigo); }
.esn-btn-act-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #fff;
}
.esn-btn-act-cta:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
  color: #fff;
}

@media (max-width: 900px) {
  .mobile-break { display: block; }
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .hero { padding: 100px 0 140px; }

  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: var(--color-primary);
    border-radius: 12px;
    padding: 16px;
  }
  .site-header.header-fixed1.nav-open .main-nav {
    background: #fff;
    box-shadow: 0 8px 24px rgba(44,44,153,0.18);
  }
  /* En mobile el botón sale de la barra y entra al menú, arriba de Inicio. */
  .site-header .header-cta { display: none; }
  .site-header .main-nav a.nav-login { display: inline-flex; }
  .site-header.header-fixed1 .main-nav .nav-login {
    color: #fff;
    background: var(--color-academia-azul);
    margin-bottom: 8px;
  }
  .site-header.header-fixed1 .main-nav .nav-login:hover {
    color: #fff;
    background: var(--color-accent);
  }
}


/* ============ Newsletter + Footer ============ */
.newsletter {
  position: relative;
  max-width: 1252px;
  margin: 60px auto;
  padding: 56px 40px;
  border-radius: 24px;
  background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-accent) 100%);
  text-align: center;
}
.newsletter-content { color: #fff; }
.newsletter-content h2 { color: #fff; font-family: 'Roboto', var(--font-body); }
.newsletter-content p { max-width: 560px; margin: 0 auto 28px; opacity: 0.9; }
.newsletter-form {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  gap: 12px;
}
.newsletter-form input {
  flex: 1 1 auto;
  height: 48px;
  font-size: 14px;
  border: none;
  padding: 0 24px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
}
.newsletter-form input:focus { outline: 2px solid var(--color-link); }
.newsletter-form button { flex: 0 0 auto; }
.newsletter-note { margin-top: 16px; font-size: 14px; color: #fff; }

.site-footer { position: relative; background: var(--color-primary); color: #fff; overflow: hidden; }
.footer-pattern {
  position: absolute;
  width: 340px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.footer-pattern-left { left: 0; bottom: 0; }
.footer-pattern-right { right: 0; bottom: 0; }
.site-footer > .esn-container,
.site-footer > .footer-bottom { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 30px;
  padding: 48px 0 40px;
}
/* Los títulos quedan todos arriba, a la misma altura. Lo que baja es la lista,
   para que la última línea de las cuatro columnas coincida. */
.footer-grid > .footer-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.footer-grid > .footer-col > .footer-contact-list { margin-top: auto; }
/* Contacto: la lista ocupa el mismo alto que el menú Principal y reparte sus
   cuatro filas ahí adentro, así WhatsApp queda a la altura de Inicio y Planet
   Heart a la de Contacto. */
.footer-grid > .footer-col:nth-child(4) > .footer-contact-list {
  margin-top: 0;
  flex: 1;
  justify-content: space-between;
}
/* Columnas de menú vertical del footer (Legales y Principal) */
.footer-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-menu a {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--color-primary);
  transition: color 0.2s ease;
}
.footer-menu a:hover,
.footer-menu a.current {
  color: var(--color-accent);
}
.footer-col { text-align: center; }
.footer-col-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 17.5px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
}
.footer-col-icon { width: 36px; height: 36px; margin: 0 auto 10px; } /* 18px x2 */
.footer-col-value {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
.footer-col-value:hover { color: var(--color-link); }
.footer-col-note { margin: 0; font-family: var(--font-body); font-size: 14px; color: #fff; opacity: 0.85; }
.footer-col-subtitle { margin-top: 28px; }
.footer-col-logo { height: 60px; width: auto; margin: 0 auto 14px; }
/* Leyenda entre el logo y Horarios. El tamaño está elegido para entrar en el
   espacio libre de la columna sin estirar el footer. */
.footer-grid .footer-logo-caption {
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin: 0 0 12px;
}
/* Columna Contacto — calcada del footer de WordPress: lista en columna con
   separación de 15, ícono de 20 y texto de 16 alineados al centro. */
.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: var(--color-primary);
}
.footer-contact-list a,
.footer-contact-list span {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primary);
  transition: color 0.2s ease;
}
.footer-contact-list a:hover { color: var(--color-accent); }
.footer-logo-box { display: flex; justify-content: center; }
.footer-logo { height: 72px; width: auto; }
.footer-logo-caption {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  margin: 14px 0 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 0 0 40px;
  margin-top: -36px; /* reduce a la mitad el espacio respecto a la frase del logo */
}
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-indigo);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.social-icons a svg { width: 16px; height: 16px; }
.social-icons a:hover { background: #fff; color: var(--color-indigo); transform: translateY(-2px); }

.footer-bottom { background: var(--color-indigo); }
.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  color: #fff;
  max-width: 1290px;
  margin: 0 auto;
}
.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;
  gap: 20px;
  font-family: 'Roboto', var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.footer-links a { color: rgba(255,255,255,0.85); }
.footer-links a:hover { color: #fff; }

/* Footer claro — medidas y colores tomados del footer de WordPress. */
.site-footer.footer-light { background: #fff; border-top: none; }
.site-footer.footer-light .footer-col-title { color: var(--color-academia-footer); }
.site-footer.footer-light .footer-col-value,
.site-footer.footer-light .footer-col-note,
.site-footer.footer-light .footer-logo-caption { color: var(--color-primary); }
.site-footer.footer-light .footer-col-value:hover { color: var(--color-accent); }
.site-footer.footer-light .footer-bottom { background: var(--color-section-bg); }
.site-footer.footer-light .footer-bottom-inner { color: var(--color-primary); min-height: 70px; justify-content: center; }
.site-footer.footer-light .footer-bottom-inner p { font-size: 16px; text-align: center; }
/* Redes sociales dentro de la primera columna, ya no como bloque suelto */
.footer-social { padding: 0; margin-top: 0; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .newsletter { margin: 60px 16px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input, .newsletter-form button { width: 100%; }
  .social-icons { margin-top: 24px; }
  .footer-bottom-inner p { margin-bottom: 12px; }}


/* ============ Página Actividades ============ */
.squiggle { color: var(--color-primary); margin-bottom: 16px; }
.squiggle svg { width: 60px; height: 16px; }

.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: 24px; 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: 12px;
}

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


/* ============ Los 4 Retiros del Año (replicado de SolsticiodeLuz) ============ */
.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);
  text-align: center;
}
.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: 12px;
  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: #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); }
.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); 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; }

@media (max-width: 900px) {
  .sites-intro { grid-template-columns: 1fr; }
  .programs-title { font-size: 28.8px; }
  .site-card {
    flex-direction: column;
    height: auto;
    padding: 20px;
  }
  .site-thumb {
    width: 100%;
    height: 180px;
    margin: 0 0 12px;
    border-radius: 12px;
  }
  .site-info h3 { font-size: 22px; }
  .site-date { font-size: 22px; }}


/* ============ Página Aporte (replicado de SolsticiodeAgua) ============ */
.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) !important; /* pisa la regla global h1{font-family:'earth' !important} del plugin UseAnyFont de WordPress */
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-primary);
  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 var(--color-primary);
  margin: 0 0 1.5rem;
}
.donate-hero-cta-text {
  color: var(--color-primary);
  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; }
.esn-btn-donate-img { display: inline-flex; transition: transform 0.2s ease; }
.esn-btn-donate-img img { height: 54px; width: auto; }
.esn-btn-donate-img:hover { transform: scale(1.05); }

.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: var(--color-primary);
  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; }

@media (max-width: 900px) {
  .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; }}


/* ============ Página Contacto (replicado de EquinocciodeAire/Tierra/SolsticiodeAgua/Luz) ============ */
.contact-info-section { background: var(--color-section-bg); padding: 99px 24px 24px; }
.contact-info-grid {
  max-width: 1290px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.contact-info-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(44,44,153,0.08);
}
.contact-info-icon { display: block; width: 28px; height: 28px; object-fit: contain; margin: 0 auto 12px; }
.contact-info-icon-pin { color: var(--color-accent); }
.contact-info-icon-pin svg { width: 100%; height: 100%; }
.contact-info-title { color: var(--color-primary); font-size: 16px; margin: 0 0 8px; }
.contact-info-text { color: var(--color-primary-bright); font-size: 16px; margin: 0; }
.contact-info-text a { color: inherit; text-decoration: none; }
.contact-info-text a:hover { color: var(--color-link); }

.contact-section { padding: 24px 24px 100px; background: var(--color-section-bg); }
.contact-box { max-width: 800px; margin: 0 auto; text-align: center; }
.contact-eyebrow {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.contact-cta-heading { color: var(--color-primary); margin: 0 0 32px; }
.contact-note { color: var(--color-primary); font-size: 18px; border: 1px dashed var(--color-link); border-radius: 12px; padding: 40px 24px; }

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


/* ============ Páginas legales (replicado de EquinocciodeAire) ============ */
.legal-hero { padding: 140px 0 20px; text-align: center; }
.legal-hero h1 { color: var(--color-primary); }
.legal-hero p { color: var(--color-primary-bright); 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-primary-bright); 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-primary-bright);
}
.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; }


/* ============ Nosotros — hero + recuadro (replicado de SolsticiodeAgua) ============ */
.nosotros-hero { padding: 85px 0 10px; text-align: center; }
.nosotros-subtitle { font-family: var(--font-heading); text-transform: uppercase; color: #c90012; font-size: 28px; margin-top: 12px; margin-bottom: 21px; }
.nosotros-tagline { color: var(--color-primary); font-size: 20px; margin-top: 12px; }
.nosotros-quienes { padding: 10px 0 30px; }
.nosotros-quienes-inner { max-width: 820px; margin: 0 auto; text-align: center; color: var(--color-primary); font-size: 20px; line-height: 1.6; }
.nosotros-quienes-inner p + p { margin-top: 15px; }
.nosotros-quienes-framed {
  border: 3px solid var(--color-primary-bright);
  border-radius: 24px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.nosotros-quienes-framed::before {
  content: '';
  position: absolute;
  inset: 36px;
  background: url('../images/elementos/ArboldelaVida.webp') center / contain no-repeat;
  opacity: 0.08;
  z-index: 0;
}
.nosotros-quienes-framed p {
  position: relative;
  z-index: 1;
}
.nosotros-quienes-framed p:first-child {
  margin-bottom: 15px;
}

@media (max-width: 900px) {
  .nosotros-hero { padding: 110px 0 24px; }}


/* ============ La Creación Enseña — grid de 12 Energías Elementales ============ */
.elements-title { text-align: center; margin-top: 30px; }
.elements-cta { text-align: center; margin: 8px 0 0; }
.elements-cta a { color: var(--color-accent); font-weight: 700; }
.elements-cta a:hover { color: var(--color-primary); }
.elements-grid { margin-bottom: 80px; }
.elements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.element-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.element-card img {
  width: 210px;
  height: 210px;
  object-fit: contain;
  border-radius: 24px;
  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-primary);
  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/favicon_eseniaur.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);
}

@media (max-width: 900px) {
  .elements-grid { grid-template-columns: 1fr; justify-items: center; gap: 32px; }
  .element-card { width: 80%; }
  .element-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; }}


/* ============ Página Elementos ============ */
.elementos-hero { padding: 160px 0 20px; text-align: center; }
.elementos-title { 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: 24px;
  padding: 24px 16px;
  max-width: 240px;
  margin: 0 auto;
}
.elemento-card-full img { width: 160px; height: 160px; }
a.elemento-card-full { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.elemento-card-full:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(44,44,153,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: 900px) {
  .elementos-grid { grid-template-columns: 1fr; max-width: 320px; }}


/* ============ Páginas de elemento individual (formato agua.html) ============ */
.hero-contain {
  background: var(--color-section-bg);
  padding: 160px 0 36px;
}
.hero-title-earth {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 48px;
  letter-spacing: 1px;
  text-align: center;
  margin: 0;
}
.hero-title-earth.color-green { color: #0B6100; }
.hero-title-earth.color-orange { color: #c05a00; }
.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;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.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-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: 'Sen', sans-serif;
  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-primary-bright);
  font-size: 19px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .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 La Vida — paleta verde propia */
.pagina-vida .hero-title-earth,
.pagina-vida .elemento-title,
.pagina-vida .elemento-ficha-item dt { color: #0d6000; }
.pagina-vida .elemento-lead,
.pagina-vida .elemento-lead-single,
.pagina-vida .elemento-ficha-item dd { color: #2f4224; }

/* Página La Alegría — paleta naranja propia */
.pagina-alegria .hero-title-earth,
.pagina-alegria .elemento-title,
.pagina-alegria .elemento-ficha-item dt { color: #ff6300; }
.pagina-alegria .elemento-lead,
.pagina-alegria .elemento-lead-single,
.pagina-alegria .elemento-ficha-item dd { color: #df8726; }

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

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

.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-primary); line-height: 1.7; margin-bottom: 24px; }

.servicios-pastillas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.servicio-pastilla {
  background: #dfe5f7;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
}
.servicio-pastilla .servicio-icono { color: var(--color-primary); margin-bottom: 12px; }
.servicio-pastilla h5 {
  color: var(--color-primary);
  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: 12px;
  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: 12px;
  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-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; }}

/* ==================== Submenu Retiros ====================
   Tarjeta blanca, items centrados. Solo el item bajo el cursor se rellena
   (blanco sobre el color del sitio, radius 12). La pagina actual NO se marca:
   si se marcara, al hoverear el otro item habria dos bloques pintados a la vez.
   La specificity arranca en (0,4,1) porque `.site-header.scrolled .main-nav a`
   es (0,3,1) y alcanza tambien a los links del panel. */

.nav-item-dropdown { position: relative; }

.nav-item-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.nav-item-dropdown:hover > a::after,
.nav-item-dropdown:focus-within > a::after {
  transform: translateY(2px) rotate(-135deg);
}

/* el padre conserva su color con el panel abierto: con un dropdown el :hover
   del menu queda fijo y en varios sitios es ilegible sobre el propio header */
.main-nav .nav-item-dropdown:hover > a,
.main-nav .nav-item-dropdown:focus-within > a { color: #fff; }
.site-header.header-fixed1 .main-nav .nav-item-dropdown:hover > a,
.site-header.header-fixed1 .main-nav .nav-item-dropdown:focus-within > a { color: var(--color-primary); }

/* puente invisible sobre el hueco de 12px: sin esto, al bajar despacio el
   cursor queda en tierra de nadie y el panel se cierra */
.nav-item-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 150px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 6px;
  margin-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  transition-delay: 0.25s;
  z-index: 10;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.site-header .main-nav .nav-dropdown-menu a {
  display: block;
  text-align: center;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--color-primary);
  background: transparent;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-header .main-nav .nav-dropdown-menu a:hover,
.site-header .main-nav .nav-dropdown-menu a:focus-visible {
  color: #fff;
  background: var(--color-primary);
}

@media (max-width: 1150px) {
  .site-header.nav-open .nav-dropdown-menu,
  .main-nav.open .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    margin: 0;
    padding: 0 0 0 1.2rem;
    min-width: 0;
    transition-delay: 0s;
  }
  .site-header.nav-open .main-nav .nav-dropdown-menu a,
  .main-nav.open .nav-dropdown-menu a {
    color: var(--color-primary);
    background: transparent;
  }
  .nav-item-dropdown::after { display: none; }
}

@media (max-width: 760px) {
  .servicios-hero-titulo { font-size: 32px; }
}

/* ==================== 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: #c90012;
  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: #c90012;
  margin-bottom: -2px;
  border-radius: 12px 12px 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: 12px;
  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: #f3e3e5;
}
.esi-card.featured { border-color: #c90012; border-width: 2px; }

.esi-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #c90012;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 24px;
  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: #c90012; 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: 12px;
  background: #2c2c99;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all .2s;
}
.esi-card__btn:hover { background: #c90012; border-color: #c90012; color: #fff; }
.esi-card.featured .esi-card__btn { background: #c90012; border-color: #c90012; }
.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; }
}

/* ============ Contacto ============
   Medidas tomadas de http://academia-esenia-ur.local/contacto/ y replicadas.
   Los radios se llevaron a 12 y 24, que es la norma del sistema. */
.cto-wrap { padding: 160px 0 80px; }
.cto-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 35px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: none;
  margin: 0 0 24px;
}
.cto-grid {
  display: grid;
  grid-template-columns: 774px 387px;
  justify-content: space-between;
  align-items: stretch;
  gap: 130px;
}
/* Caja del formulario: fondo blanco y borde azul */
.cto-form-box {
  background: #fff;
  border: 1.6px solid var(--color-primary);
  border-radius: 12px;
  padding: 24px;
  min-height: 200px;
}
/* La columna de datos se centra en los dos ejes dentro del alto del formulario */
.cto-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 40px;
}
.cto-block { width: 100%; }
.cto-block-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: none;
  margin: 0 0 12px;
}
.cto-block-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-primary);
}
/* Cada dato va en columna: el ícono centrado arriba y el link debajo */
.cto-item { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; }
.cto-item:last-child { margin-bottom: 0; }
.cto-ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.cto-ico svg { width: 20px; height: 20px; fill: var(--color-primary); }
.cto-item-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cto-item-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}
.cto-item-text a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primary);
  transition: color 0.2s ease;
}
.cto-item-text a:hover { color: var(--color-accent); }

/* Newsletter de la Academia: fondo azul sólido, sin degradé */
.newsletter.newsletter-academia {
  background: var(--color-primary);
  padding: 120px 50px;
}
.newsletter-academia .newsletter-content h2 { color: #d8d7f3; font-size: 35px; }
.newsletter-academia .newsletter-content p { color: #cacaca; }
.newsletter-academia .newsletter-form input {
  background: #fff;
  border: 1.6px solid #d8d7f3;
  border-radius: 12px;
  color: var(--color-primary);
}
.newsletter-academia .newsletter-form input::placeholder { color: rgba(44,44,153,0.6); }
.newsletter-academia .newsletter-content p { max-width: none; white-space: nowrap; }
.newsletter-academia .newsletter-form input,
.newsletter-academia .newsletter-form .esn-btn-newsletter { height: 48px; min-height: 48px; }
.newsletter-academia .newsletter-form .esn-btn-newsletter {
  background: var(--color-accent);
  color: #fff;
  border: none;
}
.newsletter-academia .newsletter-form .esn-btn-newsletter:hover {
  background: #fff;
  color: var(--color-accent);
}

@media (max-width: 1200px) {
  .cto-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .cto-wrap { padding: 140px 0 60px; }
  .cto-title { text-align: center; }
  .newsletter.newsletter-academia { padding: 60px 24px; }
  /* La frase del newsletter va en una línea sola sólo en escritorio: en mobile
     ese nowrap ensanchaba la página a 861 y todo se veía achicado. */
  .newsletter-academia .newsletter-content p { white-space: normal; }
}

/* ============ Hero de la home ============
   Medidas tomadas de la primera sección de academia-esenia-ur.local. */
.hero-academia { padding: 180px 0 80px; }
.hero-academia-grid {
  display: grid;
  grid-template-columns: 556px 685px;
  justify-content: space-between;
  align-items: stretch;
  gap: 50px;
}
/* La columna de texto se centra en los dos ejes: eyebrow, título, frase y botón */
.hero-academia-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.hero-academia-eyebrow {
  font-family: 'Roboto', var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-academia-footer);
  margin: 0 0 10px;
}
/* Frase de marca: va en Earth y en mayúsculas, igual que en el pie */
.hero-academia-title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 1px;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 24px;
}
.hero-academia-lead {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-primary);
  margin: 0 0 36px;
}
.hero-academia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 25px;
  font-family: 'Roboto', var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background: var(--color-academia-footer);
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}
.hero-academia-btn:hover { background: var(--color-accent); color: #fff; }
/* El logo se apoya sobre el fondo y lo desborda, igual que en WordPress */
.hero-academia-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Radio 60, el mismo del rectángulo original de WordPress */
.hero-academia-bg { width: 685px; max-width: 100%; height: auto; border-radius: 60px; }
/* En WordPress el logo mide 411 de alto contra una caja de 376: es el 109,3%
   del alto de la caja, apoyado abajo y desbordando 35 por arriba. Se replica
   en porcentaje para que la proporción se mantenga al achicar la ventana. */
.hero-academia-logo {
  position: absolute;
  bottom: 0;
  height: 109.3%;
  width: auto;
  padding-bottom: 12px;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .hero-academia-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-academia-title { font-size: 42px; }
  /* El rectángulo deja de medir 685 fijos y se ajusta al ancho disponible */
  .hero-academia-bg { width: 100%; }
}
@media (max-width: 900px) {
  .hero-academia { padding: 150px 0 60px; }
  /* La Earth es muy ancha: a 34px "ENSEÑANZAS" tocaba los bordes del celular */
  .hero-academia-title { font-size: 26px; line-height: 1.35; }
  .hero-academia-lead { font-size: 18px; }
  .hero-academia-btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }
  .hero-academia-bg { border-radius: 24px; }
}
@media (max-width: 420px) {
  .hero-academia-title { font-size: 22px; }
  .hero-academia-lead { font-size: 16px; }
}

/* ============ Programas ============
   Medidas de la segunda sección de academia-esenia-ur.local: título 47,5 en
   #043593 centrado, y tres filas de 1290 con foto de un lado y texto del otro,
   separadas 35 y alineadas al centro. */
.programas { padding: 40px 0 80px; }
.programas-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 47.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-academia-footer);
  text-align: center;
  text-transform: none;
  margin: 0 0 60px;
}
.programas-rows { display: flex; flex-direction: column; gap: 84px; }
.programas-row {
  display: flex;
  align-items: center;
  gap: 35px;
}
.programas-row-invertida { flex-direction: row-reverse; }
.programas-media { flex: 0 0 auto; width: 713px; max-width: 55%; }
/* Para las fotos cuadradas, que a ancho completo ocupan demasiado alto */
.programas-media-mitad { width: 356px; max-width: 28%; }
/* 20% más chica que la medida base */
.programas-media-80 { width: 570px; max-width: 44%; }
.programas-media img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.programas-texto { flex: 1 1 auto; }
/* Título y frase centrados en los dos ejes dentro de la fila */
.programas-texto-centrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-self: stretch;
}
.programas-row-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 35px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: none;
  margin: 0 0 20px;
}
.programas-row-text {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.65;
  color: var(--color-academia-footer);
  margin: 0;
}

@media (max-width: 1100px) {
  .programas-row,
  .programas-row-invertida { flex-direction: column; text-align: center; gap: 24px; }
  .programas-media { width: 100%; max-width: 100%; }
}
@media (max-width: 900px) {
  .programas-title { font-size: 32px; margin-bottom: 40px; }
  .programas-row-title { font-size: 26px; }
  .programas-row-text { font-size: 18px; }
}

/* ============ Servicios ============
   Medidas de academia-esenia-ur.local/servicios/. Los radios de 20 se llevaron
   a 24, que es la norma; el del banner queda en 60 como el rectángulo del hero. */
.srv-hero { padding: 180px 0 60px; }
.srv-banner {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 389px;
  padding: 0 80px;
  background: #d8d7f3;
  border-radius: 60px;
}
.srv-banner-media { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.srv-banner-bg { display: none; }
.srv-banner-logo { width: 402px; max-width: 100%; height: auto; }
/* Texto y botón centrados dentro de la tarjeta */
.srv-banner-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.srv-banner-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--color-accent);
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 26px;
}
.srv-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 25px;
  font-family: 'Roboto', var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background: var(--color-academia-footer);
  border-radius: 12px;
  transition: background 0.2s ease;
}
.srv-banner-btn:hover { background: var(--color-accent); }

/* Tarjetas: 3 columnas, la del medio corrida 70 hacia abajo como en el original */
.srv-cards { padding: 40px 0; }
.srv-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
}
.srv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 467px;
  padding: 70px 50px;
  background: var(--color-pastilla);
  border-radius: 24px;
}
.srv-cards-grid > .srv-card:nth-child(2),
.srv-cards-grid > .srv-card:nth-child(5) { margin-top: 70px; }
.srv-card-ico { display: block; margin-bottom: 24px; }
/* Los íconos propios son de trazo, no de relleno */
.srv-card-ico svg { width: 50px; height: 50px; color: var(--color-academia-footer); }
.srv-card-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 23px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: none;
  margin: 0 0 16px;
}
.srv-card-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-academia-footer);
  margin: 0;
}
.srv-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: 54px;
  padding: 12px 25px;
  font-family: 'Roboto', var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background: var(--color-academia-footer);
  border-radius: 12px;
  transition: background 0.2s ease;
}
.srv-card-btn:hover { background: var(--color-accent); }

/* Tres pasos */
.srv-steps { padding: 80px 0 40px; }
.srv-steps-eyebrow {
  font-family: 'Roboto', var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-academia-footer);
  margin: 0 0 10px;
}
.srv-steps-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 35px;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: none;
  margin: 0 0 50px;
}
.srv-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; }
.srv-steps-grid > .srv-step:nth-child(2) { margin-top: 70px; }
.srv-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.srv-step-ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 145px;
  margin-bottom: 24px;
  background: var(--color-pastilla);
  border-radius: 50%;
}
.srv-step-ico svg { width: 55px; height: 55px; color: var(--color-academia-footer); }
.srv-step-num {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-academia-footer);
  color: #fff;
  border-radius: 50%;
  font-family: 'Roboto', var(--font-body);
  font-size: 20px;
  font-weight: 700;
}
.srv-step-title {
  font-family: 'Roboto', var(--font-body);
  font-size: 23px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: none;
  margin: 0 0 12px;
}
.srv-step-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-academia-footer);
  margin: 0;
}

@media (max-width: 1100px) {
  .srv-banner { flex-direction: column; text-align: center; padding: 50px 40px; }
  .srv-banner-logo { width: 280px; }
  /* Sin nowrap: en pantallas chicas la frase tiene que poder cortar sola */
  .srv-banner-title { font-size: 24px; white-space: normal; }
  .srv-cards-grid,
  .srv-steps-grid { grid-template-columns: 1fr; }
  .srv-cards-grid > .srv-card:nth-child(2),
  .srv-cards-grid > .srv-card:nth-child(5),
  .srv-steps-grid > .srv-step:nth-child(2) { margin-top: 0; }
}
@media (max-width: 900px) {
  .srv-hero { padding: 150px 0 40px; }
  .srv-banner { border-radius: 24px; }
  .srv-banner-title { font-size: 18px; }
  .srv-steps-title { font-size: 28px; }
}

/* ============ Nosotros ============
   Medidas de academia.eseniaur.com/nosotros/: título Earth de 36 en el azul de
   marca, y grilla de 4 columnas con piezas de 234 separadas 50 y 89. */
.nos-hero { padding: 180px 0 40px; }
/* Título y logo van juntos y centrados, no uno en cada punta */
.nos-hero-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
}
.nos-hero-title {
  flex: 0 1 460px;
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.35;
  letter-spacing: 1px;
  color: var(--color-accent);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.nos-hero-media { flex: 0 0 auto; }
.nos-hero-media img { width: 407px; max-width: 100%; height: auto; }

.nos-elementos { padding: 100px 0 80px; }
.nos-elementos-title {
  font-family: var(--font-heading);
  font-size: 36px;
  letter-spacing: 1px;
  color: var(--color-primary);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 80px;
}
.nos-elementos-grid {
  display: grid;
  grid-template-columns: repeat(4, 234px);
  justify-content: center;
  column-gap: 50px;
  row-gap: 89px;
}
.nos-elemento {
  width: 234px;
  height: 234px;
  object-fit: contain;
}
/* Las dos últimas quedan centradas, en las columnas 2 y 3 */
.nos-elemento-col2 { grid-column: 2; }

@media (max-width: 1100px) {
  .nos-hero-grid { flex-direction: column; text-align: center; }
  .nos-hero-title { flex: 0 1 auto; font-size: 28px; }
  .nos-hero-media img { width: 300px; }
  .nos-elementos-grid { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 40px; }
  .nos-elemento { width: 100%; height: auto; }
  .nos-elemento-col2 { grid-column: auto; }
}
@media (max-width: 700px) {
  .nos-hero { padding: 150px 0 30px; }
  .nos-hero-title,
  .nos-elementos-title { font-size: 22px; }
  .nos-hero-media img { width: 190px; }
  /* en el telefono los elementos van uno debajo del otro: en dos columnas
     el dibujo y su nombre quedaban ilegibles */
  .nos-elementos-grid { grid-template-columns: 1fr; justify-items: center; row-gap: 32px; }
  .nos-elemento { max-width: 300px; }
}

/* ============ Nuestra Familia, Nuestros Proyectos ============
   Cinta que corre sola en loop. Los logos van en gris y toman color al pasar
   el mouse. La cinta va duplicada para que el ciclo no deje huecos. */
.familia { padding: 60px 0 80px; overflow: hidden; }
.familia-title {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: 1px;
  color: var(--color-accent);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 50px;
}
.familia-cinta {
  display: flex;
  width: max-content;
  animation: familia-correr 45s linear infinite;
}
.familia-cinta:hover { animation-play-state: paused; }
.fam-tira { display: flex; align-items: center; gap: 60px; padding-right: 60px; }
.fam-logo {
  flex: 0 0 auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.fam-logo img { width: 200px; height: auto; display: block; }
.fam-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-4px); }
a.fam-logo { cursor: pointer; }
span.fam-logo { cursor: default; }
@keyframes familia-correr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Si el visitante pidio menos movimiento, la cinta se queda quieta */
@media (prefers-reduced-motion: reduce) {
  .familia-cinta { animation: none; }
  .familia { overflow-x: auto; }
}
@media (max-width: 900px) {
  .familia { padding: 40px 0 60px; }
  .familia-title { font-size: 22px; margin-bottom: 32px; }
  .fam-tira { gap: 36px; padding-right: 36px; }
  .fam-logo img { width: 140px; }
}

/* El shortcode de Fluent Forms trae su propio recuadro rojo. Como la caja ya la
   pone la página, se le saca el borde al del plugin para no ver dos marcos. */
.cto-form-box .fluentform,
.cto-form-box .fluentform.ffs_custom_wrap {
  /* el plugin inyecta su hoja despues de esta, por eso el !important */
  border: none !important;
  padding: 0 !important;
}

/* Blocksy estiliza [type="submit"] y los inputs con la misma especificidad que
   nuestras clases, y gana porque su hoja carga después. Estas dos reglas suben
   un escalón para reponer lo nuestro. */
.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 { font-size: 14px; }


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

/* ---------- Pagina 404 ----------
   La imagen ocupa la pantalla y debajo va el boton de volver, con los mismos
   colores que el boton del hero. */
.error-404-hero {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	background: #ffffff;
	padding: 24px;
	box-sizing: border-box;
}

.error-404-image {
	width: 70%;
	max-width: 900px;
	height: auto;
	display: block;
}

.error-404-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 12px 25px;
	font-family: 'Roboto', var(--font-body);
	font-size: 18px;
	font-weight: 500;
	color: #ffffff;
	background: var(--color-academia-footer);
	border-radius: 12px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

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

@media (max-width: 700px) {
	.error-404-image { width: 100%; }
}

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

/* ==================================================================
   auyua.net — bloques propios
   Prefijo ayn- a proposito: esta hoja todavia arrastra las clases de
   Academia y no queremos que se pisen. Paleta de la marca, fondo
   blanco, el rojo solo donde tiene que llamar. Radios 12 y 24, nada
   mas. Medidas en la escala de 6.
   ================================================================== */

.ayn-seccion       { padding: 72px 0; background: #ffffff; }
.ayn-seccion-clara { padding: 72px 0; background: #f3f6fc; }

/* El encabezado es fijo, asi que la primera seccion de la pagina tiene que
   dejarle lugar. Las paginas con hero propio ya lo hacen (.srv-hero y
   .nos-hero abren con 180px); las que arrancan directo con una seccion no,
   y el ojo de arriba quedaba cortado por la barra. Mismo valor, para que
   todas las paginas empiecen a la misma altura. */
main > .ayn-seccion:first-child,
main > .ayn-seccion-clara:first-child { padding-top: 180px; }

.ayn-eyebrow {
  color: #c90012;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.ayn-titulo-seccion {
  color: #2c2c99;
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 0 0 18px;
}
.ayn-bajada-seccion {
  color: #0b0090;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 0 42px;
}
.ayn-centrado { text-align: center; }
.ayn-centrado .ayn-bajada-seccion { margin-left: auto; margin-right: auto; }
/* Los botones son un flex: sin esto quedan pegados a la izquierda debajo de
   un texto centrado. */
.ayn-centrado .ayn-hero-botones { justify-content: center; }

/* Grillas ------------------------------------------------------- */
.ayn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ayn-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ayn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }

/* Tarjetas ------------------------------------------------------ */
.ayn-tarjeta {
  background: #ffffff;
  border: 1px solid #d7e1f4;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.ayn-tarjeta:hover { border-color: #2c2c99; transform: translateY(-6px); }
.ayn-seccion-clara .ayn-tarjeta { border-color: #ffffff; }
.ayn-seccion-clara .ayn-tarjeta:hover { border-color: #2c2c99; }
.ayn-tarjeta-titulo {
  color: #2c2c99;
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.ayn-tarjeta-texto {
  color: #0b0090;
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 18px;
  flex: 1;
}
.ayn-tarjeta-enlace {
  color: #c90012;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
}
.ayn-tarjeta-enlace:hover { color: #2c2c99; }

/* Columnas de texto, sin tarjeta -------------------------------- */
.ayn-columna-titulo { color: #2c2c99; font-size: 1.2rem; margin: 0 0 12px; }
.ayn-columna-texto  { color: #0b0090; font-size: 1rem; line-height: 1.7; margin: 0; }

/* Los tres publicos --------------------------------------------- */
.ayn-publicos { list-style: none; margin: 30px 0 0; padding: 0; }
.ayn-publicos li {
  border-left: 3px solid #2c2c99;
  padding: 6px 0 6px 18px;
  margin-bottom: 18px;
  color: #0b0090;
  line-height: 1.65;
}
.ayn-publicos strong { color: #2c2c99; display: block; }

/* Botones del hero ---------------------------------------------- */
.ayn-hero-botones { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.ayn-btn-linea {
  display: inline-block;
  border: 2px solid #2c2c99;
  border-radius: 12px;
  color: #2c2c99;
  padding: 12px 30px;
  font-weight: 700;
  text-decoration: none;
}
.ayn-btn-linea:hover { background: #2c2c99; color: #ffffff; }

/* Pantallas chicas ---------------------------------------------- */
@media (max-width: 900px) {
  .ayn-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ayn-grid-3, .ayn-grid-2 { grid-template-columns: 1fr; }
  .ayn-titulo-seccion { font-size: 1.7rem; }
  .ayn-seccion, .ayn-seccion-clara { padding: 48px 0; }
  main > .ayn-seccion:first-child,
  main > .ayn-seccion-clara:first-child { padding-top: 150px; }
}
@media (max-width: 560px) {
  .ayn-grid-4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Arreglos del hero de la portada de auyua.net

   Dos cosas que estaban rotas y se ven recien ahora:

   1) La caja de la imagen no tenia alto propio. El ave estaba
      posicionada en absoluto contra un fondo decorativo de Academia
      que era el que le daba el alto; al sacar ese fondo la caja quedo
      en cero y el ave desaparecio, dejando el hero en blanco. Ahora el
      ave es un elemento normal y la caja tiene un alto minimo.

   2) La grilla del hero tenia columnas fijas de 556 y 685 pixeles mas
      50 de separacion: 1291, uno mas que el ancho maximo del
      contenedor. Eso desbordaba la pagina entera a lo ancho y cortaba
      la tercera columna de todas las secciones de abajo. Venia de
      Academia; se pasa a columnas fluidas.
   ------------------------------------------------------------------ */
/* El padding del hero NO se toca aca. Hubo un `padding: 96px 0 72px` en este
   bloque que no venia al caso -se colo con los dos arreglos de arriba- y
   pisaba en silencio los dos valores buenos: los 180px de la linea 1769 en
   escritorio y los 150px del @media de 900 en telefono. Con la cabecera fija
   midiendo 120px, ese 96 dejaba el ojo de "LOGISTICA DIGITAL" a 8px de la
   barra, practicamente pegado. Se quito el 2026-09-10. */
.hero-academia-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}
.hero-academia-media { min-height: 0; }
.hero-academia-logo {
  position: static;
  height: auto;
  width: 100%;
  max-width: 420px;
  padding-bottom: 0;
}
.hero-academia-title { font-size: 42px; }
.hero-academia-lead  { max-width: 520px; }

@media (max-width: 900px) {
  /* 150px arriba, no 72: es el mismo valor con el que abren .srv-hero y
     .nos-hero en telefono, y con la cabecera fija encima cualquier cosa
     menor deja el ojo del hero pegado a la barra. El 72 se colo junto con
     el 96 de escritorio y pisaba el 150 del @media de mas arriba. */
  .hero-academia { padding: 150px 0 48px; }
  .hero-academia-grid { grid-template-columns: 1fr; }
  .hero-academia-title { font-size: 30px; }
  .hero-academia-media { order: -1; }
  .hero-academia-logo { max-width: 260px; margin: 0 auto; }
}

/* ------------------------------------------------------------------
   Tipografia de auyua.net

   La hoja heredada usaba las fuentes de Esenia Ur: Earth para los
   titulos -siempre en mayusculas, que es la regla de ESA marca- y
   Merriweather para los subtitulos. Las de auyua.net son Jost para
   titulos e interfaz y Manrope para el texto, que son las que ya usa
   auyuanet.uy. Se reemplazan en la raiz para que valga en todo el
   sitio y no haya que perseguir selector por selector.
   ------------------------------------------------------------------ */
:root {
  --font-heading:    'Jost', Arial, sans-serif;
  --font-subheading: 'Jost', Arial, sans-serif;
  --font-body:       'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* Earth se escribia siempre en mayusculas porque la fuente lo pedia.
   Jost no: una frase larga en mayusculas se vuelve un muro. */
.hero-academia-title {
  text-transform: none;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #2c2c99;
  text-align: left;
}
.hero-academia-eyebrow { text-align: left; }
.hero-academia-lead    { text-align: left; }
.hero-academia-text    { text-align: left; }
.ayn-titulo-seccion    { font-weight: 600; letter-spacing: -0.3px; }

/* El bloque de texto del hero venia centrado como bloque -flex column
   con align-items:center-, asi que el eyebrow, el titulo, la bajada y
   los botones arrancaban cada uno en un lugar distinto. Alineados a la
   izquierda quedan todos sobre el mismo borde, que es lo que hace el
   resto de la pagina. */
.hero-academia-text {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
/* El eyebrow y el boton principal usaban el azul del pie de Academia,
   que no esta en la paleta de auyua. El rojo va donde tiene que llamar:
   el eyebrow y el boton principal, y nada mas. */
.hero-academia-eyebrow { color: #c90012; letter-spacing: 0.12em; }
.hero-academia-btn     { background: #c90012; }
.hero-academia-btn:hover { background: #2c2c99; }

/* Linea de tiempo de Nosotros ------------------------------------ */
.ayn-timeline { list-style: none; margin: 42px 0 0; padding: 0; position: relative; }
.ayn-timeline::before {
  content: "";
  position: absolute;
  left: 78px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #d7e1f4;
}
.ayn-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 36px;
  padding-bottom: 42px;
}
.ayn-timeline li:last-child { padding-bottom: 0; }
.ayn-timeline-anio {
  color: #c90012;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}
.ayn-timeline-cuerpo { padding-left: 12px; }
.ayn-timeline-cuerpo::before {
  content: "";
  position: absolute;
  left: 72px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2c2c99;
}
.ayn-timeline-titulo { color: #2c2c99; font-size: 1.15rem; margin: 0 0 6px; }
.ayn-timeline-texto  { color: #0b0090; line-height: 1.7; margin: 0; }

@media (max-width: 560px) {
  .ayn-timeline::before { left: 6px; }
  .ayn-timeline li { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; }
  .ayn-timeline-anio { text-align: left; }
  .ayn-timeline-cuerpo { padding-left: 0; }
  .ayn-timeline-cuerpo::before { left: 0; }
}

/* Planes ---------------------------------------------------------- */
.ayn-planes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.ayn-plan {
  position: relative;
  background: #ffffff;
  border: 1px solid #d7e1f4;
  border-radius: 24px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
}
.ayn-plan-destacado { border-color: #2c2c99; border-width: 2px; }
.ayn-plan-insignia {
  position: absolute;
  top: -13px;
  left: 24px;
  background: #c90012;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 12px;
}
.ayn-plan-nombre  { color: #2c2c99; font-size: 1.3rem; margin: 0 0 6px; }
.ayn-plan-para    { color: #0b0090; font-size: 0.95rem; line-height: 1.6; margin: 0 0 24px; }
.ayn-plan-precio  { color: #2c2c99; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.ayn-plan-periodo { color: #0b0090; font-size: 0.9rem; margin: 6px 0 24px; }
.ayn-plan-incluye { list-style: none; margin: 0 0 30px; padding: 0; flex: 1; }
.ayn-plan-incluye li {
  color: #0b0090;
  font-size: 0.96rem;
  line-height: 1.55;
  padding: 0 0 12px 24px;
  position: relative;
}
.ayn-plan-incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c90012;
}
.ayn-plan-incluye .ayn-hereda { color: #2c2c99; font-weight: 700; }
.ayn-plan-btn {
  display: block;
  text-align: center;
  background: #c90012;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 700;
  text-decoration: none;
}
.ayn-plan-btn:hover { background: #2c2c99; color: #ffffff; }

.ayn-empresas {
  margin-top: 48px;
  background: #ffffff;
  border: 1px solid #d7e1f4;
  border-radius: 24px;
  padding: 36px;
}
.ayn-empresas h3 { color: #2c2c99; font-size: 1.3rem; margin: 0 0 12px; }
.ayn-empresas p  { color: #0b0090; line-height: 1.7; margin: 0 0 24px; max-width: 760px; }

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

/* Marcador de imagen pendiente en los articulos ------------------- */
.ayn-imagen-pendiente {
  border: 2px dashed #d7e1f4;
  border-radius: 12px;
  background: #f3f6fc;
  padding: 24px;
  margin: 30px 0;
}
.ayn-imagen-pendiente strong {
  display: block;
  color: #c90012;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ayn-imagen-pendiente p { color: #0b0090; font-size: 0.95rem; line-height: 1.65; margin: 0; }
.ayn-imagen-pendiente em { color: #2c2c99; font-style: normal; font-weight: 700; }

/* ---------- Boton de la tarjeta del blog ----------
   Rojo de marca, y azul al pasar el mouse.

   Venia al reves de la copia de Academia: azul #043593 normal y rojo al
   hover. Y es distinto del resto de los botones del sitio a proposito:
   ESTA REGLA VALE SOLO ACA, en la tarjeta del blog, que es donde se pidio.
   No toca ningun otro boton.

   Blocksy dibuja el boton leyendo dos variables del propio elemento, asi
   que alcanza con darles otro valor. Sin !important y sin pelearle
   especificidad a nadie: se trabaja con el tema, no contra el.
   ---------------------------------------------------------------- */
.entry-card .entry-button {
	--theme-button-background-initial-color: #c90012;
	--theme-button-background-hover-color: #2c2c99;
}