/**
* Theme Name: Zeen Child
* Description: Zeen child theme.
* Author: Codetipi
* Template: zeen
* Version: 1.0.0
*/

/* ==========================================================================
   EGOLOGÍA · SISTEMA EDITORIAL v2  (piloto: /metodologia/)
   Fuente única de verdad del CSS propio. Ámbito: clase raíz .eg

   v2 (31 jul 2026): la página se monta con widgets NATIVOS de Elementor
   (encabezado, editor de texto, imagen) para que Inma pueda editarla desde el
   editor visual. Reglas de convivencia con Elementor:

     · clases: contenedor -> settings.css_classes  (sin guion bajo)
               widget     -> settings._css_classes (con guion bajo)
     · content_width:'full' evita el envoltorio .e-con-inner
     · MODELO: la tipografía se declara en el CONTENEDOR y el texto del widget
       la HEREDA. Así el kit de Elementor (post-8.css y post-3676.css, que se
       publican después de esta hoja) no puede imponer su color ni su tamaño,
       y no hace falta !important en ningún componente.
     · el kit escribe padding y gap literales en los contenedores: se igualan
       con .eg .elementor-element.e-con y los componentes que sí llevan padding
       se declaran como .eg .e-con.<clase> para ganar por orden, no por peso.

   Medido en navegador sobre la referencia editorial:
     lienzo      max 1400, centrado, a sangre por debajo de 1400
     gutter      30px (20 en móvil) -> texto 1340 a 1440, 1220 a 1280
     cabecera    fija; 81+45=126 en escritorio, 44+45=89 en tableta/móvil
     filete nav  1px #dcdcdc arriba y abajo
     héroe       ALTURA FIJA 555 (escritorio) / 355 (tableta), no proporción;
                 contenido centrado y descolgado 40px del borde inferior
     H1          43px/1.38 peso 700, medida máx 800; 24px en tableta y móvil
     subtítulo   19px/1.2 peso 300 (la referencia usa 200, que no cargamos)
     logotipo    46px/300 con tracking .3em -> 341px de ancho (referencia 340)
     compacta    NO: la referencia mantiene 81+45 durante todo el scroll
     nav móvil   12px con padding 8: los 4 enlaces caben en 375 sin scroll
     acento      1px amarillo #f7d40e como puntuación de sección
     ESCALA DEL CUERPO medida en la referencia a 1536 (portada y artículo):
       cuerpo        18px/500, interlínea 1,25, tracking -.028em, columna 660
       entradilla    20px/500, interlínea 1,30
       H2 de sección 32px/700, interlínea 1,34, tracking -.03em
       tarjeta       título 20px/500 · descripción 17px/300, interlínea 1,38
       metadatos     13-14px
     (la referencia usa pesos 200 y 450 que el kit no carga: se sustituyen por
      300 y 500, los más próximos disponibles) (decisión de
                 Inma, 31 jul: el amarillo de marca es el acento único)

   Revertir = dejar este archivo con sólo la cabecera del tema hijo.
   ========================================================================== */

/* ---------------------------------------------------------- 1 · variables */
.eg{
  --eg-font: "futura-pt", "Futura PT", system-ui, sans-serif;
  --eg-ink: #111318;
  --eg-ink-2: #55575c;
  --eg-ink-3: #8b8d92;
  --eg-paper: #ffffff;
  --eg-accent: #f7d40e;
  --eg-rule: #dcdcdc;
  --eg-veil: rgba(8,8,10,.55);

  --eg-max: 1400px;
  --eg-gutter: 30px;
  --eg-reading: 660px;

  --eg-head-top: 81px;
  --eg-head-nav: 45px;
  --eg-head-h: calc(var(--eg-head-top) + var(--eg-head-nav));

  --eg-hero-h: 555px;
  --eg-section: 96px;
  --eg-block: 45px;

  font-family: var(--eg-font);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.028em;
  color: var(--eg-ink);
  background: var(--eg-paper);
  padding-top: var(--eg-head-h);
}

/* --------------------------------------------- 2 · armadura tipográfica
   El CSS adicional del sitio impone body{'Inter','futura'!important} y
   h1..h6{'Newsreader'!important} al final del head: una sola regla, con más
   especificidad, y sin salir de .eg. */
