/* =============================================================
   PAGE: PORTADA 2
   Todos los estilos de la homepage. Hereda tokens de base.css.
   Sin !important salvo donde se documenta el motivo.
   ============================================================= */

/* 1. LAYOUT RAÍZ
   ============================================================= */
.portada2-main-layout {
  /* Rompe el grid central de WP para ocupar ancho completo */
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* 2. HERO
   ============================================================= */
.portada2-hero {
  background: var(--gradient-ocean);
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vw, 140px) var(--page-margin) clamp(100px, 14vw, 160px);
  position: relative;
}

.portada2-hero-inner {
  max-width: var(--container-desktop);
  margin-inline: auto;
  width: 100%;
}

.portada2-hero-tag {
  display: block;
  font-size: clamp(0.75rem, 1.5vw, 0.9375rem);
  font-weight: var(--weight-regular);
  color: rgba(255,255,255,.75);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
}

.portada2-hero-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.375rem);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--color-neutral-50);
  margin: 0 0 var(--space-5);
}

.portada2-hero-subtext {
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  color: rgba(255,255,255,.85);
  line-height: var(--leading-normal);
  max-width: 680px;
  margin: 0 0 var(--space-8);
}

.portada2-hero-ctas-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Botón secundario del hero — texto blanco sobre fondo transparente */
.hero-secondary-link {
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-full);
}

.hero-secondary-link:hover {
  background: rgba(255,255,255,.1);
  color: var(--color-neutral-50);
}

/* SVG icon inline en botones del hero */
.btn-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-2);
}

/* 3. GENDER CARDS (overlapping hero)
   ============================================================= */
.hero-gender-cards-container {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  padding-inline: var(--page-margin);
}

.hero-gender-cards-inner {
  max-width: var(--container-desktop);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.gender-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden !important; /* recorta en el borde de la tarjeta blanca */
  box-shadow: var(--shadow-lg);
  background: var(--color-neutral-50);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  padding: 8px !important;
  padding-top: 22px !important; /* espacio para que la cabeza asome un poco */
}

.gender-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(14,14,144,.12);
}

.gender-card-image-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: visible !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Tonos subidos de saturación para que contrasten sobre el blanco de la
   página. Mismos valores en móvil y en escritorio. */
