/* ==========================================================================
   EGS — Estilos específicos de plantillas
   ========================================================================== */

/* --------------------------------------------------------------------------
   Archivo de cursos / blog: rejilla
   -------------------------------------------------------------------------- */

.egs-grid {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: 1fr;
  position: relative;
}
/* Estado de carga al filtrar por categoría (chips de "Filtrar:", ver
   initFilters en main.js): antes solo se marcaba aria-busy sin ningún
   cambio visual, así que no había forma de saber que la petición
   estaba en curso. Contenido atenuado + spinner centrado mientras
   dura el fetch. */
.egs-grid[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  min-height: 200px;
}
/* Opacidad solo en las tarjetas (hijos directos), no en el propio
   .egs-grid: puesta ahí antes, también atenuaba el ::after de abajo
   (el spinner), que es hijo del mismo elemento y hereda su opacidad
   visualmente pese a no ser una tarjeta. */
.egs-grid[aria-busy="true"] > * {
  opacity: .4;
}
.egs-grid[aria-busy="true"]::after {
  content: "";
  position: absolute;
  /* Cerca de la parte superior del grid (no centrado verticalmente
     respecto a todo el contenido, que con varias filas de tarjetas
     quedaba fuera de la vista sin hacer scroll) y más grande, para
     que se note el cambio de estado al filtrar sin tener que buscarlo. */
  top: 48px;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  border: 4px solid rgba(34, 109, 103, .25);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: egs-spin .7s linear infinite;
}
@keyframes egs-spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 640px) { .egs-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .egs-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .egs-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.egs-grid .egs-course-card { width: auto; max-width: none; }

/* --------------------------------------------------------------------------
   Ficha de curso (single product)
   -------------------------------------------------------------------------- */

.egs-breadcrumb {
  font-family: var(--font-ui);
  font-size: clamp(11px, 0.1vw + 10.5px, 12px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 20px;
}
.egs-breadcrumb a { color: rgba(255, 255, 255, .8); }
.egs-breadcrumb a:hover { color: var(--color-white); }

.egs-product-hero {
  position: relative;
  padding-block: calc(var(--header-h) + 26px) 40px;
  background: linear-gradient(165deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Desktop: una sola columna centrada (no dos columnas lado a lado) —
   imagen, título, precio, botón, avisos y también las migas de pan van
   todos centrados, igual que en mobile pero a mayor tamaño. El bloque
   entero se acota a un ancho fijo y se centra dentro de
   .egs-hero__inner (que sigue a var(--content-max)): sin esto, cada
   elemento centraba su TEXTO dentro de todo el ancho disponible en vez
   de quedar como un bloque compacto centrado. */
@media (min-width: 992px) {
  /* Scoped a .egs-product-hero: sin el prefijo, este selector era
     global y también centraba "Volver al blog" en el hero del
     artículo del blog (egs-hero--article), que debe quedar a la
     izquierda junto al resto de su texto. */
  .egs-product-hero .egs-breadcrumb {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
  }
  .egs-product-hero__title,
  .egs-product-hero__price,
  .egs-product-hero__reassure,
  form.cart {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
  }
  /* La imagen ya se centra con su propio margin:0 auto (base, no
     desktop-only) — solo hacía falta NO ensancharla a 560px como el
     resto del bloque. */
  .egs-product-hero__badge {
    margin-inline: auto;
  }
  .egs-product-hero__price {
    justify-content: center;
  }
}

.egs-product-hero__title {
  color: var(--color-white);
  margin-bottom: 18px;
}

/* Dato exacto del panel de Figma: caja 225×35, radio 6px (no pill
   totalmente redondeado como tenía antes), fondo blanco 94%, icono
   dentro de un círculo teal sólido (no el icono suelto en teal),
   texto en teal oscuro (#226D67) Bastardo Groteskish, más grande que
   el clamp anterior. */
.egs-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .94);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 0.2vw + 12px, 15px);
  color: #226D67;
  margin-top: 32px;
  margin-bottom: 26px;
}
.egs-stock-pill svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: #226D67;
  color: var(--color-white);
}

/* .egs-stock-pill es inline-flex (no block): margin-inline:auto no lo
   centra a él mismo como bloque. Esta regla debe ir DESPUÉS de la
   definición base de arriba (misma especificidad): puesta antes,
   dentro del @media de la sección "Desktop" más arriba en el archivo,
   la propia .egs-stock-pill base la sobrescribía por venir después en
   la cascada — el pill seguía sin centrarse pese al fix. */
@media (min-width: 992px) {
  .egs-stock-pill {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}

/* Pill de "Agotado": mismo aspecto que el pill de "quedan pocas
   plazas" pero en rojo, no el <p class="stock out-of-stock"> nativo de
   WooCommerce (texto rojo suelto sin fondo ni icono, impreso dentro de
   woocommerce_template_single_add_to_cart sin que esta plantilla
   pueda darle estilo directamente). */
.egs-stock-pill--out {
  background: rgba(255, 255, 255, .94);
  color: #B3261E;
}
.egs-stock-pill--out svg { background: #B3261E; color: var(--color-white); }

/* El mensaje nativo de WooCommerce (stock/out-of-stock) queda oculto:
   lo sustituye por completo el pill de arriba, ya sea el de "pocas
   plazas" o el de "Agotado". No solo dentro de form.cart: con el
   producto agotado, WooCommerce no llega a imprimir el <form
   class="cart"> en absoluto — el <p class="stock"> queda suelto
   directamente en el hero, así que el selector debe alcanzarlo igual. */
.egs-product-hero p.stock {
  display: none;
}

.egs-product-hero__badge {
  /* display:table en vez de block + width:100%: la portada del curso
     suele ser más alta que ancha (un libro/PDF), y a width:100% con
     max-width:280px sobraba relleno blanco a los lados de la imagen
     dentro del marco redondeado. table se ciñe al ancho real de la
     imagen (limitado por max-width) y, a diferencia de inline-block,
     sigue centrándose con margin-inline:auto como un bloque normal. */
  display: table;
  max-width: 280px;
  margin: 0 auto 22px;
  /* Dato exacto del panel de Figma: radio 28px (no el genérico de
     tarjeta, mucho menor). */
  border-radius: 28px;
  background: var(--color-white);
  padding: 10px;
}
.egs-product-hero__badge img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.egs-product-hero__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  text-align: center;
}
/* Dato exacto del panel de Figma: Instrument Sans Medium, 26.44px. */
.egs-product-hero__price .egs-price {
  color: var(--color-white);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(21px, 0.7vw + 18px, 26.44px);
}
/* Dato exacto del panel: Bastardo Groteskish, 13.74px, blanco al 65%. */
.egs-product-hero__price small {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.15vw + 10.5px, 13.74px);
  line-height: 1.3;
  color: rgba(255, 255, 255, .65);
}

