/* Extracted from index.php. Keep page-specific rules here. */
body{
      font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1000px 600px at 10% -10%, rgba(122,201,67,.18), transparent 55%),
        radial-gradient(900px 560px at 95% 5%, rgba(31,63,147,.16), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 42%, #ffffff 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    /* ========= HERO ========= */
    .hero{
      padding-top: 1.1rem;
      padding-bottom: 3rem;
    }
    .hero-card{
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-2);
      border: 1px solid rgba(15,23,42,.08);
    }
    .hero-media{
      position: relative;
      min-height: 360px;
      background: #0b1220;
    }
    .hero-media img{
      width:100%; height:100%; object-fit: cover;
      display:block;
      transform: scale(1.02);
    }
    .hero-overlay{
      position:absolute; inset:0;
      background: linear-gradient(90deg, rgba(16,39,97,.70) 0%, rgba(16,39,97,.35) 38%, rgba(16,39,97,.08) 70%, rgba(16,39,97,0) 100%);
    }
    .hero-copy{
      position:absolute; inset:0;
      padding: 1.25rem 1.25rem;
      display:flex; flex-direction: column; justify-content: end;
      gap: .9rem;
    }
    .hero-title{
      font-weight: 900;
      letter-spacing: -.02em;
      color: #fff;
      margin:0;
      font-size: clamp(2rem, 3.6vw, 3.2rem);
      line-height: 1.05;
      text-shadow: 0 10px 32px rgba(0,0,0,.35);
    }
    .hero-sub{
      color: rgba(255,255,255,.92);
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      margin:0;
      max-width: 52ch;
    }
    .hero-badges{
      display:flex; flex-wrap: wrap; gap:.5rem;
    }
    .pill{
      border-radius: 999px;
      padding: .35rem .7rem;
      font-weight: 800;
      font-size: .85rem;
      color: #fff;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      backdrop-filter: blur(8px);
    }

    #heroCarousel .hero-copy .btn-outline-brand{
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
      box-shadow: 0 14px 34px rgba(16,39,97,.28);
    }
    #heroCarousel .hero-copy .btn-outline-brand:hover,
    #heroCarousel .hero-copy .btn-outline-brand:focus{
      background: var(--brand-600);
      border-color: var(--brand-600);
      color: #fff;
      box-shadow: 0 18px 42px rgba(16,39,97,.34);
    }

    /* ========= INTENT SELECTOR ========= */
    .intent{
      margin: 34px auto 0;
      max-width: 1180px;
      position: relative;
      z-index: 3;
    }
    .intent .row{
      align-items: stretch;
      justify-content: center;
    }
    .intent-card{
      border-radius: var(--r-lg);
      border: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.86);
      box-shadow: var(--shadow-1);
      padding: 1.1rem 1.15rem;
      height: 100%;
      min-height: 104px;
      transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
      will-change: transform;
      cursor: pointer;
    }
    .intent-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-2);
    }
    .intent-ico{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(31,63,147,.10);
      border: 1px solid rgba(31,63,147,.16);
    }
    .intent-ico svg{ width: 22px; height: 22px; }
    .intent-title{ margin:0; font-weight: 900; }
    .intent-text{ margin:0; color: var(--muted); font-size: .95rem; }

    /* ========= PRODUCT CARDS ========= */
    .section{
      padding: 3.2rem 0 4.2rem;
    }
    .section-head{
      display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap: wrap;
      margin-bottom: 1.2rem;
    }

    /* Product reveal rhythm */
    .products-grid .product-reveal{
      will-change: opacity, transform;
    }
    .products-grid .product-reveal:nth-child(2){ transition-delay: .07s; }
    .products-grid .product-reveal:nth-child(3){ transition-delay: .14s; }
    .products-grid .product-reveal:nth-child(4){ transition-delay: .21s; }
    .card-pro{
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow-1);
      height: 100%;
      transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
    }
    .card-pro:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-2);
    }
    .card-pro .media{
      aspect-ratio: 16/10;
      overflow: hidden;
      background: #0b1220;
    }
    .card-pro img{ width:100%; height:100%; object-fit: cover; display:block; }
    .card-pro .body{
      padding: 1.1rem 1.1rem 1.2rem;
    }
    .kicker{
      display:inline-flex; gap:.45rem; align-items:center;
      font-weight: 900; font-size: .85rem;
      color: var(--brand-700);
      background: rgba(31,63,147,.08);
      border: 1px solid rgba(31,63,147,.12);
      border-radius: 999px;
      padding: .28rem .6rem;
    }
    .dot{
      width: 8px; height: 8px; border-radius: 99px; background: var(--accent);
      box-shadow: 0 0 0 4px rgba(122,201,67,.18);
    }

    /* ========= WHY US ========= */
    .why{
      background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0));
    }
    .why-card{
      border-radius: var(--r-lg);
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(15,23,42,.08);
      box-shadow: var(--shadow-1);
      padding: 1.1rem 1.15rem;
      height: 100%;
      transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
    }
    .why-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
    .why-ico{
      width: 46px; height: 46px;
      border-radius: 16px;
      display:grid; place-items:center;
      background: rgba(122,201,67,.14);
      border: 1px solid rgba(122,201,67,.22);
    }
    .why-ico svg{ width: 22px; height: 22px; }
/* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important; }
    }

    /* ========= HERO CAROUSEL 2026 ========= */
    .hero-card{ position: relative; }
    .hero-media{ height: 420px; min-height: 420px; } /* alto estable para el carrusel */
    @media (max-width: 576px){ .hero-media{ height: 430px; min-height: 430px; } }
    
    /* Overlay consistente para legibilidad */
    .hero-overlay{
      background: linear-gradient(90deg,
        rgba(16,39,97,.72) 0%,
        rgba(16,39,97,.42) 38%,
        rgba(16,39,97,.14) 70%,
        rgba(16,39,97,0) 100%);
    }
    
    /* Bootstrap carousel: modo fade + “cine” */
    #heroCarousel.carousel.carousel-fade .carousel-item{
      opacity: 0;
      transition: opacity 650ms var(--ease-out);
    }
    #heroCarousel.carousel.carousel-fade .carousel-item.active{
      opacity: 1;
    }
    #heroCarousel .carousel-item{
      position: relative;
    }
    #heroCarousel .carousel-item img{
      transform: scale(1.04);
      transition: transform 1400ms var(--ease-out);
      will-change: transform;
    }
    #heroCarousel .carousel-item.active img{
      transform: scale(1.00);
    }
    
    /* Texto: entrada suave al cambiar slide */
    #heroCarousel .hero-copy{
      transform: translateY(8px);
      opacity: 0;
      transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out);
    }
    #heroCarousel .carousel-item.active .hero-copy{
      transform: translateY(0);
      opacity: 1;
    }
    
    /* Bullets modernos */
    #heroCarousel .carousel-indicators{
      margin-bottom: .9rem;
      gap: .4rem;
    }
    #heroCarousel .carousel-indicators [data-bs-target]{
      width: 18px;
      height: 6px;
      border-radius: 999px;
      border: 0;
      opacity: .55;
      transition: width 220ms var(--ease-out), opacity 220ms var(--ease-out);
    }
    #heroCarousel .carousel-indicators .active{
      width: 34px;
      opacity: 1;
    }
    
    /* Controles minimal */
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next{
      width: 56px;
      opacity: 1;
    }
    #heroCarousel .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next-icon{
      width: 42px; height: 42px;
      border-radius: 999px;
      background-color: rgba(255,255,255,.16);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.22);
      background-size: 55% 55%;
      transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out);
    }
    #heroCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next:hover .carousel-control-next-icon{
      transform: translateY(-2px);
      background-color: rgba(255,255,255,.22);
    }
    
    /* Accesibilidad: reduce motion */
    @media (prefers-reduced-motion: reduce){
      #heroCarousel.carousel.carousel-fade .carousel-item,
      #heroCarousel .carousel-item img,
      #heroCarousel .hero-copy{
        transition: none !important;
        transform: none !important;
      }
    }

    /* ========= ANIMATED WAVES BACKGROUND ========= */
    body::before,
    body::after{
      content:"";
      position: fixed;
      inset: -20%;
      z-index: -1;
      pointer-events: none;
      filter: blur(80px);
      opacity: .9;
    }
    
    /* Wave 1 */
    body::before{
      background:
        radial-gradient(40% 35% at 20% 30%, var(--wave-blue-1), transparent 70%),
        radial-gradient(45% 40% at 80% 20%, var(--wave-blue-2), transparent 72%),
        radial-gradient(35% 30% at 60% 80%, var(--wave-blue-3), transparent 75%);
      animation: waveMoveA 22s linear infinite;
    }
    
    /* Wave 2 */
    body::after{
      background:
        radial-gradient(35% 30% at 30% 70%, var(--wave-blue-2), transparent 70%),
        radial-gradient(40% 35% at 70% 60%, var(--wave-blue-1), transparent 72%);
      animation: waveMoveB 28s linear infinite;
      opacity: .7;
    }
    
    /* Animaciones */
    @keyframes waveMoveA{
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(-6%, -4%) scale(1.05); }
      100% { transform: translate(0,0) scale(1); }
    }
    
    @keyframes waveMoveB{
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(5%, 6%) scale(1.08); }
      100% { transform: translate(0,0) scale(1); }
    }
    
    /* Accesibilidad */
    @media (prefers-reduced-motion: reduce){
      body::before,
      body::after{
        animation: none;
      }
    }

