/* ==========================================================================
   EGS — Componentes reutilizables
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.egs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(14px, 0.3vw + 13px, 17px);
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  /* overflow:hidden contiene el círculo de relleno (::before) dentro
     del propio border-radius del botón. isolation:isolate crea un
     contexto de stacking propio para que el círculo (z-index:0) y el
     contenido (z-index:1) no interfieran con el resto de la página. */
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* Efecto de relleno: un círculo nace en el punto exacto donde entra
   el cursor (--egs-btn-x/--egs-btn-y, escritos por JS en
   initButtonFillHover en main.js) y crece hasta cubrir el botón
   entero. Fondo y texto invierten sus colores según la variante (cada
   --egs-btn--* define su propio par de variables). scale(0)->scale(1)
   en vez de width/height: la transición de transform es la única que
   no fuerza reflow en cada frame, así el crecimiento se ve fluido
   incluso en botones grandes. */
.egs-btn::before {
  content: "";
  position: absolute;
  left: var(--egs-btn-x, 50%);
  top: var(--egs-btn-y, 50%);
  width: 300%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  /* Entrada lenta (1.4s) y salida rápida (.35s): al entrar el color se
     despliega con calma, pero al sacar el cursor el botón vuelve a su
     estado normal casi de inmediato, sin sensación de retraso. */
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  background: var(--egs-btn-fill, currentColor);
  /* z-index negativo (no positivo en los hijos): el texto de muchos
     botones del sitio es un nodo de texto suelto, sin <span> propio,
     así que no hay ningún hijo real al que subir por encima con
     z-index — se pinta al mismo nivel que .egs-btn. Bajar el círculo
     por debajo de ese nivel logra el mismo resultado sin depender del
     markup de cada botón. */
  z-index: -1;
  pointer-events: none;
}
.egs-btn:hover::before,
.egs-btn:focus-visible::before {
  transform: translate(-50%, -50%) scale(1);
  transition-duration: 1.4s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.egs-btn--solid {
  background: var(--color-primary);
  color: var(--color-white);
  --egs-btn-fill: var(--color-white);
}
.egs-btn--solid:hover,
.egs-btn--solid:focus-visible {
  color: var(--color-primary);
}

/* Variante oscura: segundo CTA junto a uno --solid, como en EMERFIT. */
.egs-btn--dark {
  background: var(--color-primary-dark);
  color: var(--color-white);
  --egs-btn-fill: var(--color-white);
}
.egs-btn--dark:hover,
.egs-btn--dark:focus-visible {
  color: var(--color-primary-dark);
}

/* Ghost: para usar sobre fondos ya coloreados (hero teal). */
.egs-btn--ghost {
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary);
  --egs-btn-fill: var(--color-primary);
}
.egs-btn--ghost:hover,
.egs-btn--ghost:focus-visible {
  color: var(--color-white);
}

/* Outline: sobre foto oscura, el segundo CTA del hero desktop. */
.egs-btn--outline {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  --egs-btn-fill: var(--color-white);
}
.egs-btn--outline:hover,
.egs-btn--outline:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-white);
}

.egs-btn--block { display: flex; width: 100%; }

/* En desktop, el botón "Ver todos los cursos" de la sección de cursos
   destacados deja de ser full-width y pasa a estar centrado con un
   ancho moderado, como en el Figma (~307px). */
@media (min-width: 992px) {
  .egs-courses__foot { display: flex; justify-content: center; }
  .egs-courses__foot .egs-btn--block { width: auto; min-width: 307px; }
}

/* El CTA "Conocer al equipo" de la sección "about" vive ahora bajo el
   texto de la columna izquierda, no a lo ancho de toda la sección:
   deja de ser full-width en desktop. */
@media (min-width: 992px) {
  .egs-about__cta.egs-btn--block { width: auto; min-width: 260px; margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   Doble CTA: icono + botón vinculados como un solo enlace
   -------------------------------------------------------------------------- */

.egs-double-cta {
  display: inline-flex;
  align-items: stretch;
  gap: 12px;
  text-decoration: none;
}

.egs-double-cta__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.egs-double-cta__icon svg {
  width: 22px;
  height: auto;
  transition: transform var(--dur) var(--ease);
}

.egs-double-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(14px, 0.3vw + 13px, 17px);
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* El hover en cualquier parte afecta a ambos hijos. */
.egs-double-cta:hover .egs-double-cta__icon,
.egs-double-cta:focus-visible .egs-double-cta__icon,
.egs-double-cta:hover .egs-double-cta__button,
.egs-double-cta:focus-visible .egs-double-cta__button {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* La flecha siempre viaja a la derecha, esté el icono a izquierda o derecha. */
.egs-double-cta:hover .egs-double-cta__icon svg,
.egs-double-cta:focus-visible .egs-double-cta__icon svg {
  transform: translateX(6px);
}

/* Variante sólida, para fondo claro */
.egs-double-cta--solid .egs-double-cta__icon,
.egs-double-cta--solid .egs-double-cta__button {
  background: var(--color-primary);
  color: var(--color-white);
}
.egs-double-cta--solid:hover .egs-double-cta__icon,
.egs-double-cta--solid:hover .egs-double-cta__button {
  background: var(--color-primary-dark);
}

/* Orden invertido: icono a la derecha */
.egs-double-cta--icon-right .egs-double-cta__icon { order: 2; }

/* --------------------------------------------------------------------------
   Carrusel horizontal (scroll libre, sin scroll-snap)
   Nota deliberada: NO usamos scroll-snap-type/align. Con snap activo varios
   navegadores reposicionan el scroll ignorando el padding del contenedor y se
   pierde el aire lateral. Scroll libre + drag-to-scroll.
   -------------------------------------------------------------------------- */

.egs-scroller {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  /* padding-top 10px (no 4px): dan hueco de sobra a translateY(-4px)
     del hover en .egs-course-card — con solo 4px, ese overflow-y:hidden
     recortaba justo la elevación y el efecto no se apreciaba. */
  padding: 10px var(--gutter) 24px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-accent) transparent;
  cursor: grab;
}

.egs-scroller.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.egs-scroller > * { flex: 0 0 auto; }

/* En móvil la barra nunca se ve. En desktop se deja la nativa, que aparece
   sola solo si el contenido desborda. */
@media (max-width: 767px) {
  .egs-scroller {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .egs-scroller::-webkit-scrollbar { display: none; }
}

@media (min-width: 768px) {
  .egs-scroller::-webkit-scrollbar { height: 8px; }
  .egs-scroller::-webkit-scrollbar-track {
    background: var(--color-light-bg);
    border-radius: 99px;
  }
  .egs-scroller::-webkit-scrollbar-thumb {
    background: var(--color-border-accent);
    border-radius: 99px;
  }
}

/* Cuando pasa a rejilla en desktop (cursos destacados, pilares, testimonios) */
@media (min-width: 992px) {
  .egs-scroller--to-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    overflow: visible;
    padding-bottom: 0;
    cursor: default;
    /* Al dejar de ser carrusel se alinea con el resto del contenido. */
    max-width: var(--content-max);
    margin-inline: auto;
  }
  .egs-scroller--to-grid > * { width: auto; }
  /* "Por qué elegir EGS" tiene 4 tarjetas (no 3 como el resto de
     secciones que comparten .egs-scroller--to-grid). */
  .egs-scroller--reasons { grid-template-columns: repeat(4, 1fr); }
}

/* Aunque siga siendo carrusel en pantallas anchas (testimonios, galerías), el
   primer elemento debe arrancar alineado con el contenido, no pegado al borde. */
@media (min-width: 1320px) {
  .egs-scroller:not(.egs-scroller--to-grid) {
    padding-inline: calc((100vw - var(--content-max)) / 2 + var(--gutter));
  }
}

/* --------------------------------------------------------------------------
   Controles del carrusel: flechas + barra de progreso (JS los inyecta,
   envolviendo el .egs-scroller/.egs-stats original en este wrapper).
   -------------------------------------------------------------------------- */

.egs-scroller-controls { display: flex; flex-direction: column; }

.egs-scroller-controls__arrows {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-inline: var(--gutter);
  margin-bottom: 10px;
}

.egs-scroller-controls__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.egs-scroller-controls__arrow:hover:not(:disabled) { transform: translateY(-1px); }
.egs-scroller-controls__arrow:disabled { opacity: .35; cursor: default; }

/* Sobre fondos oscuros (hero, stats--ink) el par de flechas pasa a vidrio. */
.egs-hero .egs-scroller-controls__arrow {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--color-white);
  backdrop-filter: blur(6px);
}

.egs-scroller-controls__track {
  height: 4px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .1);
  margin-inline: var(--gutter);
  overflow: hidden;
}
.egs-hero .egs-scroller-controls__track { background: rgba(255, 255, 255, .25); }

