/* Navbar */

@media (max-width: 991.98px) {
  .navbar .container-fluid{
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
}

@media (max-width: 991.98px) {
  .navbar .container-fluid {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  /* Icono a la izquierda, texto alineado, buen hit-area */
  .navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;           /* espacio entre icono y texto */
    padding: 0.75rem 0; /* mejora la pulsación */
    line-height: normal;
  }

  .navbar .nav-icon {
    width: 28px;        /* tamaño uniforme */
    height: 28px;
    flex: 0 0 28px;     /* no se deforma ni cambia de ancho */
    object-fit: contain;/* evita estirarse */
    display: block;
  }
}

/* Color base de los links del navbar */
.navbar .nav-link {
  color: #536b78 !important;   /* tu color preferido */
  font-weight: 400;
  text-decoration: none !important;
  transition: color 0.2s ease-in-out;
}

/* Hover/focus: mantiene tu acento */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #138BCC !important;   /* color de acento al pasar el mouse */
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .navbar-brand img{
    height: 45px;
  } 
}


/* ===== Navbar: mobile ===== */
@media (max-width: 991.98px) {
  /* el contenedor de la navbar sin márgenes en mobile */
  .navbar .container-fluid {
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* el panel colapsado ocupa todo el ancho y se separa un pelín del botón */
  .navbar .navbar-collapse {
    width: 100%;
    margin-top: 8px;
  }

  /* “tarjeta” de la lista: borde suave y esquinas redondeadas */
  .navbar .navbar-nav {
    width: 100%;
    background: #E8F3F7;  /* mismo fondo que la barra */
    border: 2px solid rgba(77, 81, 84, 0.12);
    overflow: hidden; /* para que los separadores no sobresalgan */
  }

  /* cada ítem con buen área de toque */
  .navbar .nav-item {
    padding: 12px 16px;
  }

  /* separadores sutiles entre ítems (solo del segundo en adelante) */
  .navbar .nav-item + .nav-item {
    border-top: 2px solid rgba(77, 81, 84, 0.12);
  }

  /* icono + texto alineados */
  .navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;              /* el padding ya lo da .nav-item */
    line-height: normal;
  }

  .navbar .nav-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    display: block;
  }

  /* ajuste del logo en mobile (opcional) */
  .navbar-brand img {
    height: 45px;
  }

  .navbar{
    padding-bottom: 0px !important;
  }
  .navbar-nav {
    margin-bottom: 0 !important;
  }

  .navbar-brand {
    margin-left: 20px
  }
  .navbar-toggler{
    margin-right: 20px;
  }

}


/* Navbar */



/* Carousel */

/* Flecha izquierda */
.carousel-control-prev-icon {
  background-image: url('/resources/svg/flecha-prev.svg') !important;
  background-size: contain;
  background-repeat: no-repeat;
  width: 4rem;   /* ajusta tamaño */
  height: 4rem;
}

/* Flecha derecha */
.carousel-control-next-icon {
  background-image: url('/resources/svg/flecha-next.svg') !important;
  background-size: contain;
  background-repeat: no-repeat;
  width: 4rem;
  height: 4rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: none !important;
}

.carousel-control-prev {
  left: -2rem;   /* empuja más a la izquierda */
}
.carousel-control-next {
  right: -2rem;  /* empuja más a la derecha */
}

/* Botones de navegación del carrusel más arriba */
.carousel-control-prev,
.carousel-control-next {
  top: 40%; /* antes estaba en 50% */
  transform: translateY(-50%);
}

@media (max-width: 991.98px) {
  .carousel-control-prev,
  .carousel-control-next {
    top: 42%; /* en móviles a veces se sienten más descentradas */
  }
}

/* Botón CTA sobre el slide */
#carousel .carousel-item { position: relative; }

#carousel .carousel-item img {
  height: 80vh;
  object-fit: cover;
  object-position: left;
}

.carousel-cta{
  position: absolute;
  left: clamp(144px,11vw, 288px);
  bottom: clamp(144px, 11vw, 288px);
  z-index: 3;

  background: #138BCC;
  color: #E8F3F7;
  border: 0;
  border-radius: 999px;
  /* padding: clamp(8px, 1.2vw, 12px) clamp(14px, 2vw, 18px); */
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 36px);
  padding: 1.5rem 2.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.carousel-cta:hover,