/* Mobile carousel image fill fix */
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item,
#heroCarousel picture {
  min-height: inherit;
  height: 100%;
}

#heroCarousel picture {
  display: block;
}

#heroCarousel .carousel-item img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 576px) {
  .hero {
    padding-top: .75rem;
  }

  .hero-card {
    border-radius: 22px;
  }

  .hero-media,
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item,
  #heroCarousel picture {
    height: 430px;
    min-height: 430px;
  }

  #heroCarousel .carousel-item img {
    object-position: 62% center;
  }

  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(8, 18, 42, .24) 0%,
      rgba(16, 39, 97, .66) 46%,
      rgba(8, 18, 42, .88) 100%);
  }

  .hero-copy {
    padding: 1rem 1.05rem 4.25rem;
    gap: .72rem;
  }

  .hero-badges {
    gap: .35rem;
  }

  .pill {
    font-size: .72rem;
    padding: .28rem .58rem;
  }

  .hero-title {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
    line-height: 1.02;
  }

  .hero-sub {
    font-size: .98rem;
    line-height: 1.5;
    max-width: 30ch;
  }

  .hero-copy .btn {
    font-size: .96rem;
    padding: .78rem .95rem;
  }

  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    align-items: flex-end;
    bottom: 5.6rem;
    top: auto;
    width: 50px;
  }

  #heroCarousel .carousel-control-prev-icon,
  #heroCarousel .carousel-control-next-icon {
    height: 38px;
    width: 38px;
  }

  #heroCarousel .carousel-indicators {
    margin-bottom: .72rem;
  }
}
/* Mobile overflow polish */
@media (max-width: 576px) {
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    display: none;
  }

  .intent-card .d-flex > div:last-child {
    min-width: 0;
  }

  .intent-title,
  .intent-text {
    overflow-wrap: anywhere;
  }
}
/* Samsung mobile hero and intent hardening */
@media (max-width: 575.98px) {
  .hero {
    overflow: hidden;
  }

  .hero > .container {
    max-width: 100vw;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-card,
  #heroCarousel,
  .hero-media {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
  }

  .hero-media,
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item,
  #heroCarousel picture {
    height: 440px;
    min-height: 440px;
  }

  .hero-copy {
    padding: 1rem 1rem 3.75rem;
  }

  .hero-title {
    font-size: clamp(1.72rem, 8.25vw, 2.15rem);
    max-width: 10.8em;
  }

  .hero-sub {
    font-size: .94rem;
    max-width: 28ch;
  }

  .hero-copy .d-flex {
    gap: .55rem !important;
  }

  .hero-copy .btn {
    border-radius: 999px;
    font-size: .92rem;
    padding: .72rem .86rem;
  }

  .intent {
    margin-top: 28px;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
  }

  .intent .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
    row-gap: 1rem;
  }

  .intent .row > * {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .intent-card {
    padding: 1rem;
    width: 100%;
  }

  .intent-card .d-flex {
    align-items: flex-start;
  }

  .intent-ico {
    flex: 0 0 44px;
  }

  .intent-title,
  .intent-text {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }
}
/* Viewport width clamp for mobile hero */
@media (max-width: 575.98px) {
  .hero > .container {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    width: 100vw;
  }

  .hero-card,
  .intent,
  .intent-card {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }

  .hero-title {
    font-size: clamp(1.62rem, 7.85vw, 2.02rem);
    max-width: 11.5em;
  }

  .hero-sub {
    max-width: 27ch;
  }

  .hero-copy .btn {
    font-size: .9rem;
    padding-left: .78rem;
    padding-right: .78rem;
  }

  .intent-title,
  .intent-text {
    white-space: normal;
  }
}
/* Final mobile text overflow override */
@media (max-width: 575.98px) {
  .intent,
  .intent-card,
  .intent-card .d-flex,
  .intent-card .d-flex > div:last-child {
    overflow: visible;
  }

  .intent-card {
    min-height: auto;
  }

  .intent-title,
  .intent-text {
    display: block;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: normal;
    text-wrap: pretty;
    white-space: normal;
    word-break: normal;
  }

  .intent-text {
    font-size: .92rem;
    line-height: 1.45;
  }
}
/* Final mobile card wrap override */
@media (max-width: 575.98px) {
  .intent-card .d-flex > div:last-child {
    flex: 1 1 0;
    max-width: calc(100% - 60px);
    min-width: 0;
    width: calc(100% - 60px);
  }

  .intent-title,
  .intent-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* Definitive mobile carousel rewrite */
@media (max-width: 767.98px) {
  .hero {
    padding-top: .75rem !important;
    padding-bottom: 2rem !important;
    overflow-x: hidden !important;
  }

  .hero > .container {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: visible !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100vw !important;
  }

  .hero-card {
    border-radius: 24px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
    width: calc(100vw - 24px) !important;
  }

  .hero-media,
  #heroCarousel,
  #heroCarousel .carousel-inner {
    background: #07101f !important;
    height: clamp(430px, 112vw, 520px) !important;
    min-height: 0 !important;
    max-height: 520px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
  }

  #heroCarousel .carousel-item {
    background: #07101f !important;
    height: clamp(430px, 112vw, 520px) !important;
    min-height: 0 !important;
    max-height: 520px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
  }

  #heroCarousel .carousel-item:not(.active) {
    display: none !important;
  }

  #heroCarousel picture {
    display: block !important;
    height: 100% !important;
    inset: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 100% !important;
    z-index: 0 !important;
  }

  #heroCarousel .carousel-item img {
    display: block !important;
    height: 100% !important;
    inset: 0 !important;
    object-fit: cover !important;
    object-position: 62% center !important;
    position: absolute !important;
    transform: none !important;
    width: 100% !important;
  }

  #heroCarousel .hero-overlay {
    background: linear-gradient(180deg,
      rgba(5, 13, 31, .22) 0%,
      rgba(16, 39, 97, .66) 43%,
      rgba(5, 13, 31, .9) 100%) !important;
    inset: 0 !important;
    position: absolute !important;
    z-index: 1 !important;
  }

  #heroCarousel .hero-copy {
    inset: 0 !important;
    justify-content: flex-end !important;
    opacity: 1 !important;
    padding: 1rem 1rem 3.2rem !important;
    position: absolute !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #heroCarousel .hero-badges {
    gap: .35rem !important;
    margin-bottom: .15rem !important;
  }

  #heroCarousel .pill {
    font-size: .7rem !important;
    line-height: 1.1 !important;
    padding: .28rem .52rem !important;
  }

  #heroCarousel .hero-title {
    font-size: clamp(1.62rem, 8.2vw, 2.08rem) !important;
    line-height: 1.04 !important;
    max-width: 11em !important;
  }

  #heroCarousel .hero-sub {
    font-size: .94rem !important;
    line-height: 1.45 !important;
    max-width: 29ch !important;
  }

  #heroCarousel .hero-copy .d-flex {
    gap: .55rem !important;
  }

  #heroCarousel .hero-copy .btn {
    border-radius: 999px !important;
    font-size: .9rem !important;
    line-height: 1.15 !important;
    padding: .72rem .8rem !important;
    white-space: nowrap !important;
  }

  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    display: none !important;
  }

  #heroCarousel .carousel-indicators {
    bottom: .7rem !important;
    left: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    right: 0 !important;
    z-index: 3 !important;
  }
}
/* Dynamic viewport carousel guard */
@media (max-width: 767.98px) {
  @supports (width: 100svw) {
    .hero > .container {
      max-width: 100svw !important;
      width: 100svw !important;
    }

    .hero-card {
      max-width: calc(100svw - 24px) !important;
      width: calc(100svw - 24px) !important;
    }
  }
}
/* Real mobile hero alternative */
.mobile-product-hero {
  display: none;
}