/* Dato exacto del panel de Figma: botón "Reservar mi plaza" a ancho
   completo, fondo blanco 94% + efecto "Glass" (aproximado con
   backdrop-filter, igual patrón que .egs-pay-option__icon en
   Cardioprotección), texto color primario, Bastardo Groteskish
   19.74px, radio 6px — no el botón genérico de WooCommerce
   (fondo teal sólido, Instrument Sans, radio var(--radius-btn)). */
.egs-product-hero form.cart {
  width: 100%;
}
@media (min-width: 992px) {
  /* Sin límite, el botón se estiraba a todo el ancho de la columna
     derecha del grid (mucho mayor que en mobile), viéndose
     desproporcionadamente largo frente al resto del contenido. */
  .egs-product-hero form.cart {
    max-width: 420px;
  }
  /* Productos variables (con selector de Horas/Lugar/Categoría en 3
     columnas, ver más abajo): el límite de 420px pensado para el
     botón simple las dejaba muy estrechas — más ancho para que cada
     columna tenga sitio de sobra. display:flex + align-items:center
     en vez de max-width + margin:auto en el botón: varios intentos de
     centrar el botón por su cuenta (con margin-inline:auto y su
     propio max-width) no llegaban a aplicarse por el orden de
     cascada/especificidad de otras reglas sobre el mismo botón —
     centrando aquí el propio <form> como flex container, el hijo con
     max-width menor (el botón) queda centrado sin depender de su
     propio margin. */
  .egs-product-hero form.cart.variations_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
  }
  .egs-product-hero form.cart.variations_form table.variations {
    width: 100%;
  }
  /* Mismo ancho que el botón de un producto simple (.egs-product-hero
     form.cart, arriba, 420px): con solo max-width + margin:auto (sin
     !important) el botón seguía midiendo ~175px reales (confirmado
     por inspección) — algún ancho de contenido de sus wrappers
     (.woocommerce-variation-add-to-cart, .quantity) ganaba por delante.
     width fijo con !important, no relativo al 100% del padre, para no
     depender de que esos wrappers intermedios tengan el ancho que se
     espera. */
  .egs-product-hero form.cart.variations_form .single_add_to_cart_button {
    width: 420px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}
/* Sin dato de Figma para un selector de cantidad (los cursos se
   reservan de uno en uno): el input nativo de WooCommerce se veía
   como un cuadrado blanco sin estilo, suelto junto al botón. */
.egs-product-hero form.cart .quantity {
  display: none;
}
/* Selector de opciones de los cursos variables (Horas, Lugar...): sin
   dato de Figma (no había ningún producto variable en el diseño), se
   estiliza igual que el resto de inputs del hero. Dos intentos
   anteriores (tarjeta glass grande, luego solo un select blanco con
   la flecha nativa del navegador) quedaban deslavados y con
   demasiado hueco vertical. Ahora: label + select en la misma línea
   (más compacto), fondo blanco sólido (no glass, para que destaque
   bien del teal) y una flecha propia en SVG — la nativa del
   navegador es minúscula y apenas se distinguía sobre el fondo claro. */
.egs-product-hero form.cart table.variations,
.egs-product-hero form.cart table.variations tbody {
  display: block;
  width: 100%;
}
.egs-product-hero form.cart table.variations tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
/* Las filas (Horas, Lugar, Categoría) van en horizontal, una junto a
   otra, no apiladas — pedido explícito, con display:flex en el propio
   tbody en vez de depender del layout de tabla (que solo apila filas
   verticalmente). */
@media (min-width: 640px) {
  /* align-items:flex-start (por defecto era stretch, el valor inicial
     de flexbox): sin esto, cada <tr> (columna) se estiraba a la
     altura del más alto del grupo — confirmado por inspección real,
     el <tr> de "Horas" medía 107px de alto pese a su padding reducido,
     porque otra columna del mismo grupo era más alta. Con
     flex-start cada columna solo mide lo que su propio contenido
     necesita. */
  .egs-product-hero form.cart table.variations tbody {
    flex-direction: row;
    align-items: flex-start;
  }
}
.egs-product-hero form.cart table.variations tr {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  background: var(--color-white);
  border-radius: 8px;
  padding: 4px 6px 4px 16px;
  text-align: left;
}
/* Label arriba, select debajo (pedido explícito, en vez de en línea):
   con poco padding para que la tarjeta no quede gruesa — el intento
   anterior con este mismo layout usaba bastante más aire vertical. */
@media (min-width: 640px) {
  .egs-product-hero form.cart table.variations tr {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 14px 2px;
  }
}
.egs-product-hero form.cart table.variations th.label {
  display: block;
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 0.2vw + 11px, 14px);
  color: var(--color-primary-dark);
  padding-right: 12px;
}
@media (min-width: 640px) {
  .egs-product-hero form.cart table.variations th.label {
    padding-right: 0;
    padding-bottom: 2px;
  }
}
.egs-product-hero form.cart table.variations td.value {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}
/* WooCommerce añade este enlace "Limpiar" dentro de la ÚLTIMA columna
   de atributos (aquí, "Categoría") para poder deseleccionar todo — su
   propio style="visibility:hidden" inline solo lo hace invisible,
   pero sigue ocupando su línea en el flujo normal, empujando la
   altura de esa columna por encima de las demás (confirmado por
   inspección real del DOM: esa era la única caja que seguía alta tras
   el fix de align-items). display:none la saca del flujo del todo. */
