:root{
  --primary:#132e46;
  --accent:#e71010;
  --light:#f7f9fc;
  --dark:#0b1a29;
  --navHeight:72px;
}
/* RESET + BODY */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',sans-serif;
  color:var(--dark);
  background:var(--light);
  scroll-behavior:smooth;
  line-height:1.6;
}

/* NAVBAR */
.navbar{
  position:fixed;top:0;left:0;width:100%;height:var(--navHeight);
  background:rgba(255,255,255,.8);backdrop-filter:blur(6px);
  display:flex;justify-content:space-between;align-items:center;
  padding:0 .5rem 0 5%;z-index:50;
}
.logo{width:240px}
.btn{
  display:inline-block;padding:.8rem 2.1rem;border-radius:50px;font-weight:600;text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease;
}
.btn.cta{background:var(--accent);color:#fff}
.btn.ghost{border:2px solid #fff;color:#fff}
.btn:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.15)}

/* HERO */
.hero{
  position:relative;height:100vh;padding-top:var(--navHeight);
  overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:center;
}
.hero-bg{
  position:absolute;inset:0;height:115%;background:url('../img/01.png') center/cover no-repeat;
  transition:transform .3s ease;z-index:-2;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,46,70,.6) 0%,rgba(19,46,70,.85) 100%);
}
.hero-inner{
  max-width:1200px;margin:auto;padding:0 5%;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:3rem;
}
.hero-text{flex:1 1 420px;min-width:280px;text-align:left}
.hero-text h1{font-size:clamp(2.3rem,5vw,3.4rem);line-height:1.15;margin-bottom:.9rem}
.hero-text h1 span{color:var(--accent)}
.subtitle{font-size:1.15rem;margin-bottom:2rem}
.hero-media{flex:1 1 340px;display:flex;justify-content:center;position:relative;z-index:1}
.hero-img{
  width:340px;border-radius:24px;box-shadow:0 10px 25px rgba(0,0,0,.35);
  animation:float 7s ease-in-out infinite;
}

/* MODULES */
.modules{
  position:relative;
  padding:5rem 7% 6rem;
  background:url('../img/02.jpg') center/cover fixed;        /* fondo claro */
  color:var(--dark);
  text-align:center;
   isolation:isolate;    
}
.modules::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(19,46,70,.78);   /* tono primario con 78 % de opacidad  */
  mix-blend-mode:multiply;         /* mantiene contraste sin apagar la foto */
  z-index:-1;                      /* detrás de las tarjetas */
}
.modules h2{
  font-size:2.4rem;
  margin-bottom:2.5rem;
  color:var(--primary);
}