.carousel-cta:focus{
  filter: brightness(1.05);
  outline: none;
}


@media (max-width: 991.98px) {
  #carousel .carousel-item img{
    height: 75vh;           /* ajusta a gusto */
    object-fit: cover;
    object-position: center;
  }

  .carousel-cta{
    left: clamp(24px, 6vw, 48px);
    bottom: clamp(24px, 6vw, 56px);
    font-size: clamp(18px, 4.5vw, 22px);
    padding: .9rem 1.4rem;
  }
}

@media (max-width: 991.98px) {
  /* Carousel en móvil */
  #carousel {
    margin-top: 1rem !important;   /* antes tenías mt-5 (~3rem) */
  }

  #carousel .carousel-item img {
    height: 72vh;                  /* más alto (puedes subir a 100vh si quieres full pantalla) */
    object-fit: cover;
    object-position: center;          /* alinear al top */
  }

  /* Controles (flechas) dentro de la imagen */
  .carousel-control-prev,
  .carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;                 /* más pequeño */
    height: 2.5rem;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 2rem;                   /* íconos más chicos */
    height: 2rem;
    background-size: contain;
  }

  /* acercamos los botones al borde pero dentro de la imagen */
  .carousel-control-prev {
    left: 0.8rem;
  }
  .carousel-control-next {
    right: 0.8rem;
  }
}

/* LG: 992–1199px — bájalo un poco */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .carousel-cta {
    bottom: clamp(48px, 7vw, 96px) !important;
  }
}

/* XL: 1200–1399px — bájalo un poco menos */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  #carousel{
    margin-top: 1rem !important;
  }
  .carousel-cta {
    bottom: clamp(72px, 8vw, 120px) !important;
  }
}

/* LG: 992–1199px — baja las flechas igual que el CTA */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .carousel-control-prev,
  .carousel-control-next {
    top: calc(50% + 40px) !important;   /* baja ~lo mismo que el CTA */
    transform: translateY(-50%);        /* mantiene centrado relativo */
  }
}

/* XL: 1200–1399px — baja un poco menos (igual que el CTA) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .carousel-control-prev,
  .carousel-control-next {
    top: calc(50% + 24px) !important;
    transform: translateY(-50%);
  }
}

/* XXL: ≥1400px — baja las flechas */
@media (min-width: 1400px) {
  .carousel-control-prev,
  .carousel-control-next {
    top: calc(50% + 32px) !important; /* si aún las ves altas: prueba 36–40px */
    transform: translateY(-50%);
  }
}

/* Texto overlay del slide */
#carousel .hero-copy{
  position: absolute;
  left: clamp(144px, 11vw, 288px);
  bottom: calc(clamp(144px, 11vw, 288px) + 120px); /* un poco más arriba que el CTA */
  z-index: 1;
  color: #fff;
  max-width: min(46ch, 48vw);
}

#carousel .hero-title{
  margin: 0 0 .2em 0;
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 72px);
  letter-spacing: .2px;
}
#carousel .hero-subtitle{
  margin: 0 0 .35em 0;
  font-size: clamp(40px, 6.5vw, 50px);
  font-weight: 600;
  line-height: 1;
  opacity: .95;
}
#carousel .hero-badge{
  display: inline-block;
  margin: .2em 0 0;
  padding: .35em .7em;
  border-radius: 999px;
  background: rgba(19,139,204,.6);
  color: #0b2230;
  font-weight: 800;
  font-size: clamp(40px, 6.5vw, 50px);
  margin-top: 0;
}


/* Reveal izquierda→derecha: estado inicial */
#carousel [data-animate="reveal-left"]{
  opacity: 0;
  transform: translateX(-14px);
  -webkit-mask-image: linear-gradient(to right, #000 0  , #000 0);
          mask-image: linear-gradient(to right, #000 0  , #000 0);
  -webkit-mask-size: 0% 100%;
          mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition:
    opacity .45s ease,
    transform .45s ease,
    -webkit-mask-size .70s ease;
  transition:
    opacity .45s ease,
    transform .45s ease,
    mask-size .70s ease;
}

/* Final (se queda estático) */
#carousel [data-animate="reveal-left"].is-revealed{
  opacity: 1;
  transform: none;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* móvil: acomoda posiciones/tamaños */
@media (max-width: 991.98px){
  #carousel .hero-copy{
    left: clamp(24px, 6vw, 48px);
    top: 6%;
    max-width: 86vw;
  }
  #carousel .hero-title{ font-size: clamp(28px, 7.2vw, 40px); }
  #carousel .hero-subtitle{ font-size: clamp(20px, 6.8vw, 40px); }
  #carousel .hero-badge{ font-size: clamp(28px, 7.2vw, 40px); }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  #carousel [data-animate="reveal-left"]{
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    transition: none !important;
  }
}