.eg, .eg *{ font-family: var(--eg-font) !important }

/* ----------------------------------- 3 · herencia dentro de los widgets
   El texto del widget hereda del contenedor que lo envuelve. Los bloques con
   varios párrafos dentro de un mismo editor conservan sus propias reglas
   (la herencia sólo se fuerza cuando el párrafo es hijo único). */
.eg .elementor-widget-heading .elementor-heading-title,
.eg .elementor-widget-text-editor .elementor-widget-container > p:only-child{
  font: inherit !important; color: inherit !important;
  letter-spacing: inherit; margin: 0;
}
/* El !important de arriba es deliberado y está acotado a estas dos reglas: en
   el EDITOR, Elementor escribe el color del kit por elemento
   (.elementor-3676 .elementor-element-xxxx .elementor-heading-title) y sin él
   los titulares se verían azules mientras Inma edita. Los tamaños se declaran
   siempre en el contenedor o en el widget, nunca en el texto interior, así que
   esta herencia forzada no pisa ningún componente. */
/* el kit fija la tipografía en el propio widget (post-3676.css): se devuelve a
   herencia aquí. El COLOR no: viaja en el dato de cada widget (title_color /
   text_color) porque el editor lo escribe por elemento y así el lienzo del
   editor y la web muestran lo mismo, y sigue siendo editable desde el panel. */
.eg .elementor-widget-text-editor,
.eg .elementor-widget-heading{ font: inherit; letter-spacing: inherit }
.eg .elementor-widget-heading .elementor-heading-title a{ color: inherit }

/* neutraliza el relleno y la separación que Elementor da por defecto */
.eg .e-con, .eg .e-con-inner{
  --padding-inline: 0; --padding-block: 0; --gap: 0px; --width: 100%;
}
.eg.elementor-element.e-con,
.eg .elementor-element.e-con{ padding: 0; gap: 0 }
.eg .elementor-element.elementor-widget{ margin-block-end: 0 }
.eg .elementor-widget-text-editor{ gap: 0 }
.eg .elementor-widget{ width: 100% }
.eg .elementor-widget-container{ margin: 0 }
.eg .elementor-widget-image img{ display: block; width: 100%; height: auto }
.eg .elementor-widget-image figure{ margin: 0 }

.eg *, .eg *::before, .eg *::after{ box-sizing: border-box }
.eg img{ opacity: 1 !important }
.eg a{ color: inherit; text-decoration: none }
.eg p:empty{ display: none }

/* ------------------------------------------------------ 4 · lienzo exterior
   Neutraliza los contenedores de Elementor sólo cuando envuelven a .eg. */
.e-con:has(.eg){ padding-inline: 0; padding-block: 0 }
.e-con > .e-con-inner:has(.eg){ max-width: none; padding: 0 }
.elementor-widget-container:has(> .eg){ padding: 0 }
body:has(.eg){ background: #fff }
.elementor-section:has(.eg){ padding: 0 }
.elementor-section.elementor-section-boxed > .elementor-container:has(.eg){ max-width: none }

.eg .e-con.eg-shell{
  display: block;
  width: 100%; max-width: var(--eg-max);
  margin-inline: auto; padding-inline: var(--eg-gutter);
}
/* medida de lectura: se acota el CONTENEDOR, no el widget (Elementor impone
   max-width:100% a sus widgets con más peso del que se le puede ganar). */
.eg .eg-reading{ max-width: var(--eg-reading) }
.eg .e-con.eg-body{ max-width: var(--eg-reading) }

/* ---------------------------------------------------------- 5 · cabecera */
.eg .eg-head{
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: block; background: var(--eg-paper);
}
.eg .e-con.eg-head__bar{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--eg-head-top);
  max-width: var(--eg-max); margin-inline: auto;
  padding-inline: calc(var(--eg-gutter) + 10px);
}
.eg .eg-head__menu{ justify-self: start; width: auto }
.eg .eg-menu{ position: relative }
.eg .eg-menu__btn{
  display: flex; flex-direction: column; justify-content: space-between;
  width: 21px; height: 16px; padding: 0; border: 0; background: none;
  cursor: pointer; list-style: none;
}
.eg .eg-menu__btn::-webkit-details-marker{ display: none }
.eg .eg-menu__btn i{ display: block; height: 2px; background: var(--eg-ink) }
.eg .eg-menu[open] .eg-menu__btn i:nth-child(2){ background: var(--eg-accent) }
.eg .eg-menu__panel{
  position: absolute; top: calc(100% + 22px); left: 0; z-index: 2;
  min-width: 268px; padding: 24px 26px 22px;
  background: var(--eg-paper); border: 1px solid var(--eg-rule);
}
.eg .eg-menu__panel a{
  display: block; padding: 9px 0;
  font-size: 13px; font-weight: 500; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase; color: var(--eg-ink);
}
.eg .eg-menu__panel a + a{ border-top: 1px solid var(--eg-rule) }
.eg .eg-menu__panel a:hover{ color: var(--eg-accent) }