.egs-scroller-controls__bar {
  height: 100%;
  width: 30%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: transform var(--dur) var(--ease);
}
.egs-hero .egs-scroller-controls__bar { background: var(--color-white); }

@media (min-width: 992px) {
  /* Cuando el scroller pasa a rejilla ya no hay overflow: JS no crea el
     wrapper (comprueba scrollWidth), así que no hace falta ocultar nada aquí. */
}

/* --------------------------------------------------------------------------
   Stats horizontales con contador animado
   -------------------------------------------------------------------------- */

/* En móvil es un slider: se ve la stat central completa y las de los lados
   asomando cortadas por el borde de pantalla, deslizable con el dedo y con
   scroll-snap para que siempre quede una centrada. En desktop las tres
   caben de sobra en una fila fija, sin scroll. */
.egs-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px var(--gutter);
  cursor: grab;
}
.egs-stats.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }

@media (max-width: 767px) {
  .egs-stats { scrollbar-width: none; -ms-overflow-style: none; }
  .egs-stats::-webkit-scrollbar { display: none; }
}

.egs-stat {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  scroll-snap-align: center;
}

.egs-stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  /* Dato exacto del panel de Figma (frame mobile 402px): 47.02px,
     47px desde tablet. Fusionado en un clamp fluido. */
  font-size: clamp(38px, 1.2vw + 35px, 47px);
  line-height: 0.85;
  color: var(--color-white);
  white-space: nowrap;
  /* Ancho de dígito fijo: sin esto las cifras "bailan" mientras el contador
     anima y descolocan la etiqueta de al lado. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.egs-stat__label {
  font-family: var(--font-ui);
  font-weight: 500;
  /* Dato exacto del panel de Figma: 15.66px, 16px desde tablet. */
  font-size: clamp(13px, 0.3vw + 12px, 16px);
  line-height: 1.15;
  color: var(--color-white);
  /* Suficiente para que "formación presencial y online" quepa en 2
     líneas, no 3. */
  max-width: 16ch;
  padding-top: 4px;
}

@media (min-width: 768px) {
  .egs-stats {
    justify-content: center;
    gap: 28px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 8px var(--gutter);
    cursor: default;
  }
}

.egs-stats--ink .egs-stat__num,
.egs-stats--ink .egs-stat__label { color: var(--color-ink); }

/* --------------------------------------------------------------------------
   Tarjeta de curso
   -------------------------------------------------------------------------- */

.egs-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* En móvil, casi todo el ancho de la pantalla (no 100vw exacto): deja
     asomar un poco de la tarjeta siguiente para que se intuya que el
     carrusel se puede deslizar. Sin max-width aquí — entra a partir de
     tablet (min-width:768px, ver abajo), donde deja de ser carrusel a
     pantalla completa; con un max-width fijo desde el principio, un
     móvil pequeño (ej. 375px) ya lo recortaba antes de dejar ver la
     tarjeta siguiente. */
  width: calc(100vw - 56px);
  padding: 24px 20px;
  background: var(--color-light-bg);
  border: 1px solid var(--color-white);
  /* Dato exacto del Figma: 6.37px, distinto del --radius-card-lg (16px)
     usado por otras tarjetas del sitio — valor propio de esta card. */
  border-radius: 6.37px;
  box-shadow: 0 4px 18px rgba(11, 31, 30, .08);
  transition: transform var(--dur) var(--ease);
}
/* Enlace "estirado": el <a> del título se agranda con ::after hasta
   cubrir el área entera de la tarjeta (position:relative del article
   de arriba es el ancestro de referencia), así que toda la card es
   clicable, no solo el texto del título. El botón "Ver más" sigue
   siendo su propio <a> por encima (position:relative + z-index) para
   que conserve su estilo de botón y siga siendo clicable de forma
   independiente, sin que el ::after estirado se lo robe. */