.card-women .gender-card-image-box { background-color: #EFE3EE; }
.card-men   .gender-card-image-box { background-color: #F6EBDA; }

.gender-card-img {
  position: absolute !important;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 112% !important;
  width: auto !important;
  max-width: none;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.gender-card-text-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  background: var(--color-neutral-50);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.gender-card-title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-neutral-900);
}

.gender-card-arrow {
  color: var(--color-brand);
  transition: transform var(--transition-fast);
}

.gender-card:hover .gender-card-arrow {
  transform: translateX(4px);
}

/* 4. MEDIA MARQUEE
   ============================================================= */
.media-marquee-container {
  background-color: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0;
  overflow: hidden;
}

.media-marquee-title {
  text-align: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.media-marquee-wrapper {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.media-marquee-scroll {
  display: flex;
  gap: 48px;
  padding-inline: 24px;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.media-logo-item {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
}

/* 5. SENDA PRE-TÍTULO (etiqueta pequeña sobre h2)
   ============================================================= */
.senda-pre-titulo {
  display: block;
  color: var(--color-neutral-800);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

/* 6. ACTUALIDAD / BLOG CARDS
   ============================================================= */
.portada2-actualidad-section {
  background-color: #FAF6F0;
  padding: var(--section-gap) var(--page-margin);
}

.portada2-actualidad-container {
  max-width: var(--container-desktop);
  margin-inline: auto;
}

.actualidad-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.actualidad-tag {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #E0E4F7;
  border: 1.5px solid #C5CDEE;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.actualidad-heading {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: var(--weight-regular);
  color: var(--color-neutral-800);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

.actualidad-subheading {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  max-width: 640px;
  margin-inline: auto;
  line-height: var(--leading-normal);
}

.actualidad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.actualidad-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.actualidad-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #C5CDEE;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}

.card-badge {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.badge-blog       { background-color: var(--color-neutral-200); color: var(--color-neutral-700); }
.badge-podcast    { background-color: #E8F4F8; color: var(--color-brand); }
.badge-newsletter { background-color: #F8EEF8; color: var(--color-brand); }

.card-date {
  font-size: var(--text-small);
  color: var(--color-neutral-500);
}

.actualidad-card .card-title {
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--color-neutral-800);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
  min-height: 52px;
}

.actualidad-card .card-title a {
  color: inherit;
  text-decoration: none;
}

.actualidad-card .card-excerpt {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-6);
  flex-grow: 1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-5);
  margin-top: auto;
}

.card-category {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-neutral-500);
}

.card-action-link {
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}

.card-action-link:hover { color: var(--color-neutral-800); }
.card-action-link svg   { transition: transform var(--transition-fast); }
.card-action-link:hover svg { transform: translateX(4px); }

/* 7. GENDER PROGRAMS (bloques mujer / hombre)
   ============================================================= */
.gender-programs-section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.gender-program-block {
  width: 100%;
  height: 750px;
  position: relative;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  padding: 0 8%;
  overflow: hidden;
}

.block-woman {
  /* Imagen anclada a la derecha (auto 100%): el fondo asoma por la izquierda,
     así que se iguala al color del borde izquierdo de la nueva imagen (lavanda-rosa). */
  background-color: #c9b0ca;
  background-position: right bottom;
  background-size: auto 100%;
  justify-content: flex-start;
}

.block-man {
  /* Imagen anclada a la izquierda: el fondo asoma por la derecha; se iguala al
     color del borde derecho de la nueva imagen (azul rgb(105,171,199)). */
  background-color: #69abc7;
  background-position: left bottom;
  background-size: auto 100%;
  justify-content: flex-end;
}

.gender-program-mobile-hero {
  display: none;
  width: 100%;
}

.gender-program-mobile-hero img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 440px;          /* en pantallas anchas recorta en vez de agrandar */
  object-fit: cover;          /* la imagen ya viene recortada a la persona */
  object-position: center top;/* mantiene la cara si hay recorte por altura */
  margin-inline: auto;
}

.gender-program-mobile-hero.bg-woman { background-color: #c9b0ca; }
.gender-program-mobile-hero.bg-man   { background-color: #69abc7; }

.gender-program-card {
  background: var(--color-neutral-50);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  box-shadow: none;
  max-width: 520px;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.gender-program-card h3 {
  font-family: var(--font-body);
  font-size: clamp(1.625rem, 3.5vw, 2.125rem);
  font-weight: var(--weight-regular);
  color: var(--color-neutral-800);
  margin: 0;
  line-height: var(--leading-tight);
}

.gender-program-card p {
  font-size: 0.96875rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-normal);
}

.btn-saber-mas {
  align-self: flex-start;
  background-color: var(--color-brand);
  color: var(--color-neutral-50);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  box-shadow: none;
}

.btn-saber-mas:hover {
  background-color: var(--color-brand-dark);
  transform: translateY(-2px);
}

.btn-saber-mas svg { transition: transform var(--transition-fast); }
.btn-saber-mas:hover svg { transform: translate(2px,-2px); }

/* 8. KPIs — ahora vive en blocks/kpi/styles.css (global, compartido) */

/* 9. CÓMO FUNCIONA — ahora vive en blocks/pasos-con-linea/ + blocks/paso/
   (global, compartido con hombres/mujeres) */

/* 10. EQUIPO — ahora vive en blocks/equipo/styles.css (global, compartido) */

/* 11. FÁRMACOS GLP-1 + 12. PRICING + 13. INCLUYE — componentes compartidos
   con hombres/mujeres. Estilos en blocks/farmacos/styles.css,
   blocks/precios-completos/styles.css y blocks/desglose-precio/styles.css (globales).
   ============================================================= */

/* 14. QUOTE BANNER — componente compartido con hombres/mujeres.
   Estilos en blocks/quote-banner/styles.css (global).
   ============================================================= */

/* ============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1200px) {
  .gender-program-block { height: 500px; }
  .gender-program-card { padding: var(--space-10); max-width: 450px; }
}

@media (max-width: 1024px) {
  .hero-gender-cards-inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .farmacos-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .farmacos-imagen { order: -1; }
}

@media (max-width: 991px) {
  .actualidad-grid { grid-template-columns: 1fr; gap: var(--space-6); padding-inline: var(--space-4); }
  .actualidad-card .card-title { min-height: auto; }
  .gender-program-block { height: 440px; padding-inline: 4%; }
  .gender-program-card { padding: var(--space-8); max-width: 400px; }
}

@media (max-width: 768px) {

  /* ── Testimonios: romper overflow:hidden del bloque para permitir scroll horizontal ── */
  section.block-cards-slider {
    overflow: visible !important; /* bloque/destacado-equipo/styles.css pone overflow:hidden que bloquea el carousel */
  }

  /* Equipo: visibilidad forzada y centrado de tarjetas ahora en
     blocks/equipo/styles.css (global, compartido) */

  /* ── Testimonios heading: forzar visibilidad ── */
  section.block-cards-slider .header-cards-slider {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 var(--page-margin) !important;
    text-align: center !important;
    margin-bottom: var(--space-8) !important;
  }

  section.block-cards-slider .header-cards-slider .antetitulo,
  section.block-cards-slider .header-cards-slider .titulo,
  section.block-cards-slider .header-cards-slider h2,
  section.block-cards-slider .header-cards-slider h3 {
    display: block !important;
    visibility: visible !important;
    color: #2A2822 !important;
  }

  /* ── Equipo grid: override blocks/destacado-equipo que fuerza grid en 767px ── */
  .inner-destacado-equipo .equipo {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
  }

  /* Hero */
  .portada2-hero { padding-bottom: clamp(100px, 18vw, 140px); }
  .portada2-hero-ctas-row { flex-direction: column; align-items: flex-start; }
  .portada2-hero-ctas-row .btn { width: 100%; justify-content: center; }

  /* Gender cards */
  .hero-gender-cards-container { margin-top: -40px; }
  .hero-gender-cards-inner { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Cómo funciona */
  .como-funciona-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Gender programs */
  .gender-program-block {
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    background-image: none !important; /* La imagen se muestra via .gender-program-mobile-hero en móvil */
  }

  .block-woman,
  .block-man { background-color: #FAF6F0; }

  .gender-program-mobile-hero { display: block; }

  .gender-program-card {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-10) var(--page-margin);
    background: #FAF6F0;
    gap: var(--space-4);
  }

  .btn-saber-mas { width: 100%; justify-content: center; }

  /* Fármacos bullets */
  .bullets-dos-columnas { grid-template-columns: 1fr; }

  /* Carousel de "Tu senda hacia..." — el layout móvil real vive en
     blocks/propuesta-valor/styles.css (componente global, !important),
     esta regla duplicada quedaba muerta y solo generaba confusión. */

  .inner-destacado-equipo .equipo {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: 7.5vw;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .inner-destacado-equipo .equipo::-webkit-scrollbar { display: none; }

  .inner-destacado-equipo .equipo .persona {
    flex: 0 0 85vw;
    max-width: 85vw;
    scroll-snap-align: center;
  }

  /* Testimonios: carousel always active on mobile — override style.css !important grid rules */
  .page-template-page-portada-2 .testimonios-grid,
  .testimonios-grid.active,
  .testimonios-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: var(--space-6) !important;
    margin-inline: calc(-1 * var(--page-margin)) !important;
    padding-inline: 7.5vw !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: content-box !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .testimonios-grid::-webkit-scrollbar { display: none; }

  .testimonios-grid .testimonio-card-large {
    flex: 0 0 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: center !important;
    min-height: unset !important;
  }

  .header-cards-slider {
    padding: 0 var(--page-margin);
    text-align: left;
  }

  /* Texto-imagen stack */
  .inner-texto-imagen .columnas,
  #texto-imagen-block_68066326030e55743f52b93159cdb31a .columnas {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .inner-texto-imagen .columna-imagen,
  #texto-imagen-block_68066326030e55743f52b93159cdb31a .columna-imagen { order: -1; }
}

@media (min-width: 769px) {
  .gender-program-mobile-hero { display: none; }
}

/* =============================================================
   FIXES PORTADA
   ============================================================= */

/* 1-3. Precios / Incluye — movidos a blocks/precios-completos/styles.css
   y blocks/desglose-precio/styles.css (componentes compartidos). */

/* 4. Fármacos imagen — movido a blocks/farmacos/styles.css (componente
   compartido); imagen a tamaño natural, sin recorte forzado. */

/* 5. Footer app buttons junto al ICO — se hace en footer.css, no aquí */

/* 6. Megamenú Recursos desktop — 2 columnas sin títulos */
/* (manejado en sticky-menu.php con el inline style ya aplicado) */

/* ==========================================================================
   Móvil / tablet — HUECOS ENTRE BLOQUES.
   En desktop los límites de sección se ven por el cambio de color; en móvil
   varias secciones "sueltas" (sin wrapper de bloque de Gutenberg) heredan el
   margen global de WordPress (:where(...) > * { margin-block-start:24px }) y,
   sumado a los paddings verticales de los bloques crema/gris de al lado,
   generan vacíos grandes. Se aprietan las tres uniones que se ven mal:
   KPIs → vídeo, "incluye" → "Senda para mujeres", "Senda para hombres" →
   actualidad. Scoped a la portada para no tocar las landings, que comparten
   estos mismos bloques (kpi, ancho-completo, precios-completos).
   ========================================================================== */
@media (max-width: 768px) {
  /* 1) KPIs → imagen de vídeo: la imagen queda pegada bajo los KPIs
        (antes: 60px de padding + margen global => hueco sobre la imagen). */
  .page-template-page-portada-2 .block-kpis { padding-bottom: var(--space-6); }
  .page-template-page-portada-2 section.block-video { margin-top: 0 !important; }

  /* 2) "incluye" → bloque "Senda para mujeres": mata el margen global de WP. */
  .page-template-page-portada-2 .gender-programs-section { margin-top: 0 !important; }

  /* 3) bloque "Senda para hombres" → actualidad: mata el margen global + aprieta. */
  .page-template-page-portada-2 .portada2-actualidad-section {
    margin-top: 0 !important;
    padding-top: var(--space-6);
  }
  .gender-program-card {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
  }
}

/* ==========================================================================
   BOTONES DE GÉNERO BAJO EL HERO (.gender-card) — responsive.
   ========================================================================== */

/* Tarea 2 — Tablet: los dos botones en fila (uno al lado del otro), escalados
   para que entren. Desde 481px (muchos tablets reportan 600-768px en vertical,
   así que el corte de móvil debe estar por debajo). !important para ganarle a
   las reglas de 1 columna de ≤768px. */
@media (min-width: 481px) and (max-width: 1024px) {
  .hero-gender-cards-inner {
    display: grid !important;
    /* columnas de ancho fijo (más pequeñas) centradas como grupo */
    grid-template-columns: repeat(2, minmax(0, 230px)) !important;
    justify-content: center !important;
    gap: var(--space-3) !important;   /* menos hueco entre los dos */
    max-width: none !important;
    margin-inline: auto !important;
  }
  /* imágenes un poco más pequeñas dentro de la tarjeta */
  .hero-gender-cards-inner .gender-card-img { height: 104% !important; }
}

/* ── Accesos de género bajo el hero, en móvil ──────────────────────────────
   Dos botones SUELTOS, no una lista unida: 104 px de alto, 16 de radio,
   16 de separación, sin sombra. La foto va dentro de una caja de color que
   da el contraste sobre el fondo blanco de la página; el botón en sí es
   gris muy claro para que se lea como botón y no como tarjeta.
   Medidas dadas por diseño — no tocar a ojo. */
@media (max-width: 768px) {
  .hero-gender-cards-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* se deshacen el contenedor-lista y su sombra */
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .gender-card {
    display: grid;
    grid-template-columns: 80px 1fr 20px;
    align-items: center;
    /* 12 de hueco y 14 de padding, no 14 y 16: "Senda para el hombre" pide
       160px y con los valores anteriores la celda daba 159. Por un píxel
       partía en dos líneas. */
    gap: 12px;
    height: 104px !important;
    min-height: 104px !important;
    padding: 12px 14px !important;
    border-radius: 16px;
    background: #F6F6F6;
    box-shadow: none;
    transform: none;   /* sin desplazamiento al pulsar */
  }

  .gender-card:hover,
  .gender-card:active {
    transform: none;
    box-shadow: none;
  }

  /* style.css impone, con más especificidad y !important, gap:12px en el
     contenedor y margin-top:20px en cada tarjeta (≤920px). Sumados daban 32px
     de separación real. Se anulan aquí para dejar los 16px de la spec.
     Se iguala la especificidad; sin el prefijo .page-template- no gana. */
  .page-template-page-portada-2 .hero-gender-cards-inner { gap: 16px !important; }
  .page-template-page-portada-2 .gender-card { margin-top: 0 !important; }

  /* Ya no hay lista: fuera la línea que los unía. */
  .gender-card + .gender-card { border-top: 0; }

  /* Caja de color de la foto. Más saturada que en escritorio: sobre blanco,
     los tonos anteriores no hacían contraste suficiente. */
  .card-women .gender-card-image-box { background-color: #EFE3EE; }
  .card-men   .gender-card-image-box { background-color: #F6EBDA; }

  .gender-card .gender-card-image-box {
    position: relative;
    width: 80px !important;
    height: 80px !important;
    min-height: 0 !important;
    flex: 0 0 80px !important;
    aspect-ratio: auto;
    border-radius: 12px;
    overflow: hidden !important;   /* recorta a la persona en el borde */
  }

  /* La persona es un recorte con fondo transparente: se apoya en el suelo de
     la caja y sobresale por arriba, igual que en escritorio. `cover` la
     deformaba y le cortaba la cara. */
  .gender-card img,
  .gender-card picture,
  .gender-card .gender-card-img {
    position: absolute !important;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: auto !important;
    height: 116% !important;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
  }

  .gender-card-text-box {
    display: contents;   /* título y flecha pasan a ser celdas del grid */
  }

  .gender-card .gender-card-title,
  .gender-card h3 {
    font-size: 16px;
    line-height: 1.25;
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
  }

  /* Flecha del mismo negro que el texto: dentro del botón no hace falta
     un color más. */
  .gender-card .gender-card-arrow {
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .gender-card:hover .gender-card-arrow { transform: none; }
}