.eg .eg-head__logo{
  justify-self: center; width: auto; line-height: 1;
  font-size: 46px; font-weight: 300; letter-spacing: .3em; text-transform: uppercase;
  color: var(--eg-ink); padding-left: .3em;
}
.eg .eg-head__tools{
  justify-self: end; width: auto; line-height: 1;
  font-size: 12px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase;
  color: var(--eg-ink-2);
}
.eg .eg-head__tools a:hover{ color: var(--eg-accent) }

.eg .eg-head__nav{
  display: block; height: var(--eg-head-nav);
  border-top: 1px solid var(--eg-rule); border-bottom: 1px solid var(--eg-rule);
}
/* los 4 enlaces son un solo editor de texto: se aplanan los envoltorios para
   que sean elementos flexibles tanto en la web como dentro del editor, donde
   Elementor añade una capa más alrededor del contenido editable. */
.eg .eg-head__navlinks{
  display: flex; justify-content: center; align-items: center; height: 100%;
  gap: 0;        /* Elementor da 20px de separación por defecto también al widget */
  font-size: 0;  /* los saltos de línea del editor se vuelven elementos flexibles: a cero */
}
.eg .eg-head__navlinks .elementor-widget-container,
.eg .eg-head__navlinks .elementor-text-editor,
.eg .eg-head__navlinks p{ display: contents }
.eg .eg-head__navlinks a{
  display: block; padding: 15px 20px;
  font-size: 13px; font-weight: 300; letter-spacing: .1em; line-height: 1;
  text-transform: uppercase; color: var(--eg-ink);
}
.eg .eg-head__navlinks a:hover{ color: var(--eg-accent) }
.eg .eg-head__navlinks a[aria-current="page"]{ border-bottom: 1px solid var(--eg-accent) }

body.admin-bar .eg .eg-head{ top: 32px }

/* dentro del editor la cabecera no se fija: si no, tapa el primer bloque y
   estorba al editar. Sólo afecta al lienzo del editor, no a la web. */
body.elementor-editor-active .eg{ padding-top: 0 }
body.elementor-editor-active .eg .eg-head{ position: static }