@media (max-width: 767.98px) {
  .hero-card {
    display: none !important;
  }

  .hero > .container {
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  .mobile-product-hero {
    display: grid;
    gap: 1rem;
    margin: 0 auto 1.35rem;
    max-width: 100%;
    width: 100%;
  }

  .mobile-product-hero-card {
    background: #07101f;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(2, 8, 23, .16);
    min-height: 470px;
    overflow: hidden;
    position: relative;
  }

  .mobile-product-hero-card::after {
    background: linear-gradient(180deg, rgba(5, 13, 31, .1) 0%, rgba(16, 39, 97, .56) 42%, rgba(5, 13, 31, .9) 100%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
  }

  .mobile-product-hero-card img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: 64% center;
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .mobile-product-hero-content {
    bottom: 0;
    color: #fff;
    left: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    z-index: 2;
  }

  .mobile-product-hero-content h1 {
    color: #fff;
    font-size: clamp(1.72rem, 7.4vw, 2.18rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.02;
    margin: .65rem 0 .75rem;
    max-width: 11.5em;
  }

  .mobile-product-hero-content p {
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
    line-height: 1.45;
    margin: 0 0 1rem;
    max-width: 30ch;
  }

  .mobile-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
  }

  .mobile-product-actions .btn {
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.1;
    padding: .8rem 1rem;
  }

  .mobile-product-options {
    display: grid;
    gap: .85rem;
  }

  .mobile-product-options a {
    align-items: flex-start;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(2, 8, 23, .08);
    color: var(--brand);
    display: grid;
    gap: .15rem;
    padding: 1rem;
    text-decoration: none;
  }

  .mobile-product-options span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
  }

  .mobile-product-options strong {
    color: var(--brand-700);
    font-size: 1.02rem;
    line-height: 1.25;
  }
}
/* Mobile product carousel behavior */
@media (max-width: 767.98px) {
  .mobile-product-hero {
    position: relative;
  }

  .mobile-product-track {
    display: block;
    min-height: 470px;
    position: relative;
  }

  .mobile-product-hero-card {
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(10px) scale(.995);
    transition: opacity 260ms ease, transform 260ms ease;
    width: 100%;
  }

  .mobile-product-hero-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    z-index: 2;
  }

  .mobile-product-control {
    align-items: center;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 2rem;
    font-weight: 400;
    height: 42px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    top: 31%;
    transform: translateY(-50%);
    width: 42px;
    z-index: 5;
  }

  .mobile-product-prev {
    left: .75rem;
  }

  .mobile-product-next {
    right: .75rem;
  }

  .mobile-product-dots {
    bottom: .75rem;
    display: flex;
    gap: .45rem;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 6;
  }

  .mobile-product-dots button {
    background: rgba(255, 255, 255, .48);
    border: 0;
    border-radius: 999px;
    height: 6px;
    padding: 0;
    transition: width 180ms ease, background-color 180ms ease;
    width: 20px;
  }

  .mobile-product-dots button.is-active {
    background: #fff;
    width: 34px;
  }

  .mobile-product-hero-content {
    padding-bottom: 3rem;
  }
}

