/* =====================================================================
   RESPONSIVE — SEGUROS (.seguros-page, prefijo sv- con overrides seguros)
   ---------------------------------------------------------------------
   Scope: .rsp .seguros-page (los estilos sv- son compartidos con
   Servicios; aquí se limita todo a la página Seguros).
   Móvil:  < 768px · Tablet: 768px – 1199.98px · Desktop (≥1200px) intacto.
   Principio: ADAPTAR, no redimensionar — del lienzo absoluto de 1440px
   a flujo normal manteniendo el diseño visual.
   ===================================================================== */

/* ────────────────────────────────────────────────────────────────────
   ESTRUCTURA COMÚN (móvil + tablet): absolutos → flujo
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

  /* ── Página: anula el alto fijo del lienzo (2750px) ── */
  .rsp .seguros-page {
    height: auto;
    display: flow-root; /* evita colapso de márgenes con el primer hijo */
    background: #ffffff;
  }

  /* ═══ SECCIÓN: HERO ═══ */
  /* Banner del hero: fondo absoluto de ancho completo (cover) */
  .rsp .seguros-page .sv-hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  /* Banda blanca decorativa del lienzo: innecesaria en flujo */
  .rsp .seguros-page .sv-white-band {
    display: none;
  }

  .rsp .seguros-page .sv-hero-subtitle,
  .rsp .seguros-page .sv-hero-title {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    z-index: 2;
  }

  /* (El overlay .sv-hero-overlay-image ya está oculto en Seguros
     por styles.css; no requiere regla adicional.) */

  /* ═══ SECCIÓN: DESCRIPCIÓN ═══ */
  .rsp .seguros-page .sv-description {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    text-align: center;
  }

  /* ═══ SECCIÓN: ALIANZA (Seguros Caracas + Mercantil) ═══ */
  .rsp .seguros-page .sv-alliance {
    position: relative;
    left: auto;
    top: auto;
    transform: none; /* anula translateX(-50%) — conserva solo el fade */
    width: 100%;
    max-width: none;
  }

  .rsp .seguros-page .sv-alliance.is-in {
    transform: none;
  }

  /* ═══ SECCIÓN: MARQUEE DE PÓLIZAS ═══ */
  .rsp .seguros-page .sv-marquee {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: auto;
  }

  /* ═══ DECORATIVO: vector de fondo de pasos ═══
     Dimensionado para el lienzo (2133×1429px): no encaja en flujo */
  .rsp .seguros-page .sv-steps-bg {
    display: none;
  }

  /* ═══ SECCIÓN: ¿CÓMO COMPRAR TU PÓLIZA?
         (pill + título + subtítulo + lista + slider) ═══ */
  .rsp .seguros-page .sv-pill {
    position: relative;
    left: auto;
    top: auto;
  }

  .rsp .seguros-page .sv-steps-title,
  .rsp .seguros-page .sv-steps-subtitle {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 560px;
  }

  .rsp .seguros-page .sv-steps-list {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 640px;
  }

  /* Los items ya superan 44px de alto táctil (padding 14/16 + texto) */

  /* Slider: las cards pasan de pila absoluta a pila en grid
     (todas en la misma celda) para que el alto sea automático
     y el crossfade siga funcionando */
  .rsp .seguros-page .sv-slider {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    display: grid;
  }

  .rsp .seguros-page .sv-slider .sv-step-card {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
  }

  .rsp .seguros-page .sv-step-card-text {
    width: 100%;
  }

  .rsp .seguros-page .sv-step-card-img {
    height: auto;
    aspect-ratio: 590 / 480; /* misma proporción que la card desktop */
  }
}

