/* Vistoso y elegante: Azules intensos + gradientes */
:root{
  --brand-900:#0a1a4a;
  --brand-800:#102d74;
  --brand-700:#1748b3;
  --brand-600:#1d63f3;
  --brand-500:#3b82f6;
  --brand-400:#60a5fa;
  --brand-300:#93c5fd;
  --brand-100:#e0f2ff;
  --brand-50:#f5faff;
  --ink:#0a0f1c;
  --ink-600:#334155;
  --bg:#ffffff;
  --bg-soft:#f5f9ff;
  --line:#dce7ff;
  --ring: 0 0 0 3px rgba(29,99,243,.35);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%; display:block}
a{color:var(--brand-600); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px, 92vw); margin-inline:auto}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:1rem; top:1rem; background:#fff; padding:.5rem .75rem; border-radius:.5rem; outline:2px solid var(--brand-600)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg, var(--brand-900), var(--brand-700));
  border-bottom:2px solid var(--brand-600);
  color:#fff;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.brand{display:inline-flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px}
.brand-mark{
  width:36px; height:36px; display:grid; place-items:center;
  background:#fff; color:var(--brand-700); border-radius:.75rem; font-weight:800;
}
.brand-text{font-size:1.125rem}

.site-nav ul{list-style:none; padding:0; margin:0; display:flex; gap:.25rem}
.site-nav a{display:inline-block; padding:.6rem .8rem; border-radius:.6rem; color:#fff}
.site-nav a:hover, .site-nav a:focus{background:rgba(255,255,255,.15); outline:none}

.nav-toggle{display:none; background:transparent; border:0; cursor:pointer; width:44px; height:44px; border-radius:.5rem; position:relative}
.nav-toggle:focus{outline:var(--ring)}
.nav-toggle .bar{position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:transform .2s ease, top .2s ease, opacity .2s ease}
.nav-toggle .bar:nth-child(1){top:14px}
.nav-toggle .bar:nth-child(2){top:21px}
.nav-toggle .bar:nth-child(3){top:28px}
.nav-open .nav-toggle .bar:nth-child(1){top:21px; transform:rotate(45deg)}
.nav-open .nav-toggle .bar:nth-child(2){opacity:0}
.nav-open .nav-toggle .bar:nth-child(3){top:21px; transform:rotate(-45deg)}

@media (max-width: 900px){
  .nav-toggle{display:block}
  .site-nav{position:absolute; inset:64px 0 auto 0; background:var(--brand-800); transform:translateY(-120%); transition:transform .2s ease}
  .site-nav ul{flex-direction:column; padding:.5rem}
  .nav-open #siteNav{transform:translateY(0)}
}

/* Hero */
.hero{position:relative; display:grid; min-height:70vh; place-items:center; color:#fff; isolation:isolate}
.hero-media{
  position:absolute; inset:0; background:
    linear-gradient(180deg, rgba(10,26,74,.7), rgba(23,72,179,.9)),
    var(--bg) center/cover no-repeat;
  z-index:-1;
}
.hero-content{padding:min(12vh,10rem) 0; text-align:center}
.hero h1{font-size:clamp(2.25rem,6vw,3.75rem); margin:0 0 .25rem 0; letter-spacing:.5px; color:#fff}
.hero p{margin:0 0 1.25rem 0; color:#e0f2ff}
.cta-row{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:.85rem 1.25rem; border-radius:.7rem; font-weight:700; border:2px solid transparent; transition:transform .12s ease, background .15s ease, color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:#fff; color:var(--brand-700); border-color:#fff}
.btn-primary:hover{background:#f0f7ff; color:var(--brand-800)}
.btn-ghost{background:transparent; color:#fff; border-color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}

/* Sections */
.section{padding:clamp(3.5rem,7vw,5.5rem) 0; background:#fff}
.section-tint{background:linear-gradient(180deg, var(--brand-50), #fff)}
.section-head h2{font-size:clamp(1.7rem,5vw,2.25rem); margin:0 0 .25rem 0; color:var(--brand-800)}
.section-head p{margin:0; color:var(--ink-600)}

.grid{display:grid; gap:1.25rem}
.cards-4{grid-template-columns:repeat(4,1fr)}
.products{grid-template-columns:repeat(4,1fr)}
.contact{grid-template-columns:1.2fr .8fr; align-items:start}
@media(max-width:1000px){
  .cards-4,.products{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
}
@media(max-width:540px){
  .cards-4,.products{grid-template-columns:1fr}
}

/* Cards */
.card{background:linear-gradient(180deg,#fff,var(--brand-50)); color:var(--ink); border:1px solid var(--line); border-radius:1rem; padding:1.25rem; box-shadow:0 8px 24px rgba(23,72,179,.15)}
.card .icon{font-size:1.8rem; margin-bottom:.5rem}

/* Products */
.product{cursor:pointer; border:1px solid var(--line); border-radius:1rem; overflow:hidden; background:#fff; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 10px 26px rgba(29,99,243,.15)}
.product:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(23,72,179,.25)}
.product .media{aspect-ratio:4/3; background:var(--brand-100)}
.product .media img{width:100%; height:100%; object-fit:cover}
.product .meta{display:flex; justify-content:space-between; padding:.95rem 1rem}
.product .price{color:var(--brand-700); font-weight:800}

/* FAQ */
.faq details{border:1px solid var(--line); border-radius:.8rem; padding:1rem 1.1rem; margin-bottom:.9rem; background:#f9fbff}
.faq summary{cursor:pointer; font-weight:700; color:var(--brand-800)}
.faq p{margin:.5rem 0 0 0; color:#334155}

/* Contact */
.map-wrap{aspect-ratio:16/10; border-radius:1rem; overflow:hidden; border:2px solid var(--brand-100); background:var(--brand-50)}
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:.85rem}
.contact-list .clabel{font-size:.8rem; color:#64748b}
.contact-list .cvalue{font-weight:800; color:var(--brand-800)}

/* Footer */
.site-footer{background:linear-gradient(180deg,var(--brand-800),var(--brand-900)); color:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 0; flex-wrap:wrap}
.footer-links{list-style:none; display:flex; gap:1.25rem; padding:0; margin:0}
.footer-links a{color:#cbd5e1}
.footer-links a:hover{color:#fff}

/* Modal */
.modal{position:fixed; inset:0; display:none; place-items:center; z-index:100}
.modal[open]{display:grid}
.modal-backdrop{position:absolute; inset:0; background:rgba(10,26,74,.65)}
.modal-dialog{position:relative; z-index:1; width:min(1000px,92vw); display:grid; grid-template-columns:1.2fr .8fr; background:#fff; border-radius:1rem; overflow:hidden; box-shadow:0 30px 100px rgba(10,26,74,.35)}
.modal-body{padding:1.25rem}
.modal-body .price{color:var(--brand-700); font-weight:900; font-size:1.3rem; margin:.25rem 0 1rem}
.modal-close{position:absolute; top:.75rem; right:.75rem; width:40px; height:40px; border:0; background:#fff; color:var(--brand-800); border-radius:.6rem; cursor:pointer; border:1px solid var(--line)}
.modal .actions .btn-primary{background:var(--brand-600); color:#fff; border-color:var(--brand-600)}
.modal .actions .btn-primary:hover{background:var(--brand-700)}

@media(max-width:900px){.modal-dialog{grid-template-columns:1fr}}


/* Fondo azul elegante para servicios y productos */
#servicios.section {
  background: linear-gradient(180deg, var(--brand-100), var(--brand-300));
}

#productos.section {
  background: linear-gradient(180deg, var(--brand-300), var(--brand-100));
}


/* ===== Noticias ===== */
.news-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width: 1000px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 540px){.news-grid{grid-template-columns:1fr}}

.news-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.1rem;
  box-shadow:0 8px 22px rgba(23,72,179,.12);
  display:flex; flex-direction:column; gap:.6rem;
}
.news-card h3{margin:.25rem 0 .25rem; color:var(--brand-800); font-size:1.05rem}
.news-card p{margin:0; color:#334155}
.news-meta{display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:#64748b; font-size:.9rem}
.badge{
  display:inline-block; padding:.25rem .5rem; border-radius:.5rem; font-weight:800;
  background:var(--brand-100); color:var(--brand-800); border:1px solid var(--line);
}
.badge-info{background:var(--brand-300); color:#0a0f1c; border-color:transparent}
.badge-update{background:var(--brand-50); color:var(--brand-700)}
.news-actions{margin-top:.25rem}


/* ===== Centrar productos ===== */
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.product h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--brand-800);
}

.product .media {
  margin: 0.5rem 0;
}

.product .media img {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0.5rem;
}

.product .price {
  margin-top: 0.5rem;
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--brand-700);
}



/* ===== Contador de visitas (renglón delgado, azul con texto blanco) ===== */
.visit-counter{
  background: var(--brand-600, #1d63f3);
  color: #fff;
  text-align: center;
  font-weight: 700;
  letter-spacing: .3px;
  font-size: .95rem;
  padding: .35rem 0;           /* renglón delgado */
  border-top: 1px solid var(--brand-400, #60a5fa);
}
.visit-counter #visitCount{ color:#fff; }