.egs-product-hero form.cart table.variations a.reset_variations {
  display: none !important;
}
.egs-product-hero form.cart table.variations select {
  display: block;
  width: 100%;
  background: none;
  /* Flecha propia (no la nativa del navegador, minúscula y apenas
     visible): mismo teal oscuro que el texto, SVG en línea vía
     data-URI para no depender de un archivo aparte. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23226D67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-left: 1px solid rgba(34, 109, 103, .15);
  border-radius: 0;
  padding: 8px 34px 8px 14px;
  font-family: var(--font-body);
  font-size: clamp(13px, 0.2vw + 12px, 15px);
  color: var(--color-primary-dark);
}
/* Layout de columna en desktop (arriba): el borde pasa de lateral a
   superior, sin sangría izquierda (ya no hay label al lado que
   separar), y con menos padding vertical para que la tarjeta no quede
   gruesa. Va DESPUÉS de la regla base de arriba (misma
   especificidad) para ganar por orden de cascada. */
@media (min-width: 640px) {
  .egs-product-hero form.cart table.variations select {
    border-left: none !important;
    border-top: 1px solid rgba(34, 109, 103, .15) !important;
    padding: 2px 34px 2px 0 !important;
    line-height: 1.3 !important;
    height: 28px !important;
  }
  .egs-product-hero form.cart table.variations tr {
    padding: 6px 14px 2px !important;
  }
}
/* WooCommerce mueve el <button> dentro de
   .woocommerce-variation-add-to-cart.variations_button (confirmado
   por inspección real del DOM) al cargar la página — un div que por
   defecto no tiene width:100%, así que el botón (aunque con su propio
   width:100% !important) queda limitado al ancho de contenido de ese
   wrapper, mucho más estrecho que el resto del formulario. Se le
   fuerza el ancho completo a ese wrapper también. */
.egs-product-hero form.cart .woocommerce-variation-add-to-cart {
  display: block !important;
  width: 100% !important;
}
.egs-product-hero form.cart .woocommerce-variation-description,
.egs-product-hero form.cart .woocommerce-variation-price {
  color: var(--color-white);
  margin-bottom: 12px;
}
.egs-product-hero form.cart .single_add_to_cart_button {
  display: block;
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 0.3vw + 13px, 19.74px);
  border-radius: 6px;
  padding: 15px 23px;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.egs-product-hero form.cart .single_add_to_cart_button.is-loading {
  opacity: .7;
  pointer-events: none;
}
/* En productos variables, mientras no se elige una opción el botón
   queda disabled y WooCommerce/el navegador lo pintan con su morado
   de acento por defecto (#7f54b3), no el blanco del diseño. Mismo
   fondo/color que el estado normal, solo algo más apagado para that
   se note que aún no se puede pulsar. */
.egs-product-hero form.cart .single_add_to_cart_button:disabled,
.egs-product-hero form.cart .single_add_to_cart_button.disabled,
.egs-product-hero form.cart .single_add_to_cart_button[disabled] {
  background: rgba(255, 255, 255, .6);
  color: var(--color-primary);
  opacity: 1;
  cursor: not-allowed;
}
/* Antes el hover pasaba de blanco 94% a blanco 100% (background) sobre
   texto teal: apenas se distinguía. Fondo teal oscuro sólido + borde
   blanco (pedido explícito) invierte el contraste del botón, mucho
   más visible como estado de hover. */
.egs-product-hero form.cart .single_add_to_cart_button:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  border-color: var(--color-white);
}
/* Sin esto, con el botón disabled (producto variable sin opción
   elegida) el :hover de arriba seguía ganando al pasar el cursor
   encima — misma especificidad, pero :hover está declarado después
   en la cascada, así que el botón volvía a mostrar el morado nativo
   por debajo o un fondo inconsistente con el resto del estado disabled. */
.egs-product-hero form.cart .single_add_to_cart_button:disabled:hover,
.egs-product-hero form.cart .single_add_to_cart_button.disabled:hover,
.egs-product-hero form.cart .single_add_to_cart_button[disabled]:hover {
  background: rgba(255, 255, 255, .6);
  color: var(--color-primary);
  border-color: transparent;
}
/* Dato exacto del panel de Figma: Bastardo Groteskish, 17.74px. */
.egs-product-hero__reassure {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: clamp(14px, 0.3vw + 12px, 17.74px);
  color: rgba(255, 255, 255, .9);
}
.egs-product-hero__reassure li { display: flex; align-items: center; gap: 9px; }
@media (min-width: 992px) {
  .egs-product-hero__reassure li { justify-content: center; }
}

/* Tabla de metadatos del curso */
.egs-meta-table {
  width: 100%;
  /* separate, no collapse: con collapse el border-spacing de abajo
     (el que de verdad separa las filas) se ignora por completo, así
     que por mucho que se aumentara seguían pegadas. */
  border-collapse: separate;
  font-family: var(--font-ui);
  font-size: clamp(13px, 0.25vw + 12px, 15px);
}

@media (min-width: 992px) {
  /* Ahora vive en su propia sección de ancho completo (antes iba
     integrada en la columna del hero); sin límite se estiraría a todo
     el ancho de --content-max. Centrada, igual que el resto del hero
     de arriba (una sola columna centrada, no dos). */
  .egs-meta-table {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* Dato exacto del panel de Figma: la etiqueta ("Fecha", "Modalidad"...)
   es un chip verde sólido pequeño alineado a la izquierda (no una
   franja ancha), y el valor va en negro sólido justo al lado, no al
   otro extremo de la fila. */
.egs-meta-table {
  border-spacing: 0 10px;
}

/* Desktop: de filas apiladas (chip + valor en horizontal) a columnas
   en vertical (chip arriba, valor debajo), una por dato — pedido
   explícito, no venía así en el Figma. Una <table> no puede transponer
   filas en columnas con CSS de tabla, así que se pasa a grid: cada
   <tr> se convierte en una columna y sus dos celdas (th/td) se apilan
   dentro con flex. */
@media (min-width: 992px) {
  .egs-meta-table,
  .egs-meta-table tbody {
    display: grid;
  }
  .egs-meta-table tbody {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 24px;
  }
  .egs-meta-table tr,
  .egs-meta-table td {
    white-space: nowrap;
  }
  .egs-meta-table tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* El chip (th) ocupa todo el ancho de su columna, no solo el de su
     texto — antes tenía "width: auto" y "white-space: nowrap" lo
     encogía al tamaño de la palabra más corta ("Fecha", "Lugar"...). */
  .egs-meta-table th {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
  /* En fila horizontal el valor iba pegado al chip con este padding;
     en columna, debajo del chip, sobraría como sangría a la izquierda. */
  .egs-meta-table td {
    padding-left: 0;
    text-align: left;
  }
}
@media (min-width: 992px) {
  /* La sección quedaba pegada al hero — solo 57px de padding-block
     genérico (.egs-section--tight) se ven insuficientes junto a un
     hero tan alto en pantallas anchas. */
  .egs-product-hero + .egs-section--tight.egs-section--light {
    padding-top: 64px;
  }
}
.egs-meta-table th,
.egs-meta-table td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
}

.egs-meta-table th {
  width: auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 0.2vw + 10px, 13.74px);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 4px;
  padding: 6px 14px;
  white-space: nowrap;
}

.egs-meta-table td {
  text-align: left;
  font-family: var(--font-body);
  font-size: clamp(15px, 0.3vw + 13px, 19.74px);
  color: #000;
  padding-left: 18px;
}

/* Variante integrada en el hero verde: filas simples separadas por líneas
   translúcidas, sin fondo propio en las celdas (como el Figma). */
.egs-meta-table--on-primary {
  margin-top: 26px;
  font-size: clamp(13px, 0.25vw + 12px, 15.5px);
  border-spacing: 0 10px;
  border-collapse: separate;
}

/* Sin esto, dentro de .egs-hero__inner (max-width:var(--content-max),
   1600px) la tabla se estira a todo ese ancho: el chip de etiqueta
   (th) queda a la izquierda con su ancho de contenido, y el valor (td)
   se dispersa en una línea larguísima al otro extremo. Se acota como
   el resto de bloques de texto/datos del sitio. */
@media (min-width: 992px) {
  .egs-meta-table--on-primary { max-width: 560px; }
}
.egs-meta-table--on-primary td {
  padding: 11px 0;
  background: none;
  border-radius: 0;
}
/* Como en el Figma: la etiqueta ("Fecha", "Modalidad"...) es un chip
   teal sólido, no texto atenuado. */
.egs-meta-table--on-primary th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 0.2vw + 10px, 13.5px);
  text-align: left;
  color: var(--color-white);
  background: rgba(0, 0, 0, .15);
  padding: 6px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.egs-meta-table--on-primary td {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 0.35vw + 12px, 18px);
  color: var(--color-white);
  padding-left: 16px;
}

