/* ─────────────────────────────────────────────────────────────────────────────
   `reasonsTwoUp` — dos razones a igual ancho bajo una cabecera centrada.
   Ni fondo propio, ni cajas, ni bordes, ni iconos: sólo aire, tipografía y la
   flecha del kit. Todo el color sale de las variables (claro y oscuro salen
   solos). Una sola curva: cubic-bezier(.22,.61,.36,1).
   ───────────────────────────────────────────────────────────────────────────── */

/* la cabecera es corta: se acota para que el titular centrado no barra la página
   entera, y se permite partir la palabra larga alemana (a 38px en un móvil de
   390px, «Augenbrauenpflege» se salía del contenedor) */
.g-reasonsTwoUp-head {
  max-width: 780px;
  margin-inline: auto;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* las dos razones: mismo ancho, hueco grande. minmax(0,…) porque cada columna
   lleva titulillo y una palabra larga fijaría el min-content de la rejilla */
.g-reasonsTwoUp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(46px, 7vw, 112px);
  align-items: stretch;
  margin-top: clamp(48px, 6.5vh, 84px);
}

/* red de seguridad: con una sola razón la rejilla no deja media página hueca */
.g-reasonsTwoUp-grid.g-reasonsTwoUp-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 62ch;
  margin-inline: auto;
}

/* columna en flex para que el enlace caiga al PIE del bloque en los dos lados
   aunque los párrafos no midan igual: las dos mitades acaban a la misma altura */
.g-reasonsTwoUp-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.g-reasonsTwoUp-tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 14px;
}

.g-reasonsTwoUp-t {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(26px, 3.1vw, 40px);
  letter-spacing: var(--dt);
  line-height: 1.12;
  color: var(--text);
  /* a cuerpo de titular, `hyphens: auto` parte casi todas las líneas en alemán */
  hyphens: manual;
  overflow-wrap: break-word;
}

/* el párrafo llena la columna entera: ninguna mitad a medio ocupar */
.g-reasonsTwoUp-p {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--t2);
  margin-top: 14px;
  text-wrap: pretty;
}

.g-reasonsTwoUp-go {
  position: relative;
  align-self: flex-start;
  margin-top: auto; /* al pie del bloque */
  padding-top: clamp(24px, 3vh, 36px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display), sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color .3s cubic-bezier(.22,.61,.36,1);
}
.g-reasonsTwoUp-go::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--line2);
  transition: background .3s cubic-bezier(.22,.61,.36,1);
}
.g-reasonsTwoUp-go svg { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.g-reasonsTwoUp-go:hover { color: var(--a2); }
.g-reasonsTwoUp-go:hover::after { background: var(--a2); }
.g-reasonsTwoUp-go:hover svg { transform: translate(3px, -3px); }

/* ── móvil: una columna y un salto grande entre las dos razones ───────────── */
@media (max-width: 900px) {
  .g-reasonsTwoUp-grid,
  .g-reasonsTwoUp-grid.g-reasonsTwoUp-solo {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 8vh, 72px);
    margin-top: 36px;
    max-width: none;
  }
  .g-reasonsTwoUp-t { font-size: clamp(24px, 6.4vw, 32px); }
  .g-reasonsTwoUp-p { font-size: 16px; margin-top: 12px; }
  .g-reasonsTwoUp-go { padding-top: 22px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-reasonsTwoUp-go,
  .g-reasonsTwoUp-go::after,
  .g-reasonsTwoUp-go svg { transition: none; }
}