/* ------------------------------------------------------------- 6 · héroe */
.eg .eg-hero{
  position: relative; display: block;
  width: 100%; max-width: var(--eg-max); height: var(--eg-hero-h);
  margin: 0 auto;
  border-bottom: 1px solid var(--eg-accent);
  background: #0b0b0c; overflow: hidden;
}
.eg .eg-hero__media{ position: absolute; inset: 0; z-index: 1 }
.eg .eg-hero__media .elementor-widget-container{ height: 100% }
.eg .eg-hero__media img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 26% }
.eg .eg-hero__overlay{
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;   /* el degradado es decorativo: si captura el clic,
                             en el editor no se puede seleccionar la foto */
  background: linear-gradient(to top, var(--eg-veil) 0%, rgba(8,8,10,.14) 38%, rgba(8,8,10,0) 62%);
}
.eg .e-con.eg-hero__content{
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3;
  display: block; padding-inline: 100px; text-align: center; color: #fff;
}
.eg .eg-hero__title{
  margin: 0 auto; max-width: 800px;
  font-size: 43px; font-weight: 700; line-height: 1.38;
  letter-spacing: -.005em; color: #fff;
}
.eg .eg-hero__meta{
  margin: 10px auto 0; max-width: 800px;
  font-size: 19px; font-weight: 300; line-height: 1.2; letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

/* ------------------------------------------------ 7 · armadura de texto */
.eg .eg-kicker{
  font-size: 13px; font-weight: 300; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase; color: var(--eg-accent);
}
.eg .eg-sec{ margin-top: var(--eg-section) }
.eg .eg-body .elementor-widget + .elementor-widget{ margin-top: 26px }
/* bloques con varios párrafos dentro de un mismo editor: el reseteo de herencia
   sólo alcanza al párrafo hijo único, así que aquí se declara su ritmo. */
.eg .eg-body p{ margin: 0 0 22px }
.eg .eg-body p:last-child{ margin-bottom: 0 }
.eg .eg-lead{ font-size: 20px; font-weight: 300; line-height: 1.3; max-width: 34ch }

/* --------------------------------------------- 8 · apertura de sección */
.eg .e-con.eg-open{
  margin-top: var(--eg-section); padding-top: 36px;
  border-top: 1px solid var(--eg-accent);
  display: grid; grid-template-columns: minmax(0,.62fr) minmax(0,2fr);
  gap: 46px; align-items: start;
}
.eg .eg-open__num{
  font-size: 72px; font-weight: 300; line-height: .86;
  letter-spacing: -.02em; color: var(--eg-ink);
}
.eg .eg-open__num span{ color: var(--eg-accent) }
.eg .eg-open__head{ display: block }
.eg .eg-open__head .eg-kicker{ margin-bottom: 20px }
.eg .e-con.eg-open .elementor-widget-heading{
  max-width: 26ch;
  font-size: 32px; font-weight: 500; line-height: 1.34;
  letter-spacing: -.03em; color: var(--eg-ink);
}
.eg .e-con.eg-open--plain{ display: block }
.eg .eg-open--plain .elementor-widget-heading{
  max-width: 24ch; font-size: 32px; line-height: 1.34;
}
/* Elementor impone max-width:100% a sus widgets con un selector muy pesado
   (.elementor.elementor .e-con > .elementor-widget). En vez de subir
   especificidad, la medida se acota en el párrafo interior, que es otro
   elemento y no entra en ese conflicto. */
.eg .eg-open__dek p{ max-width: 46ch }
.eg .eg-cierre .elementor-widget-text-editor p{ max-width: var(--eg-reading) }
.eg .eg-open__dek{
  margin-top: 20px;
  font-size: 20px; font-weight: 300; line-height: 1.3; color: var(--eg-ink-2);
}

/* ------------------------------------------------------- 9 · secciones */
/* prosa en una sola columna de lectura, como los artículos de la referencia.
   La versión a dos columnas se retiró el 31 jul: partía los párrafos por la
   mitad y dejaba las columnas descompensadas (decisión de Inma). */
.eg .eg-cols{ display: block; max-width: var(--eg-reading); margin-top: calc(var(--eg-section) * .45) }
.eg .eg-cols p{ margin: 0 0 22px }
.eg .eg-cols p:last-child{ margin-bottom: 0 }

/* división asimétrica imagen / texto */
.eg .e-con.eg-split{ display: grid; gap: 56px; align-items: start; margin-top: calc(var(--eg-section) * .45) }
.eg .e-con.eg-split--a{ grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) }
.eg .e-con.eg-split--b{ grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) }
/* el ANCHO de cada foto se ajusta desde el panel de Elementor (control
   "Dimensión de la imagen"); aquí sólo se fija la forma del recorte. */
.eg .e-con.eg-split img{ aspect-ratio: 16 / 9; object-fit: cover }
.eg .e-con.eg-split--b .eg-split__media{ order: 2 }
/* al encoger la foto, la columna de texto se ensancha: se le pone tope de
   lectura para que la línea no se alargue. */
.eg .e-con.eg-split__body{ display: block; max-width: var(--eg-reading) }
.eg .eg-split__body p{ margin: 0 0 22px }
.eg .eg-split__body p:last-child{ margin-bottom: 0 }