/* Galería de fotos del producto: carrusel horizontal también en
   desktop (patrón de galería, no de grid de contenido). El ancho de
   cada figura vivía en un style="" inline, que por especificidad de
   atributo gana siempre a cualquier regla de clase — el mismo bug que
   ya se corrigió una vez en .egs-numbered-card. Se mueve a clase para
   poder ajustarlo por breakpoint sin ese problema. */
.egs-product-gallery__item {
  width: 78vw;
  max-width: 420px;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: 0;
}

/* .egs-product-gallery también lleva la clase .egs-scroller: ya hereda
   de components.css la regla que alinea la primera imagen con el
   contenido en pantallas anchas (.egs-scroller:not(.egs-scroller--to-grid),
   min-width:1320px), sin necesidad de repetirla aquí. */

/* Lista "este curso incluye" */
.egs-includes {
  padding: 34px 26px;
  border-radius: var(--radius-card);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 0 64px rgba(0, 0, 0, .25);
}
.egs-includes h2 { color: var(--color-white); margin-bottom: 32px; }
.egs-includes ul { display: grid; gap: 16px; }

@media (min-width: 768px) {
  /* Con varios ítems cortos ("este curso incluye"), 2 columnas aprovechan
     mejor el ancho sin dejar líneas larguísimas. */
  .egs-includes ul { grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
}
@media (min-width: 992px) {
  .egs-includes {
    padding: 44px 48px;
    /* Centrada y más estrecha: a todo el ancho del container (1360px)
       quedaba con demasiado hueco vacío en las líneas cortas de la
       lista. */
    max-width: 860px;
    margin-inline: auto;
  }
}
.egs-includes li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 0.25vw + 13px, 16px);
  line-height: 1.35;
}
.egs-includes li svg { flex: 0 0 auto; width: 17px; height: 17px; }

/* Pestañas de la ficha */
.egs-tabs__nav {
  display: flex;
  width: 100%;
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E2E2;
  margin-bottom: 26px;
  scrollbar-width: none;
}
.egs-tabs__nav::-webkit-scrollbar { display: none; }

/* Dato exacto del panel de Figma: Bastardo Groteskish, subrayado del
   tab activo más grueso (no los 2px genéricos). Tamaño subido en
   desktop (antes tope de 16px): con el contenedor ancho de pantallas
   grandes, los tabs se veían diminutos junto a tanto espacio vacío. */
.egs-tabs__tab {
  flex: 0 0 auto;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: -13px;
  font-family: var(--font-body);
  font-size: clamp(14px, 0.4vw + 12px, 19px);
  color: var(--color-text);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.egs-tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.egs-tabs__panel[hidden] { display: none; }

/* Temario numerado */
.egs-syllabus { display: grid; gap: 0; }

/* Dato exacto del panel de Figma: línea #DADADA al 20%. */
.egs-syllabus__item {
  padding: 4px 0;
  border-bottom: 1px solid rgba(218, 218, 218, .2);
}

/* Dato exacto del panel de Figma: título en #226D67 (--color-primary-dark),
   número "01." en un verde más claro, #5BC1B8. .egs-entry-content h3 (más
   abajo en este archivo, misma especificidad) sobrescribía el tamaño
   porque el temario vive dentro de .egs-tabs__panel.egs-entry-content —
   se repite el selector para ganar por especificidad, no por orden. */
.egs-syllabus__title.egs-syllabus__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 0.8vw + 24px, 35px);
  line-height: 1.05;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}
.egs-syllabus__title .num { color: #5BC1B8; }

/* Dato exacto del panel de Figma: Instrument Sans Regular, 16.66px,
   negro al 30%. */
.egs-syllabus__text {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(13px, 0.3vw + 11px, 16.66px);
  line-height: 1.4;
  color: rgba(3, 3, 4, .3);
}

/* --------------------------------------------------------------------------
   Espacios cardioprotegidos
   -------------------------------------------------------------------------- */

/* Sin diseño de escritorio propio para esta página: se imita el
   patrón visual de los h2 grandes de Home/Emerfit (tope de clamp más
   alto que el .egs-h2 genérico + max-width en ch para que corte antes
   de ocupar todo el ancho del contenedor), en vez de calcar sus datos
   exactos de Figma (que son de OTRA página). */
/* :not(.egs-closing__title) — el footer/closing (mismo en TODAS las
   páginas, incluida esta) también usa .egs-h2 para su titular, y no
   debe heredar este ensanchado propio de Cardioprotección. */
.page-template-page-cardioproteccion .egs-h2:not(.egs-closing__title) {
  font-size: clamp(34px, 4vw + 14px, 72px);
}
@media (min-width: 992px) {
  .page-template-page-cardioproteccion .egs-h2:not(.egs-closing__title) {
    max-width: 22ch;
  }
}

/* Marcas (Cardioprotección): dato exacto del panel de Figma — chips
   sin icono, fondo #399C94 al 26% + efecto "Glass" (aproximado con
   backdrop-filter, igual patrón que .egs-pay-option__icon), esquinas
   6px. El primer intento ponía border-color:transparent: sin el
   bordecito claro que trae el efecto "Glass" real de Figma, la chip
   se veía plana en vez de con esa apariencia de vidrio. */
.egs-chips--brands .egs-chip--icon {
  justify-content: center;
  padding: 12px 20px;
  border-radius: 6px;
  background: rgba(57, 156, 148, .26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--color-white);
  box-shadow: none;
  font-family: var(--font-body);
  /* Dato exacto del panel de Figma: 15.74px (no el clamp genérico de
     .egs-chip base, topado en 14px). */
  font-size: 15.74px;
}
/* En mobile, la fila de chips llega a ras del borde de pantalla
   (pedido explícito), no acotada al padding lateral de .egs-container
   como el resto del bloque de texto — igual patrón que el filtro de
   categorías del catálogo de cursos. */
@media (max-width: 991px) {
  .egs-chips--brands {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
}

.egs-btn--brands-cta {
  font-family: var(--font-body);
  font-size: clamp(15px, 0.3vw + 13px, 19.74px);
}

/* Layout de la sección Marcas: en desktop, texto a la izquierda +
   foto de producto a la derecha (dato de Figma) en vez del texto
   solo ocupando todo el ancho con hueco vacío al lado. */
.egs-brands-layout__media img {
  display: block;
  width: 100%;
  height: 50vh;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-card);
}
/* Dos copias de la misma imagen: en mobile va entre encabezado y
   párrafo (dentro de .egs-brands-layout__text), en desktop en su
   propia columna a la derecha (dato de Figma). Solo una se muestra
   en cada breakpoint. */
.egs-brands-layout__media--mobile {
  margin: 16px 0 12px;
}
.egs-brands-layout__media--desktop {
  display: none;
}
/* Texto de modelos ("Desfibriladores iPAD CU-SP1, Amoul i3 y
   Samaritan PAD."), pedido explícito de tamaño mayor: 25px en mobile,
   30px en desktop. */
.egs-brands-layout__models {
  font-size: 25px;
}
@media (min-width: 992px) {
  .egs-brands-layout__models {
    font-size: 35px;
  }
}
@media (min-width: 992px) {
  .egs-brands-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .egs-brands-layout__media--mobile {
    display: none;
  }
  .egs-brands-layout__media--desktop {
    display: block;
  }
}

.egs-service-block {
  position: relative;
  border-radius: var(--radius-card);
  /* padding-top subido (antes 34px): con la etiqueta flotante
     asomando solo 26px por encima del borde (mitad de su propia
     altura, ~53px) y 27px por dentro, quedaban apenas 7px libres
     antes del primer check — casi tapado. */
  padding: 48px 20px 26px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  margin: 34px 0 18px;
}

/* .egs-section--teal (la sección con fondo teal que envuelve este
   bloque) fuerza "h3{color:white}" para sus titulares normales — con
   más especificidad que .egs-service-block__head a secas, ganaba y
   dejaba el texto blanco sobre el propio fondo blanco de esta
   etiqueta (invisible, dato confirmado por captura: el usuario veía
   la caja vacía). .egs-section--teal repetido en el selector iguala
   esa especificidad y gana por ir después en la cascada. */
.egs-section--teal .egs-service-block__head {
  position: absolute;
  top: 0;
  left: 20px;
  /* -70% (no -50%): la etiqueta sobresale más por encima del borde
     de la tarjeta en vez de quedar casi entera dentro solapando el
     primer check. */
  transform: translateY(-70%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 8px;
  border-radius: var(--radius-btn);
  background: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(14px, 1vw + 12px, 24px);
  box-shadow: 0 4px 16px rgba(11, 31, 30, .18);
}
.egs-service-block__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  flex: 0 0 auto;
}
.egs-service-block__head-icon svg {
  display: block;
  margin: 0 auto;
}

.egs-service-block__list {
  display: grid;
  gap: 16px;
}
.egs-service-block__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: clamp(13px, 0.25vw + 12px, 15px);
  line-height: 1.4;
  color: var(--color-white);
}
.egs-service-block__list li strong { color: var(--color-white); font-weight: 700; }
.egs-service-block__list svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--color-white); margin-top: 2px; }

