*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{font-family:var(--heading-font),sans-serif;letter-spacing:-0.015em;margin:0 0 .6rem}
.sectionTitle{font-family:var(--heading-font),sans-serif}
/* Espaciado inferior suave en todos los títulos */
h1,h2,h3,h4,.sectionTitle{padding-bottom:6px}
/* Títulos en tarjetas/productos */
#catalogo .product h3,
.product .body h3{font-family:var(--heading-font) !important;letter-spacing:-0.015em}
/* Jerarquía de pesos */
h1,.sectionTitle{font-weight:800}
h2{font-weight:700}
h3{font-weight:600}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;gap:.5rem;align-items:center;padding:.9rem 1.2rem;border-radius:12px;border:2px solid transparent;background:var(--primary);color:var(--white);font-weight:800;box-shadow:var(--shadow);transition:.2s}
.btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--primary);color:var(--primary);box-shadow:none}
.badge{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #eee;color:#333;
  padding:.5rem .7rem;border-radius:999px;font-size:.9rem;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.icon{width:20px;height:20px;display:inline-block}
.sectionTitle{font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.12em;font-size:1.5rem}

/* --- TOP BAR --- */
.topbar{background:var(--secondary);color:#f5f5f5;font-size:.92rem}
.topbar .wrap{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;justify-content:center;padding:8px 0}
.topbar .wrap .badge{background:transparent;border-color:#333;color:#eee}

/* --- TOP BAR 2 --- */
.topbar2{background:var(--secondary);color:#f5f5f5;font-size:.92rem}
.topbar2 .wrap{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;justify-content:center;padding:8px 0}
.topbar2 .wrap .badge{background:transparent;border-color:#444;color:#fff}

/* --- NAV --- */
/* Keep nav sticky at the very top; promo bar will stick right below it */
.nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--white);
  border-bottom: 1px solid #eee;
}
.nav .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(72px * 0.80); /* Reducir el alto en un 15% */
}
.nav .row .menu{
  transform: scale(.78); /* Reducir el contenido en un 15% */
}

.primary{display:flex;align-items:center;gap:.65rem;font-weight:900;font-family:Montserrat}
.primary .mark{width:34px;height:34px;border-radius:8px;background:var(--primary);position:relative;box-shadow:0 6px 18px rgba(204,70,40,.35)}
/* marca simple: rayo + huella */
.mark:before{content:"";position:absolute;left:8px;top:7px;width:18px;height:18px;border-left:8px solid var(--white);
  transform:skew(-18deg) rotate(-18deg)}
.mark:after{content:"";position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:50%;
  border:4px solid var(--white)}
.menu{display:flex;gap:1.2rem;align-items:center}
.menu a{color:#333;font-weight:700}
.menu .cta{margin-left:.4rem}

/* Mobile menu for screens approx. < 14" (width ≤ 1024px) */
@media (max-width: 1024px) {
  .nav { position: sticky; }
  .nav .container.row { align-items: center; justify-content: space-between; }
  .nav .menu-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827; }
  .nav .menu { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #ffffff; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
  .nav.open .menu { display: block; }
  .nav .menu a { display: block; padding: 10px 8px; }
}
@media (min-width: 1025px) { .nav .menu-toggle { display: none; } }

/* --- HERO --- */
.hero{background:linear-gradient(180deg,#fff 0%, #fff 60%, #f4f4f4 100%);border-bottom:1px solid #eee}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:56px 0}
.kicker{font-weight:800;color:var(--white);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:.35rem 0 .8rem}
.hero p{font-size:1.05rem;color:#333;margin:0 0 1.2rem;max-width:58ch}
.hero .badges{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.2rem}
.hero .panel{
  background:rgba(17, 16, 16, 0.9);
  border-radius:16px;
  color:var(--white);
  box-shadow:var(--shadow);
  padding:22px;
}
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.metric{background:#111;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;text-align:center}
.metric strong{font-family:Montserrat;font-size:1.2rem}

/* --- STRIPE DE GARANTÍAS --- */
.stripe{background:var(--secondary);color:#fff}
.stripe .wrap{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;padding:16px 0}
.stripe .wrap .badge{background:transparent;border-color:#444;color:#fff}

/* --- SECCIONES --- */
.section{padding:60px 0}
.section.gray{background:#fff}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--primary);border-radius:var(--radius);padding:20px; }
.card h3{margin-bottom:.3rem}
.card p{color:#444}

/* Servicios */
.services .card{display:flex;flex-direction:column;gap:.6rem}
.services .card ul{margin:.2rem 0 0 1rem;color:#444}
.services .card .btn{margin-top:auto}

/* Segmentación */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tile{border:1px solid #eee;border-radius:var(--radius);background:#fff;padding:18px;box-shadow:var(--shadow)}
.tile h4{font-family:Montserrat;margin:0 0 .4rem}
.tile small{color:var(--muted)}

/* Comparador */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare .col{background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.compare ul{margin:.2rem 0 0 1rem}

/* Catálogo */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:.8rem 0 1.2rem}
.filters .chip{padding:.45rem .7rem;border-radius:999px;border:1px solid #ddd;background:#fff;cursor:pointer}
.filters .chip.active{border-color:var(--primary);color:#fff;background:var(--primary)}
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product{background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column}
.product .body{padding:16px}
.product .meta{color:#555;font-size:.95rem}
.price{font-family:Montserrat;font-weight:900}
.price small{font-weight:600;color:#666}

/* Dónde encontrarnos */
.map{height:320px;background:#e9ecef;border-radius:var(--radius);border:1px solid #e5e5e5}

/* Footer */
.footer{background:var(--secondary);color:#ddd;border-top:1px solid #222}
.footer a{color:#eee}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:20px;padding:40px 0}
.footer form input,.footer form textarea{width:100%;padding:.8rem;border-radius:10px;border:1px solid #333;background:#0d0d0d;color:#fff}
.footer form button{margin-top:.6rem}
.footer .tagline{margin:.6rem 0 0;color:#bbb}
.footer .badges-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.footer .links{list-style:none;padding:0;margin:0;color:#bbb}
.footer .bottom{padding:0 0 26px;color:#666}

/* Bottom actions (móvil) */
.bottombar{position:fixed;left:0;right:0;bottom:0;background:#111;color:#fff;display:none;gap:8px;justify-content:space-around;padding:10px; z-index: 9999;}
.bottombar a{color:#fff;border:1px solid #444;padding:.65rem .8rem;border-radius:10px}

/* Botón flotante volver arriba */
.to-top{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;box-shadow:var(--shadow);opacity:.9;transition:opacity .2s, transform .2s}
.to-top:hover{opacity:1;transform:translateY(-2px)}
.to-top.hidden{opacity:0;pointer-events:none;transform:translateY(6px)}
.to-top svg{pointer-events:none}
.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}

@media (max-width:640px){
  .to-top{right:12px;bottom:12px;width:44px;height:44px;border-radius:50%};
}

/* Modal producto */
.dialog{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px}
.dialog[open]{display:flex}
.sheet{background:#fff;max-width:880px;width:100%;border-radius:18px;box-shadow:0 40px 60px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.sheet header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #eee}
.sheet .content{display:grid;grid-template-columns:1fr 1.2fr;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}
.sheet .media{min-height:320px;background:#f6f6f6}
.sheet .media img{width:100%;height:100%;object-fit:cover;display:block}
.specs{padding:18px}
.specs h3{margin:.3rem 0 .6rem}
.specs ul{margin:.4rem 0 0 1.2rem}
.close{background:transparent;border:0;font-size:1.8rem;cursor:pointer}

/* Responsivo */
@media (max-width:960px){
  .hero .grid{grid-template-columns:1fr}
  .mini-metrics{grid-template-columns:repeat(3,1fr)}
  .tiles,.catalog{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .compare{grid-template-columns:1fr}
  .sheet{max-width:calc(100% - 40px)}
  .footer .container{padding-left:28px;padding-right:28px}
  /* Lateral padding for home (hero) section on mobile */
  #home .container{padding-left:28px;padding-right:28px}
  .sheet .content{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .bottombar{display:flex}
}
@media (max-width:640px){
  .tiles,.catalog,.grid-3{grid-template-columns:1fr}
  .mini-metrics{grid-template-columns:1fr 1fr 1fr}
  .footer .cols{grid-template-columns:1fr}
  .dialog{padding:12px}
  .sheet{max-width:calc(100% - 24px);border-radius:12px}
  .sheet header{padding:12px 16px}
  .sheet .media{min-height:200px}
  .specs{padding:14px}
}