.egs-course-card__title a { position: static; }
.egs-course-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Ligero efecto de elevación al pasar el cursor: solo sube unos px,
   sin tocar la sombra (ya está presente siempre en la regla base, no
   solo en hover). */
.egs-course-card:hover {
  transform: translateY(-4px);
}

@media (min-width: 768px) { .egs-course-card { width: 280px; max-width: 280px; } }
@media (min-width: 992px) {
  .egs-scroller--to-grid .egs-course-card { width: auto; max-width: none; }
}

.egs-course-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.egs-course-card__logo {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-white);
}

.egs-course-card__title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(19px, 0.6vw + 17px, 24px);
  line-height: 26px;
  color: var(--color-card-title);
  text-transform: none;
  max-width: 15ch;
}

.egs-course-card__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(12px, 0.2vw + 11px, 14.66px);
  line-height: 24.3px;
  /* Fiel al Figma: texto en tinta al 30%, no en el color de marca. */
  color: rgba(3, 3, 4, .3);
  /* El separador (línea blanca del Figma) vive aquí, no en el footer:
     así queda fijo justo debajo del badge en su posición natural de
     flujo, sin moverse aunque el footer de abajo se ancle al fondo de
     la card con margin-top:auto — si el borde viviera en el footer, se
     desplazaría junto con él y dejaría un hueco vacío encima en vez de
     quedarse pegado al badge. Un solo espacio de 18px antes de la
     línea (no también un margin-bottom aparte, que sumaría dos
     huecos). */
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-white);
}
.egs-course-card__badge svg { color: var(--color-primary); }
.egs-course-card__badge svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* Precio y botón como un único bloque (igual que un contenedor flex de
   Elementor): cada uno a un lado, y el bloque entero anclado al pie de
   la card con margin-top:auto — no el precio por separado. Con esto,
   si la card crece (título de dos líneas, badge más largo…) el bloque
   sigue pegado al fondo; si la card es corta, el margin-top:auto no
   tiene mucho que empujar y el bloque queda más arriba, pero de forma
   consistente para toda la fila (todas las cards del carrusel/grid
   comparten la misma altura por .egs-scroller { align-items:stretch }). */
.egs-course-card__footer {
  margin-top: auto;
  display: flex;
  /* center (Elementor: "Alinear elementos" → Centro): el precio y el
     botón se centran mutuamente por el medio, en vez de por su borde
     inferior (flex-end dejaba el texto del precio un poco por encima
     del centro real del botón). */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Sin flex-wrap: al envolverse, una tarjeta con precio tachado desplazaba
     su precio a una línea propia y dejaba de alinear con las demás. */
  flex-wrap: nowrap;
}

/* min-width:0 para que se adapte en vez de forzar su ancho natural;
   transform:translateY(2px) es un ajuste fino a ojo: aun con
   align-items:center tanto en el footer como en el propio .egs-price,
   el centro óptico de un número a 28.4px no coincide exactamente con
   el centro de línea real (el cap-height/baseline de una fuente a ese
   tamaño se percibe más alto que su centro matemático) frente al
   texto del botón a 17px, y quedaba un resto de desajuste de un par
   de px sin él. */
.egs-course-card__footer .egs-price {
  min-width: 0;
  transform: translateY(2px);
}
.egs-course-card__footer .egs-btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding-block: 0;
  /* Por encima del enlace estirado del título (::after, z-index:1) para
     que el botón siga siendo clicable como su propio destino. */
  position: relative;
  z-index: 2;
}

.egs-price {
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(22px, 0.9vw + 19px, 28.4px);
  line-height: 33.4px;
  color: var(--color-primary);
  white-space: nowrap;
}
/* WooCommerce envuelve el número en su propio
   <span class="woocommerce-Price-amount"><bdi>…</bdi></span> inline:
   ese span hereda el font-size pero no el centrado flex del .egs-price
   que lo contiene, así que aun con .egs-price centrado el número podía
   quedar desplazado por su propia caja de línea. display:flex también
   aquí para que herede el mismo centrado vertical. */
.egs-price .woocommerce-Price-amount {
  display: flex;
  align-items: center;
}

.egs-price del {
  font-size: clamp(14px, 0.4vw + 12px, 18px);
  color: var(--color-text);
  opacity: .7;
  margin-left: 8px;
  white-space: nowrap;
}
.egs-price ins { text-decoration: none; }

/* --------------------------------------------------------------------------
   Tarjeta de blog
   -------------------------------------------------------------------------- */

.egs-post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
}

.egs-post-card__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 14px;
  background: var(--color-light-bg);
}
.egs-post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.egs-post-card:hover .egs-post-card__media img { transform: scale(1.04); }

.egs-post-card__badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  /* Dato exacto del panel de Figma: negro (#2D2D2D) al 50%, no sólido. */
  background: rgba(45, 45, 45, .5);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(9px, 0.08vw + 8.7px, 10px);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.egs-post-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.egs-post-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 0.5vw + 16px, 22px);
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--color-primary);
}

.egs-post-card__date {
  font-family: var(--font-ui);
  font-size: clamp(11px, 0.1vw + 10.5px, 12px);
  color: var(--color-text);
  white-space: nowrap;
}

.egs-post-card__excerpt {
  font-size: clamp(13px, 0.3vw + 12px, 15px);
  line-height: 1.4;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Chips de filtro
   -------------------------------------------------------------------------- */

.egs-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 4px var(--gutter) 12px;
  scrollbar-width: none;
}
.egs-chips::-webkit-scrollbar { display: none; }

/* Filtro del catálogo de cursos: centrado en vez de pegado a la
   izquierda, como el resto de usos de .egs-chips (p.ej. scrollers de
   marcas) que sí necesitan arrancar desde el borde. */
.egs-chips--centered {
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Motivo de consulta en Contacto: vive dentro de .egs-container (ya
   tiene su propio padding lateral), no a sangre de pantalla como el
   resto de usos de .egs-chips — sin esto quedaba desalineado a la
   derecha del formulario de más abajo. */
.egs-chips--flush {
  padding: 4px 0 12px;
  flex-wrap: wrap;
  overflow-x: visible;
}

.egs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border-accent);
  background: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(12px, 0.2vw + 11px, 14px);
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.egs-chip svg { flex: 0 0 auto; width: 16px; height: 16px; }