/* En mobile las dos tarjetas de servicio caían en flujo normal sin
   ningún margen entre ellas ni respecto al párrafo de arriba,
   quedando pegadas. El margin-top separa del párrafo (que ya tiene
   su propio margin-bottom:26px, sumándose); el margin-bottom separa
   entre tarjetas. */
/* 34px no bastaba: la etiqueta flotante de la 1ª tarjeta también
   sobresale hacia arriba (translateY(-70%)) e invadía el margen del
   párrafo de arriba — mismo problema que entre la 1ª y 2ª tarjeta. */
.egs-service-grid .egs-service-block {
  margin-top: 56px;
}
/* 24px no bastaba: la etiqueta flotante de la 2ª tarjeta
   (.egs-service-block__head, translateY(-70%) hacia arriba desde su
   propio borde superior) invadía el hueco y quedaba encima de los
   últimos checks de la 1ª tarjeta. Se sube a 56px, suficiente para
   dar cabida a esa etiqueta sin solape. */
.egs-service-grid .egs-service-block + .egs-service-block {
  margin-top: 56px;
}

/* En desktop, los dos bloques pasan de apilados a lado a lado — con solo
   2 elementos, una columna en un container de 1240px se ve desperdiciada. */
@media (min-width: 768px) {
  .egs-service-grid,
  .egs-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
  }
  .egs-pay-option { margin-bottom: 0; }
  .egs-service-grid .egs-service-block,
  .egs-service-grid .egs-service-block + .egs-service-block {
    margin-top: 34px;
  }
}

.egs-pay-option {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--radius-card);
  background: var(--color-primary);
  color: var(--color-white);
  margin-bottom: 16px;
}
.egs-pay-option__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
/* Dato exacto del panel de Figma: caja 41×41, radio 6, fondo
   #D9D9D9 al 50% + efecto "Glass" (blur/refracción) — aproximado en
   CSS con backdrop-filter + fondo semitransparente + borde sutil,
   el patrón estándar de glassmorphism web. */
.egs-pay-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 6px;
  background: rgba(217, 217, 217, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--color-white);
  flex: 0 0 auto;
}
/* Dato exacto del panel de Figma: SansPlomb Regular (no la mayúscula
   forzada + peso 600 del h3 genérico), color blanco sólido,
   ~30.15px. */
.egs-pay-option h3 {
  margin: 0;
  color: var(--color-primary-dark);
  text-transform: none;
  font-weight: 400;
  font-size: clamp(22px, 0.8vw + 19px, 30px);
}
.egs-pay-option p { margin-bottom: 18px; font-size: clamp(14px, 0.25vw + 13px, 16px); }
/* Fondo blanco + texto teal (en vez del solid teal/blanco genérico):
   sin --egs-btn-fill propio, el círculo de hover seguía siendo blanco
   sobre fondo ya blanco (invisible) y el texto no invertía color. */
.egs-pay-option .egs-btn--solid {
  background: var(--color-white);
  color: var(--color-primary-dark);
  --egs-btn-fill: var(--color-primary-dark);
}
.egs-pay-option .egs-btn--solid:hover,
.egs-pay-option .egs-btn--solid:focus-visible {
  color: var(--color-white);
}

/* Dato exacto del panel de Figma ("Por qué elegir EGS"): tarjeta
   367×396, fondo blanco (no gris), esquinas ~6px. Orden real:
   título → número → icono grande → párrafo (no número arriba). */
.egs-numbered-card {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--radius-card);
  background: var(--color-white);
  text-align: left;
  /* Dato exacto del panel de Figma: drop shadow blur 34, spread 0,
     negro al 25%. */
  box-shadow: 0 0 34px rgba(0, 0, 0, .25);
}

/* Ancho fijo del carrusel mobile/tablet: como clase, no style inline,
   para que .egs-scroller--to-grid > * { width:auto } (components.css)
   pueda ganar en desktop sin pelear contra la especificidad de un
   atributo style="" (que gana siempre, sin importar el selector). */
.egs-numbered-card--reason {
  width: 84vw;
  max-width: 340px;
}
@media (max-width: 767px) {
  /* Deja asomar el borde de la siguiente tarjeta (dato pedido: "que se
     vea un poco por la derecha" para invitar a deslizar), en vez de
     que el gutter del scroller corte justo donde acaba la tarjeta. */
  .egs-numbered-card--reason { width: 78vw; }
}
@media (min-width: 992px) {
  .egs-numbered-card--reason { width: auto; max-width: none; }
}
/* Dato exacto del panel de Figma: SansPlomb, color primario sólido,
   ~26px/line-height 25.3px — sin la mayúscula forzada del h3 genérico
   del sitio (aquí va en capitalización normal). */
