/* === Gotham Rounded (Light 300, Book 400, Medium 500, Bold 700; con sus itálicas) === */
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-Book.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-BookItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Gotham Rounded";
  src: url("assets/fonts/GothamRnd-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* === Gotham “Thin” separado (100) — opcional para títulos finos === */
@font-face{
  font-family: "Gotham";
  src: url("assets/fonts/Gotham-Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}

/* =========================
   TOKENS / BASE
========================= */
:root{
  --ultra-purple:#5b1ba6;
  --ultra-deeppurple:#46157f;
  --ultra-pink:#ff4ea6;
  --ultra-orange:#ff7a29;
  --ultra-cream:#fff4e8;
  --nav-h:96px;
  --font-gotham-rnd: "Gotham Rounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --font-gotham-thin: "Gotham", var(--font-gotham-rnd);
}

html{ scroll-behavior:smooth; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', 'Noto Sans', Arial, 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  color:#fff; background:var(--ultra-purple);
}
img{ max-width:100%; height:auto; }
.flag{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
section, header#home{ scroll-margin-top: var(--nav-h); }

/* =========================
   NAVBAR
========================= */
#ultraNav{ background:#fff; transition:box-shadow .2s ease, background .2s ease; }
#ultraNav.is-sticky{ box-shadow:0 10px 30px rgba(0,0,0,.12); }

.brand-logo{ height: clamp(44px, 7vw, 55px); width:auto; display:block; }

#ultraNav .navbar-nav{ gap: clamp(14px, 2.2vw, 32px); }
#ultraNav .nav-link{ color:#4a197f; font-weight:700; letter-spacing:.2px; }
#ultraNav .nav-link:hover, #ultraNav .nav-link.active{ color:var(--ultra-pink) !important; }

.navbar-toggler{ border:0; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(90,27,166)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  padding-top:4rem;           /* altura cómoda bajo nav */
  padding-bottom:10rem;       /* espacio para dock de previews */
  background:#e23c8d;         /* placeholder + transición al morado del sitio */
}
.hero-swiper .swiper-slide{ min-height: calc(100vh - var(--nav-h)); position:relative; }
.hero-slide{ width:100%; height:100%; position:relative; overflow:hidden; }
.hero-slide-1{ background:none !important; }  /* usas <img> */
.hero-img-full{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* PREVIEW DOCK (mitad dentro / mitad fuera) */
.slider-dock{ bottom:-80px; z-index:5; }
.slider-preview{
  display:flex; align-items:center; gap:10px; overflow-x:auto;
  padding:10px; border-radius:1rem;
}
.slider-thumb{
  min-width:240px; height:160px; border-radius:.8rem; border:0; cursor:pointer;
  position:relative; overflow:hidden; margin:0 20px;
  background:#666; filter:grayscale(1) contrast(.9) brightness(.9);
}
.slider-thumb::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
}
.slider-thumb.active{ filter:none; }

/* Thumbs con la foto real */
.slider-thumb[data-slide="0"]{ background:#666 url("slide1/background1.png") center/cover no-repeat; }
.slider-thumb[data-slide="1"]{ background:#666 url("slide1/background2.png") center/cover no-repeat; }
.slider-thumb[data-slide="2"]{ background:#666 url("slide1/background3.png") center/cover no-repeat; }

/* =========================
   SECTIONS / UTILS
========================= */
.badge-chip{ background:var(--ultra-orange); color:#fff; border-radius:2rem; padding:.4rem .9rem; font-weight:700; box-shadow:0 2px 0 rgba(0,0,0,.15) }
section{ scroll-margin-top:84px }
.section-alt{ background:#e23c8d; }
.section-warm{ background:#f7a911; }

/* =========================
   NUMBERS (imagen centrada + 3 horizontales)
========================= */
.numbers-block .numbers-title-img{ width:min(92vw,980px); display:block; }
.numbers-block .numbers-item-img{ width:min(92vw,420px); display:block; }

/* =========================
   CREAMY (amarillo)
========================= */
.creamy-block .creamy-title-img{ width:min(96vw,1500px); }
.creamy-block .creamy-item-img{ width:clamp(220px, 22vw, 320px); }
.section-warm{ padding-top:7rem !important; padding-bottom:7rem !important; }

/* separaciones de las 2 inferiores, centradas */
#creamy .row.g-3.g-lg-4{ --bs-gutter-x:10rem; --bs-gutter-y:.75rem; justify-content:center; }
@media (min-width:768px){
  #creamy .row.g-3.g-lg-4 > .col-md-6{ flex:0 0 auto; width:auto; }
}
@media (min-width:1200px){
  .creamy-block .creamy-title-img{ width:min(92vw,1600px); }
  .creamy-block .creamy-item-img{ width:clamp(240px, 20vw, 320px); }
}

/* =========================
   PRODUCTS — banner superior y carrusel
========================= */
#products{ background:#6e2382; }

/* Full-bleed util (rompe .container a 100vw) */
.full-bleed{
  width:100vw; position:relative;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}

/* Banner superior (una sola imagen + colibrí invertido) */
.products-top-wrap{ position:relative; width:100%; min-height:clamp(520px, 58vw, 820px); overflow:visible; }
.products-top-wrap .ptc-art{ position:absolute; inset:0; margin:auto; width:min(1400px, 92vw); max-height:90%; object-fit:contain; pointer-events:none; }

/* Colibrí (mirando a la IZQUIERDA con vaivén) */
.ptc-colibri{
  position:absolute; top:clamp(-10px, -1.2vw, -18px); right:clamp(-8px, -1vw, -14px);
  width:clamp(120px, 18vw, 260px); transform:scaleX(-1); z-index:3; pointer-events:none;
}
.ptc-colibri-anim{ animation: colibriFloatX 3.5s ease-in-out infinite; transform-origin:20% 70%; }
.ptc-colibri img{ width:100%; display:block; }

/* ÚNICA keyframes (usada también en el footer) */
@keyframes colibriFloatX{
  0%{ transform:translateX(0) rotate(0deg); }
  50%{ transform:translateX(12px) rotate(.3deg); }
  100%{ transform:translateX(0) rotate(0deg); }
}

/* Carrusel productos (una sola versión, sin duplicados) */
.products-carousel-wrap.full-bleed{ /* deja full width pero cards con tamaño controlado */
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}
.products-swiper{ overflow:visible; padding:0 72px; }         /* padding interno para flechas */
.products-swiper .swiper-slide{
  width:clamp(220px, 28vw, 360px);
  transition: transform .35s ease, opacity .35s ease;
}
.products-swiper .swiper-slide-active{ transform:scale(1.04); z-index:2; }
.products-swiper .swiper-slide-next,
.products-swiper .swiper-slide-prev{ transform:scale(1.01); }

/* Tarjeta y preview con la foto real */
#products .product-card{ border-radius:1.25rem; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
#products .product-card a{ display:block; }
#products .product-card .ratio.thumb{ background:transparent; }
#products .product-card .thumb-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; user-select:none; -webkit-user-drag:none;
}
@media (hover:hover){
  #products .product-card .thumb-img{ transition: transform .35s ease; }
  .products-swiper .swiper-slide-active .thumb-img{ transform: scale(1.02); }
}

/* Flechas tipo mockup */
.prod-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%; border:0; display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, #ff63b5, #d4388f);
  box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:10;
  transition:left .35s ease, top .35s ease, transform .2s ease;
}
.prod-prev{ left:8px; } .prod-next{ right:8px; }
.prod-nav i{ font-size:26px; color:var(--ultra-orange); line-height:1; }

/* =========================
   INVEST (flyer + form encima)
========================= */
.invest-wrap{ position:relative; max-width:1240px; margin-inline:auto; overflow:visible; padding-bottom:max(64px, 7vmin); }
.invest-art{ width:100%; display:block; border-radius:2rem;}

.invest-form{
  position:absolute; z-index:2; overflow:visible;
  top:6%; right:4%; bottom:6%; width:43%;
  display:block;
}

/* Título en 2 líneas */
.invest-form .form-title{
  margin:0 0 .75rem 0; line-height:1.1; color:#9a9a9a; font-weight:300;
}
.invest-form .form-title .title-top{ display:block; font-size:clamp(26px, 3.2vw, 36px); letter-spacing:-.3px; }
.invest-form .form-title .title-top strong{ font-weight:800; color:#9a9a9a; }
.invest-form .form-title .title-sub{ display:block; margin-top:.2rem; font-size:clamp(16px, 1.8vw, 28px); color:#bdbdbd; font-weight:400; }

/* Grid — una sola columna (evita duplicados) */
.invest-form .grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.invest-form .field{ display:flex; flex-direction:column; }
.invest-form .actions{ margin-top:.25rem; }

/* Campos “card blanco” */
.invest-form .form-control,
.invest-form .form-select,
.invest-form textarea{
  background:#fff; border-radius:.9rem; border:2px solid #ededed; padding:.8rem 1rem;
}
.invest-form .form-control:focus,
.invest-form .form-select:focus,
.invest-form textarea:focus{
  border-color:#c065ff; outline:0;
}
.invest-form .form-control::placeholder,
.invest-form .form-select:invalid{ color:#9a9a9a; opacity:1; }

/* Botón pill y posición mitad fuera */
.invest-form .actions{
  position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%); z-index:6; width:auto;
}
.btn-ultra{
  display:inline-block; padding:.9rem 2.5rem; border-radius:9999px; border:0; font-weight:800;
  font-size:clamp(18px, 2.2vw, 28px); color:#fff;
  background:linear-gradient(180deg, #ff66b8, #e34397);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .15s ease, filter .15s ease;
}
.btn-ultra:hover{ filter:brightness(1.05); transform:translateY(-1px); color: #fff; }
.btn-ultra:active{ transform:translateY(0); }

/* =========================
   FOOTER (blanco + colibrí animado)
========================= */
footer.ultra-footer{
  background:#fff !important; color:var(--ultra-purple);
  position:relative; overflow:visible; box-shadow:0 -2px 0 rgba(0,0,0,.04) inset;
}
.footer-colibri{ position:absolute; left:-50px; top:-100px; width:clamp(120px, 20vw, 240px); pointer-events:none; }
.footer-colibri .colibri-img{ width:100%; animation:colibriFloatX 2.5s ease-in-out infinite; transform-origin:20% 70%; }

.footer-logo{ height:clamp(36px, 5.2vw, 72px); width:auto; }
.footer-socials{ display:flex; gap:clamp(12px, 2.2vw, 20px); }
.footer-socials a{
  width:clamp(40px, 5.5vw, 60px); height:clamp(40px, 5.5vw, 60px);
  border-radius:50%; background:var(--ultra-pink); color:#fff; display:grid; place-items:center;
  font-size:clamp(18px, 2.8vw, 26px); box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, filter .15s ease;
}
.footer-socials a:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.footer-flag{ background:transparent; border:0; padding:0; line-height:0; }
.footer-copy{ color:var(--ultra-purple); opacity:.85; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:991.98px){
  .hero{ padding-bottom:8rem; }
  .hero-swiper .swiper-slide{ min-height:80vh; }

  .slider-thumb{ min-width:200px; height:140px; }
  .slider-dock{ bottom:-70px; }

  .products-swiper{ padding:0 56px; }
  .prod-nav{ width:50px; height:50px; }

  .invest-form{ top:5%; right:4%; bottom:5%; width:56%; }
  .invest-form .grid{ grid-template-columns:1fr; }
}
@media (max-width:575.98px){
  .hero-swiper .swiper-slide{ min-height:78vh; }
  .slider-thumb{ min-width:160px; height:120px; }
  .slider-dock{ bottom:-60px; }

  .products-swiper{ padding:0 44px; }
  .prod-nav{ width:44px; height:44px; }
  .prod-nav i{ font-size:22px; }

  .invest-form{
    top:5%; bottom:auto; width:88%;
    left:50%; right:auto; transform:translateX(-50%);
    padding-bottom:1rem;
  }
  .invest-form .actions{ transform:translate(-50%, 40%); }

  .footer-colibri{ width:150px; left:-10px; }
  .footer-socials{ justify-content:center; width:100%; }

  .ptc-colibri{ width: clamp(110px, 34vw, 170px); top:-6px; right:-6px; }
}
/* --- FIX hero: dar altura al contenedor interno del slide --- */
.hero-swiper .swiper-slide{
  min-height: calc(100vh - var(--nav-h)); /* alto visual del slide */
  /* NO forces position here; let Swiper handle it (fade effect) */
}

.hero-slide{
  min-height: inherit;      /* hereda la altura del .swiper-slide */
  position: relative;       /* referencia para .hero-img-full absoluta */
}

.hero-img-full{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* ===== Modal de inversión ===== */
.invest-modal .modal-dialog{
  max-width: min(1240px, 96vw);
}
.invest-modal .modal-content{ background: transparent; }
.invest-modal .modal-body{ padding: 0; overflow: visible; }

/* Botón cerrar flotando sobre el arte */
.invest-modal .modal-close{
  position: absolute; top: 12px; right: 12px; z-index: 30;
  filter: invert(1);                 /* que sea visible sobre fondos oscuros */
  background: rgba(0,0,0,.25);       /* leve píldora oscura */
  border-radius: 50%;
  padding: 10px;
}

/* El botón “Submit” que sale mitad afuera funciona porque invest-wrap/invest-form
   ya tienen overflow: visible y posicionamientos definidos */

   /* --- Carrusel full-bleed real de lado a lado --- */
.products-carousel-wrap.full-bleed{
  width:100vw; position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  overflow:visible;
}

/* Ancho interior y espacio para flechas */
.products-swiper{ overflow:visible; padding:0 72px; }
@media (max-width:992px){ .products-swiper{ padding:0 56px; } }
@media (max-width:576px){ .products-swiper{ padding:0 44px; } }

/* Slides con tamaño controlado (Swiper en 'auto') */
.products-swiper .swiper-wrapper{ align-items:stretch; }
.products-swiper .swiper-slide{
  width: clamp(220px, 28vw, 360px);
  transition: transform .35s ease, opacity .35s ease;
}
.products-swiper .swiper-slide-active{ transform: scale(1.04); z-index:2; }
.products-swiper .swiper-slide-next,
.products-swiper .swiper-slide-prev{ transform: scale(1.01); }

/* Miniatura = imagen real, borde redondeado */
#products .product-card .ratio.thumb{
  border-radius: 28px; overflow:hidden; background:transparent;
}
#products .product-card .thumb-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  user-select:none; -webkit-user-drag:none;
}

.big-img {
  margin-left: 10rem;
}
/* Flechas pegadas a los costados del full-bleed */
.prod-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%; border:0;
  display:grid; place-items:center; z-index:10; pointer-events:auto;
  background: radial-gradient(circle at 30% 30%, #ff63b5, #d4388f);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.prod-prev{ left:8px; } .prod-next{ right:8px; }
.prod-nav i{ font-size:26px; color:#ff7a29; line-height:1; }
/* Formulario (bloque) */
.invest-form,
.invest-form input,
.invest-form select,
.invest-form textarea,
.invest-form .btn-ultra{
  font-family: var(--font-gotham-rnd);
  font-weight: 400; /* Book por defecto */
}

/* Título con mezcla de thin + bold como en tu diseño */
.invest-form .form-title{
  font-family: var(--font-gotham-thin);
  font-weight: 100;
}
.invest-form .form-title strong{
  font-family: var(--font-gotham-rnd);
  font-weight: 700;
}
/* TEST: fuerzo la fuente en todo el bloque del form */
.invest-form,
.invest-form *{
  font-family: "Gotham Rounded", Arial, sans-serif !important;
}
/* Anclar flechas al slide activo */
.products-carousel-wrap.use-slide-anchored-arrows {
  --arrow-gap: 10px;  /* separación respecto al borde del slide */
}

.products-carousel-wrap.use-slide-anchored-arrows .prod-nav{
  position: absolute;
  top: 50%;                 /* JS actualizará top/left en runtime */
  left: auto; right: auto;  /* limpiamos posiciones fijas previas */
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: auto;
}

/* Pequeño ajuste para que la izquierda “mire” desde afuera del slide */
.products-carousel-wrap.use-slide-anchored-arrows .prod-prev{
  transform: translate(-60%, -50%);   /* 60% para que quede un pelín afuera */
}
.products-carousel-wrap.use-slide-anchored-arrows .prod-next{
  transform: translate(-40%, -50%);   /* compensa el icono mirando a la dcha */
}

/* ===== HERO: MOBILE FRIENDLY ===== */

/* Tablet: thumbnails más chicos y menos solape */
@media (max-width: 991.98px){
  .hero{ padding-bottom: 4.5rem; }           /* menos espacio para el dock */
  .slider-dock{ bottom:-48px; }
  .slider-thumb{ min-width: 160px; height: 110px; margin: 0 8px; }
}

/* Teléfono: mostrar la imagen completa (contain) y mover los thumbs debajo */
@media (max-width: 575.98px){
  /* Alto estable en iOS: usar 100svh para evitar barras del navegador */
  .hero-swiper .swiper-slide{
    min-height: calc(100svh - var(--nav-h));
  }

  /* La imagen ya no se recorta, se encaja completa */
  .hero-img-full{
    object-fit: contain;                     /* <- clave para no cortar */
    background:
      radial-gradient(800px 400px at 50% 20%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(180deg, #e23c8d 0%, #5b1ba6 100%);  /* “relleno” bonito */
  }

  /* Si algún slide necesita otro encuadre aun con contain, ajusta su foco: */
  /* .hero-slide-1 .hero-img-full{ object-position: 50% 40%; } */
  /* .hero-slide-2 .hero-img-full{ object-position: 50% 50%; } */
  /* .hero-slide-3 .hero-img-full{ object-position: 50% 45%; } */

  /* Mover los thumbnails fuera del hero para evitar solapes */
  .hero .slider-dock{
    position: static !important;             /* saca el absolute */
    left: auto; right: auto; bottom: auto;
    transform: none !important;
    margin: .75rem auto 0;
  }

  .slider-preview{
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }

  .slider-thumb{
    min-width: 110px; height: 72px;
    margin: 0 4px;
    border-radius: .6rem;
    filter: grayscale(.2) contrast(.95) brightness(.98);
  }
}

/* Teléfonos muy angostos */
@media (max-width: 380px){
  .slider-thumb{ min-width: 96px; height: 64px; }
}

/* === HERO: reducir márgenes verticales en mobile/tablet === */

/* Teléfonos */
@media (max-width: 575.98px){
  .hero{
    padding-top: .75rem;          /* antes 4rem */
    padding-bottom: 3.25rem;      /* antes 10rem */
  }
  .hero-swiper .swiper-slide{
    /* menos alto, pero con mínimo en px para no quedar muy chico */
    min-height: clamp(420px, 60vh, 680px);
  }
  .slider-dock{ bottom: -28px; }  /* acerca los thumbs al slide */
  .slider-preview{ padding: 6px 8px; gap: 8px; }
  .slider-thumb{
    min-width: 120px;
    height: 86px;
    margin: 0 6px;
    border-radius: .6rem;
  }
  .big-img {
    margin-left: 0;
  }
}

/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px){
  .hero{
    padding-top: 1rem;
    padding-bottom: 4.5rem;
  }
  .hero-swiper .swiper-slide{ min-height: 68vh; }
  .slider-dock{ bottom: -38px; }
  .slider-thumb{
    min-width: 150px;
    height: 100px;
    margin: 0 10px;
  }
  .big-img {
    margin-left: 0;
  }
}

/* Thumbnails: gris por defecto + color en activo */
.slider-preview .slider-thumb{
  filter: grayscale(1) contrast(.92) brightness(.9);
  transition: filter .2s ease, transform .2s ease;
}
.slider-preview .slider-thumb.active{
  filter: none !important;
  transform: translateY(-2px);
}

/* ------------------------------
   INVEST — responsive sólido
   Desktop: PNG + overlay
   Mobile: card blanca apilada
--------------------------------*/

/* Desktop/tablet: igual que ahora */
.invest-wrap{
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  overflow: visible;
  padding-bottom: max(64px, 7vmin); /* espacio para el botón flotante */
}
.invest-art{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2rem;
}
.invest-form{
  position: absolute;
  z-index: 2;
  overflow: visible;
  top: 6%;
  right: 4%;
  bottom: 6%;
  width: 43%;
}
.invest-form .actions{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%); /* mitad afuera en desktop */
  z-index: 6;
  width: auto;
}

/* Tablet medio: un poco más ancho el panel del form */
@media (max-width: 991.98px){
  .invest-form{ top: 5%; right: 4%; bottom: 5%; width: 56%; }
}

/* ===== Mobile (≤768): apilar y convertir en card ===== */
@media (max-width: 767.98px){
  /* Ocultamos el PNG para evitar recortes del “panel blanco” embebido */
  .invest-art{ display:none; }

  /* El wrapper queda como fondo neutro */
  #invest .container{ padding-left: 16px; padding-right: 16px; }

  /* El formulario se vuelve una tarjeta blanca normal */
  .invest-form{
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
    background: #fff;
    border-radius: 24px;
    padding: 20px 16px 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
  }

  /* Título más compacto */
  .invest-form .form-title{
    margin-bottom: .5rem;
    color: #8e8e8e;
  }
  .invest-form .form-title .title-top{
    font-size: clamp(20px, 6.2vw, 28px);
    letter-spacing: -0.2px;
  }
  .invest-form .form-title .title-sub{
    font-size: clamp(13px, 4.2vw, 16px);
    color: #b7b7b7;
  }

  /* Grid ya es 1 col; mantenemos gap agradable */
  .invest-form .grid{ gap: 10px; }

  /* Campos cómodos al tacto */
  .invest-form .form-control,
  .invest-form .form-select,
  .invest-form textarea{
    padding: .9rem 1rem;
    border-radius: 14px;
  }

  /* Botón dentro de la card (no flotante) y centrado */
  .invest-form .actions{
    position: static;
    transform: none;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .btn-ultra{
    font-size: clamp(16px, 4.4vw, 18px);
    padding: .85rem 1.6rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
  }
}

/* Ajuste extra para móviles muy chicos */
@media (max-width: 420px){
  .invest-form{ padding: 16px 12px 20px; }
}

/* ===== Mismo tratamiento cuando aparece como MODAL ===== */
.invest-modal .modal-dialog{ max-width: min(1240px, 96vw); }
.invest-modal .modal-content{ background: transparent; }
.invest-modal .modal-body{ padding: 0; overflow: visible; }

/* Cerrar flotante visible sobre fondos */
.invest-modal .modal-close{
  position: absolute; top: 12px; right: 12px; z-index: 30;
  filter: invert(1);
  background: rgba(0,0,0,.25);
  border-radius: 50%;
  padding: 10px;
}

/* En mobile, el modal usa la misma card que la versión apilada */
@media (max-width: 767.98px){
  .invest-modal .invest-art{ display: none; }
  .invest-modal .invest-form{
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
    background: #fff;
    border-radius: 24px;
    padding: 20px 16px 28px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
  }
  .invest-modal .modal-dialog{
    margin: .75rem auto;
  }
  .invest-modal .modal-body{
    max-height: calc(100vh - 1.5rem);
    overflow: auto;           /* si el teclado ocupa espacio, que scrollee */
  }
}
/* --- Guardarraíl global: sin scroll horizontal --- */
html, body { overflow-x: hidden; }

/* --- Full-bleed que no empuja por la barra de scroll (calc en vez de -50vw) --- */
.products-carousel-wrap.full-bleed{
  overflow-x: hidden;         /* <- clave: que nada “ensanche” el body */
}

/* El contenedor Swiper no debe desbordar horizontalmente */
.products-swiper{ overflow: hidden; }   /* antes lo tenías visible en algunas versiones */
@media (min-width: 768px) and (max-width: 1920px) {
  .invest-form .form-title .title-top, .invest-form .form-title .title-sub {
    font-size: 25px;
  }
}

.invest-modal .modal-close{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 9999px;

  /* IMPORTANTE: no usar 'background:'; así no quitamos el ícono */
  background-color: #e23c8d;;

  /* Deja la X en blanco (la predeterminada es negra) */
  filter: none;
  opacity: unset;

  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  z-index: 1065;
  color: white;
}
.invest-modal .modal-close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}