/* Offset izquierdo que ya usas para CTA/hero-copy */
/* Usa variables para alinear texto/CTA y poder subir/bajar fácil */
#carousel{
  --hero-left: clamp(100px, 1vw, 288px);         /* distancia desde el borde IZQ de la imagen */
  --hero-bottom: calc(clamp(170px, 16vw, 288px) + 120px); /* altura actual del bloque de texto */
}

/* Mobile: mismo concepto pero más chico */
@media (max-width: 991.98px){
  #carousel{
    --hero-left: clamp(24px, 6vw, 48px);
    --hero-bottom: calc(clamp(24px, 6vw, 56px) + 84px);
  }
}

/* Desktop ancho, pero con altura ≤1080px (tu caso 1920×1080) */
@media (min-width: 1200px) and (max-height: 1080px) {
  #carousel{
    --hero-bottom: calc(clamp(96px, 15vw, 200px) + 96px);
  }
}

/* Caso 1366×768 (y similares ≤800 px de alto): bájalo más */
@media (min-width: 1200px) and (max-height: 800px) {
  #carousel{
    /* reduce el “bottom” efectivo → el bloque baja */
    --hero-bottom: calc(clamp(64px, 27.5vh, 250px) + 72px);
  }
}

/* Más ancho disponible para el texto */
/* Bloque del texto overlay – ahora usa las variables */
#carousel .hero-copy{
  position: absolute;
  left: var(--hero-left);
  bottom: var(--hero-bottom);
  z-index: 3;
  max-width: 80vw;              /* más ancho para no cortar */
}
/* Todas las líneas: MISMO tamaño/grosor y SIN wrap automático */
#carousel .hero-line{
  margin: 0 0 .25em 0;
  font-size: clamp(28px, 5.2vw, 64px);
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;           /* solo haces saltos donde tú defines líneas */
}


/* Barra que nace en el borde IZQ de la imagen, sin radio izq, punta redonda der */
#carousel .hero-badge{
  display: inline-block;
  position: relative;
  margin-left: calc(-1 * var(--hero-left));
  padding-left: calc(var(--hero-left));
  padding-right: 1.2rem;
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(149,212,243,.65); /* #95D4F3 translúcido */
  color: #000;
  border-radius: 0 999px 999px 0;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: none;
  /* por si hay herencias raras: */
  overflow: visible;
  isolation: isolate;
}


#carousel .hero-copy.is-revealed{
  opacity: 1;
  transform: none;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-image: none !important;
          mask-image: none !important; /* ← clave */
  z-index: 1;
}