.egs-numbered-card h3 {
  text-align: left;
  text-transform: none;
  font-size: clamp(22px, 0.8vw + 19px, 30px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 0;
}
/* El número va DEBAJO del título (dato de Figma), no encima. Dato
   exacto del panel: Bastardo Groteskish (font-body, no font-ui),
   peso Medium (500, no el 400 heredado de <p>), 17.74px, letter-
   spacing 3%, color #030304 sólido (no --color-ink genérico). */
.egs-numbered-card__num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 0.25vw + 11px, 17.74px);
  letter-spacing: .03em;
  color: #030304;
  margin: 2px 0 0;
}
/* Dato exacto del panel de Figma: icono grande (~160×137, proporción
   propia según el SVG, no forzado a cuadrado) con aire generoso
   arriba/abajo, no 96×96 pegado al número. */
.egs-numbered-card__icon {
  width: 160px;
  height: auto;
  max-height: 137px;
  margin: 40px auto 32px;
  display: block;
}
.egs-numbered-card p { text-align: left; }
/* Dato exacto del panel de Figma: Bastardo Groteskish (font-body, no
   font-ui), 17.74px, color #030304 al 50% de opacidad, peso normal
   (no la negrita heredada de <strong> en otros usos de la clase). */
.egs-numbered-card__text {
  font-family: var(--font-body);
  font-size: clamp(14px, 0.3vw + 12px, 17.74px);
  font-weight: 400;
  color: rgba(3, 3, 4, .5);
}

/* Fecha del artículo (antes style="font-size:13.74px;" inline en
   single.php): fluido entre mobile y desktop. */
.egs-single__date {
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-body);
  font-size: clamp(11px, 0.15vw + 10px, 13.74px);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Nosotros — equipo
   -------------------------------------------------------------------------- */

.egs-team { display: grid; gap: 20px; }

@media (min-width: 640px) { .egs-team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .egs-team { grid-template-columns: repeat(3, 1fr); } }

.egs-team-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-ink);
  aspect-ratio: 4 / 5;
}
.egs-team-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.egs-team-card:hover img { transform: scale(1.04); }

.egs-team-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 20px 18px;
  background: linear-gradient(180deg, rgba(11,31,30,0) 0%, rgba(11,31,30,.88) 60%);
  color: var(--color-white);
}
.egs-team-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 0.6vw + 17px, 24px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 4px;
}
.egs-team-card__role {
  font-family: var(--font-ui);
  font-size: clamp(11px, 0.2vw + 10px, 13px);
  color: rgba(255, 255, 255, .78);
}

/* Variante con CTA superpuesto (Emerfit — "¿Para quién?"): además del
   degradado, un botón glass flota sobre la foto, como en el Figma. */
.egs-team-card--cta .egs-team-card__body { padding-bottom: 68px; }
.egs-team-card__cta {
  position: absolute;
  left: 20px;
  bottom: 18px;
  padding: 10px 18px;
  font-size: clamp(12px, 0.2vw + 11px, 14px);
}

.egs-values { display: grid; gap: 22px; }
.egs-value {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}
.egs-value__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
}
.egs-value h3 { font-size: clamp(17px, 0.4vw + 15px, 20px); margin-bottom: 6px; color: var(--color-primary); }
.egs-value p { font-size: clamp(13px, 0.25vw + 12px, 15px); }

/* Sección "Valores" de Nosotros: todo centrado (pedido explícito), no
   solo el timeline — título y párrafo también, con el título acotado
   a un ancho más estrecho que el container completo. */
.egs-values-section__title,
.egs-values-section__lead {
  text-align: center;
  margin-inline: auto;
}
.egs-values-section__title { max-width: 26ch; }
.egs-values-section__lead { max-width: 60ch; }

/* Variante en línea de tiempo vertical (Nosotros — valores) */
.egs-timeline { display: grid; gap: 0; }

@media (min-width: 768px) {
  /* 3 items de texto corto en un container ancho se leen mal; se acota
     como el resto de bloques de texto largo. Antes solo desde 992px:
     en tablet (768-991px) el texto de cada línea de tiempo corría a
     todo el ancho del container (~688-911px), sin acotar. */
  .egs-timeline { max-width: 760px; margin-inline: auto; }
}
.egs-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding-bottom: 40px;
}
.egs-timeline__item:last-child { padding-bottom: 0; }
.egs-timeline__marker {
  position: relative;
  display: flex;
  justify-content: center;
}
.egs-timeline__dot {
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border-accent);
  z-index: 1;
  flex-shrink: 0;
}
.egs-timeline__item:not(:last-child) .egs-timeline__marker::after {
  content: "";
  position: absolute;
  top: 21px;
  bottom: -40px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--color-border-accent);
}
.egs-timeline__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 0.5vw + 16px, 22px);
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.egs-timeline__body p { font-size: clamp(13px, 0.25vw + 12px, 15px); color: rgba(255, 255, 255, .7); }

@media (min-width: 768px) {
  .egs-timeline__item { grid-template-columns: 60px 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

/* Como en el Figma: input blanco sólido (no translúcido) con esquinas
   muy redondeadas tipo píldora, y el botón cuadrado con esquinas
   moderadas (no píldora) en teal sólido, ligeramente separado del
   input. */
.egs-search-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 520px;
  margin-top: 30px;
}
.egs-search-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  /* Dato exacto del panel de Figma: corner radius 6, no píldora. */
  border-radius: 6px;
  background: var(--color-white);
  padding: 14px 20px;
  color: var(--color-ink);
  font-size: clamp(14px, 0.25vw + 13px, 16px);
}
.egs-search-form input::placeholder { color: var(--color-text); }
.egs-search-form input:focus { outline: none; }
.egs-search-form button {
  flex: 0 0 auto;
  width: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-input);
  background: var(--color-primary);
  color: var(--color-white);
}
.egs-search-form svg { width: 20px; height: 20px; }

/* Post individual */
.egs-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.egs-share__label {
  font-family: var(--font-ui);
  font-size: clamp(10px, 0.1vw + 9.5px, 11px);
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Vive dentro del hero teal (ver single.php), no sobre fondo blanco
     como decía este comentario antes: blanco, no color oscuro casi
     invisible sobre el mismo teal. */
  color: var(--color-white);
  margin-right: 4px;
}
.egs-share a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: none;
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--color-white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.egs-share a:hover { background: var(--color-white); color: var(--color-primary); }
.egs-share svg { width: 17px; height: 17px; }

/* Cuerpo del artículo */
.egs-entry-content { max-width: 68ch; }
.egs-entry-content h2 {
  font-size: clamp(21px, 0.6vw + 18px, 26px);
  color: var(--color-primary);
  text-transform: none;
  margin: 34px 0 12px;
}
/* "Contenidos del curso" (pestaña Temario), pedido explícito a 40px
   fijos, no el clamp() genérico de .egs-entry-content h2 de arriba
   (misma especificidad, elemento+clase — se repite la clase para
   ganar por especificidad, no por orden). */