/* grid flexible */
.cards-wrapper{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* tarjeta individual */
.module-card{
  background:#ffffff;          /* blanco sólido para máximo contraste */
  border-radius:22px;
  padding:2.6rem 1.9rem;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .35s ease,box-shadow .35s ease;
}
.module-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}
.module-card img{
  width:64px;
  margin-bottom:1rem;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.module-card h3{
  font-size:1.3rem;
  margin-bottom:.55rem;
  color:var(--primary);
}
.module-card p{
  font-size:.95rem;
  line-height:1.45;
  color:var(--dark);
  opacity:.85;
}


/* BENEFITS */
/* =====  BENEFICIOS – fondo claro, cards elevadas  ===== */
.benefits{
  /* fondo blanco/gris muy suave para diferenciarse del resto */
  background:#f7f9fc;
  padding:clamp(3rem,6vw,6rem) 7%;
  text-align:center;
  color:var(--dark);
}

.benefits h2{
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  margin-bottom:2.4rem;
  color:var(--primary);
}

/* grid responsivo */
.benefit-grid{
  display:grid;
  gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:1100px;
  margin-inline:auto;
}

/* tarjeta blanca con sombra sutil */
.benefit-card{
  background:#ffffff;
  border-radius:22px;
  padding:2rem 1.6rem;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .3s ease, box-shadow .3s ease;
}

.benefit-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.benefit-card img{
  width:72px;
  margin-bottom:1rem;
}

.benefit-card h3{
  font-size:1.18rem;
  margin-bottom:.4rem;
  color:var(--primary);
}

.benefit-card p{
  font-size:.95rem;
  line-height:1.45;
  color:#49525d;
}

/* accesibilidad: desactiva la animación si el usuario prefiere sin movimiento */
@media (prefers-reduced-motion:reduce){
  .benefit-card,
  .benefit-card:hover{transition:none}
}



/* PRICING */
.pricing{
  position:relative;padding:5.5rem 7%;display:flex;justify-content:center;align-items:center;color:#fff;
}
.pricing-bg{
  position:absolute;inset:0;z-index:-2;
  background:url('../img/03.jpg') center/cover fixed;
}
.pricing::before{
  content:'';position:absolute;inset:0;background:rgba(19,46,70,.8);backdrop-filter:blur(4px);z-index:-1;
}
.pricing-card{
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border-radius:24px;padding:3rem 2.5rem;max-width:440px;text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.pricing-card h2{font-size:2rem;margin-bottom:1rem}
.price{font-size:3rem;font-weight:700;margin:1rem 0;color:var(--accent)}
.details{margin-bottom:2rem}
.payment-icons img{width:52px;margin:0 .4rem;opacity:.85;transition:opacity .3s}
.payment-icons img:hover{opacity:1}
.big{font-size:1.2rem;padding:1.1rem 3rem}

/* FOOTER */
.footer{text-align:center;padding:2rem 5%;font-size:.9rem;background:#0b1a29;color:#a5b0bf}

/* RESPONSIVE */
@media(max-width:768px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-text{text-align:center}
  .hero-img{width:260px}
  .navbar .ghost{display:none}
}

/* ANIMATIONS */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* =====  BOTÓN WHATSAPP FLOTANTE  ===== */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:60px;
  height:60px;
  z-index:70;                 /* por encima de todo */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#25d366;         /* color oficial */
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float img{
  width:34px;
  height:34px;
}
.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 12px 26px rgba(0,0,0,.3);
}

/* accesibilidad: sin animación si el usuario lo prefiere */
@media (prefers-reduced-motion:reduce){
  .whatsapp-float,
  .whatsapp-float:hover{transition:none}
}

/* ===== INTRODUCCIÓN ===== */
.intro {
  background: #ffffff;
  padding: clamp(2rem, 5vw, 4rem) 7%;
  text-align: center;
  color: var(--dark);
}

.intro-content p {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.8;
}

/* ===== CONTENT ===== */
.content {
    position:relative;
  padding:5rem 7% 6rem;
  background:url('../img/02.jpg') center/cover fixed;        /* fondo claro */
  color:var(--dark);
  text-align:center;
   isolation:isolate;   
}
.content::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(19,46,70,.78);   /* tono primario con 78 % de opacidad  */
  mix-blend-mode:multiply;         /* mantiene contraste sin apagar la foto */
  z-index:-1;                      /* detrás de las tarjetas */
}

.content h2, .intro h2{
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 2rem;
  color: var(--primary);
}

.content-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.content-card {
  background: #fff;
  padding: 1.75rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  text-align: left;
}

.content-card h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: 0.75rem;
  color: var(--dark);
}

.content-card p {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  line-height: 1.6;
  color: var(--text);
}

/* ===== AVALADOS POR ===== */
.endorsed{
  background: #ffffff;
  padding: clamp(1.8rem, 3.5vw, 3.5rem) 0;
  border-top: 1px solid rgba(19,46,70,0.06);
  text-align: center;
  color: var(--dark);
}

.endorsed h2{
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  margin-bottom: .35rem;
  color: var(--primary);
  font-weight: 600;
}

.endorsed-sub{
  font-size: .96rem;
  margin-bottom: 1.25rem;
  color: #59636f;
}

/* logos */
.endorsed-logos{
  display:flex;
  gap:2.2rem;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top: .6rem;
}

.endorsed-logo{
  max-width: 240px;       /* ancho máximo por logo */
  height: auto;
  display:block;
  opacity: .95;
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
  padding: .45rem;
  background: rgba(255,255,255,0); /* para que no cambie si PNG transparente */
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(11,26,41,.04);
}

/* hover / foco accesible */
.endorsed-logo:hover,
.endorsed-logo:focus{
  transform: translateY(-6px);
  filter: grayscale(0) brightness(1);
  opacity: 1;
  box-shadow: 0 12px 26px rgba(11,26,41,.08);
}

/* móvil: reducir tamaño */
@media (max-width: 480px){
  .endorsed-logo{ max-width: 140px; padding:.35rem; }
  .endorsed-logos{ gap:1rem; }
  .endorsed h2{ font-size: 1.1rem; }
}