/* =====================================================================
   RESPONSIVE HOME — PagoDirecto
   ---------------------------------------------------------------------
   Scope: `.rsp` (solo la página Home adaptada). Desktop ≥1200px intacto.

   Estructura:
     1. Bloque estructural compartido  @media (max-width: 1199.98px)
     2. Afinado móvil                  @media (max-width: 767.98px)
     3. Afinado tablet                 @media (768px – 1199.98px)

   Principio: ADAPTAR, no redimensionar. Cada sección pasa a flujo
   normal (flex/grid) conservando colores, gradientes, tipografías
   (Outfit / DM Sans), imágenes y orden de secciones del desktop.
   ===================================================================== */

/* ======================================================================
   1. BLOQUE ESTRUCTURAL COMPARTIDO (móvil + tablet)
   ====================================================================== */
@media (max-width: 1199.98px) {

  /* --------------------------------------------------------------
     GENERAL — secciones en flujo + seguridad de animaciones
     -------------------------------------------------------------- */
  .rsp .section,
  .rsp .hero {
    position: relative;
    width: 100%;
    height: auto;
  }

  /* Animaciones de entrada ACTIVAS también en responsive:
     los IntersectionObserver de Home.jsx usan threshold 0.15 en <1200px,
     así que siempre disparan y la web mantiene su fluidez inmersiva. */

  /* Canvas de partículas: lienzo fijo 1440×780 ligado al canvas
     desktop; no encaja en flujo responsive. */
  .rsp .tech-particles {
    display: none;
  }

  /* --------------------------------------------------------------
     HERO — apilado vertical y centrado
     (título → subtítulo → teléfono → badges → CTA)
     -------------------------------------------------------------- */
  .rsp .hero {
    overflow: hidden;
  }

  /* Fondo del hero se mantiene como fondo */
  .rsp .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .rsp .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rsp .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    height: auto;
    padding: 128px 24px 64px;
  }

  .rsp .hero-left,
  .rsp .hero-head {
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  /* Título hero: más grande y con brillo animado sutil (misma paleta) */
  .rsp .hero-title {
    text-align: center;
    font-size: clamp(38px, 10vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.5px;
    max-width: 14ch;
    margin: 0 auto;
    background: linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 38%,
      #aecbff 50%,
      #ffffff 62%,
      #ffffff 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rsp-hero-sheen 4.5s ease-in-out 1.2s infinite;
  }

  @keyframes rsp-hero-sheen {
    0%, 100% { background-position: 120% 0; }
    50% { background-position: -20% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rsp .hero-title {
      animation: none;
      background-position: 50% 0;
    }
  }

  .rsp .hero-subtitle {
    text-align: center;
    font-size: 17px;
    line-height: 26px;
    max-width: 560px;
    margin: 0 auto;
  }

  /* Teléfono del hero: re-centrado, sin offsets del lienzo fijo */
  .rsp .hero-center {
    width: 100%;
  }

  .rsp .hero-visual {
    width: auto;
    height: auto;
    perspective: none;
  }

  /* Tilt 3D desactivado en táctil */
  .rsp .hero-visual .hero-img-mask,
  .rsp .hero-visual .img-mask {
    transform: none !important;
  }

  .rsp .hero-img-mask {
    width: auto;
  }

  .rsp .hero-img-mask img,
  .rsp .hero-img-mask .img-mask-hero {
    width: min(260px, 62vw);
    height: auto;
    margin: 0 auto;
  }

  /* Columna derecha: pill + badges de descarga + CTA */
  .rsp .hero-right {
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .rsp .hero-right .hero-pill {
    text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
  }

  .rsp .hero-downloads {
    justify-content: center;
    gap: 12px;
  }

  .rsp .hero-store-link {
    min-height: 44px;
  }

  .rsp .hero-store-link img {
    width: min(190px, 43vw);
    height: auto;
  }

  .rsp .hero-actions {
    margin-top: 4px;
  }

  .rsp .hero-right .cta-pill {
    min-height: 48px;
  }

  /* --------------------------------------------------------------
     SECTION-CONNECT — "Conectamos personas, comercios y entidades"
     -------------------------------------------------------------- */
  .rsp .section-connect {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 12px;
    padding: 64px 24px;
    overflow: hidden;
  }

  /* Curva de fondo de 2100px ligada al lienzo fijo: no encaja */
  .rsp .section-connect .vector3-wrap {
    display: none;
  }

  /* Contenido de la sección por encima de los decorativos */
  .rsp .section-connect > *:not(.abs) {
    position: relative;
    z-index: 1;
  }

  /* Elipse "connect" restaurada: mismo papel que en desktop,
     anclada al arco de iconos y escalada al dispositivo */
  .rsp .section-connect > .abs:first-child {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Como en desktop: el círculo respalda la sección — el arco de
       iconos queda sobre su borde superior y el título solapa el
       círculo. !important: el div trae left/top/width/height INLINE
       del lienzo 1440 que ganarían a esta regla. */
    left: 50% !important;
    top: 58px !important;
    bottom: 0 !important;
    width: min(112vw, 700px) !important;
    height: auto !important;
    transform: translateX(-50%);
    aspect-ratio: auto;
    z-index: 0;
    pointer-events: none;
  }

  .rsp .section-connect > .abs:first-child img {
    width: 80%;
    height: 80%;
    padding-top: 20px;
    margin: 0 auto; /* centrado dentro del contenedor */
    display: block;
  }

  /* Seguridad: los iconos del arco siempre visibles en responsive
     (si el observer de entrada tarda, no quedan en opacity 0) */
  .rsp .section-connect .icon-arc-item {
    opacity: 1;
  }

  /* Arco de iconos: MISMA composición del desktop a escala.
     Contenedor con el ratio original (859×290) y cada icono en su
     posición porcentual equivalente; conserva rotaciones, entrada
     escalonada y la deriva por scroll (reducida al 30% del valor
     que el JS calcula para el lienzo de 1440px). */
  .rsp .section-connect .icon-arc {
    position: relative;
    /* anula las coordenadas del lienzo 1440 (left 299px / top 1009px):
       con position relative desplazaban el arco fuera de la sección */
    left: auto;
    top: auto;
    flex: 0 0 auto;
    width: min(88vw, 540px);
    height: auto;
    aspect-ratio: 859 / 290;
    margin: 0 auto;
    pointer-events: none;
    z-index: 1;
  }

  .rsp .section-connect .icon-arc-item {
    position: absolute;
    width: 11.8%; /* 101.3px / 859px del diseño */
    height: auto;
    transform:
      translate(
        calc((var(--from-x) + var(--scroll-x)) * 0.3),
        calc((var(--from-y) + var(--scroll-y)) * 0.3)
      )
      scale(0.7)
      rotate(var(--rotate));
  }

  .rsp .section-connect .icon-arc.icon-arc--in .icon-arc-item {
    transform:
      translate(calc(var(--scroll-x) * 0.3), calc(var(--scroll-y) * 0.3))
      scale(1)
      rotate(var(--rotate));
  }

  /* Posiciones % equivalentes a las coordenadas px del desktop */
  .rsp .section-connect .icon-arc-top       { left: 44.1%; top: 2%; }
  .rsp .section-connect .icon-arc-right-mid { left: 66.3%; top: 17.2%; }
  .rsp .section-connect .icon-arc-right     { left: 80.4%; top: 66.8%; }
  .rsp .section-connect .icon-arc-left-mid  { left: 21.5%; top: 17.2%; }
  .rsp .section-connect .icon-arc-left      { left: 6.6%;  top: 67.2%; }

  .rsp .section-connect .section-title {
    position: static;
    transform: none;
    width: auto;
    max-width: 620px;
    flex: 0 0 100%;
    margin: 8px auto 0;
    font-size: clamp(30px, 7.5vw, 46px);
    line-height: 1.16;
  }

  .rsp .section-connect .section-copy {
    position: static;
    transform: none;
    width: auto;
    max-width: 560px;
    flex: 0 0 100%;
    margin: 0 auto 8px;
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.45;
  }

  /* Chips flotantes → fila ordenada bajo el texto (parallax off) */
  .rsp .section-connect .chip {
    position: static;
    transform: none !important;
    width: auto;
    min-width: 148px;
    height: 60px;
    min-height: 44px;
    font-size: 15px;
  }

  /* --------------------------------------------------------------
     SECTION-ALL — "No busques más: aquí lo tienes todo."
     -------------------------------------------------------------- */
  .rsp .section-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 64px 24px 72px;
    overflow: hidden;
  }

  .rsp .section-all .section-title-2 {
    position: static;
    transform: none;
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.18;
    text-align: center;
  }

  .rsp .section-all .section-copy-2 {
    position: static;
    transform: none;
    width: auto;
    max-width: 580px;
    margin: 0 auto;
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.45;
    text-align: center;
  }

  /* Wrappers .abs con coordenadas inline → a flujo */
  .rsp .section-all .abs {
    position: static;
    width: 100% !important;
    height: auto !important;
  }

  /* Watermark de fondo (SVG de 800px alto anclado al lienzo fijo):
     se sustituye por el panel .todo-panel con el mismo degradado. */
  .rsp .section-all .watermark-bg {
    display: none;
  }

  /* Panel azul degradado — equivalente responsive de icon-label-bg.svg
     (#040B1E → #123084 → #4D6FCE), como en la versión de escritorio */
  .rsp .section-all .todo-panel {
    position: relative;
    width: 100%;
    max-width: 840px;
    /* margen inferior: espacio para que el teléfono se asome fuera del panel */
    margin: 8px auto 64px;
    border-radius: 28px;
    background: linear-gradient(150deg, #040B1E 0%, #123084 55%, #4D6FCE 118%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 20px 0;
    overflow: visible;
  }

  /* Tarjetas de soluciones */
  .rsp .section-all .icon-row {
    display: grid;
    justify-items: center;
    align-items: start;
    width: 100%;
  }

  .rsp .section-all .icon-card {
    width: 112px;
    height: 112px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Etiquetas siempre visibles (no hay hover en táctil) */
  .rsp .section-all .icon-label {
    opacity: 1;
    transform: translateX(-50%);
  }

  /* Palabras marca de agua "tienes / todo." separadas, sin parallax */
  .rsp .section-all .watermark-row {
    position: static;
    display: flex;
    justify-content: center;
    gap: clamp(28px, 9vw, 72px);
    width: 100%;
    max-width: 640px;
    height: auto;
    margin-bottom: -20px;
  }

  .rsp .section-all .watermark {
    position: static;
    transform: none !important;
    font-size: clamp(30px, 8vw, 68px);
    line-height: 1;
  }

  /* El teléfono se asoma fuera del panel azul, hacia la sección siguiente */
  .rsp .section-all .todo-panel > .abs:last-child .services-img-mask img,
  .rsp .section-all .todo-panel > .abs:last-child .services-img-mask .img-mask-phone-main {
    margin-bottom: -64px;
    filter: drop-shadow(0 22px 34px rgba(4, 10, 40, 0.35));
  }

  /* Teléfono "tienes todo" re-centrado */
  .rsp .section-all .services-img-mask {
    width: auto;
    display: flex;
    justify-content: center;
  }

  .rsp .section-all .services-img-mask img,
  .rsp .section-all .services-img-mask .img-mask-phone-main {
    width: min(300px, 70vw);
    height: auto;
    margin: 0;
  }

  /* --------------------------------------------------------------
     SECTION-PARKING — "Líderes en pago de estacionamientos"
     -------------------------------------------------------------- */
  .rsp .section-parking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 72px 24px;
    overflow: hidden;
  }

  /* Curva decorativa de 2154px ligada al lienzo fijo */
  .rsp .section-parking .parking-swoosh {
    display: none;
  }

  /* Panel degradado: de tarjeta con coordenadas fijas a fondo inset */
  .rsp .section-parking .parking-gradient {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 24px;
    bottom: 24px;
    width: auto;
    height: auto;
    border-radius: 28px;
    z-index: 0;
  }

  .rsp .section-parking .section-title-3,
  .rsp .section-parking .section-copy-3 {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 1;
    width: auto;
    margin: 0 auto;
    text-align: center;
  }

  .rsp .section-parking .section-title-3 {
    max-width: 620px;
    font-size: clamp(30px, 7.5vw, 46px);
    line-height: 1.16;
  }

  .rsp .section-parking .section-copy-3 {
    max-width: 560px;
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.45;
  }

  /* Video/foto del estacionamiento: a flujo, ratio original 1000:556 */
  .rsp .section-parking .parking-shot {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 760px;
    height: auto !important;
    aspect-ratio: 1000 / 556;
    margin: 8px auto 0;
    border-radius: 24px !important;
    transform: none !important;
    z-index: 1;
  }

  .rsp .section-parking .parking-shot-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rsp .section-parking .parking-shot-play {
    right: 16px;
    bottom: 16px;
    width: 64px;
    height: 64px;
  }

  .rsp .section-parking .parking-shot-play svg {
    width: 26px;
    height: 26px;
  }

  .rsp .section-parking .parking-shot iframe {
    position: absolute;
    inset: 0;
  }

  /* --------------------------------------------------------------
     SECTION-BANKING — "Somos aliados de la banca nacional"
     -------------------------------------------------------------- */
  .rsp .section-banking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 92px 24px 100px;
    overflow: hidden;
  }

  /* Degradado azul: pasa de bloque con coordenadas fijas a fondo full */
  .rsp .section-banking .banking-bg {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .rsp .section-banking .section-title-4,
  .rsp .section-banking .section-copy-4 {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 1;
    width: auto;
    margin: 0 auto;
    text-align: center;
  }

  .rsp .section-banking .section-title-4 {
    max-width: 560px;
    font-size: clamp(30px, 7.5vw, 46px);
    line-height: 1.16;
  }

  .rsp .section-banking .section-copy-4 {
    max-width: 560px;
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.45;
  }

  /* Tarjeta blanca con logos de bancos */
  .rsp .section-banking .bank-strip {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 16px auto 0;
    padding: 46px 28px;
    border-radius: 32px;
    gap: 32px;
  }

  .rsp .section-banking .bank-hero {
    gap: 14px;
  }

  .rsp .section-banking .bank-hero-copy {
    text-align: center;
    font-size: clamp(18px, 4.5vw, 24px);
  }

  .rsp .section-banking .bank-hero-logo {
    height: 56px;
  }

  .rsp .section-banking .bank-strip-label {
    text-align: center;
    line-height: 1.4;
  }

  /* Logos: filas con wrap, centrados */
  .rsp .section-banking .bank-strip-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 28px;
  }

  .rsp .section-banking .bank-strip-row img {
    flex: 0 0 auto;
    max-height: 36px;
    max-width: 128px;
  }

  /* --------------------------------------------------------------
     SECTION-VIDEO — CTA final "¿Listo para pagar a tu manera?"
     -------------------------------------------------------------- */
  .rsp .section-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 100px 44px;
    overflow: hidden;
  }

  /* Fondo (imagen + tinte multiply): tarjeta redondeada inset,
     igual lenguaje visual que desktop */
  .rsp .section-video > .abs {
    position: absolute;
    left: 12px !important;
    top: 12px !important;
    right: 12px;
    bottom: 12px;
    width: auto !important;
    height: auto !important;
    border-radius: 28px !important;
    z-index: 0;
  }

  .rsp .section-video > .abs .cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rsp .section-video .section-title-5,
  .rsp .section-video .section-copy-5 {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 1;
    width: auto;
    margin: 0 auto;
    text-align: center;
  }

  .rsp .section-video .section-title-5 {
    max-width: 520px;
    font-size: clamp(28px, 7vw, 42px);
    line-height: 1.18;
  }

  .rsp .section-video .section-copy-5 {
    max-width: 520px;
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.45;
  }

  /* Botones apilados y centrados */
  .rsp .section-video .cta-row {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 10px;
  }

  .rsp .section-video .cta-secondary,
  .rsp .section-video .cta-primary {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 56px;
    padding: 14px 20px;
    text-align: center;
  }

  .rsp .section-video .cta-secondary {
    font-size: 17px;
    line-height: 1.3;
  }
}

/* ======================================================================
   2. AFINADO MÓVIL (< 768px)
   ====================================================================== */
@media (max-width: 767.98px) {

  /* HERO — respiración más ajustada */
  .rsp .hero-inner {
    padding: 118px 24px 56px;
    gap: 24px;
  }

  /* SECTION-CONNECT — chips en cuadrícula 2×2 (fila envolvente) */
  .rsp .section-connect {
    padding: 56px 24px;
  }

  .rsp .section-connect .chip {
    flex: 0 1 calc(50% - 8px);
    min-width: 0;
    max-width: 175px;
    height: 56px;
    padding: 0 12px;
    gap: 8px;
  }

  .rsp .section-connect .chip-icon {
    width: 24px;
    height: 24px;
    flex: none;
  }

  /* SECTION-ALL — pirámide invertida: 3 tarjetas arriba, 2 abajo */
  .rsp .section-all .icon-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 44px 8px;
    padding-bottom: 30px;
  }

  .rsp .section-all .icon-row .icon-card:nth-child(-n+3) {
    grid-column: span 2;
  }

  .rsp .section-all .icon-row .icon-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .rsp .section-all .icon-row .icon-card:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .rsp .section-all .icon-card {
    width: 96px;
    height: 96px;
  }

  /* SECTION-PARKING — play táctil algo menor en pantallas chicas */
  .rsp .section-parking {
    padding: 56px 20px;
  }

  .rsp .section-parking .parking-shot-play {
    width: 56px;
    height: 56px;
    right: 14px;
    bottom: 14px;
  }

  /* SECTION-BANKING — más aire entre elementos */
  .rsp .section-banking {
    padding: 84px 20px 92px;
    gap: 26px;
  }

  .rsp .section-banking .bank-strip {
    padding: 40px 22px;
    border-radius: 26px;
    gap: 30px;
  }

  /* CTA FINAL — más espacio interno dentro del recuadro */
  .rsp .section-video {
    padding: 92px 40px;
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

/* ======================================================================
   3. AFINADO TABLET (768px – 1199.98px)
   ====================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {

  /* HERO — más aire, teléfono y tipografía mayores */
  .rsp .hero-inner {
    padding: 150px 48px 80px;
    gap: 32px;
  }

  .rsp .hero-title {
    font-size: clamp(44px, 5.5vw, 56px);
  }

  .rsp .hero-subtitle {
    font-size: 18px;
    line-height: 27px;
    max-width: 620px;
  }

  .rsp .hero-img-mask img,
  .rsp .hero-img-mask .img-mask-hero {
    width: 280px;
  }

  /* SECTION-CONNECT — chips en una sola fila (con wrap de reserva) */
  .rsp .section-connect {
    padding: 72px 48px;
    gap: 20px 16px;
  }

  .rsp .section-connect .section-title {
    font-size: clamp(40px, 4.8vw, 52px);
    max-width: 680px;
  }

  .rsp .section-connect .chip {
    height: 64px;
  }

  /* SECTION-ALL — 5 tarjetas en fila */
  .rsp .section-all {
    padding: 72px 48px 80px;
  }

  .rsp .section-all .section-title-2 {
    font-size: clamp(38px, 4.6vw, 50px);
  }

  .rsp .section-all .icon-row {
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 24px;
    padding-bottom: 34px;
  }

  .rsp .section-all .icon-card {
    width: 116px;
    height: 116px;
  }

  .rsp .section-all .services-img-mask img,
  .rsp .section-all .services-img-mask .img-mask-phone-main {
    width: 340px;
  }

  .rsp .section-all .watermark-row {
    max-width: 780px;
    margin-bottom: -26px;
  }

  .rsp .section-all .todo-panel {
    margin-bottom: 84px;
  }

  .rsp .section-all .todo-panel > .abs:last-child .services-img-mask img,
  .rsp .section-all .todo-panel > .abs:last-child .services-img-mask .img-mask-phone-main {
    margin-bottom: -84px;
  }

  /* SECTION-PARKING */
  .rsp .section-parking {
    padding: 88px 48px;
    gap: 24px;
  }

  .rsp .section-parking .parking-gradient {
    left: 24px;
    right: 24px;
    top: 32px;
    bottom: 32px;
    border-radius: 30px;
  }

  .rsp .section-parking .section-title-3 {
    font-size: clamp(40px, 4.8vw, 52px);
    max-width: 700px;
  }

  .rsp .section-parking .parking-shot-play {
    width: 74px;
    height: 74px;
    right: 24px;
    bottom: 24px;
  }

  /* SECTION-BANKING */
  .rsp .section-banking {
    padding: 108px 48px 116px;
    gap: 34px;
  }

  .rsp .section-banking .section-title-4 {
    font-size: clamp(40px, 4.8vw, 52px);
  }

  /* Alianza BDV en fila como desktop ancho */
  .rsp .section-banking .bank-hero {
    flex-direction: row;
    gap: 28px;
  }

  .rsp .section-banking .bank-hero-copy {
    text-align: right;
  }

  .rsp .section-banking .bank-hero-logo {
    height: 64px;
  }

  .rsp .section-banking .bank-strip {
    padding: 44px 48px;
    gap: 26px;
  }

  .rsp .section-banking .bank-strip-row {
    gap: 24px 36px;
  }

  .rsp .section-banking .bank-strip-row img {
    max-height: 42px;
    max-width: 140px;
  }

  /* CTA FINAL — botones en fila centrada */
  .rsp .section-video {
    padding: 124px 76px;
    gap: 24px;
  }

  .rsp .section-video > .abs {
    left: 24px !important;
    top: 20px !important;
    right: 24px;
    bottom: 20px;
    border-radius: 36px !important;
  }

  .rsp .section-video .section-title-5 {
    font-size: clamp(38px, 4.6vw, 46px);
  }

  .rsp .section-video .cta-row {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }

  .rsp .section-video .cta-secondary,
  .rsp .section-video .cta-primary {
    width: auto;
    min-width: 220px;
    max-width: none;
    padding: 14px 28px;
  }
}