.egs-chip:hover { background: var(--color-off-white); }

.egs-chip.is-active,
.egs-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.egs-chips__label {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--font-ui);
  font-size: clamp(11px, 0.2vw + 10px, 13px);
  color: var(--color-text);
  margin-right: 4px;
}

/* Chips con icono (perfiles: TES / enfermería / médicos) */
.egs-chip--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 8px;
  background: var(--color-white);
  border-color: transparent;
  color: var(--color-ink);
  /* Dato del panel de Figma (chips "Técnicos TES" etc.): 15.74px, no
     los 14px heredados de .egs-chip. */
  font-size: clamp(13px, 0.3vw + 12px, 15.74px);
  box-shadow: 0 2px 10px rgba(11, 31, 30, .1);
}
.egs-chip--icon img,
.egs-chip--icon svg { width: 35px; height: 35px; }

/* --------------------------------------------------------------------------
   Marquesina infinita
   -------------------------------------------------------------------------- */

.egs-marquee {
  overflow: hidden;
  width: 100%;
  /* max-width explícito por si un reset global aplica * { max-width: 100% } */
  max-width: none;
}

.egs-marquee__track {
  display: flex;
  width: max-content;
  max-width: none;
  animation: egs-marquee-scroll 35s linear infinite;
}

/* En mobile la marquesina se percibe más lenta que en desktop (mismo
   duration pero menos texto recorriendo un ancho de pantalla mucho
   menor, así que cada palabra tarda más en pasar) — pedido explícito
   de que vaya un poco más rápida ahí. !important necesario: JS
   escribe animation-duration como style inline (initMarquees en
   main.js, a partir de data-speed) con mayor especificidad que esta
   regla sin él. */
@media (max-width: 767px) {
  .egs-marquee__track {
    animation-duration: 22s !important;
  }
}

.egs-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: none;
}

.egs-marquee__item {
  flex-shrink: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 3vw + 20px, 55px);
  /* line-height unitless a propósito: un valor px menor que el font-size
     recorta ascendentes y descendentes contra el overflow:hidden. */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
  padding-right: 4px;
  white-space: nowrap;
}

/* Dato exacto del panel de Figma para "Empieza hoy tu formación": 60.3px,
   notablemente más grande que el resto de marquesinas del sitio. */
.egs-marquee--closing .egs-marquee__item { font-size: clamp(48px, 3vw + 34px, 60px); }

/* Marquesina de "Los tres pilares" en mobile: dato confirmado por
   captura de Figma — el texto ocupa casi todo el ancho de la
   pantalla, notablemente más grande que el tamaño base (34px) del
   resto de marquesinas del sitio. */
.egs-sticky-gallery__marquee .egs-marquee__item { font-size: clamp(42px, 4vw + 20px, 56px); }
/* Menos padding arriba/abajo (antes solo el padding general de la
   sección): dato confirmado por captura, esta marquesina debe quedar
   más compacta verticalmente en mobile. */
.egs-sticky-gallery__marquee { padding-block: 8px; }

/* Sin pausa en hover: se mueve siempre. */
@keyframes egs-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.egs-marquee--ink .egs-marquee__item { color: var(--color-ink); }
.egs-marquee--primary .egs-marquee__item { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Tarjetas con degradado + glass
   -------------------------------------------------------------------------- */

.egs-glass-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* contenido anclado arriba */
  min-height: 207px;
  /* Más estrecho que el viewport a propósito: la siguiente tarjeta debe
     asomar cortada por el borde, como pista de que se puede deslizar. */
  width: 72vw;
  max-width: 320px;
  padding: 32px 28px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border-accent);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

@media (min-width: 992px) {
  .egs-scroller--to-grid .egs-glass-card { width: auto; max-width: none; }
}

.egs-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at top left,
              rgba(255, 255, 255, 0.25) 0%,
              rgba(255, 255, 255, 0) 60%);
}

.egs-glass-card--no-glass::before { display: none; }

.egs-glass-card > * { position: relative; }

.egs-glass-card__title {
  font-family: var(--font-display);
  /* Figma: SansPlomb "95" (peso 400 en el mapeo de base.css), no el "98"
     (600) que usan los h1-h3 genéricos. */
  font-weight: 400;
  /* Dato exacto del panel de Figma: 36.43px (no el techo de 44px que
     había antes). */
  font-size: clamp(28px, 1vw + 22px, 36.43px);
  line-height: 0.9;
  /* text-transform:none explícito (no solo "sin uppercase"): el
     elemento real es un <h3> nativo, y la regla global h3 { … }
     de base.css ya pone text-transform:uppercase — quitar la
     declaración de aquí no la "cancelaba", ese ausente hereda/gana la
     regla global igualmente. El panel de Figma muestra el texto en
     minúsculas normales ("Evidencia científica"), no todo en
     mayúsculas. */
  text-transform: none;
  color: var(--color-white);
  margin-bottom: 40px;
}

.egs-glass-card__text {
  font-family: var(--font-body);
  font-weight: 500;
  /* Dato exacto del panel de Figma: Bastardo Groteskish Medium
     19.63px (no 16px). */
  font-size: clamp(15px, 0.5vw + 13px, 19.63px);
  line-height: 1.4;
  color: var(--color-off-white);
}

/* --------------------------------------------------------------------------
   Galería sticky con stack de imágenes (efecto abanico)
   -------------------------------------------------------------------------- */

.egs-sticky-gallery { position: relative; color: var(--color-white); }
/* padding-top:0 (anula el padding-block de .egs-section--tight, que
   suma ~38px extra AL padding-top ya reducido del propio
   .egs-sticky-gallery__sticky, dato confirmado por medición precisa:
   114px de hueco total entre el final de la curva SVG y la
   marquesina, de los cuales solo 76px venían del sticky): la curva ya
   marca visualmente el inicio de la sección, no necesita este
   padding extra antes del contenido en mobile. Solo el top, no el
   bottom (ese sigue haciendo falta al final de la sección). */
.egs-sticky-gallery.egs-section--tight { padding-top: 0; }

/* Divisores curvos entre secciones, ahora como SVG real (ver
   template-parts/home/pillars.php) en vez de un círculo CSS enorme +
   filter:blur simulando la forma: ese método era muy frágil —
   dependía de acertar a ojo la proporción exacta de la elipse para
   que hubiera curvatura visible, de que el color no coincidiera por
   casualidad con el fondo real de detrás, y el blur sobre formas muy
   achatadas dejaba bandas rectas en vez de un difuminado uniforme.
   Un <path> con curva Bézier es exacto y no depende de nada de eso. */