/* Utilidades de color para títulos del overlay */
.t-white { color: #fff !important; }
.t-black { color: #304652 !important; }


/* Carousel */


/* Info Section */
/* Desde 1200px hacia abajo: ocultar imágenes y expandir texto */

/* Oculta por defecto */
.info-section .info-hero { 
  display: none !important; 
}

/* Muéstrala solo en >=1200px */
@media (min-width: 1200px) {
  .info-section .info-hero { 
    display: block !important; 
  }
}


@media (max-width: 1200px) {
  .info-section .position-absolute,
  .info-section .d-block.d-lg-none {
    display: none !important;
  }
  .info-section .info-text-container{
    margin-left:0 !important
  }

  /* Texto ocupa todo el ancho */
  .info-section .col-lg-8.col-xl-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Teléfonos (<=768px): ajustar margen y border-radius */
@media (max-width: 768px) {
  .info-section h1 {
    margin-left: 0 !important;
    font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  }

  .info-section .p-5 {
    border-radius: 25px !important;
    padding: 1.5rem !important;
  }
}
/* Info Section */


/* --- Problemas (layout) --- */
.problems {
  position: relative;
  padding-block: clamp(32px, 6vw, 64px);
  overflow: hidden;
}

/* grid 2 columnas: visual (izq) + contenido (der) */
.problems-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}

.problems-title .accent { color: #138BCC; }
/* Título con barras asimétricas */
/* Título con barras asimétricas (final) */
.problems-title{
  position: relative;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 clamp(16px, 2vw, 24px) 0;
  font-size: clamp(28px, 4vw, 64px);
  z-index: 2;
  margin-left: 70px;

  /* knobs */
  --barH: clamp(32px, 3.8vw, 56px);   /* ↑ más alto */
  --barL: clamp(70px, 9vw, 130px);    /* un poco más corta la izquierda */
  padding-inline: clamp(10px, 1.2vw, 20px); /* más aire entre texto y barras */
}

/* base */
.problems-title::before,
.problems-title::after{
  content:"";
  position:absolute;
  top:52%;
  transform:translateY(-50%);
  height:var(--barH);
  background:#E8F3F7;
  z-index:-1;
}

/* IZQUIERDA: punta redonda a la izquierda, recto hacia el texto */
.problems-title::before{
  right:100%;
  width:var(--barL);
  /* separo un poco para que se vea la curva y no se junte con el texto */
  transform:translate(5px,-50%);
  border-radius: 9999px; /* redonda izq, recta der */
}

/* DERECHA: llega hasta el borde de la pantalla.
   Truco: fijamos el borde derecho al viewport con right: calc((100vw - 100%) / -2) */
.problems-title::after{
  left:auto;
  right:calc((100vw - 50%) / -2);   /* alinea el extremo derecho con el borde del viewport */
  width: clamp(360px, 55vw, 1200px); /* ↑ más larga; crece con el viewport sin overflow horizontal */
  border-radius: var(--barH) 0 0 var(--barH); /* redonda hacia el texto, recta al borde */
  transform:translateY(-50%);        /* solo vertical; NO mover en X */
}

/* columna izquierda (imágenes) */
.problems-visual {
  position: relative;
  min-height: clamp(240px, 40vw, 520px);
}

/* doctor */
.problems-doctor {
  position: absolute;
  /* bottom: clamp(8px, 2vw, 20px); */
  width: clamp(360px, 46vw, 620px);        /* ↑ límites para crecer más */
  height: auto;
  z-index: 2;
}


/* swoosh curvo azul claro (fondo) */
.problems-swoosh {
  position: absolute;
  left: max(-10vw, -120px);
  bottom: -8%;
  width: clamp(420px, 55vw, 900px);
  height: auto;
  z-index: 1;
  opacity: 1; /* si tu asset ya viene con opacidad, puedes bajarla aquí */
}

/* círculo rojo con $ en el lado izq */
.badge-money {
  position: absolute;
  left: clamp(-8px, 2vw, 40px);
  top: clamp(20px, 6vw, 120px);
  width: clamp(60px, 7vw, 120px);
  height: auto;
  z-index: 3;
}

/* columna derecha (texto + barra + círculo rojo de alerta) */
.problems-content {
  position: relative;
  padding-inline: clamp(4px, 1vw, 12px);
}

/* círculo rojo de alerta */
.badge-alert {
  position: absolute;
  right: 0;         /* lo acerqué un poco hacia dentro */
  left: 90%;
  top: -20%;                       /* baja un poco la altura para centrar visualmente */
  width: clamp(125px, 25vw, 275px); /* antes max 120 → ahora hasta 200px */
  height: auto;
  z-index: 1;
}

/* subtítulo y lista */
.problems-subtitle {
  color: #536B78;
  font-weight: 600;
  margin: 0 0 clamp(10px, 1.2vw, 16px) 0;
  font-size: clamp(30px, 1.8vw, 46px);
  position: relative;
  z-index: 2;
}

.problems-list {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-left: 1.2rem;
  color: #536B78;
  font-size: clamp(26px, 2.5vw, 34px);
}
.problems-list li + li { margin-top: clamp(6px, 1vw, 12px); }

/* bullets tipo flecha roja */
.problems-list {
  list-style: none;               /* quitamos los bullets por defecto */
  padding-left: 0;
}
.problems-list li {
  position: relative;
  padding-left: clamp(28px, 3vw, 42px);  /* espacio para el ícono */
  margin-bottom: clamp(6px, 1vw, 12px);
}
.problems-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* centrado vertical */
  width: clamp(6px, 1vw, 14px);   /* control de tamaño */
  height: clamp(10px, 1.4vw, 18px);
  background: url('/resources/images/flecha-roja-63.webp') no-repeat center/contain;
}

/* Responsive: apila columnas y mantiene decoraciones ordenadas */
@media (max-width: 991.98px) {
  .problems-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .problems-visual {
    min-height: clamp(220px, 45vw, 380px);
    margin-bottom: clamp(16px, 3vw, 24px);
  }
  .problems-content{
    margin-top: 25px;
  }
  .problems-content::before {
    right: auto;
    left: -8%;
    top: -10px;
    transform: none;
    width: 70%;
    height: clamp(18px, 3.5vw, 36px);
  }
  .badge-alert {
    right: auto;
    left: 60%;
    top: -38px;
  }
}


/* Mobile (<= 991.98px): ocultar visual y alerta, y dar aire a la columna de texto */
@media (max-width: 991.98px) {
  .problems-visual {
    display: none !important;
    min-height: 0;
    margin: 0;
  }

  .badge-alert {
    display: none !important;
  }

  .problems-content {
    margin-left: clamp(8px, 4vw, 24px);
  }
}

/* En móvil: barras simétricas y coherentes con el centrado */
@media (max-width: 991.98px){

/* --- 1) Subtítulo más grande --- */
.problems-subtitle{
  font-size: clamp(24px, 3vw, 52px) !important;
}

/* --- 2) Bullets (before) más grandes + más aire a la izquierda --- */
.problems-list li{
  padding-left: clamp(36px, 4vw, 54px) !important;  /* evita que el icono pise el texto */
}
.problems-list li::before{
  width:  clamp(12px, 1.8vw, 24px) !important;
  height: clamp(18px, 2.6vw, 32px) !important;
}

/* --- 3) Centrar el título “Tenemos la mejor solución …” --- */
.problems-title{
  text-align: center !important;
  margin-left: auto !important;      /* anula tu margin-left:70px */
  margin-right: auto !important;
  --barH: clamp(20px, 4.2vw, 36px);
  --barW: clamp(90px, 32vw, 180px);
  padding-inline: clamp(10px, 3vw, 18px);
}
  .problems-title::before,
  .problems-title::after{
    height: var(--barH);
    width:  var(--barW);
    top: 52%;
    transform: translateY(-50%);
    border-radius: 9999px;
    background: #E8F3F7;
  }
  .problems-title::before{
    right: 100%;
    margin-right: clamp(8px, 2.5vw, 16px);
  }
  .problems-title::after{
    left: 100%;
    margin-left: clamp(8px, 2.5vw, 16px);
  }
}

/* MOBILE: que los ::before/::after del título se VEAN y queden alineados al texto centrado */
@media (max-width: 991.98px) {
  /* deja que las barras puedan “salirse” sin ser cortadas */
  .problems { 
    overflow: visible;
  }

  .problems-title{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* tamaños pensados para que sí se vean en móvil */
    --barH: clamp(20px, 4.2vw, 36px);
    --barW: clamp(110px, 36vw, 200px); /* ancho simétrico y visible */
    padding-inline: clamp(10px, 3vw, 18px);
    position: relative;
    z-index: 1; /* texto encima */
  }

  .problems-title::before,
  .problems-title::after{
    top: 50%;                         /* alineadas al centro del texto */
    transform: translateY(-50%);
    width: var(--barW);
    height: var(--barH);
    border-radius: 9999px;
    background: #E8F3F7;
    z-index: 0;                        /* barras debajo del texto, encima del fondo */
  }

  .problems-title::before{
    right: 100%;
    margin-right: clamp(10px, 3vw, 16px);
  }
  .problems-title::after{
    left: 100%;
    margin-left: clamp(10px, 3vw, 16px);
  }
}

/* MOBILE (<=991.98px) — centrar título por contenido y hacer visibles las barras */
@media (max-width: 991.98px) {
  .problems { overflow: visible; }  /* que no recorte las barras */

  .problems-title{
    /* centrado real por contenido */
    width: max-content;          /* shrink-to-fit al texto */
    margin: 0 auto clamp(16px, 3.5vw, 28px);
    text-align: center !important;

    /* tamaño de las barras en móvil */
    --barH: clamp(22px, 4.5vw, 36px);
    --barW: clamp(110px, 36vw, 200px);

    padding-inline: clamp(10px, 3vw, 18px);
    position: relative;
    z-index: 1;

    /* anula el offset que tenías en desktop */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .problems-title::before,
  .problems-title::after{
    content:"";
    position:absolute;
    top:50%;                      /* alineadas al centro del texto */
    transform:translateY(-50%);
    width:var(--barW);
    height:var(--barH);
    border-radius:9999px;
    background:#E8F3F7;
    z-index:0;
  }

  .problems-title::before{
    right:100%;
    margin-right: clamp(10px, 3vw, 16px);
  }
  .problems-title::after{
    left:100%;
    margin-left: clamp(10px, 3vw, 16px);
  }
  .problem-text-container{
    max-width: 100vw !important; 
  }
}

.problems-list li::before{
  padding-left:36px ;
}


@media (max-width: 991.98px) {
  .problems{
    overflow-x: clip;
    overflow-y: visible;
  }
  .problems-title::before,
  .problems-title::after {
    left: auto;
    right: auto;              /* <— reset duro del anclaje a viewport */
  }

  .problems-title::before{
    right: 100%;
    margin-right: clamp(10px, 3vw, 16px);
  }
  .problems-title::after{
    left: 100%;
    margin-left: clamp(10px, 3vw, 16px);
    width: var(--barW);
    max-width: calc(100vw - 1px); /* seguridad para no empujar layout */
  }
}


/* Problema */



/* --- Soluciones v3 (final) --- */
.solutions {
  /* diámetro del círculo y grosor de la franja, responsivos */
  --circle: clamp(180px, 20vw, 320px);
  --rail: clamp(40px, 6vw, 88px);
  padding-block: 3rem;
  overflow: visible;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* fila de círculos */
.solution-list {
  position: relative;                  /* base para la franja */
  display: flex;
  align-items: center;
  justify-content: space-between;      /* 4 en una línea (desktop) */
  gap: clamp(12px, 2.5vw, 40px);
  min-height: var(--circle);           /* centra verticalmente la franja */
  z-index: 1;                          /* por delante de la franja */
  flex-wrap: nowrap;                   /* no hace wrap en desktop */
  overflow: visible;
}

/* franja azul: ancho de pantalla, centrada */
.solution-list::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);    /* centro preciso */
  width: 100vw;                        /* ANCHO COMPLETO DE PANTALLA */
  height: var(--rail);
  background: #138BCC;
  border-radius: 0;                    /* sin puntas redondas (como pediste) */
  z-index: 0;
  pointer-events: none;
}

/* círculo */
.solution-item {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;                      /* evita que se aplaste */
  width: var(--circle);
  aspect-ratio: 1 / 1;                 /* círculo perfecto siempre */
  border-radius: 50%;
  border: 1px solid #95D4F3;
  background: #E8F3F7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(16px, 2vw, 24px);
  box-sizing: border-box;
}

.solutions .container .mb-5{
  margin-bottom: 5.5rem !important;
}

.solution-item img {
  max-width: 60%;
  height: auto;                        /* mantiene proporción del ícono */
  width: 150px;
}

/* títulos dentro de los círculos */
.solution-item h3 { 
  color: #138BCC; 
  margin: 0.35rem 0 0; 
  font-weight: 650; 
  font-size: clamp(1.4rem, 1.8vw, 2rem); /* escala con viewport */
  line-height: 1.2;
}

.solution-item h4 { 
  color: #536B78; 
  margin: 0.15rem 0 0; 
  font-weight: 500; 
  font-size: clamp(1.3rem, 1.3vw, 1.8rem); /* escala suavemente */
  line-height: 1.2;
}

/* efecto hover en los círculos */
.solution-item {
  transition: transform 0.25s ease-in-out; /* animación suave */
}

.solution-item:hover {
  transform: scale(1.10); /* se agranda un poco */
  z-index: 2; /* por si acaso, para que quede encima del fondo/otros */
  cursor: pointer;
}

/* <= 1200px: permite wrap y centra; franja se oculta para no “cortar” entre filas */
@media (max-width: 1199.98px) {
  .solution-list { flex-wrap: wrap; justify-content: center; }
  .solution-list::before { display: none; }
  .solutions { --circle: clamp(180px, 28vw, 280px); --rail: 64px; }
}

@media (max-width: 991.98px) {
  .legend h3{
    font-size: 1rem;
  }

  .legend h4{
    font-size: .8rem;
  }
  .solutions .container .mb-5{
    margin-bottom: 2rem !important;
  }
}

/* Solutions */

/* ===========================
   VARIABLES GLOBALES
   =========================== */
:root {
  /* ancho útil de la imagen de la derecha (desktop) */
  --imgW: min(20vw, 660px);
  /* separación entre el bloque de texto y la imagen */
  --gap: clamp(24px, 3vw, 64px);
  /* “canal” reservado para la imagen */
  --guard: calc(var(--imgW) + var(--gap));
  /* reserva inferior para que el footer no tape el artboard */
  --dropFactor: 0.85;
}

/* ===========================
   SECCIÓN PRODUCT
   =========================== */
.product {
  position: relative;
  padding-block: clamp(28px, 6vw, 72px);
  isolation: isolate;          /* layering correcto: contenido sobre el artboard */
  overflow-x: visible;         /* se permite bleed horizontal del artboard */
}

/* Encabezado */
.product-header {
  margin-bottom: clamp(16px, 3vw, 32px);
}
.product-title {
  font-weight: 800;
  margin: 0 0 6px 0;
  font-size: clamp(28px, 3.6vw, 58px);
  color: #304652;
}
.product-title .accent { color: #138BCC; }

/* (Opcional) si quieres eliminar los paddings laterales del container
.product .container { padding-left: 0 !important; padding-right: 0 !important; }
*/

/* “Stage”: ancla para el artboard y el grid */
.product-stage {
  position: relative; /* referencia del artboard (top:0) y del grid */
}

/* Grid principal (columna izquierda) */
.product-grid { display: block; }

/* Columna izquierda (lista de artículos) */
.product-content {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}
.product-item { position: relative; }

/* Título de cada item */
.item-title {
  margin: 0 0 8px 0;
  padding-bottom: 10px;
  font-weight: 800;
  color: #304652;
  font-size: clamp(26px, 3vw, 42px);
  border-bottom: 2px solid #BFDCE8;
}

/* Lead (texto visible) */
.item-lead {
  max-width: 60vw;
  color: #536B78;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.3;
  margin: 8px 0 10px 0;
}

.item-lead p{
  max-width: 60vw;
}

/* Botón “Ver más / Ver menos” */
.item-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: #138BCC;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  cursor: pointer;
}

/* === Alinear y unificar tipografía entre lead y extendido === */
.product-content .item-lead,
.product-content .item-body,
.product-content .item-body p {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.3;
  color: #536B78;
}

/* El bloque extendido debe “continuar” el lead sin sangrías ni margenes raros */
.product-content .item-body {
  margin-top: 8px;     /* mismo aire que .item-lead */
  padding-left: 0;
  padding-right: 0;
}

/* Quitar márgenes por defecto del <p> interno para alinear baseline exacto */
.product-content .item-body p {
  margin: 0;
}

/* Si más de un párrafo dentro del colapsable, da aire entre párrafos:
.product-content .item-body p + p { margin-top: .35rem; }
*/

/* Canal de seguridad: el texto NO invade la zona de imagen */
.product .product-header,
.product .product-content {
  position: relative;
  z-index: 1;
  max-width: calc(100% - var(--guard));
}

/* ===========================
   ARTBOARD (IMÁGENES DERECHA)
   =========================== */
.product-artboard {
  position: absolute;
  top: 0;                          /* arranca a la altura del stage/grid */
  right: calc((100vw - 100%) / -2);/* bleed hasta el borde del viewport */
  left: auto;
  transform: none;
  width: auto;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 32px);

  pointer-events: none;            /* no interfiere con interacción de texto */
  z-index: 0;                      /* queda detrás del contenido */
}

/* Imágenes desktop */
.product-img {
  max-width: var(--imgW);
  height: auto;
}
.product-img--desk { display: block; }

/* Imagen mobile (una sola) */
.product-img-mobile { display: none; }

/* ===========================
   RESERVA INFERIOR (FOOTER SAFE)
   =========================== */
.product::after {
  content: "";
  display: block;
}

/* ===========================
   RESPONSIVE (tablet/mobile)
   =========================== */

  @media (max-width: 991.98px) {
  /* Hacemos que el wrapper pueda reordenar sus hijos */
  .product-stage {
    display: flex;
    flex-direction: column;
  }

  /* Ponemos el artboard (packaging-unidos) arriba */
  .product-artboard {
    order: -1;
    margin-top: 0;          /* venía con margin-top */
    margin-bottom: 16px;    /* deja aire con el texto */
  }

  /* (Opcional, por claridad) el texto queda debajo */
  .product-grid {
    order: 0;
  }
  .product-artboard img {
    width: 100vw;
  }
}

@media (max-width: 991.98px) {
  .product { padding-bottom: 0; }

  .product .product-header,
  .product .product-content { max-width: 100%; }

  .product .product-header{
    margin-left: 9px
  }
  
  .product-artboard {
    position: static;
    width: 100%;
    transform: none;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
  }

  .product-img--desk { display: none; }
  .product-img-mobile {
    display: block;
    width: clamp(240px, 80vw, 520px);
    height: auto;
  }

  .product::after { height: 0; }

  .item-lead {
    max-width: 75vw;
  }

}

/* Highlight suave del artículo que se abre */
.product-item {
  border-radius: 16px; /* por si no tenía, evita ángulos duros en el glow */
}


#faq{
  max-width: 80vw;
}