/* axioma: foto amplia + sentencia */
.eg .eg-axioma{ display: block; margin-top: var(--eg-section) }
.eg .eg-axioma img{ object-fit: cover; object-position: 34% 40% }
.eg .e-con.eg-axioma__say{
  margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--eg-accent);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.1fr); gap: 46px; align-items: start;
}
.eg .eg-axioma__txt{
  font-size: 28px; font-weight: 300; line-height: 1.3;
  letter-spacing: -.005em; color: var(--eg-ink);
}

/* tres niveles */
.eg .e-con.eg-niveles{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 46px; margin-top: var(--eg-block);
}
.eg .e-con.eg-nivel{
  display: block; padding-top: 22px; border-top: 1px solid var(--eg-rule);
  font-size: 17px; font-weight: 300; line-height: 1.38; color: var(--eg-ink-2);
}
.eg .elementor-widget.eg-nivel__num{
  margin-bottom: 26px; font-size: 40px; font-weight: 300; line-height: 1;
  letter-spacing: -.02em; color: var(--eg-accent);
}
.eg .eg-nivel .elementor-widget-heading{
  margin-bottom: 12px; font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--eg-ink);
}
.eg .e-con.eg-cierre-linea{
  display: block; margin-top: var(--eg-block); padding-top: 30px;
  border-top: 1px solid var(--eg-accent);
  font-size: 24px; font-weight: 300; line-height: 1.3; max-width: 52ch;
}

/* casos */
.eg .e-con.eg-casos{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 46px; margin-top: var(--eg-block);
}
.eg .e-con.eg-caso{
  display: block; padding-top: 22px; border-top: 1px solid var(--eg-rule);
  font-size: 17px; font-weight: 300; line-height: 1.38; color: var(--eg-ink-2);
}
.eg .eg-caso .elementor-widget-heading{
  margin-bottom: 10px; font-size: 20px; font-weight: 500; line-height: 1.31; color: var(--eg-ink);
}
.eg .eg-caso:hover .elementor-widget-heading{ color: var(--eg-accent) }

/* principios y aplicaciones */
.eg .eg-princ-lead{ display: block; margin-top: 34px; font-size: 20px; font-weight: 300; line-height: 1.3 }
.eg .e-con.eg-grid-4{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 40px; margin-top: var(--eg-block);
}
.eg .e-con.eg-grid-3{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 46px; margin-top: var(--eg-block);
}
.eg .e-con.eg-item{
  display: block; padding-top: 20px; border-top: 1px solid var(--eg-rule);
  font-size: 17px; font-weight: 300; line-height: 1.38; color: var(--eg-ink-2);
}
.eg .e-con.eg-grid-3 .e-con.eg-item{ font-size: 17px; font-weight: 300 }
.eg .eg-item .elementor-widget-heading{
  margin-bottom: 12px; font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--eg-ink);
}

/* enlace de puerta */
.eg .eg-puerta-wrap{ display: block; margin-top: var(--eg-block) }
.eg .eg-puerta{
  display: inline-flex; align-items: baseline; gap: 14px; padding-bottom: 6px;
  border-bottom: 1px solid var(--eg-accent);
  font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--eg-ink);
}
.eg .eg-puerta:hover{ color: var(--eg-accent) }

/* cierre */
.eg .e-con.eg-cierre{
  display: block; margin-top: var(--eg-section);
  padding-top: 44px; padding-bottom: var(--eg-section);
  border-top: 1px solid var(--eg-accent);
  font-size: 18px; line-height: 1.25;
}
.eg .eg-cierre .elementor-widget-heading{
  max-width: 24ch; margin-bottom: 30px;
  font-size: 32px; font-weight: 500; line-height: 1.34;
  letter-spacing: -.01em; color: var(--eg-ink);
}
.eg .eg-cierre .elementor-widget-text-editor{ max-width: var(--eg-reading) }
.eg .eg-cierre .eg-puerta{ margin-top: 26px }