.egs-curve {
  position: absolute;
  left: 0;
  width: 100%;
  /* Menos alta en mobile (antes 80px fijos, igual que en desktop):
     con preserveAspectRatio="none" estirando el mismo viewBox
     1440×80 a un ancho de pantalla mucho más estrecho, la curva se
     veía proporcionalmente más pronunciada que en desktop — dato
     pedido expresamente, menos curvatura en mobile arriba y abajo
     de esta sección. */
  height: 48px;
  z-index: 10;
  pointer-events: none;
  display: block;
}
@media (min-width: 768px) {
  .egs-curve { height: 80px; }
}
/* El <path> de cada curva ya incluye tanto la zona curva como su
   relleno recto hasta el borde de referencia (ver los puntos "L…Z" en
   el path, en pillars.php) — el propio SVG no necesita más que
   apoyarse justo en el borde real de la sección. */
/* -99%/99% (no -100%/100%): pegado exacto al borde, el redondeo de
   subpíxel de la transformación podía dejar una línea de 1px sin
   pintar entre el final del SVG y el borde real de la sección — un
   ligero solape (1% de su propio alto) lo cubre sin que se note en la
   forma de la curva. */
.egs-curve--top { top: 0; transform: translateY(-99%); }
.egs-curve--bottom { bottom: 0; transform: translateY(99%); }

.egs-sticky-gallery__sticky {
  position: sticky;
  top: 0;
  /* min-height, no height fijo: con height fija + overflow:hidden, el
     contenido real (título + párrafo + chips) no siempre cabía y el
     overflow:hidden recortaba los chips en vez de solo desplazarlos.
     Con min-height la sección crece lo que su contenido necesite,
     sin recortar nada. El JS (initStickyGalleries en main.js) ya no
     depende de este valor exacto para calcular el tramo de scroll —
     usa window.innerHeight con un tope bajo, así que este min-height
     puede ajustarse libremente sin desincronizar esa cuenta. */
  /* min-height reducido en mobile (antes 60vh): con justify-content:
     center en un contenedor tan alto, el contenido (más corto que
     esa altura) dejaba un hueco vacío considerable arriba y abajo —
     dato confirmado por captura, un tramo de fondo teal vacío antes
     de la marquesina y otro después del último chip. En desktop
     (min-width:768px, ver la regla que sigue) sí necesita ser más
     alto porque ahí el stack de fotos ocupa más espacio vertical. */
  min-height: auto;
  /* Sin overflow:hidden aquí: recortaba también la box-shadow de las
     fotos del stack (.egs-sticky-gallery__item) contra el límite de
     ESTE contenedor, en vez de dejarla desvanecerse con naturalidad —
     se veía como un corte recto nítido justo debajo de la primera
     foto, visible sobre todo al entrar su animación. El recorte que
     de verdad se necesita (contener el resplandor con blur de
     .egs-sticky-gallery__gradient dentro de los límites visibles) lo
     hace ahora ese propio elemento, que se recorta a sí mismo — ver
     overflow:hidden ahí. */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* center, pero con padding-top fijo que actúa como separación
     mínima garantizada respecto al header (fixed, --header-h) que se
     solapa por encima del sticky: con justify-content:center a secas,
     si el contenido es más corto que la caja, el bloque de texto
     podía acercarse demasiado al top y quedar tapado por el header —
     el padding-top no "empuja" nada en un contenedor centrado salvo
     que sea mayor que el hueco que el centrado dejaría libre arriba,
     así que se sube considerablemente (header-h + margen de sobra). */
  justify-content: center;
  /* padding-top reducido más (antes header-h a secas, 76px): dato
     confirmado por captura — sigue viéndose como un hueco considerable
     entre la curva y la marquesina en mobile. En desktop (min-width:
     768px, regla más abajo) header-h completo sí hace falta porque el
     stack de fotos ocupa mucho más alto y el sticky pasa más tiempo
     pegado al top real del viewport. */
  padding-top: 24px;
  padding-bottom: 24px;
  gap: 36px;
}

@media (min-width: 768px) {
  /* min-height:60vh restaurado aquí (desktop): en mobile se redujo a
     auto para no dejar hueco vacío arriba/abajo de un contenido corto
     centrado en una caja alta (ver la regla base más arriba), pero en
     desktop el stack de fotos sí necesita ese alto mínimo. */
  .egs-sticky-gallery__sticky { gap: 0; min-height: 60vh; padding-top: var(--header-h); }
}

/* Envuelve texto + stack de fotos: apilado en mobile (mismo comportamiento
   de siempre), en 2 columnas lado a lado en desktop (texto izq., fotos
   der.), como en el Figma. */
.egs-sticky-gallery__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
}

/* El layout de 2 columnas empieza en tablet (768px), no solo en
   desktop (992px): antes ese hueco intermedio se quedaba en el modo
   mobile completo (marquesina animada + stack pequeño centrado),
   desaprovechando el --gutter:40px ya activo desde 768px. */
@media (min-width: 768px) {
  .egs-sticky-gallery__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    gap: 48px;
  }
}

.egs-sticky-gallery__text { display: contents; }

@media (min-width: 768px) {
  .egs-sticky-gallery__text {
    display: block;
    /* Base y tope subidos (antes 480px/560px): a petición expresa,
       la sección debe sentirse más ancha/llena — con esos valores
       quedaba mucho hueco vacío en el centro antes del stack de
       fotos, aun con --content-max:1700px en .egs-sticky-gallery__row. */
    flex: 1 1 560px;
    max-width: 680px;
    text-align: left;
  }
}

/* La marquesina con scroll infinito es solo el tratamiento de mobile
   (ver comentario en pillars.php); desde tablet el Figma dibuja el
   titular como un H2 normal, sin animación. */
@media (min-width: 768px) {
  .egs-sticky-gallery__marquee { display: none; }
}

.egs-sticky-gallery__title {
  color: var(--color-white);
  display: none;
}