/* ────────────────────────────────────────────────────────────────────
   MÓVIL (< 768px)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ── HERO ── (homologado al patrón de Servicios: banner 555px,
     textos a 128px; la overlay image sigue oculta por styles.css) */
  .rsp .seguros-page .sv-hero-bg {
    height: 555px;
  }

  .rsp .seguros-page .sv-hero-subtitle {
    margin: 128px 24px 0;
    font-size: clamp(19px, 5.4vw, 24px);
    line-height: 1.25;
  }

  .rsp .seguros-page .sv-hero-title {
    /* margin-bottom prolonga el hero para que la descripción
       empiece sobre blanco (crece +180px junto con el banner
       380px → 555px) */
    margin: 8px 24px 300px;
    font-size: clamp(34px, 9.4vw, 44px);
    line-height: 1.08;
  }

  /* ── DESCRIPCIÓN — despegada del banner fotográfico ── */
  .rsp .seguros-page .sv-description {
    max-width: 700px;
    margin: 83px auto 0;
    padding: 50px 24px;
    font-size: 5.6vw;
  }

  /* ── ALIANZA ── */
  .rsp .seguros-page .sv-alliance {
    margin: 56px 0 0;
    padding: 24px;
    gap: 20px;
  }

  .rsp .seguros-page .sv-alliance__label {
    font-size: clamp(18px, 5vw, 20px);
  }

  /* Logos apilados en columna; el divisor pasa a línea horizontal */
  .rsp .seguros-page .sv-alliance__logos {
    flex-direction: column;
    gap: 18px;
  }

  .rsp .seguros-page .sv-alliance__logo {
    height: 60px;
  }

  .rsp .seguros-page .sv-alliance__divider {
    width: 72px;
    height: 1px;
  }

  /* ── MARQUEE DE PÓLIZAS ── */
  .rsp .seguros-page .sv-marquee {
    margin-top: 12px;
    padding: 26px 0;
  }

  .rsp .seguros-page .sv-marquee-group {
    gap: 56px;
    padding-left: 56px;
  }

  .rsp .seguros-page .sv-marquee-item-text {
    font-size: clamp(20px, 5.6vw, 26px);
  }

  /* ── ¿CÓMO COMPRAR TU PÓLIZA? — con más respiración entre textos ── */
  .rsp .seguros-page .sv-pill {
    margin: 72px 24px 0;
    padding: 14px 22px;
  }

  .rsp .seguros-page .sv-pill span {
    font-size: clamp(17px, 4.5vw, 19px);
    line-height: 1.3;
  }

  .rsp .seguros-page .sv-steps-title {
    margin: 30px 24px 0;
    font-size: clamp(22px, 6vw, 28px);
  }

  .rsp .seguros-page .sv-steps-subtitle {
    margin: 18px 24px 0;
    font-size: clamp(17px, 4.6vw, 19px);
    line-height: 1.5;
  }

  .rsp .seguros-page .sv-steps-list {
    margin: 40px 24px 0;
  }

  .rsp .seguros-page .sv-slider {
    width: calc(100% - 48px);
    margin: 36px auto 0;
    border-radius: 28px;
  }

  .rsp .seguros-page .sv-slider .sv-step-card {
    padding: 20px;
    border-radius: 28px;
    gap: 14px;
  }

  .rsp .seguros-page .sv-step-card-text {
    font-size: clamp(17px, 4.6vw, 19px);
  }

  .rsp .seguros-page .sv-downloads-overlay {
    bottom: 18px;
    gap: 10px;
  }

  .rsp .seguros-page .sv-downloads-overlay a {
    padding: 3px 0; /* alcanza ~46px de alto táctil */
  }

  .rsp .seguros-page .sv-downloads-overlay img {
    height: 40px;
  }

  /* Aire antes del footer (el slider es la última sección) */
  .rsp .seguros-page .sv-slider {
    margin-bottom: 64px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   TABLET (768px – 1199.98px)
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199.98px) {

  /* ── HERO ── (homologado al patrón de Servicios: banner 640px,
     textos a 150px) */
  .rsp .seguros-page .sv-hero-bg {
    height: 640px;
  }

  .rsp .seguros-page .sv-hero-subtitle {
    margin: 150px 48px 0;
    font-size: clamp(26px, 3.6vw, 34px);
  }

  .rsp .seguros-page .sv-hero-title {
    /* margin-bottom crece +160px junto con el banner 480px → 640px */
    margin: 10px 48px 310px;
    font-size: clamp(46px, 6.2vw, 60px);
    line-height: 1.04;
  }

  /* ── DESCRIPCIÓN ── */
  .rsp .seguros-page .sv-description {
    max-width: 760px;
    margin: 56px auto 0;
    padding: 0 48px;
    font-size: clamp(24px, 3vw, 28px);
  }

  /* ── ALIANZA ── */
  .rsp .seguros-page .sv-alliance {
    margin: 44px 0 0;
    padding: 24px 48px;
    gap: 24px;
  }

  .rsp .seguros-page .sv-alliance__logo {
    height: 72px;
  }

  /* ── MARQUEE DE PÓLIZAS ── */
  .rsp .seguros-page .sv-marquee {
    margin-top: 20px;
    padding: 30px 0;
  }

  .rsp .seguros-page .sv-marquee-group {
    gap: 72px;
    padding-left: 72px;
  }

  .rsp .seguros-page .sv-marquee-item-text {
    font-size: 28px;
  }

  /* ── ¿CÓMO COMPRAR TU PÓLIZA? ── */
  .rsp .seguros-page .sv-pill {
    margin: 64px 48px 0;
  }

  .rsp .seguros-page .sv-steps-title {
    margin: 20px 48px 0;
    font-size: clamp(26px, 3.4vw, 32px);
  }

  .rsp .seguros-page .sv-steps-subtitle {
    margin: 12px 48px 0;
    font-size: 20px;
  }

  .rsp .seguros-page .sv-steps-list {
    margin: 30px 48px 0;
  }

  .rsp .seguros-page .sv-slider {
    width: min(calc(100% - 96px), 650px);
    margin: 30px 48px 72px;
  }

  .rsp .seguros-page .sv-slider .sv-step-card {
    padding: 26px;
  }
}