.egs-entry-content h2.egs-syllabus__heading {
  font-size: 40px;
}
.egs-entry-content h3 {
  font-size: clamp(18px, 0.5vw + 16px, 22px);
  color: var(--color-primary);
  text-transform: none;
  margin: 26px 0 10px;
}
/* Subtítulos internos del artículo (dato de Figma: teal, subrayado,
   Bastardo Groteskish peso medio, no el tamaño pequeño de .egs-h5
   estándar del sistema, pensado para otros contextos como labels de
   formulario). */
/* Dato de Figma corregido: SansPlomb (no Bastardo Groteskish), ~20px,
   más grande que el texto del cuerpo. Sin subrayado grueso: el que
   había antes no se parecía en nada al de Figma. */
.egs-entry-content h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  text-transform: none;
  color: var(--color-primary);
  text-decoration: none;
  margin: 26px 0 10px;
}
.egs-entry-content p { margin-bottom: 18px; }
.egs-entry-content a { color: var(--color-primary); text-decoration: underline; }
.egs-entry-content ul { list-style: disc; padding-left: 22px; margin-bottom: 18px; }
.egs-entry-content ol { list-style: decimal; padding-left: 22px; margin-bottom: 18px; }
.egs-entry-content li { margin-bottom: 8px; }
.egs-entry-content img { border-radius: var(--radius-card); margin-block: 22px; }
.egs-entry-content blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-light-bg);
  font-size: clamp(14px, 0.3vw + 13px, 17px);
}

/* Paginación */
.egs-pagination {
  margin-top: 40px;
}
/* El flex real tiene que ir en .nav-links (hijo directo del <nav>,
   generado por WordPress core: <nav class="egs-pagination"><div
   class="nav-links">...enlaces...</div></nav>), no en el propio
   .egs-pagination — poniéndolo ahí solo centraba ese único div hijo
   como bloque, y dentro de él los números seguían cayendo en columna
   por ser elementos de bloque normales sin flex. */
.egs-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.egs-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-border-accent);
  font-family: var(--font-ui);
  font-size: clamp(12px, 0.2vw + 11px, 14px);
  color: var(--color-primary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.egs-pagination .page-numbers:hover,
.egs-pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

/* Desde tablet el formulario y los datos de contacto pasan de apilados
   a dos columnas: en un container ancho, una sola columna (con un
   formulario de 5 campos) dejaba muchísimo hueco vacío a los lados.
   Antes esto solo aplicaba desde 992px, dejando el formulario apilado
   a todo el ancho en 768-991px sin aprovechar el espacio ya disponible. */
@media (min-width: 768px) {
  .egs-contact-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .egs-contact-info { margin-top: 0; }
}

.egs-contact-form-wrap {
  padding: 26px 22px;
  border-radius: var(--radius-card);
  background: var(--color-light-bg);
}

@media (min-width: 992px) {
  .egs-contact-form-wrap { padding: 40px 36px; }
}

/* El formulario de diagnóstico de Cardioprotección comparte columna
   con el título/párrafo (que ahora tienen max-width en ch, ver
   .page-template-page-cardioproteccion .egs-h2 más abajo): sin un
   ancho propio se estiraba a todo el contenedor, quedando
   desalineado del texto por la derecha. Sin padding ni fondo propio
   (a diferencia del wrap genérico de Contacto): así sus campos
   arrancan en el mismo borde izquierdo que el título/párrafo, en vez
   de 36px más adentro. */
#egs-diagnostico .egs-contact-form-wrap {
  max-width: 640px;
  padding: 0;
  background: none;
  /* Centrado (pedido explícito): antes se alineaba con el borde
     izquierdo del título/párrafo, dejando el resto del contenedor
     ancho vacío a la derecha en desktop. */
  margin-inline: auto;
}
#egs-diagnostico .egs-h2,
#egs-diagnostico > .egs-container > .egs-lead {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.egs-contact-info { display: grid; gap: 20px; margin-top: 34px; }

.egs-contact-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.egs-contact-item__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-white);
}
.egs-contact-item__icon svg { width: 20px; height: 20px; }
.egs-contact-item__label {
  font-family: var(--font-ui);
  font-size: clamp(11px, 0.1vw + 10.5px, 12px);
  color: var(--color-text);
  margin-bottom: 2px;
}
.egs-contact-item__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 0.4vw + 14px, 19px);
  line-height: 1.15;
  /* --color-primary (#57A09A) sobre blanco da ~2.4:1 de contraste,
     muy por debajo del mínimo WCAG AA (4.5:1) — el teléfono/email
     era casi ilegible. --color-primary-dark (#216E68) da ~5.9:1. */
  color: var(--color-primary-dark);
  overflow-wrap: anywhere;
}
/* padding-block en el <a> (no en el <p> contenedor, para no separar
   más el label de arriba): el enlace real (teléfono/email) medía
   solo ~19px de alto, la línea de texto — con este padding el área
   de toque real se acerca al mínimo táctil recomendado sin alterar
   el tamaño visual del texto. */
.egs-contact-item__value a {
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
}

/* Mensajes de formulario */
.egs-form-message {
  padding: 14px 18px;
  border-radius: var(--radius-input);
  font-family: var(--font-ui);
  font-size: clamp(13px, 0.25vw + 12px, 15px);
  margin-bottom: 18px;
}
.egs-form-message--ok { background: #E7F4F2; color: var(--color-primary-dark); }
.egs-form-message--error { background: #FBECEC; color: #A33; }

/* --------------------------------------------------------------------------
   WooCommerce: ajustes mínimos para que herede el sistema
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-input);
  border-top-color: var(--color-primary) !important;
  font-family: var(--font-ui);
  font-size: clamp(13px, 0.25vw + 12px, 15px);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(14px, 0.3vw + 13px, 17px);
  padding: 13px 28px;
  transition: background-color var(--dur) var(--ease);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid #E2E2E2;
  border-radius: var(--radius-input);
  padding: 13px 16px;
}

.woocommerce-page .egs-woo-shell { padding-block: var(--section-gap); }

/* --------------------------------------------------------------------------
   Carrito vacío: markup 100% por defecto de WooCommerce (sin clases
   .egs-* propias), pedido explícito de centrar todo, quitar el botón
   "Ver más" de cada producto y estirar la rejilla de productos a todo
   el ancho del container en vez de quedar encogida a la izquierda con
   las tarjetas a su tamaño mínimo. El título "Carrito" (<h1>) es
   hermano de .woocommerce, no su hijo: centrar solo .woocommerce (dos
   intentos anteriores) dejaba el título fuera. Real markup de esta
   página: <main id="content"><section class="egs-section"><div
   class="egs-container"><h1>...  — NO #content > .egs-container
   (había una <section> de por medio, así que el combinador ">" del
   intento anterior nunca coincidía: text-align:center nunca llegó a
   aplicarse). Además, text-align:center por sí solo centra el TEXTO
   dentro de la caja del <h1>, no el propio <h1> si no ocupa el ancho
   completo — se añade también margin-inline:auto explícito por si el
   elemento no fuera ya block de ancho completo. */
.woocommerce-cart #content .egs-container {
  text-align: center;
  /* Sin límite de ancho (más ancho que el --content-max genérico de
     1600px, pedido explícito de "estirar" la sección): sin tarjetas
     de precio de ancho fijo como en el catálogo de cursos, no hay
     motivo para acotarla igual. */
  max-width: none;
}
.woocommerce-cart #content .egs-container > * {
  margin-inline: auto;
}
.woocommerce-cart .wc-block-grid {
  width: 100%;
}
.woocommerce-cart .wc-block-grid__products {
  justify-content: center;
}
/* Botón "Ver más" bajo cada producto sugerido: no aporta nada en el
   carrito vacío, la propia tarjeta ya enlaza al curso. */
