/* === Paleta: ajusto con variables para matchear el sitio === */
:root{
  --brand: #1e6f5c;   /* principal (extraído del home) */
  --brand-2:#165446;  /* hover / oscuro */
  --ink:#202a44;      /* texto primario */
  --muted:#63708b;    /* texto secundario */
  --bg:#ffffff;       /* fondo liso (SIN punto de fuga) */
  --soft:#f6f8fb;     /* gris muy claro */
}
html,body{background:var(--bg); color:var(--ink);} 

h2.landing {
    background-color: trasparent;
}

/* Utilidades */
.text-brand{color:#0099c4!important}    
.badge-soft{background: rgba(0,153,196,.12); color:#0099c4; border:1px solid rgba(0,153,196,.2)}

/* Header */
.navbar{--bs-navbar-padding-y:.75rem}
.navbar .nav-link{color:var(--ink)}
.navbar .nav-link:hover{color:var(--brand)}

/* Hero SIN punto de fuga (fondo liso) */
.hero{background:var(--soft); min-height: 68vh; display:flex; align-items:center; position:relative; overflow:hidden;}  
.hero h1{letter-spacing:-.01em; font-size:clamp(26px, 3.6vw, 40px);}  

/* Sliders */
.brand-track {display:flex; gap:32px; align-items:center; animation: scroll 38s linear infinite; will-change: transform;}  
.brand-strip {overflow:hidden} 
.brand-strip:hover .brand-track{animation-play-state: paused;}
.brand-track img{height:auto}  
@keyframes scroll {from{transform:translateX(0)} to{transform:translateX(-50%)} } 

/* Cards de marca para unificar tamaños */
.brand-item{height:64px; width:160px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease} 
.brand-item:hover{transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.12)}
.brand-item img{max-height:36px; width:auto; filter:none; opacity:1; display:block}
@media (max-width: 576px){ .brand-item{height:56px; width:140px} .brand-track{gap:24px} }

.testimonial-card .avatar{width:56px; height:56px; border-radius:50%; background:#eef6fb; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#0b6e86; box-shadow:0 0 0 4px rgba(0,153,196,.12);} 

/* Cards */
.card-lite{border:1px solid #e6ebf3; border-radius:1rem} 

footer a{color:inherit; text-decoration:none}
/* Outline secundario acorde a paleta */
.btn-outline-secondary{border-color:#0099c4; color:#0099c4; background-color:transparent} 
.btn-outline-secondary:hover,.btn-outline-secondary:focus,.btn-outline-secondary:active{background-color:#0382a6; border-color:#0382a6; color:#fff} 
/* Form compact */
.form-compact .card-body{padding:1rem}
.form-compact .form-label{margin-bottom:.25rem; font-size:.9rem}
.form-compact .form-control,.form-compact .form-select,.form-compact textarea{padding:.5rem .75rem; font-size:.95rem;background-color: #e6e6e6;}
.form-compact .row.g-2{--bs-gutter-x:.75rem; --bs-gutter-y:.5rem}
.form-compact .form-check-label{font-size:.9rem}
/* Ghost button (2do CTA) */
.btn-ghost{background:transparent; color:#0099c4; border:1px solid rgba(0,153,196,.35)}
.btn-ghost:hover,.btn-ghost:focus{background:rgba(0,153,196,.10); color:#0382a6; border-color:#0382a6}
.btn-ghost:active{background:rgba(0,153,196,.15); color:#fff}
.btn-ghost.btn-lg{padding:.6rem 1rem; font-weight:600}
/* Títulos centrados en desktop */
@media (min-width: 992px){ .section-title{ text-align:center; display:flex; justify-content:center; } }
/* Badge de icono más prolijo */
.icon-badge{width:56px; height:56px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#0099c4; background:transparent; border:1px solid rgba(0,153,196,.35); box-shadow: inset 0 2px 6px rgba(0,153,196,.06);} 
/* Variante con degradado leve para los iconos */
.icon-badge.grad{background: linear-gradient(180deg, rgba(0,153,196,.12), rgba(0,153,196,.06)); border:1px solid rgba(0,153,196,.22); box-shadow: 0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.45);} 
/* Mix: gradiente en desktop, outline en mobile */
@media (max-width: 991.98px){
  .icon-badge.grad{background:transparent; border:1px solid rgba(0,153,196,.35); box-shadow: inset 0 2px 6px rgba(0,153,196,.06);} 
}
/* Títulos con fondo gris centrado */
.title-bg{background:#eef2f5; display:inline-block; padding:.25rem .6rem; border-radius:.5rem}
/* Controles e indicadores del carrusel más visibles (brand) */
#testi .carousel-indicators [data-bs-target]{width:10px; height:10px; border-radius:50%; background-color:#0099c4; opacity:.45}
#testi .carousel-indicators .active{opacity:1}
#testi .carousel-indicators{position:static!important; margin-top:1rem; gap:.5rem}
#testi .carousel-control-prev, #testi .carousel-control-next{width:8%}
#testi .carousel-control-prev-icon{width:2.5rem; height:2.5rem; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230099c4'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");}
#testi .carousel-control-next-icon{width:2.5rem; height:2.5rem; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230099c4'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 1 1-.708-.708L9.293 7 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}
/* Testimonios: rediseño */
.testimonial-card{background:#fff; border:1px solid #e6ebf3; border-radius:16px; box-shadow:0 6px 20px rgba(30,52,85,.08); position:relative; transition:transform .2s ease, box-shadow .2s ease}
.testimonial-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(30,52,85,.12)}
/* sin comillas decorativas */
.testimonial-card::after{content:none}
.testimonial-meta{display:flex; align-items:center; gap:.75rem; margin-bottom:.25rem}
.testimonial-meta .name{font-weight:600; color:var(--ink)}
.testimonial-meta .place{color:#7b8798}
.testimonial-quote{margin-bottom:0}
/* Rating + verificado */
.rating-verify{display:flex; align-items:center; gap:.5rem; margin:.25rem 0 .5rem}
.rating-verify .stars i{color:#f5b301; font-size:.95rem; margin-right:2px}
.rating-verify .verified{color:#0099c4; font-weight:600}
.rating-verify .verified i{vertical-align:-1px}
.rating-verify .stars i.empty{color:#d9dee7}
/* Imagen decorativa del hero (opcional, no usada ahora) */
.hero-figure{position:absolute; right:-8px; bottom:-12px; width:min(40vw,520px); pointer-events:none; user-select:none;}
@media (max-width: 991.98px){ .hero-figure{position:static; width:100%; max-width:520px; margin:1rem auto 0; display:block;} }
/* Hero con imagen de fondo + overlay para legibilidad (solo WebP) */
.hero{background:transparent;}





.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    /* top/bottom un poco más suave */
    linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,.24)),
    /* más oscuro a la izquierda, desvanecido MUCHO antes a la derecha */
    linear-gradient(90deg,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.46) 28%,
      rgba(0,0,0,.18) 52%,
      rgba(0,0,0,.06) 66%,
      rgba(0,0,0,0) 76%
    ),
    /* desplazo un poco el foco a la derecha */
    url('img/tu-prepaga-ideal3.webp') 66% center/cover no-repeat;
}


.hero > .container-xl{position:relative; z-index:1}
.hero-copy{color:#fff; position:relative; max-width:720px}
.hero-copy h1{color:#fff; text-shadow:0 4px 18px rgba(0,0,0,.55); font-size:clamp(26px, 3.6vw, 40px); line-height:1.1}
.hero-copy .lead, .hero-copy p{color:rgba(255,255,255,.96); text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hero-copy .badge-soft{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35); color:#fff}

@media (min-width: 1200px){
  .hero::before{
    background:
      linear-gradient(0deg, rgba(0,0,0,.34), rgba(0,0,0,.20)),
      linear-gradient(90deg,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.42) 26%,
        rgba(0,0,0,.14) 50%,
        rgba(0,0,0,.04) 64%,
        rgba(0,0,0,0) 72%
      ),
      url('img/tu-prepaga-ideal3.webp') 68% center/cover no-repeat;
  }
}

/* refuerzo en mobile para legibilidad */
@media (max-width: 576px){
   .hero::before{
    background:
      linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.45)),
      linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.28) 65%, rgba(0,0,0,.10) 100%),
      url('img/tu-prepaga-ideal1.webp') center/cover no-repeat;
  }
}

/* Botón secundario visible sobre fondo oscuro del hero */
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.65); background-color:rgba(255,255,255,.10)}
.hero .btn-ghost:hover,.hero .btn-ghost:focus{background-color:rgba(255,255,255,.20); border-color:#fff; color:#fff}
.hero .btn-ghost:active{background-color:rgba(255,255,255,.28)}
/* PASOS: cards con color suave */
.step-card{background:linear-gradient(180deg, rgba(0,153,196,.08), rgba(0,153,196,.03)); border:1px solid rgba(0,153,196,.18); box-shadow:0 6px 24px rgba(0,153,196,.10)}
.step-card.tint-2{background:linear-gradient(180deg, rgba(0,153,196,.07), rgba(0,153,196,.02))}
.step-card.tint-3{background:linear-gradient(180deg, rgba(0,153,196,.09), rgba(0,153,196,.03))}
.step-card:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,153,196,.18)}
.step-card .icon-badge{background:#fff; border:1px solid rgba(0,153,196,.35)}
.step-card h3{color:#192338}
.step-card p{color:#314158}
/* ===== Efectos suaves / scroll-reveal ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; transition-delay: var(--d,0ms); will-change: transform}
.reveal.reveal-left{transform:translateX(-24px)}
.reveal.reveal-right{transform:translateX(24px)}
.reveal.reveal-zoom{transform:scale(.98)}
.reveal.show{opacity:1; transform:none}
/* Delays por bloque */
#beneficios .row.g-4>div:nth-child(1) .card{--d:0ms}
#beneficios .row.g-4>div:nth-child(2) .card{--d:120ms}
#beneficios .row.g-4>div:nth-child(3) .card{--d:240ms}
#beneficios .row.g-4>div:nth-child(4) .card{--d:360ms}
/* Respeto a reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important; transform:none!important; transition:none!important}
  .brand-item, .step-card{transition:none!important}
}


/* === Infografía de pasos (desktop) === */
.infog-steps{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:2rem; padding:1.25rem 0 2rem;
}
/* Línea principal */
.infog-steps::before{
  content:""; position:absolute; left:6%; right:6%; top:84px; height:6px; border-radius:6px;
  
}
/* Flechas entre pasos */
.infog-arrow{position:absolute; top:84px; width:0; height:0;
  border-left:12px solid #0099c4; border-top:8px solid transparent; border-bottom:8px solid transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.06));
}
.infog-arrow.a1{left:33.333%; transform:translate(-50%,-50%)}
.infog-arrow.a2{left:66.666%; transform:translate(-50%,-50%)}

/* Tarjetas de cada paso */
.infog-step{
  position:relative; background:none; border:0; border-radius:0;
  padding:26px 24px 24px; box-shadow:0;
  transition: nonne;
}
.infog-step:hover{transform:none; box-shadow:0}
.infog-icon{
  width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-size:30px; color:#0099c4;
  background:linear-gradient(180deg, rgba(0,153,196,.12), rgba(0,153,196,.05));
  border:1px solid rgba(0,153,196,.22); box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.infog-num{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#0f2a3d; background:#eef6fb; border:1px solid rgba(0,153,196,.28);
  box-shadow:0 0 0 6px rgba(0,153,196,.08);
}
.infog-node{
  position:absolute; top:84px; left:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; background:#0099c4;
  box-shadow:0 0 0 6px rgba(0,153,196,.18), 0 4px 14px rgba(0,153,196,.45);
}
.infog-step h3{color:#192338}
.infog-step p{color:#314158}



/* Ondas punteadas decorativas entre módulos */
.infog-wave{
  position:absolute; top:128px; height:100px; width:min(30vw, 430px);
  pointer-events:none; opacity:.66;
  background-repeat:no-repeat; background-size:contain;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.06));
}
/* SVG inline como background-image (línea ondulada punteada) */
.infog-wave{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 100'><path d='M2 50 C 90 10, 180 90, 270 50 S 380 10, 418 50' fill='none' stroke='%230099c4' stroke-opacity='0.55' stroke-width='3' stroke-linecap='round' stroke-dasharray='6 12'/></svg>");
}
.infog-wave.w1{ left:22%; }   /* entre módulo 1 y 2 */
.infog-wave.w2{ left:55%; }   /* entre módulo 2 y 3 */
@media (max-width: 991.98px){ .infog-wave{ display:none; } }

.form-control{background-color: #e6e6e6;}
.form-select{background-color: #e6e6e6;}