@media (max-width: 380px) {
  .mobile-product-control {
    height: 38px;
    width: 38px;
  }

  .mobile-product-actions .btn {
    font-size: .88rem;
    padding-left: .82rem;
    padding-right: .82rem;
  }
}
/* Intent icon micro-animations */
.intent-ico{
  overflow: hidden;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.intent-card:hover .intent-ico{
  transform: translateY(-2px) scale(1.04);
  background: rgba(122,201,67,.14);
  border-color: rgba(31,63,147,.24);
}
.intent-motion{
  overflow: visible;
}
.intent-motion path,
.intent-motion circle{
  transform-box: fill-box;
  transform-origin: center;
}
.intent-motion-lease .lease-box,
.intent-motion-lease .lease-bed,
.intent-motion-lease .lease-lift{
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: intentDraw 3.8s ease-in-out infinite;
}
.intent-motion-lease .lease-bed{ animation-delay: .12s; }
.intent-motion-lease .lease-lift{ animation-delay: .28s; }
.intent-motion-lease .lease-wheel{
  animation: intentWheel 1.35s linear infinite;
}
.intent-motion-lease .lease-wheel-2{
  animation-delay: .12s;
}
.intent-card:hover .intent-motion-lease{
  animation: intentVehicleBob 1.2s ease-in-out infinite;
}
.intent-motion-build .build-foundation,
.intent-motion-build .build-walls,
.intent-motion-build .build-roof,
.intent-motion-build .build-door,
.intent-motion-build .build-window,
.intent-motion-build .build-crane{
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: intentBuildDraw 4.4s ease-in-out infinite;
}
.intent-motion-build .build-foundation{ animation-delay: 0s; }
.intent-motion-build .build-walls{ animation-delay: .35s; }
.intent-motion-build .build-roof{ animation-delay: .75s; }
.intent-motion-build .build-door{ animation-delay: 1.05s; }
.intent-motion-build .build-window{ animation-delay: 1.25s; }
.intent-motion-build .build-crane{
  animation-delay: 1.45s;
  transform-origin: 6.8px 7.6px;
}
.intent-card:hover .build-crane{
  animation-name: intentBuildDraw, intentCraneSwing;
  animation-duration: 4.4s, 1.35s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
.intent-motion-liquidity .liquidity-plus{
  animation: intentPulse 1.7s ease-in-out infinite;
}
.intent-motion-liquidity .liquidity-flow{
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: intentFlow 2.6s ease-in-out infinite;
}
.intent-motion-liquidity .liquidity-dot{
  opacity: .25;
  animation: intentDot 2.6s ease-in-out infinite;
}
.intent-motion-liquidity .liquidity-dot-2{
  animation-delay: .35s;
}
.intent-card:hover .intent-motion-liquidity{
  animation: intentLiquidityLift 1.2s ease-in-out infinite;
}
@keyframes intentDraw{
  0%{ stroke-dashoffset: 48; opacity: .55; }
  22%, 70%{ stroke-dashoffset: 0; opacity: 1; }
  100%{ stroke-dashoffset: 48; opacity: .55; }
}
@keyframes intentWheel{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes intentVehicleBob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1.5px); }
}
@keyframes intentBuildDraw{
  0%{ stroke-dashoffset: 42; opacity: .45; }
  28%, 72%{ stroke-dashoffset: 0; opacity: 1; }
  100%{ stroke-dashoffset: 42; opacity: .45; }
}
@keyframes intentCraneSwing{
  0%,100%{ transform: rotate(-4deg); }
  50%{ transform: rotate(5deg); }
}
@keyframes intentPulse{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.12); opacity: 1; }
}
@keyframes intentFlow{
  0%{ stroke-dashoffset: 34; opacity: .35; }
  42%, 75%{ stroke-dashoffset: 0; opacity: 1; }
  100%{ stroke-dashoffset: -34; opacity: .35; }
}
@keyframes intentDot{
  0%,100%{ transform: scale(.75); opacity: .25; }
  45%,70%{ transform: scale(1.25); opacity: 1; }
}
@keyframes intentLiquidityLift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1.4px); }
}
@media (prefers-reduced-motion: reduce){
  .intent-motion,
  .intent-motion *,
  .intent-card:hover .intent-motion-lease,
  .intent-card:hover .intent-motion-liquidity{
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}