@media (max-width: 991.98px) {

  #faq{
    max-width: 75vw !important;
  }
}

/* Respeta reduced motion (solo al título) */
@media (prefers-reduced-motion: reduce) {
  .product-item.flash-highlight .item-title::after {
    animation-duration: .6s;
    box-shadow: 0 0 0 4px rgba(19,139,204,.25);
  }
}

/* === Title Gradient Sweep (L→R + fade-out suave al color base) === */
.item-title.title-sweep{
  /* tu color base viene de .item-title { color: #304652; } → usamos currentColor */
  background-image: linear-gradient(
    90deg,
    currentColor 0%,
    #138BCC 40%,
    #138BCC 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  background-position: -120% 0;     /* arranca bien a la izquierda */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                /* el texto toma el gradiente */
  animation: titleSweepLR 1.8s ease-out forwards; /* un pelín más larga para el fade */
}

@keyframes titleSweepLR {
  /* 0%→75%: pasa el “haz” de azul de izquierda a derecha */
  0%   { background-position: -120% 0; color: rgba(0,0,0,0); }
  75%  { background-position: 100% 0;  color: rgba(0,0,0,0); }
  100% { background-position: 120% 0;  color: currentColor; }

  /* 75%→100%: el gradiente sigue saliendo por la derecha
     mientras el texto FADEA hacia tu color base (currentColor) */
}

/* Accesibilidad: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .item-title.title-sweep { animation: none !important; color: currentColor !important; }
}


/* ===========================
   FOOTER SOBRE EL ARTBOARD
   =========================== */

/* Zoom in/out inline EXACTO como el sandbox: sin huecos y respetando el ancho del contenedor */
.inline-accordion{
  display: none;                 /* cerrado: no ocupa nada */
  opacity: 0;
  transform: scale(0.95);
  transform-origin: left bottom;
  transition: opacity .25s ease, transform .25s ease;
  /* sin max-width ni width aquí: el contenedor (.item-lead) manda */
}

.inline-accordion.is-open{
  display: inline;               /* abierto: vuelve a la MISMA línea */
  opacity: 1;
  transform: scale(1);
}

/* 
@media (prefers-reduced-motion: reduce) {
  .inline-accordion,
  .inline-accordion.is-open {
    transition: opacity .15s linear, max-height 0s;
    transform: none !important;
  }
} */


/* Footer */
footer {
  position: relative;
  z-index: 1;
  margin-top: 100px;
}

  @media (max-width: 991.98px) {
    .footer-text{
      font-size: .8rem;
      text-align: left !important;
    }
    .footer-container{
      margin-left: 10px !important;
      margin-right: 10px !important;
    }
  }

/* Footer */