*{box-sizing:border-box}
    html,body{margin:0; padding:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif; background:var(--bg); color:var(--text)}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}


:root{
      --bg:#0B1F36;         /* azul marino corporativo */
      --bg-2:#0f2b4e;       /* azul variante */
      --brand:#F4C430;      /* amarillo corporativo */
      --brand-2:#ffd75a;    /* amarillo claro */
      --text:#e9eef7;       /* texto claro */
      --muted:#a8b3c7;      /* texto secundario */
      --ok:#21c58b;         /* verde check */
      --shadow:0 10px 30px rgba(0,0,0,.25);
      --radius:18px;
      --radius-sm:12px;
      --max:1200px;
    }

    /* Header */
    .nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(11,31,54,.7); border-bottom:1px solid rgba(255,255,255,.06)}
    .nav__wrap{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
    .brand__logo{width:34px; height:34px; border-radius:12px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); display:grid; place-items:center; box-shadow:var(--shadow)}
    .brand__logo svg{width:20px; height:20px}
    .nav__links{display:flex; gap:20px; align-items:center}
    .nav__links a{opacity:.9}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; font-weight:700; border:1px solid transparent; transition:.2s transform, .2s filter, .2s background}
    .btn:hover{transform:translateY(-1px)}
    .btn--brand{background:var(--brand); color:#0B1F36}
    .btn--ghost{border-color:rgba(255,255,255,.18)}
    .btn--whatsapp{background:#25D366; color:#002a12}

    /* Hero */
    .hero{position:relative; overflow:hidden}
    .hero__wrap{max-width:var(--max); margin:0 auto; padding:80px 20px 40px; display:grid; grid-template-columns:1.05fr .95fr; gap:36px}
    .kicker{color:var(--brand); font-weight:800; letter-spacing:.5px; text-transform:uppercase; font-size:.9rem}
    h1{font-size:clamp(2rem, 2.8vw + .8rem, 3.4rem); line-height:1.1; margin:.35rem 0 1rem}
    .lead{color:var(--muted); font-size:1.05rem}
    .actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}
    .hero__card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow)}
    .badge{display:inline-flex; align-items:center; gap:10px; font-size:.9rem; color:#07182e; background:var(--brand); padding:8px 12px; border-radius:999px; font-weight:800; margin-bottom:12px}
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
    .mini{display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.04); padding:12px 12px; border:1px solid rgba(255,255,255,.06); border-radius:12px}
    .mini svg{flex:0 0 20px}

    /* Sections */
    section{padding:70px 20px}
    .wrap{max-width:var(--max); margin:0 auto}
    h2{font-size:clamp(1.6rem, 1.8vw + .6rem, 2.4rem); margin:0 0 10px}
    .muted{color:var(--muted)}

    /* Services */
    .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:22px; border-radius:var(--radius-sm); box-shadow:var(--shadow); transition:.2s transform}
    .card:hover{transform:translateY(-4px)}
    .card h3{margin:8px 0 6px}
    .pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:.85rem; background:rgba(244,196,48,.15); color:var(--brand)}

    /* Feature band */
    .band{background:linear-gradient(90deg, rgba(244,196,48,.14), rgba(255,255,255,0)); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
    .band__items{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
    .band__item{display:flex; gap:12px; padding:14px; border:1px dashed rgba(244,196,48,.35); border-radius:12px}

    /* Testimonios */
    .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    blockquote{margin:0; padding:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:12px}
    .stars{color:var(--brand)}

    /* CTA */
    .cta{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center}
    .cta .box{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}

    /* FAQ */
    .faq{max-width:900px}
    .faq details{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:12px; margin:10px 0; padding:12px 16px}
    .faq summary{cursor:pointer; font-weight:700}

    /* Footer */
    footer{padding:34px 20px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); background:linear-gradient(180deg, rgba(0,0,0,.12), transparent)}
    .foot{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
    .foot .brand{opacity:.9}

        /* Estilos del botón flotante */
.floating-button {
  position: fixed; /* Fija la posición en la pantalla */
  bottom: 20px; /* Distancia desde la parte inferior */
  right: 20px; /* Distancia desde la parte derecha */
  width: 70px;
  height: 70px;
  background-color: rgb(17, 171, 29); /* Color de fondo del botón */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle efecto de elevación */
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

/* Icono dentro del botón */
.floating-button i {
  font-size: 50px;
  color: #fff; /* Color del icono */
  width: 100%;
}

/* Efecto hover para mayor elevación */
.floating-button:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Aumenta la sombra en hover */
}

/* Efecto activo cuando se hace clic */
.floating-button:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Disminuye la sombra al presionar */
}

    /* Responsive */
    @media (max-width:1024px){
      .hero__wrap{grid-template-columns:1fr}
      .cards{grid-template-columns:repeat(2,1fr)}
      .band__items{grid-template-columns:repeat(2,1fr)}
      .quotes{grid-template-columns:1fr 1fr}
      .cta{grid-template-columns:1fr}
    }
    @media (max-width:640px){
      .nav__links{display:none}
      .cards{grid-template-columns:1fr}
      .band__items{grid-template-columns:1fr}
      .quotes{grid-template-columns:1fr}
      .actions{flex-direction:column}
      .floating-button {
        position: fixed; /* Fija la posición en la pantalla */
        bottom: 70px; /* Distancia desde la parte inferior */
        right: 20px; /* Distancia desde la parte derecha */
        width: 70px;
        height: 70px;
        background-color: rgb(17, 171, 29); /* Color de fondo del botón */
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle efecto de elevación */
        cursor: pointer;
        transition: box-shadow 0.3s ease;
        }
    }

/* --- Ajustes generales --- */
body { word-break: break-word; }

/* Título más controlado en móviles anchos */
h1{
  /* antes: clamp(2rem, 2.8vw + .8rem, 3.4rem) */
  font-size: clamp(1.9rem, 2.1vw + 1rem, 3rem);
}

/* Evitar que el floating WA tape el hero */
.hero { padding-bottom: 110px; }
@supports(padding: max(0px)) {
  .hero { padding-bottom: max(110px, env(safe-area-inset-bottom)); }
}

/* CTA en móvil: botones a 100% y centrados */
@media (max-width: 480px) {
  .actions .btn { width: 100%; justify-content: center; }
}

/* Grid del hero más cómodo en tablets */
@media (max-width: 900px) {
  .hero__wrap { grid-template-columns: 1fr; }
}

/* En pantallas muy pequeñas lo podemos ocultar si molesta */
@media (max-width: 380px) {
  .floating-button{ display: none; }
}