/* ------------------------------------------------------------- 10 · pie */
.eg .eg-foot{ display: block; border-top: 1px solid var(--eg-rule) }
.eg .e-con.eg-foot__grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 46px;
  padding-block: 56px 48px;
}
.eg .eg-foot__brand, .eg .eg-foot__col{ display: block }
.eg .eg-foot__mark{
  font-size: 26px; font-weight: 300; letter-spacing: .3em;
  text-transform: uppercase; line-height: 1; color: var(--eg-ink);
}
.eg .eg-foot__desc{
  margin-top: 18px; max-width: 26ch;
  font-size: 14px; font-weight: 300; line-height: 1.38; color: var(--eg-ink-2);
}
.eg .elementor-widget.eg-foot__h{
  margin-bottom: 18px; font-size: 12px; font-weight: 300; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; color: var(--eg-ink-3);
}
.eg .eg-foot__links a{
  display: block; margin-bottom: 11px;
  font-size: 14px; font-weight: 300; line-height: 1.38; color: var(--eg-ink);
}
.eg .eg-foot__links a:hover{ color: var(--eg-accent) }
.eg .e-con.eg-foot__bottom{
  display: flex; flex-wrap: wrap; gap: 10px 34px; justify-content: space-between;
  border-top: 1px solid var(--eg-rule); padding-block: 26px 34px;
}
.eg .e-con.eg-foot__bottom .elementor-widget{ width: auto }
.eg .eg-foot__copy{ font-size: 13px; font-weight: 300; letter-spacing: .04em; color: var(--eg-ink-3) }
.eg .eg-foot__legal .elementor-widget-container{ display: flex; flex-wrap: wrap; gap: 10px 24px }
.eg .eg-foot__legal a{ font-size: 13px; font-weight: 300; letter-spacing: .04em; color: var(--eg-ink-3) }
.eg .eg-foot__legal a:hover{ color: var(--eg-accent) }

/* ============================================================ 10b · escala
   irregular de imagen  (decisión de Inma, 1 ago: "como nowness, pequeñas, sin
   patrón fijo").  Cada sección recibe su propio tamaño, proporción, lado y
   desfase vertical: ninguna se repite. Se apunta a los elementos concretos de
   Elementor para no tener que tocar el contenido de la página.
     axioma     520 · 3/2  · a la derecha
     01 el ego  300 · 4/5  · a la izquierda, texto arriba
     21 ident.  420 · 1/1  · a la derecha
     02 método  560 · 16/9 · a la izquierda, descolgada
   ============================================================================ */
.eg .eg-axioma{ display: grid; grid-template-columns: minmax(0,1fr) 520px; gap: 56px; align-items: start }
.eg .eg-axioma .eg-axioma__img{ grid-column: 2 }
.eg .eg-axioma img{ aspect-ratio: 3 / 2 }
.eg .e-con.eg-axioma__say{
  grid-column: 1; grid-row: 1; margin-top: 0; padding-top: 26px;
  grid-template-columns: 1fr; gap: 14px; align-self: end;
}

.eg .e-con.elementor-element-c0034{ grid-template-columns: 300px minmax(0,1fr); gap: 60px }
.eg .e-con.elementor-element-c0034 img{ aspect-ratio: 4 / 5 }

.eg .e-con.elementor-element-c0060{ grid-template-columns: minmax(0,1fr) 420px; gap: 70px }
.eg .e-con.elementor-element-c0060 img{ aspect-ratio: 1 / 1 }

.eg .e-con.elementor-element-c0069{ grid-template-columns: 560px minmax(0,1fr); gap: 60px }
.eg .e-con.elementor-element-c0069 img{ aspect-ratio: 16 / 9 }
.eg .e-con.elementor-element-c0069 .eg-split__body{ padding-top: 120px }

@media (max-width: 1023px){
  .eg .eg-axioma{ grid-template-columns: 1fr; gap: 22px }
  .eg .eg-axioma .eg-axioma__img{ grid-column: 1 }
  .eg .e-con.eg-axioma__say{ grid-row: auto }
  .eg .elementor-element-c0034,
  .eg .elementor-element-c0060,
  .eg .e-con.elementor-element-c0069{ grid-template-columns: 1fr; gap: 26px }
  .eg .e-con.elementor-element-c0069 .eg-split__body{ padding-top: 0 }
  .eg .e-con.elementor-element-c0034 img,
  .eg .e-con.elementor-element-c0060 img,
  .eg .e-con.elementor-element-c0069 img{ aspect-ratio: 3 / 2 }
}

