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

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

header{ background: white; }

.w-10 { width: 40px; }
.h-10 { height: 36px; }

/* 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
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e5e7eb;
  transition:box-shadow .25s ease, background .25s ease;
}

/* 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;text-decoration:none;
}
.btn:focus{
  outline:2px solid transparent;box-shadow:0 0 0 4px rgba(15,23,42,.15)
}
.btn-primary{
  background:#111827;color:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.25);
}
.btn-primary:hover{
  background:#020617;transform:translateY(-1px) scale(1.02);
}
.btn-outline{
  border:1px solid #e5e7eb;background:#fff;color:#111827;
}
.btn-outline:hover{background:#f3f4f6}
.btn-ghost{background:transparent;border:1px solid transparent}
.btn-ghost:hover{background:rgba(0,0,0,.04)}

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

/* HERO PREMIUM */
.hero{
  background: radial-gradient(130% 130% at 0% 0%, #e0f2fe 0, transparent 55%),
              radial-gradient(120% 120% at 100% 100%, #fee2e2 0, transparent 55%),
              #ffffff;
}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap:3rem;
  align-items:center;
}
.hero-copy{}
.hero-title{
  font-size:2.6rem;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.04em;
  margin-bottom:1rem;
}
.hero-subtitle{
  font-size:1.05rem;
  opacity:.9;
  max-width:30rem;
  margin-bottom:1.5rem;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem;
}
.hero-kpis{
  display:flex;flex-wrap:wrap;gap:.75rem;
}
.kpi{
  display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
  background:rgba(255,255,255,.9);
  padding:.75rem 1rem;border-radius:.9rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 25px rgba(15,23,42,.06);
  font-size:.85rem;
}
.kpi-n{font-weight:800;font-size:1rem}

.hero-visual{
  display:flex;flex-direction:column;gap:.75rem;
}
.hero-card{
  background:#ffffff;
  border-radius:1.5rem;
  padding:.75rem;
  border:1px solid #e5e7eb;
  box-shadow:0 24px 60px rgba(15,23,42,.12);
}
.hero-card img{
  width:100%;height:auto;border-radius:1rem;display:block;
}
.hero-note{
  font-size:.8rem;
  opacity:.75;
}

/* Section titles */
.section-title{
  font-size:1.9rem;
  font-weight:800;
  margin-bottom:.25rem;
}
.section-subtitle{
  font-size:.95rem;
  opacity:.8;
  max-width:34rem;
}

/* Cards y estética */
.card{
  background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(15,23,42,.10);
}
.card-title{font-weight:700;margin-bottom:.35rem}
.icon{font-size:1.4rem;margin:.4rem 0}

/* Medias */
.service-media img,
.process-media img,
.zona-media img{
  width:100%;height:160px;object-fit:cover;border-radius:14px;margin-bottom:.65rem;
}
.work-media img{
  width:100%;height:auto;display:block;border-radius:14px;
}

/* Precios */
.price-card{
  position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:18px;
  padding:20px;box-shadow:0 16px 40px rgba(15,23,42,.06)
}
.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 #111827}
.badge{
  position:absolute;top:10px;right:10px;background:#111827;color:#fff;font-size:.7rem;
  padding:.25rem .5rem;border-radius:999px;font-weight:700
}

/* FAQ */
.faq{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px
}
.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
}
.input:focus{border-color:#0f172a;box-shadow:0 0 0 3px rgba(15,23,42,.15)}

/* 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,.15);
  z-index:60;
}
.wa-fab:hover{filter:brightness(.95)}

/* Back to top */
.to-top{
  position:fixed;right: 16px;bottom: 140px;background:#111827;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
}
.hidden { display: none !important; }

/* Mobile nav */
.mobile-nav{
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid #e5e7eb
}
.mobile-link{
  display:block;padding:10px 0;border-bottom:1px dashed #e5e7eb
}

/* 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
}
.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:#111827; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.privacy-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #e5e7eb;
}
.privacy-content{ padding:16px }
.privacy-overlay.show, .privacy-modal.show{ opacity:1; pointer-events:auto }

.body-lock { overflow: hidden; touch-action: none; }

/* Chatbot */
#eryos-fab{
  position:fixed;right:20px;bottom:75px;z-index:9999;width:56px;height:56px;border:0;border-radius:50%;
  background:black;color:#fff;font:600 22px/56px system-ui;box-shadow:0 12px 28px rgba(0,0,0,.2);cursor:pointer
}
#eryos-overlay{position:fixed;inset:0;z-index:9998;background:rgba(15,23,42,.5);display:none}
#eryos-panel{
  position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(720px,92vw);height:min(80vh,84vh);background:#fff;border-radius:16px;border:1px solid #e5e7eb;
  box-shadow:0 30px 60px rgba(2,6,23,.25);display:flex;flex-direction:column;overflow:hidden
}
#eryos-head{
  background:black;color:#fff;padding:12px 16px;font:600 14px system-ui;display:flex;align-items:center;justify-content:space-between
}
#eryos-close{background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer}
#eryos-body{flex:1;overflow:auto;padding:14px;background:#f8fafc}
#eryos-body .msg{margin:8px 0;font:14px system-ui}
#eryos-body .me{text-align:right}
#eryos-body .bot{text-align:left}
#eryos-input{display:flex;gap:8px;padding:12px;border-top:1px solid black;background:#fff}
#eryos-text{flex:1;border:1px solid black;border-radius:12px;padding:10px 12px;font:14px system-ui}
#eryos-send{border:0;background:black;color:#fff;border-radius:12px;padding:10px 14px;font:600 14px system-ui;cursor:pointer}

/* Responsivo hero */
@media (max-width: 1024px){
  .hero-grid{
    grid-template-columns: minmax(0,1fr);
  }
}
@media (max-width: 768px){
  .hero{
    padding-top:2rem;
  }
}
@media (max-width: 640px){
  .hero-title{font-size:2.1rem}
  .privacy-box{width:96vw}
}