/*
  componente_originacion_terminacion (mobile-first)
  - Used by templates/paragraph--originacion-y-terminacion-de-lla.html.twig.
    Mismo look de tarjeta redondeada que componente_comparativa_imagen_lateral,
    pero SIN slider ni ola: las cajas (foto + titulo + lista con asteriscos +
    boton) se apilan en 1 columna en mobile/tablet-v y pasan a 2 columnas
    desde 996px.
  - Las cajas pares (2da, 4ta...) llevan fondo rosa suave, como en el mockup.
  - Mismos breakpoints reales que el resto del theme: mobile y tablet-v
    (760px) renderizan en 1 columna, tablet-h (996px) y desktop (1366px) en 2
    columnas — el query de 1366px es intencionalmente un no-op.
*/

.componente_originacion_terminacion {
  background: color-mix(in srgb, var(--color-fondo, transparent) calc(var(--color-fondo-opacity, 0) * 100%), transparent);
  padding-top: 32px;
}

.componente_originacion_terminacion_inner {
  position: relative;
  overflow: hidden;
  background: var(--iplan-bg-soft);
  max-width: 1308px;
  margin: 0 auto;
  border-radius: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.componente_originacion_terminacion_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  width: 100%;
}

.componente_originacion_terminacion_title {
  color: #FD006E;
text-align: center;

/* Titulo bold */
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 42px; /* 105% */
}

.componente_originacion_terminacion_subtitle {
  width: 100%;
  font-family: Inter;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0%;
  color: #7B828C;
  text-align: center;
  max-width: 936px;
  margin: 0 auto;
}

.componente_originacion_terminacion_subtitle b {
  font-weight: 700;
}

/* Base (mobile/tablet-v): 1 sola columna. */
.componente_originacion_terminacion_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

.componente_originacion_terminacion_box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  padding: 16px 16px 28px;
  border: 1px solid var(--iplan-pink, #fd006e);
  border-radius: 40px;
  background: transparent;
  text-align: left;
}

.componente_originacion_terminacion_box:nth-child(even) {
  background: rgba(253, 0, 110, 0.10);
}

.componente_originacion_terminacion_box_media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 32px;
}

.componente_originacion_terminacion_box_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.componente_originacion_terminacion_box_text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  padding: 0 4px;
  font-family: Inter;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0%;
  color: #7B828C;
}

.componente_originacion_terminacion_box_text h2,
.componente_originacion_terminacion_box_text h3,
.componente_originacion_terminacion_box_text h4 {
 color: #7B828C;
text-align: center;

/* Titulo bold mobile */
font-family: Inter;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.componente_originacion_terminacion_box_text p {
  margin: 0;
}

.componente_originacion_terminacion_box_text ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.componente_originacion_terminacion_box_text li {
  position: relative;
  padding-left: 28px;
  color: #7B828C;

/* Texto */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

/* Asterisco del theme en lugar del bullet nativo (mismo PNG que
   componente_conoce_opciones.css). */
.componente_originacion_terminacion_box_text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: url('/themes/contrib/iplan_b4/NEW/img/asteriscoform.png') center / contain no-repeat;
}

.componente_originacion_terminacion_box_text b,
.componente_originacion_terminacion_box_text strong {
  font-weight: 700;
}

.componente_originacion_terminacion_box_cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

/* Overrides el look sitewide de .button_mercury (mayusculas, padding chico)
   para que coincida con el pill "Contratar" del mockup. */
.componente_originacion_terminacion_btn {
  padding: 12px 32px;
  border-radius: 999px;
  background-color: var(--iplan-pink, #fd006e);
  color: #fff;
  font-family: var(--font-family-mont);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  border: none;
  width: 100%;
  max-width: 180px;
}

.componente_originacion_terminacion_footer {
  width: 100%;
  max-width: 640px;
  margin: 16px auto 0;
  font-family: Inter;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: #7B828C;
  text-align: center;
}

.componente_originacion_terminacion_footer h2,
.componente_originacion_terminacion_footer h3,
.componente_originacion_terminacion_footer h4 {
  margin: 0 0 8px;
  font-family: Inter;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #7B828C;
}

.componente_originacion_terminacion_footer h3 {
  color: #7B828C;
  text-align: center;

  /* Titulo bold mobile */
  font-family: Inter;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.componente_originacion_terminacion_footer p {
  margin: 0;
}

.componente_originacion_terminacion_footer_text {
  color: #7B828C;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.componente_originacion_terminacion_footer_cta {
  margin-top: 24px;
}

.componente_originacion_terminacion_footer_cta .componente_originacion_terminacion_btn {
  max-width: 220px;
}

.componente_originacion_terminacion_footer b,
.componente_originacion_terminacion_footer strong {
  font-weight: 700;
}

/* Tablet vertical — layout identico a mobile (1 columna), solo crece la tipografia. */
@media (min-width: 760px) {
  .componente_originacion_terminacion_content {
    padding: 40px 32px;
  }

  /* .componente_originacion_terminacion_title {
    font-size: 32px;
    line-height: 36px;
  } */

  .componente_originacion_terminacion_subtitle {
    font-size: 18px;
  }

  .componente_originacion_terminacion_box {
    padding: 24px 24px 32px;
  }

  .componente_originacion_terminacion_box_text {
    padding: 0 12px;
  }
}

/* Tablet horizontal — el unico cambio real: las cajas pasan a 2 columnas. */
@media (min-width: 996px) {
  .componente_originacion_terminacion_inner {
    border-radius: 60px;
  }

  .componente_originacion_terminacion_content {
    gap: 14px;
    padding: 48px 64px 32px;
  }

  /* .componente_originacion_terminacion_title {
    font-size: 40px;
    line-height: 42px;
  } */

  .componente_originacion_terminacion_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .componente_originacion_terminacion_box {
    border-radius: 60px;
    padding: 32px 20px 32px;
  }

  .componente_originacion_terminacion_box_media {
    border-radius: 40px;
  }

  .componente_originacion_terminacion_box_text {
    padding: 0 12px;
  }

  .componente_originacion_terminacion_btn {
    width: auto;
  }
}

/* Desktop — intentionally identical to tablet-h, no overrides here. */
@media (min-width: 1366px) {
}