/* -------------------------------------------------------- 11 · responsive */
@media (max-width: 1023px){
  .eg{
    --eg-head-top: 44px; --eg-head-nav: 45px;
    --eg-hero-h: 355px;
    --eg-section: 64px; --eg-block: 34px;
  }
  .eg .e-con.eg-head__bar{ grid-template-columns: auto auto 1fr; column-gap: 12px; padding-inline: 20px }
  .eg .eg-head__logo{ justify-self: start; font-size: 17px; padding-left: 0 }
  .eg .eg-head__tools{ justify-self: end; font-size: 11px }
  .eg .e-con.eg-hero__content{ padding-inline: 60px }
  .eg .eg-hero__title{ font-size: 24px }
  .eg .eg-hero__meta{ font-size: 14px; line-height: 1.2 }
  .eg .e-con.eg-open{ grid-template-columns: 1fr; gap: 22px; align-items: start }
  .eg .e-con.eg-split--a, .eg .e-con.eg-split--b{ grid-template-columns: 1fr; gap: 26px }
  .eg .e-con.eg-split--b .eg-split__media{ order: 0 }
  .eg .e-con.eg-axioma__say{ grid-template-columns: 1fr; gap: 18px }
  .eg .e-con.eg-niveles, .eg .e-con.eg-casos, .eg .e-con.eg-grid-3{ grid-template-columns: 1fr; gap: 30px }
  .eg .e-con.eg-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px }
  .eg .e-con.eg-foot__grid{ grid-template-columns: 1fr 1fr; gap: 36px }
}

@media (max-width: 640px){
  .eg{ --eg-gutter: 20px; --eg-section: 52px; font-size: 16px }
  .eg .eg-head__logo{ font-size: 17px; letter-spacing: .24em }
  .eg .eg-head__tools{ display: none }
  .eg .eg-head__navlinks .elementor-widget-container{ justify-content: center; padding-inline: 4px }
  .eg .eg-head__navlinks a{ white-space: nowrap; padding: 15px 8px; font-size: 12px; letter-spacing: .04em }

  /* héroe en móvil: imagen arriba, texto debajo sobre blanco, alto por contenido */
  .eg .eg-hero{ height: auto; background: var(--eg-paper); border-bottom: 0 }
  .eg .eg-hero__media{ position: static }
  .eg .eg-hero__media img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 50% 34% }
  .eg .eg-hero__overlay{ display: none }
  .eg .e-con.eg-hero__content{
    position: static; padding: 22px var(--eg-gutter) 24px;
    text-align: left; color: var(--eg-ink);
    border-bottom: 1px solid var(--eg-accent);
  }
  /* en móvil el texto del héroe pasa a negro sobre blanco. El color de estos
     dos widgets viaja en el dato (blanco, para el héroe de escritorio) y
     Elementor lo escribe por elemento, así que aquí hace falta !important:
     es el único sitio donde el sistema necesita invertir un color por viewport. */
  .eg .eg-hero__title{ font-size: 24px; line-height: 1.38; color: var(--eg-ink) !important }
  .eg .eg-hero__meta{ font-size: 14px; line-height: 1.2; color: var(--eg-ink-2) !important }

  .eg .eg-lead{ font-size: 20px; max-width: none }
  .eg .eg-axioma img{ max-width: 100%; aspect-ratio: 3 / 2 }
  .eg .e-con.eg-split img{ aspect-ratio: 3 / 2 }
  .eg .e-con.eg-grid-4{ grid-template-columns: 1fr }
  .eg .e-con.eg-foot__grid{ grid-template-columns: 1fr; gap: 34px; padding-block: 40px 32px }
  .eg .e-con.eg-foot__bottom{ flex-direction: column; gap: 14px }
}

@media (prefers-reduced-motion: reduce){
  .eg *{ transition: none !important }
}

/* --------------------------------------------- 9 · Egología Privada (/privada)
   La estructura del formulario y su JS no se tocan: sólo se re-viste .egp2
   con los tokens del sistema. */
