:root{
  --bg:#0b0e14;
  --card:#111622;
  --alt:#0e1320;
  --muted:#aab2c5;
  --text:#e9eefc;
  --brand:#47b2ff;
  --brand-2:#74f0a7;
  --accent:linear-gradient(90deg, var(--brand), var(--brand-2));
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

/* Containers & Utilities */
.container{width:min(1100px, 92%); margin:0 auto}
.section{padding:72px 0}
.section--alt{background:var(--alt)}
.section__title{
  font-size:clamp(1.6rem, 1rem + 2vw, 2.2rem);
  margin:0 0 24px;
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(150%) blur(8px);
  background:rgba(11,14,20,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:all .35s ease;
}
.site-header.scrolled{
  background:rgba(11,14,20,.8);
  padding:6px 0;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand__logo{height:60px; width:auto; transition:transform .35s ease}
.site-header.scrolled .brand__logo{transform:scale(.86)}
.brand__name{font-weight:800; letter-spacing:.5px}

.nav__menu{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
.nav__menu a{color:var(--text); text-decoration:none; opacity:.9}
.nav__menu a:hover{opacity:1}
.nav__toggle{display:none; background:none; border:0; cursor:pointer}
.nav__bar{display:block; width:22px; height:2px; background:var(--text); margin:4px 0}

@media (max-width:860px){
  .nav__toggle{display:block}
  .nav__menu{
    position:fixed; inset:60px 0 auto 0; background:var(--alt);
    padding:20px; flex-direction:column; gap:12px; transform:translateY(-120%);
    transition:transform .3s ease; border-bottom:1px solid rgba(255,255,255,.08)
  }
  .nav__menu.open{transform:translateY(0)}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600;
  border:1px solid rgba(255,255,255,.14); color:var(--text); box-shadow:var(--shadow);
}
.btn--primary{
  background:var(--accent);
  border:0; color:#0c0f14;
}
.btn--ghost{background:transparent}
.btn--sm{padding:8px 14px; font-size:.95rem}
.btn--block{width:100%}

/* Hero */
.hero{
  position:relative; overflow:hidden; padding:42px 0 72px;
}
.hero__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
}
@media (max-width:960px){ .hero__grid{grid-template-columns:1fr} }
.hero h1{margin:6px 0 10px; font-size:clamp(1.8rem,1.2rem + 2.6vw,2.8rem)}
.hero p{color:var(--muted); margin:0 0 14px}
.accent{background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}

.hero__cta{display:flex; gap:12px; margin:18px 0 8px; flex-wrap:wrap}
.hero__badges{display:flex; gap:14px; list-style:none; padding:0; margin:14px 0 0; color:#c9d3ea; flex-wrap:wrap}

.hero__right{display:flex; justify-content:flex-end}
.hero__card{
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:18px; max-width:420px; box-shadow:var(--shadow)
}
.pill-list{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.pill{padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03)}
.hero__bg{
  position:absolute; inset:-20% -20% auto -20%; height:60%;
  background: radial-gradient(60% 60% at 60% 40%, rgba(71,178,255,.22), transparent 60%),
              radial-gradient(40% 40% at 30% 20%, rgba(116,240,167,.18), transparent 60%);
  pointer-events:none; z-index:-1;
}

/* Cards / grids */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:960px){ .cards{grid-template-columns:1fr} }
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.card--line{border-left:3px solid var(--brand)}
.list{margin:8px 0 0 16px; color:#cbd3e8}

/* Ventajas */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
@media (max-width:960px){ .grid-3,.grid-2{grid-template-columns:1fr} }

.adv{background:var(--card); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:var(--radius)}
.adv__icon{font-size:24px; margin-bottom:8px}

/* Almacenaje */
.callout{background:linear-gradient(180deg, rgba(71,178,255,.08), rgba(116,240,167,.06)); border:1px solid rgba(255,255,255,.1); padding:18px; border-radius:var(--radius)}

/* Form */
.form{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.form__grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.form__grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:960px){ .form__grid-2,.form__grid-3{grid-template-columns:1fr} }

.form__group{display:flex; flex-direction:column; gap:6px}
.form__group label{font-weight:600}
.form__group input,.form__group select{
  background:#0b1120; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:10px 12px; outline:0;
}
.form__group input:focus, .form__group select:focus{border-color:var(--brand)}
.form__group.checkbox{flex-direction:row; align-items:center; gap:10px}
.form__actions{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap}
.form__legal{color:#9fb0cf; font-size:.95rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Quotes */
.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:960px){ .quotes{grid-template-columns:1fr} }
.quote{background:var(--card); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:var(--radius)}
.quote blockquote{margin:0 0 8px}

/* Footer */
.footer{background:#0a0f1b; border-top:1px solid rgba(255,255,255,.06); margin-top:60px}
.footer__grid{display:grid; grid-template-columns:1.2fr .6fr .6fr; gap:16px; padding:22px 0}
@media (max-width:960px){ .footer__grid{grid-template-columns:1fr} }
.footer__list{list-style:none; padding:0; margin:0}
.footer__list a{color:#cbd3e8; text-decoration:none}
.footer__copy{text-align:center; padding:14px 0; color:#95a5c7; border-top:1px solid rgba(255,255,255,.06)}

.brand--footer .brand__logo{height:30px}

/* WhatsApp Float */
.wa-float{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  color:#0b0e14; text-decoration:none; box-shadow:var(--shadow); border:0;
}

/* ===== Parallax para #ventajas ===== */
#ventajas.section--parallax{
  position: relative;
  /* Usar WebP si es posible; recuerda la ruta relativa desde /css */
  background-image: url('assets/servicio_6.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* parallax simple */
  /* Base por si no carga la imagen */
  background-color: var(--alt);
  isolation: isolate; /* para manejar el overlay sin afectar hijos */
}

/* Overlay para contraste del texto */
#ventajas.section--parallax::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none;
  z-index:-1;
}

/* Asegura que el contenido quede por encima del overlay */
#ventajas.section--parallax > .container{
  position: relative;
  z-index: 1;
}

/* Fallback en móviles (mejor rendimiento) */
@media (max-width: 980px), (prefers-reduced-motion: reduce){
  #ventajas.section--parallax{
    background-attachment: scroll;
    background-position: center top;
  }
}