/* Comportamientos base */
html { scroll-behavior: smooth; }

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

header{ background: white; }

.w-10 {
    width: 40px;
}

.h-10 {
    height: 36px;
}

/* Variables */
:root{
  --brand:#0f172a;
  --brand-soft:rgba(15,23,42,.08);
  --brand-ring:rgba(15,23,42,.15);
  --glass:rgba(255,255,255,.7);
}
.dark{
  --brand:#e2e8f0;
  --brand-soft:rgba(226,232,240,.10);
  --brand-ring:rgba(226,232,240,.18);
  --glass:rgba(15,23,42,.6);
}

/* Accesibilidad util */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;border-radius:.75rem;font-weight:600;transition:.2s; cursor:pointer}
.btn:focus{outline:2px solid transparent;box-shadow:0 0 0 4px var(--brand-ring)}
.btn-primary{background:#000;color:#fff}
.dark .btn-primary{background:#fff;color:#000}
.btn-outline{border:1px solid #e5e7eb}
.dark .btn-outline{border-color:#334155}
.btn-outline:hover{background:var(--brand-soft)}
.btn-ghost{background:transparent;border:1px solid transparent}
.btn-ghost:hover{background:var(--brand-soft)}

/* Links nav */
.navlink{position:relative}
.navlink::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:#000;transition:.2s}
.dark .navlink::after{background:#fff}
.navlink:hover::after{width:100%}

/* Hero con gradiente sutil */
.hero{
  background: radial-gradient(1200px 500px at 50% -50%, #e5e7eb, transparent),
              radial-gradient(800px 400px at 100% 0%, #e2e8f0, transparent);
}
.dark .hero{
  background: radial-gradient(1200px 500px at 50% -50%, #0b1220, transparent),
              radial-gradient(800px 400px at 100% 0%, #0f172a, transparent);
}

/* KPIs */
.kpi{display:flex;flex-direction:column;align-items:center;gap:.15rem;background:var(--glass);padding:.75rem;border-radius:.75rem;border:1px solid #e5e7eb}
.dark .kpi{border-color:#334155}
.kpi-n{font-weight:800;font-size:1.15rem}

/* Cards y estética */
.card{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.dark .card{background:#0b1220;border-color:#1f2937}
.card-title{font-weight:700;margin-bottom:.35rem}
.icon{font-size:1.4rem;margin-bottom:.4rem}

/* Precios */
.price-card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.dark .price-card{background:#0b1220;border-color:#1f2937}
.price-title{font-weight:800;margin-bottom:.35rem}
.price{font-size:1.8rem;font-weight:800;margin:.25rem 0 10px}
.price-list{margin:10px 0 16px;padding-left:18px}
.price-list li{margin:.25rem 0}
.featured{outline:2px solid #000}
.dark .featured{outline-color:#fff}
.badge{
  position:absolute;top:10px;right:10px;background:#111;color:#fff;font-size:.7rem;
  padding:.25rem .5rem;border-radius:999px;font-weight:700
}
.dark .badge{background:#fff;color:#000}

/* Works */
.work img{width:100%;height:auto;display:block}

/* FAQ */
.faq{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px}
.dark .faq{background:#0b1220;border-color:#1f2937}
.faq>summary{cursor:pointer;font-weight:600;list-style:none}
.faq>summary::-webkit-details-marker{display:none}

/* Inputs */
.input{
  width:100%;border:1px solid #e5e7eb;padding:12px;border-radius:10px;outline:none;background:#fff;color:#111
}
.dark .input{background:#0b1220;color:#e2e8f0;border-color:#1f2937}
.input:focus{border-color:#0f172a;box-shadow:0 0 0 3px var(--brand-ring)}

/* WhatsApp FAB */
.wa-fab{
  position:fixed;
  right:16px;
  bottom:16px;
  background:#0E860E;
  color:#fff;
  font-weight:700;
  padding:12px 14px;
  border-radius:9999px;
  box-shadow:0 10px 15px 
  rgba(0,0,0,.1);
  z-index:60;
}
.wa-fab:hover{filter:brightness(.95)}

/* Back to top */
.to-top{
  position:fixed;right:16px;bottom:80px;background:#111;color:#fff;border:0;border-radius:10px;
  padding:10px 12px;font-weight:800;z-index:50;box-shadow:0 8px 14px rgba(0,0,0,.15); cursor:pointer
}
.dark .to-top{background:#fff;color:#000}

/* Mobile nav capa visual (no visibilidad) */
.mobile-nav{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-top:1px solid #e5e7eb}
.dark .mobile-nav{background:rgba(2,6,23,.9);border-color:#1f2937}
.mobile-link{display:block;padding:10px 0;border-bottom:1px dashed #e5e7eb}
.dark .mobile-link{border-color:#1f2937}

/* Cookie bar */
.cookie{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;z-index:70
}
.dark .cookie{background:#0b1220;border-color:#1f2937}

/* Forzar que el banner se oculte cuando tenga .hidden */
.cookie.hidden { display: none !important; }


/* Animaciones aparecer */
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.fade-in.delay-1{transition-delay:.08s}
.fade-in.delay-2{transition-delay:.16s}
.fade-in.delay-3{transition-delay:.24s}
.appear{opacity:1;transform:none}

/* ---------- Modal de Privacidad ---------- */
.privacy-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
  opacity:0; pointer-events:none; transition:.2s;
}
.privacy-modal{
  position:fixed; inset:0; display:grid; place-items:center; z-index:91;
  opacity:0; pointer-events:none; transition:.2s;
}
.privacy-box{
  width:min(900px,90vw); max-height:80vh; overflow:auto;
  background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.dark .privacy-box{ background:#0b1220; color:#e2e8f0; border-color:#1f2937 }
.privacy-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #e5e7eb;
}
.dark .privacy-head{ border-color:#1f2937 }
.privacy-content{ padding:16px }
.privacy-overlay.show, .privacy-modal.show{ opacity:1; pointer-events:auto }


#menuBtn{
  display: none;
}
/* Bloqueo de scroll cuando hay modal */
.body-lock {
  overflow: hidden;
  touch-action: none;              /* mejora en iOS */
}

@media (max-width: 800px){
  #menuBtn{
  display: block;
}
}

@media (max-width: 700px){
  .privacy-box{
    width: 650px;
  }
}
@media (max-width: 650px){
  .privacy-box{
    width: 600px;
  }
}
@media (max-width: 600px){
  .privacy-box{
    width: 550px;
  }
}
@media (max-width: 550px){
  .privacy-box{
    width: 500px;
  }
}
@media (max-width: 500px){
  .privacy-box{
    width: 450px;
  }
}
@media (max-width: 450px){
  .privacy-box{
    width: 400px;
  }
}
@media (max-width: 400px){
  .privacy-box{
    width: 350px;
  }
}
@media (max-width: 350px){
  .privacy-box{
    width: 300px;
  }
}
@media (max-width: 300px){
  .privacy-box{
    width: 250px;
  }
}