@media (min-width: 768px) {
  .egs-sticky-gallery__title {
    display: block;
    margin-bottom: 16px;
    /* Dato exacto del panel de Figma: SansPlomb 98px — mucho más
       grande que el .egs-h2 estándar (techo 60px), que en esta
       sección se veía pequeño frente al stack de fotos. clamp() para
       no quedarse fijo a 98px en pantallas más estrechas que el
       frame del Figma. line-height:0.9 (no el 0.77 exacto del panel,
       ~75.4/98): ese ratio tan ajustado solo funciona en el frame del
       Figma porque es muy ancho y el texto cabe en 3 líneas cortas —
       en el contenedor real de la web, más estrecho, el título se
       parte en 4 líneas y con 0.77 las tildes y ascendentes/
       descendentes de una línea se solapaban visualmente con la
       siguiente. */
    /* Techo reducido de 98px a 76px (a petición expresa, para que
       entre en menos líneas) y line-height subido a 1.05 (había un
       0.77 duplicado después del 0.9 que anulaba ese ajuste por
       orden de cascada — ese era el motivo real de que las líneas
       siguieran viéndose demasiado juntas). */
    font-size: clamp(40px, 4.5vw + 20px, 86px);
    line-height: 0.85;
  }
}

/* Segunda línea del titular, en blanco atenuado (dato exacto del panel
   de Figma: mismo blanco al 50% de opacidad, no un color distinto).
   display:block para que arranque en su propia línea siempre, en vez de
   depender de que el texto no quepa en la misma línea que la primera
   parte. */
.egs-sticky-gallery__title-dim { display: block; color: rgba(255, 255, 255, .5); }

.egs-sticky-gallery__lead {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Ver comentario de order en .egs-sticky-gallery__foot: en mobile el
     orden visual final es lead -> stack de fotos -> chips. */
  order: 1;
}

@media (min-width: 768px) {
  .egs-sticky-gallery__lead { text-align: left; margin-inline: 0; padding-inline: 0; }
}

/* Envoltorio dedicado solo para recortar el resplandor con blur: antes
   ese recorte lo hacía el overflow:hidden de .egs-sticky-gallery__sticky
   (el contenedor sticky entero), pero eso cortaba en seco cualquier otra
   cosa que se saliera de esa misma caja — en concreto, la box-shadow de
   las fotos del stack (.egs-sticky-gallery__item), que se veía como un
   corte recto nítido debajo de la primera foto al entrar su animación.
   Con el recorte movido a esta capa propia (misma posición/tamaño que
   .egs-sticky-gallery__sticky, pero sin afectar a sus otros hijos), el
   resplandor sigue conteniéndose igual y la sombra de las fotos ya
   puede desbordarse con naturalidad. */
.egs-sticky-gallery__gradient-clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.egs-sticky-gallery__gradient {
  position: absolute;
  /* inset:0 (no negativo): este envoltorio (.egs-sticky-gallery__gradient-clip)
     tiene overflow:hidden — cualquier desbordamiento causado por un
     inset negativo se recorta en seco justo en ese borde, y como el
     filter:blur de abajo difumina hacia los lados del propio elemento,
     ese recorte se veía como una línea recta nítida exactamente donde
     el navegador cortaba el desbordamiento. Con inset:0, todo el
     gradient (radial incluido) vive dentro de los límites visibles del
     envoltorio, así que el blur puede desvanecerse limpiamente sin
     toparse con ningún límite duro. */
  inset: 0;
  background:
    /* Funde el borde superior con el teal sólido de la sección anterior. */
    linear-gradient(180deg, var(--color-primary) 0%, rgba(87, 160, 154, 0) 12%),
    /* El resplandor claro debe quedar detrás del stack de fotos
       (.egs-sticky-gallery__stack), no del centro de la sección: en
       desktop ese stack vive a la derecha (.egs-sticky-gallery__row
       en fila, texto a la izquierda), así que "at 50% ..." centrado
       en la sección entera lo dejaba fuera de esa zona. 74% en vez de
       50% horizontal para acercarlo a donde caen las fotos. */
    /* Radio reducido más (280px, antes 480px→380px) y centro bajado
       (78%, antes 62%→72%): con radios/posiciones mayores, el
       resplandor llegaba a solaparse con la franja donde vive la
       curva SVG superior — un elemento opaco (sin blur real, ver
       .egs-curve) que corta en seco el difuminado justo donde ambos
       se solapan. Con margen de sobra entre el punto más alto del
       resplandor (78% - 280px de radio) y esa franja, el difuminado
       se desvanece del todo antes de acercarse a la curva. */
    radial-gradient(circle 280px at 74% 78%,
              var(--color-white) 0%,
              var(--color-primary-light) 30%,
              var(--color-primary) 55%);
  /* Dato del Figma: el resplandor blanco no tiene un borde nítido, se
     difumina (blur) en vez de cortar en bandas visibles entre sus
     color-stops. */
  filter: blur(40px);
}
@media (max-width: 767px) {
  /* En móvil el stack ya no está a la derecha (.egs-sticky-gallery__row
     apila en columna, ver esa regla): el resplandor vuelve a
     centrarse horizontalmente. */
  .egs-sticky-gallery__gradient {
    background:
      linear-gradient(180deg, var(--color-primary) 0%, rgba(87, 160, 154, 0) 12%),
      radial-gradient(circle 280px at 50% 78%,
                var(--color-white) 0%,
                var(--color-primary-light) 30%,
                var(--color-primary) 55%);
  }
}

.egs-sticky-gallery__stack {
  position: relative;
  z-index: 1;
  width: min(64vw, 360px);
  height: min(50vh, 460px);
  /* Ver comentario de order en .egs-sticky-gallery__foot: en mobile las
     fotos van entre el lead y las chips, no después de todo el texto. */
  order: 2;
}

@media (min-width: 768px) {
  .egs-sticky-gallery__stack {
    order: initial;
    /* Tope ampliado (antes 340px): coherente con el nuevo ancho de
       .egs-sticky-gallery__text (hasta 680px) para que la sección
       completa se sienta más ancha/llena, sin dejar un hueco central
       grande entre ambas columnas. Altura subida (antes 56vh/560px) a
       petición expresa: fotos más altas. */
    width: min(28vw, 420px);
    height: min(64vh, 680px);
  }
}

