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

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

.egs-grid {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: 1fr;
}

@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;
  }
  /* .egs-stock-pill es inline-flex (no block): margin-inline:auto no
     lo centra a él mismo como bloque — sí funciona text-align:center
     en su contenedor, ya que el pill es un elemento de tipo inline. */
  .egs-stock-pill {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
  /* 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: fondo claro, texto/icono en teal
   oscuro (#226D67), Bastardo Groteskish Medium 12px. */
.egs-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .94);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 0.1vw + 10.5px, 12px);
  color: #226D67;
  margin-bottom: 26px;
}
.egs-stock-pill svg { color: #226D67; }

/* 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 { color: #B3261E; }

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

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