.woocommerce-cart .wc-block-grid__product-add-to-cart {
  display: none;
}

/* "Finalizar compra" del carrito con productos: mismo aspecto que su
   equivalente en el drawer desplegable (.egs-btn.egs-btn--solid, ver
   inc/woocommerce.php), no el botón negro subrayado por defecto.
   Clase real confirmada por inspección en vivo:
   .wc-block-cart__submit-button (bloque de WooCommerce Blocks/
   Gutenberg, no la plantilla clásica con .checkout-button — ese
   selector, usado en el primer intento, no existe en este markup). */
.woocommerce-cart .wc-block-cart__submit-button {
  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;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--color-primary);
  color: var(--color-white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-cart__submit-button:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Checkout (finalizar compra): bloque de WooCommerce Blocks, sin
   ninguna plantilla propia del tema — layout y campos con el estilo
   del navegador por defecto. La columna del resumen del pedido
   (.wc-block-components-sidebar) se veía mucho más estrecha de lo
   esperado (35% del ancho nativo del bloque) porque el .egs-container
   general de la página es más estrecho de lo que ese bloque necesita
   para respetar sus propios porcentajes con comodidad.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #content .egs-container {
  max-width: 1800px;
}
/* La causa real de que la columna del resumen no llegara a estirarse
   pese al max-width de 1800px de arriba (confirmado por inspección
   real): el checkout va envuelto en .egs-entry-content, una clase
   genérica pensada para el cuerpo de texto de artículos (limitada a
   68ch para legibilidad de lectura), que aquí se aplicaba también al
   bloque de checkout entero, estrangulándolo a ~650px de ancho
   aunque su padre .egs-container ya fuera de 1800px. */
.woocommerce-checkout .egs-entry-content {
  max-width: none;
}
.wc-block-components-sidebar-layout {
  width: 100%;
  gap: 48px;
}
/* El propio bloque raíz también necesita el 100% explícito: sin él,
   con las columnas internas en flex, el conjunto se quedaba con el
   ancho de su contenido en vez de estirarse a todo el
   .egs-container disponible (mucho más ancho, 1800px), dejando el
   hueco vacío grande a la derecha del resumen del pedido. */
.wp-block-woocommerce-checkout {
  width: 100%;
}
/* El bloque decide su propio layout (fila vs columna) según el ancho
   que detecta con JS (ResizeObserver), añadiendo is-large / is-medium
   / is-small / is-mobile al contenedor — con esas clases, el CSS
   nativo de WooCommerce (más específico que un simple .wc-block-
   components-sidebar-layout) fuerza flex-direction:column y
   width:100% en ambas columnas pese a cualquier flex suelto que se
   le ponga. Se sobrescribe explícitamente ese estado para forzar la
   fila en desktop sin depender de qué clase de tamaño haya detectado;
   en mobile real (viewport <768px) no se toca, para no forzar dos
   columnas donde no caben. */
@media (min-width: 768px) {
  .wc-block-components-sidebar-layout,
  .is-medium.wc-block-components-sidebar-layout,
  .is-mobile.wc-block-components-sidebar-layout,
  .is-small.wc-block-components-sidebar-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
  }
  .wc-block-components-main,
  .wc-block-components-sidebar,
  .is-medium .wc-block-components-main,
  .is-medium .wc-block-components-sidebar,
  .is-mobile .wc-block-components-main,
  .is-mobile .wc-block-components-sidebar,
  .is-small .wc-block-components-main,
  .is-small .wc-block-components-sidebar {
    width: auto !important;
    padding: 0 !important;
  }
  .wc-block-components-main {
    flex: 1 1 60%;
  }
  .wc-block-components-sidebar {
    flex: 1 1 34%;
    margin-top: 0 !important;
  }
}
.wc-block-components-sidebar .wc-block-components-panel {
  background: var(--color-light-bg);
  border-radius: var(--radius-card);
  padding: 24px !important;
}
/* Bordes grises que el propio bloque nativo dibuja alrededor y entre
   las secciones del resumen del pedido (dato de Figma: sin bordes en
   este panel) — el borde exterior lo pone WooCommerce solo en modo
   "is-large" (.is-large .wp-block-woocommerce-checkout-order-summary-block),
   y cada sub-bloque (resumen, cupón, totales) trae el suyo propio
   como separador entre paneles apilados. */
.wc-block-components-sidebar [class*="wp-block-woocommerce-checkout"] {
  border: none !important;
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-totals-wrapper {
  border: none !important;
}
.wc-block-checkout__form h2,
.wc-block-checkout__form .wc-block-components-title {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  text-transform: none;
}
/* Textos del checkout (etiquetas de método de pago, nota del pedido,
   aviso de términos y condiciones...) en el gris apagado por defecto
   del bloque — se pasan al negro del sistema de diseño, salvo los
   enlaces (Términos y condiciones, Política de privacidad), que
   mantienen el color de acento para seguir distinguiéndose como
   clicables. */
.wc-block-checkout__form,
.wc-block-checkout__terms {
  color: var(--color-ink);
}
.wc-block-checkout__terms a {
  color: var(--color-primary);
}
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
  border-radius: var(--radius-input);
  border-color: var(--color-border-accent);
}
/* Labels flotantes de los campos ("País/Región", "Nombre",
   "Apellidos"...): gris apagado por defecto del bloque (opacity
   reducida sobre currentColor, no un color propio) — se fuerza a
   negro y opacidad completa. */
.wc-block-components-text-input label,
.wc-block-components-address-form label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
  color: var(--color-ink) !important;
  opacity: .7 !important;
}
.wc-block-components-text-input input:focus ~ label,
.wc-block-components-text-input.is-active label {
  opacity: 1 !important;
}
.wc-block-components-checkout-place-order-button {
  background: var(--color-primary) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-ui) !important;
}
.wc-block-components-checkout-place-order-button:hover {
  background: var(--color-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   Mi cuenta (login/registro): mismo problema que en checkout — el
   contenido va envuelto en .egs-entry-content, con max-width:68ch
   pensado para el cuerpo de texto de artículos, estrangulando el
   layout de dos columnas (Acceder / Registrarse) a un ancho estrecho
   con mucho hueco vacío a la derecha.
   -------------------------------------------------------------------------- */
.woocommerce-account .egs-entry-content {
  max-width: none;
}
.woocommerce-account .u-columns {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  flex: 1 1 0;
  width: auto !important;
}