.egs-sticky-gallery__item {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  /* Sin overflow:hidden aquí (antes lo tenía, para recortar la imagen
     a las esquinas redondeadas): un elemento con overflow:hidden
     recorta también su PROPIA box-shadow en el mismo límite, en vez
     de dejarla desbordarse hacia abajo — eso se veía como un corte
     recto nítido justo debajo de la foto, en vez de una sombra que
     se difumina con naturalidad. El recorte de esquinas lo hace ahora
     directamente la propia <img> (border-radius + object-fit:cover),
     sin necesidad de que el contenedor con la sombra también recorte.
     El overflow:hidden que antes tenía el ancestro
     .egs-sticky-gallery__sticky (y que cortaba esta sombra en seco en
     su límite) se ha movido a un envoltorio propio y más pequeño solo
     para el resplandor decorativo (.egs-sticky-gallery__gradient-clip),
     así que esta sombra ya puede desbordarse con naturalidad sin
     necesidad de reducir su alcance. */
  box-shadow: 0 18px 44px rgba(11, 31, 30, .22);
  will-change: transform, opacity;
  opacity: 0;
}

.egs-sticky-gallery__item img,
.egs-sticky-gallery__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.egs-sticky-gallery__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-inline: var(--gutter);
  margin-top: 40px;
  /* En mobile, .egs-sticky-gallery__text es display:contents, así que
     sus hijos (h2, p, ul) se ordenan como hermanos directos dentro del
     flex column de .egs-sticky-gallery__row junto al stack de fotos.
     Sin esto estas chips quedarían antes de las fotos (orden natural
     del DOM); el diseño pide que vayan debajo. */
  order: 3;
}

@media (min-width: 768px) {
  .egs-sticky-gallery__foot {
    justify-content: flex-start;
    padding-inline: 0;
    margin-top: 24px;
    order: initial;
    /* Sin salto de línea a petición expresa: los 3 chips van seguidos
       en una sola fila. Los tres juntos (con sus gaps) pueden ser más
       anchos que la columna de texto (max-width:560px en
       .egs-sticky-gallery__text) en pantallas intermedias — en vez de
       desbordar visualmente fuera de esa columna o achicar los chips
       hasta que no quepa el texto, se permite que este contenedor en
       concreto se estire más ancho que su padre (width:max-content),
       con scroll horizontal como salvaguarda si aun así no cupiera en
       el viewport. Barra de scroll nativa oculta (scrollbar-width,
       -ms-overflow-style, ::-webkit-scrollbar): visible se veía como
       una franja gris fea bajo los chips; el propio contenido ya dejó
       de caber visiblemente si hace falta deslizar, no hace falta el
       indicador nativo del navegador. */
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* padding-block + margin-block negativo equivalente: overflow-x:auto
       también recorta el eje Y en el mismo borde de la caja (no solo el
       X), así que la box-shadow de cada chip (0 2px 10px) se veía
       cortada en línea recta justo en el borde superior/inferior de
       este contenedor, en vez de desvanecerse con naturalidad — dato
       confirmado por captura. El padding da margen de sobra a la
       sombra antes de llegar a ese borde; el margin negativo
       compensa el espacio extra para no desplazar el resto del
       layout. */
    padding-block: 12px;
    margin-block: -12px;
  }
  .egs-sticky-gallery__foot::-webkit-scrollbar { display: none; }
}

/* Sin JS o con motion reducido, las imágenes se muestran apiladas visibles. */
.no-js .egs-sticky-gallery__item,
.egs-sticky-gallery.is-static .egs-sticky-gallery__item { opacity: 1; }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.egs-form { display: grid; gap: 18px; }

.egs-field { display: grid; gap: 6px; }

.egs-field label,
.egs-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 0.1vw + 10.5px, 12px);
  color: var(--color-form-label);
}

.egs-field input,
.egs-field textarea,
.egs-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #E2E2E2;
  border-radius: var(--radius-input);
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  /* Mínimo 16px (no 15px): por debajo de ese umbral, iOS Safari hace
     zoom automático al enfocar el campo, molesto en móvil. */
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  color: var(--color-ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.egs-field input::placeholder,
.egs-field textarea::placeholder {
  color: var(--color-form-label);
}

.egs-field input:focus,
.egs-field textarea:focus,
.egs-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(87, 160, 154, .18);
}

.egs-field textarea { min-height: 140px; resize: vertical; }

/* --------------------------------------------------------------------------
   Fundidos y decoración
   -------------------------------------------------------------------------- */

/* Fundido de foto a blanco, para disolver el hero en la sección siguiente. */
.egs-fade-to-white {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.egs-fade-to-white--tall { height: 45%; }

/* Mancha de luz radial decorativa sobre la foto del hero. */
.egs-glow {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(circle, var(--color-primary) 0%, rgba(91,193,184,0) 80%);
  filter: blur(40px);
  transform: rotate(3.65deg);
  opacity: .85;
}

/* --------------------------------------------------------------------------
   Acordeón (FAQ, pestañas de ficha de curso)
   -------------------------------------------------------------------------- */

.egs-accordion { display: grid; gap: 10px; }

@media (min-width: 768px) {
  /* Preguntas/respuestas cortas en un container ancho se leen mal
     (líneas kilométricas); se acota como el resto de bloques de texto
     largo del sitio. Antes solo desde 992px, dejando tablet sin acotar. */
  .egs-accordion { max-width: 860px; margin-inline: auto; }
}

/* Dato exacto del panel de Figma (Cardioprotección, único usuario de
   este componente): tarjeta con fondo #F5F5F5 y esquinas de 17px, no
   filas separadas por línea. */
.egs-accordion__item {
  background: #F5F5F5;
  border-radius: 17px;
  padding-inline: 24px;
}

.egs-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  text-align: left;
  /* Dato exacto del panel: Bastardo Groteskish (font-body, no
     font-ui), peso Medium, color primario sólido — no el color-ink
     genérico. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 0.4vw + 14px, 19.74px);
  color: var(--color-primary);
}

/* Icono real del cliente (desplegar-mas.svg): cruz con trazo, no el
   carácter "+" tipográfico. Gira 45° para convertirse en "–" al abrir
   en vez de intercambiar contenido de pseudo-elemento. */
.egs-accordion__trigger .egs-accordion__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  transition: transform var(--dur) var(--ease);
}
.egs-accordion__trigger[aria-expanded="true"] .egs-accordion__icon {
  transform: rotate(45deg);
}