.eg .egp2{ max-width: var(--eg-reading); margin: 0 auto }
.eg .egp2 p{ margin: 0 0 22px; font-size: 17px; font-weight: 500; line-height: 1.68; color: var(--eg-ink) }
.eg .egp2 .egp-entrada{ margin: 0 0 42px }
.eg .egp2 .egp-entrada-t{ font-size: clamp(24px, 2vw, 28px); font-weight: 500; line-height: 1.3; margin: 0 0 14px }
.eg .egp2 .egp-alcance{ font-weight: 700; font-size: 20px; line-height: 1.4; margin: 34px 0 8px }
.eg .egp2 form{ margin-top: 52px }
.eg .egp2 label.egp-q{ display: block; font-size: 16px; font-weight: 500; margin: 0 0 12px }
.eg .egp2 .egp-field{ margin-bottom: 28px }
.eg .egp2 .egp-help{ font-size: 14px; font-weight: 300; line-height: 1.45; color: var(--eg-ink-2); margin: 0 0 12px }
.eg .egp2 .egp-note{ font-size: 13px; font-weight: 300; line-height: 1.45; color: var(--eg-ink-3); margin-top: 10px }
.eg .egp2 input[type=text],
.eg .egp2 input[type=email],
.eg .egp2 textarea,
.eg .egp2 select{
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.5;
  color: var(--eg-ink); background: #fff;
  border: 0; border-bottom: 1px solid var(--eg-rule); border-radius: 0;
  padding: 12px 0; outline: none; appearance: none;
}
.eg .egp2 textarea{ resize: vertical; min-height: 88px }
.eg .egp2 input:focus, .eg .egp2 textarea:focus, .eg .egp2 select:focus{ border-bottom-color: var(--eg-accent) }
.eg .egp2 .egp-count{ font-size: 12px; color: var(--eg-ink-3); text-align: right; margin-top: 6px }
.eg .egp2 .egp-otro{ display: none; margin-top: 18px }
.eg .egp2 .egp-otro.on{ display: block }
.eg .egp2 .egp-error{ color: #9b2f2f; font-size: 14px; margin: -12px 0 20px; min-height: 1px }
.eg .egp2 .egp-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.eg .egp2 .egp-consent{
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--eg-ink-2);
  margin-bottom: 32px;
}
.eg .egp2 .egp-consent input{ margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--eg-ink) }
.eg .egp2 .egp-consent a{ text-decoration: underline; text-underline-offset: 2px }
.eg .egp2 button.egp-submit{
  display: inline-flex; align-items: baseline; gap: 12px;
  background: none; border: 0; border-bottom: 1px solid var(--eg-accent); border-radius: 0;
  padding: 0 0 6px;
  font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: .06em;
  text-transform: none; color: var(--eg-ink); cursor: pointer;
}
.eg .egp2 button.egp-submit:hover{ color: var(--eg-accent) }
.eg .egp2 button.egp-submit:disabled{ opacity: .5; cursor: default }

/* --- 9b · Privada · copy Fase 2 (statements, Carta 01, baja, éxito DOI) --- */
.eg .egp2 .egp-lead{ font-size: 21px; font-weight: 300; line-height: 1.5; margin: 0 0 26px }
.eg .egp2 .egp-stmt{ font-size: clamp(22px,2vw,28px); font-weight: 500; line-height: 1.3; margin: 34px 0; color: var(--eg-ink) }
.eg .egp2 .egp-stmt-sm{ font-size: 19px; font-weight: 500; margin: 26px 0 22px }
.eg .egp2 .egp-carta{ margin: 48px 0; padding-top: 40px; border-top: 1px solid var(--eg-accent) }
.eg .egp2 .egp-carta h2{ font-size: clamp(24px,2.4vw,30px); font-weight: 700; line-height: 1.24; letter-spacing: -.01em; margin: 0 0 20px; color: var(--eg-ink) }
.eg .egp2 .egp-fecha{ font-weight: 500; margin: 22px 0 0 }
.eg .egp2 .egp-nadie{ font-weight: 500; margin: 34px 0 0 }
.eg .egp2 .egp-baja{ font-size: 13px; font-weight: 300; color: var(--eg-ink-3); margin: 16px 0 0 }
.eg .egp2 .egp-h{ font-size: clamp(22px,2vw,26px); font-weight: 700; line-height: 1.24; letter-spacing: -.01em; margin: 44px 0 20px; color: var(--eg-ink) }
.eg .egp2 .egp-done{ font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--eg-ink); max-width: 52ch }
.eg .egp2 .egp-done-t{ display: block; font-size: clamp(22px,2vw,26px); font-weight: 700; margin: 0 0 12px }