.egs-accordion__panel {
  overflow: hidden;
  padding-bottom: 18px;
  font-family: var(--font-body);
  font-size: clamp(14px, 0.25vw + 13px, 16px);
  line-height: 1.5;
}
.egs-accordion__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Animaciones de entrada al hacer scroll (initReveal en main.js). Se
   repiten cada vez que la sección vuelve a estar en viewport: la clase
   is-visible se quita y se pone según el elemento entra/sale, no una
   sola vez.
   -------------------------------------------------------------------------- */

.egs-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.egs-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante para texto suelto (títulos, párrafos): recorrido más
   corto y algo más rápido que el de los bloques/tarjetas — un
   titular o un párrafo se sienten "pesados" con el mismo
   desplazamiento de 28px que una card entera. */
.egs-reveal--text {
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.egs-reveal--text.is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .egs-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Entrada del hero al cargar la página (initHeroReveal en main.js):
   NO usa IntersectionObserver como .egs-reveal — el hero es lo
   primero visible, así que arranca ya en su estado final "oculto" en
   el HTML (evita el salto que se vería si el JS tardara en aplicar
   la clase) y JS solo añade .is-in tras un frame, disparando la
   transición. El desplazamiento es más corto que .egs-reveal (12px)
   porque aquí es solo una entrada suave, no algo que "viaja" desde
   fuera del viewport como al hacer scroll. */
/* :not(.no-js) — si JS no llega a ejecutarse (deshabilitado, error),
   .no-js sigue en <html> (solo se quita en la primera línea de
   main.js) y el hero se queda visible de inmediato en vez de oculto
   para siempre esperando una clase .is-in que nunca llegará. */
html:not(.no-js) .egs-hero__eyebrow,
html:not(.no-js) .egs-hero__inner > .egs-h1,
html:not(.no-js) .egs-hero__title,
html:not(.no-js) .egs-hero__text,
html:not(.no-js) .egs-hero__actions,
html:not(.no-js) .egs-hero__stats {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* .egs-product-hero (ficha de curso) además de .egs-hero: reutiliza
   el mismo sistema de reveal aunque no comparta la clase base — ver
   initHeroReveal() en main.js, que selecciona ambas. */
.egs-hero.is-in .egs-hero__eyebrow { transition-delay: 0ms; }
.egs-hero.is-in .egs-hero__inner > .egs-h1,
.egs-product-hero.is-in .egs-hero__inner > .egs-h1,
.egs-hero.is-in .egs-hero__title { transition-delay: 90ms; }
.egs-hero.is-in .egs-hero__text { transition-delay: 180ms; }
.egs-hero.is-in .egs-hero__actions { transition-delay: 270ms; }
.egs-hero.is-in .egs-hero__stats { transition-delay: 360ms; }
.egs-hero.is-in .egs-hero__eyebrow,
.egs-hero.is-in .egs-hero__inner > .egs-h1,
.egs-product-hero.is-in .egs-hero__inner > .egs-h1,
.egs-hero.is-in .egs-hero__title,
.egs-hero.is-in .egs-hero__text,
.egs-hero.is-in .egs-hero__actions,
.egs-hero.is-in .egs-hero__stats {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .egs-hero__eyebrow,
  .egs-hero__inner > .egs-h1,
  .egs-hero__title,
  .egs-hero__text,
  .egs-hero__actions,
  .egs-hero__stats {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Carrito lateral (drawer): se abre solo tras reservar plaza en un curso,
   sin recargar página ni pasar por .egs-nav-panel. Reutiliza --dur/--ease
   del resto del sitio; a diferencia del nav panel (sin scrim, solo un
   dropdown), aquí sí hay overlay porque es un paso hacia el pago, más
   crítico que abrir el menú.
   -------------------------------------------------------------------------- */

.egs-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.egs-cart-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 4, .5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.egs-cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
.egs-cart-drawer.is-open::before {
  opacity: 1;
}

.egs-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-white);
  box-shadow: -24px 0 60px rgba(11, 31, 30, .22);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.egs-cart-drawer.is-open .egs-cart-drawer__panel {
  transform: translateX(0);
}

.egs-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid #E8E8E8;
}
.egs-cart-drawer__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 0.5vw + 18px, 26px);
  color: var(--color-ink);
  text-transform: uppercase;
}
.egs-cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-ink);
  transition: background-color var(--dur) var(--ease);
}
.egs-cart-drawer__close:hover {
  background: var(--color-off-white);
}

.egs-cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.egs-cart-drawer__empty {
  color: var(--color-text);
  font-size: clamp(14px, 0.25vw + 13px, 16px);
}

.egs-cart-drawer__items {
  display: grid;
  gap: 18px;
}

.egs-cart-drawer__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
}
.egs-cart-drawer__item-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-off-white);
}
.egs-cart-drawer__item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.egs-cart-drawer__item-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(13px, 0.25vw + 12px, 15px);
  color: var(--color-ink);
  line-height: 1.3;
}
.egs-cart-drawer__item-price {
  font-family: var(--font-ui);
  font-size: clamp(13px, 0.2vw + 12px, 14px);
  color: var(--color-primary);
  margin-top: 4px;
}
.egs-cart-drawer__item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-text);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.egs-cart-drawer__item-remove:hover {
  background: var(--color-off-white);
  color: var(--color-primary-dark);
}

.egs-cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #E8E8E8;
  font-family: var(--font-ui);
}
.egs-cart-drawer__total span {
  font-size: clamp(13px, 0.25vw + 12px, 15px);
  color: var(--color-text);
}
.egs-cart-drawer__total strong {
  font-weight: 600;
  font-size: clamp(18px, 0.4vw + 16px, 22px);
  color: var(--color-ink);
}

.egs-cart-drawer__actions {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.egs-cart-drawer__actions .egs-btn {
  width: 100%;
}
/* "Ver carrito": fondo blanco (drawer también es blanco) con borde y
   texto en el color primario, en vez de .egs-btn--ghost genérico
   (pensado para ir sobre fondos ya coloreados, aquí se perdía sin
   borde sobre el fondo blanco del propio drawer). */
.egs-cart-drawer__view-cart {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  --egs-btn-fill: var(--color-primary);
}
.egs-cart-drawer__view-cart:hover,
.egs-cart-drawer__view-cart:focus-visible {
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .egs-cart-drawer,
  .egs-cart-drawer::before,
  .egs-cart-drawer__panel {
    transition: none;
  }
}