/* ===========================
   Climatrix — styles.css v220 (consolidado y limpio)
   =========================== */

/* ---- Base / Layout ---- */
:root{
  --wrap: min(1100px, 92%);
  --ink: #111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --chip:#eef1f4;
  --bg:#f8fafc;
  --brand:#e60012;    /* rojo chips/footer */
  --wa:#25D366;       /* WhatsApp */
  --wa-hover:#1ebe5d;
  --card-shadow:0 8px 20px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.wrap, .container{ width:var(--wrap); margin:0 auto; }

/* ---- Buttons / Chips ---- */
.btn, .btn-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  font-weight:800; font-size:14px; text-decoration:none;
  border:2px solid transparent; transition:.15s ease;
  white-space:nowrap;
}
.btn.primary, .btn-chip.primary{ background:var(--wa); color:#fff; border-color:var(--wa); }
.btn.primary:hover, .btn-chip.primary:hover{ background:var(--wa-hover); border-color:var(--wa-hover); }
.btn.ghost, .btn-chip.ghost{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn.ghost:hover, .btn-chip.ghost:hover{ background:var(--brand); color:#fff; }

/* ==================
   HEADER (topbar)
   ================== */
.topbar{
  background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.topbar .bar{ height:56px; display:flex; align-items:center; justify-content:space-between; }
.topbar .brand{ font-weight:900; color:var(--brand); }
.menu-toggle{
  display:none; border:2px solid var(--brand); color:var(--brand);
  background:#fff; padding:6px 8px; border-radius:10px; cursor:pointer;
}
.nav{ display:flex; gap:14px; align-items:center; }
.nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:2px solid var(--brand); background:#fff; color:var(--brand);
  font-weight:800; font-size:14px; text-decoration:none;
  box-shadow:0 6px 14px rgba(230,0,18,.10);
  transition:.15s ease;
}
.nav a:hover:not(.whatsapp){
  background:var(--brand); color:#fff;
  box-shadow:0 10px 22px rgba(230,0,18,.18);
}
.nav a.active{
  background:var(--brand); color:#fff;
  box-shadow:0 12px 26px rgba(230,0,18,.22);
}
.nav a.whatsapp{
  border-color:var(--wa); background:var(--wa); color:#fff;
  box-shadow:0 10px 22px rgba(37,211,102,.22);
}
.nav a.whatsapp:hover{ filter:brightness(.95); }

@media (max-width:820px){
  .menu-toggle{ display:inline-flex; }
  .nav{
    position:fixed; left:0; right:0; bottom:0;
    background:#fff; border-top:1px solid var(--line);
    padding:12px; display:grid; gap:8px;
    transform:translateY(100%); transition:.18s ease;
  }
  body.nav-open .nav{ transform:translateY(0); }
  .nav a{ width:100%; justify-content:center; margin:6px 0; }
}

/* ==================
   PRODUCTS (catalog)
   ================== */
.catalog{ padding:40px 20px 64px; }
.catalog .wrap{ width:var(--wrap); margin:0 auto; }
.catalog-head{ margin-bottom:14px; }
.catalog-head h1{ margin:0 0 6px; font-size:clamp(22px,3.4vw,32px); }
.catalog-head p{ color:var(--muted); margin:0; }
.catalog-intro{ margin:10px 0 18px; color:#374151; line-height:1.55; }
.catalog-intro p{ margin:0 0 10px; }

.catalog-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:1024px){ .catalog-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  .catalog-grid{ grid-template-columns:1fr; } }

.catalog-item{
  background:#fff; border-radius:14px; padding:14px; box-shadow:var(--card-shadow);
  display:flex; flex-direction:column; gap:10px;
}

.catalog-figure{
  border-radius:12px; background:#f3f4f6;
  display:grid; place-items:center; overflow:hidden;
  padding:8px; height:210px;
}
.catalog-figure img{
  width:auto; height:auto; max-width:100%; max-height:194px;
  object-fit:contain; display:block;
}

.catalog-title{
  font-size:16px; font-weight:800; margin:0;
  display:flex; align-items:center; gap:8px;
}
.catalog-badge{
  font-size:11px; padding:3px 8px; border-radius:999px;
  background:#eef1f4; color:#111827; font-weight:800;
}
.catalog-price{ font-weight:900; font-size:18px; color:#111827; }

.catalog-specs{
  list-style:none; padding:0; margin:0;
  display:grid; gap:4px; color:#6b7280; font-size:13px;
}

.catalog-ctas{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }

.catalog-item.top{ border:2px solid var(--brand); box-shadow:0 10px 26px rgba(230,0,18,.14); position:relative; }
.top-badge{
  position:absolute; top:8px; left:8px;
  background:var(--brand); color:#fff; padding:4px 8px; border-radius:999px;
  font-size:11px; font-weight:800;
}
.price-tag{
  padding:6px 10px; border:2px solid var(--brand); color:var(--brand);
  background:#fff; border-radius:10px; display:inline-flex; align-items:center; gap:6px;
  font-weight:900; font-size:14px;
}

/* FAQ catalog */
.catalog-faq{ margin-top:36px; }
.catalog-faq h2{ font-size:clamp(18px,2.4vw,24px); margin:0 0 10px; }
.catalog-faq details{ background:#fff; border:1px solid #eef1f4; border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.catalog-faq summary{ cursor:pointer; font-weight:800; color:#111827; }
.catalog-faq p{ margin:8px 0 0; color:#374151; }
.muted-note{ color:#9ca3af; font-size:12px; margin-top:4px; }

/* ==================
   SERVICES (services)
   ================== */
.services{ padding:40px 20px 64px; }
.services .wrap{ width:var(--wrap); margin:0 auto; }
.services-head{ margin-bottom:14px; }
.services-head h1{ margin:0 0 6px; font-size:clamp(22px,3.4vw,32px); }
.services-head p{ color:var(--muted); margin:0; }

.hero{
  background:#fff; border-radius:14px; box-shadow:var(--card-shadow);
  overflow:hidden; display:grid; grid-template-columns:1.15fr 1fr;
}
@media (max-width:960px){ .hero{ grid-template-columns:1fr; } }
.hero-text{ padding:18px 18px 12px; display:flex; flex-direction:column; gap:10px; }
.hero-text h2{ margin:0; font-size:clamp(20px,3vw,26px); }
.hero-text p{ margin:0; color:var(--muted); }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.hero-media{ display:grid; place-items:center; padding:12px; background:#fff; }
.hero-media img{ width:100%; height:auto; object-fit:contain; border-radius:12px; }

.grid-3{ display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1024px){ .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  .grid-3{ grid-template-columns:1fr; } }

.svc-card{ background:#fff; border-radius:14px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; min-height:100%; }
.svc-media{ display:grid; place-items:center; padding:10px; }
.svc-media img{ width:100%; max-height:210px; object-fit:contain; border-radius:12px; background:#fff; }
.svc-body{ padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.svc-body h3{ margin:0; display:flex; align-items:center; gap:8px; }
.svc-body p{ margin:0; color:#374151; }
.svc-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:13px; color:var(--muted); }
.svc-cta{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* Galería */
.gallery{ background:#fff; border-radius:14px; box-shadow:var(--card-shadow); padding:14px; }
.gallery-grid{ display:grid; gap:12px; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1024px){ .gallery-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);} }
.gallery-grid img{ width:100%; height:auto; object-fit:contain; background:#fff; border-radius:10px; }

/* FAQ services */
.svc-faq{ margin-top:18px; }
.svc-faq h2{ font-size:clamp(18px,2.4vw,24px); margin:0 0 10px; }
.svc-faq details{ background:#fff; border:1px solid #eef1f4; border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.svc-faq summary{ cursor:pointer; font-weight:800; color:#111827; }
.svc-faq p{ margin:8px 0 0; color:#374151; }

/* ==================
   AREAS (areas-page)
   ================== */
.areas-page{ padding:0 0 64px; }
.areas-hero{ padding:24px 20px 0; }
.areas-title{ margin:0; font-size:clamp(24px,3.2vw,32px); }
.areas-sub{ color:var(--muted); }
.areas-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0; }
.areas-quicklinks{ padding:10px 0; }
.areas-chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.areas-chip{ display:inline-block; background:#f3f4f6; border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-weight:800; color:var(--ink); text-decoration:none; font-size:13px; }
.areas-chip:hover{ background:#e9eef3; }
.areas-grid{ padding:12px 20px; }
.areas-cards{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .areas-cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .areas-cards{ grid-template-columns:1fr; } }
.areas-card{ background:#fff; border-radius:14px; box-shadow:var(--card-shadow); padding:16px; }
.areas-card h3{ margin:0 0 6px; }
.areas-link{ text-decoration:none; font-weight:800; color:var(--brand); }

/* ==================
   HOME (home)
   ================== */
.home{ padding:0 20px 64px; }
.home .wrap{ width:var(--wrap); margin:0 auto; }
.home .hero{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  background:#fff; border-radius:14px; box-shadow:var(--card-shadow); overflow:hidden; margin-top:16px;
}
@media(max-width:960px){ .home .hero{ grid-template-columns:1fr; } }
.home .hero-text{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.home .hero-text h1{ margin:0; font-size:clamp(24px,3.4vw,34px); }
.home .hero-text p{ margin:0; color:#muted; }
.home .hero-text .cta{ display:flex; flex-wrap:wrap; gap:10px; }
.home .hero img{ width:100%; height:auto; object-fit:contain; }
.areas-quick{ margin-top:28px; }
.areas-quick h2{ margin:0 0 10px; font-size:clamp(20px,3vw,26px); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ background:#f3f4f6; border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-weight:700; color:var(--ink); text-decoration:none; font-size:13px; }
.chip:hover{ background:#e9eef3; }
.adv{ margin-top:28px; display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:900px){ .adv{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .adv{ grid-template-columns:1fr;} }
.adv-card{ background:#fff; border-radius:14px; box-shadow:var(--card-shadow); padding:16px; display:flex; flex-direction:column; gap:6px; }
.adv-card h3{ margin:0; font-size:16px; display:flex; align-items:center; gap:6px; }
.adv-card p{ margin:0; font-size:14px; color:#374151; }
.home-intro{ margin-top:28px; background:#fff; border-radius:14px; box-shadow:var(--card-shadow); padding:16px; color:#374151; line-height:1.6; }
.home-intro h2{ margin:0 0 8px; font-size:clamp(18px,2.6vw,24px); }
.home-intro p{ margin:0 0 10px; }
.home-intro ul{ margin:8px 0 0; padding-left:18px; }

/* =========================================================
   FOOTER OSCURO
   ========================================================= */
.footer-dark{
  background:#0d1322;
  color:#e5e7eb;
  padding:40px 20px 28px;
}
.footer-dark .wrap{ width:var(--wrap); margin:0 auto; }
.footer-dark .cols-top{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items:start;
}
.footer-dark .f-col{ min-width:0; }
.footer-dark .f-brand{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.footer-dark .f-badge{
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-weight:900; border-radius:14px;
  box-shadow:0 10px 26px rgba(230,0,18,.25);
}
.footer-dark .f-name{ font-size:26px; font-weight:900; color:#fff; line-height:1; }
.footer-dark .f-sub{ font-weight:800; color:#f3f4f6; opacity:.85; }
.footer-dark .f-desc{ margin:0; color:#cbd5e1; line-height:1.6; }

.footer-dark .f-h4{ margin:0 0 8px; color:#fff; font-size:18px; font-weight:900; }
.footer-dark .f-list{ list-style:none; padding:0; margin:0 0 8px; display:grid; gap:6px; }
.footer-dark .contact-link{
  color:#e5e7eb; text-decoration:none; font-weight:800;
  display:inline-flex
  .footer-dark .areas-row .chip{
  background: var(--brand);
  color:#fff;
  border:0;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  box-shadow:0 10px 26px rgba(230,0,18,.25);
}
/* ✅ Forzar las 2 fotos de instalación en 1 sola columna */
.top-install-shots {
  display: grid !important;
  grid-template-columns: 1fr !important; /* siempre una sola columna */
  gap: 16px !important;
}

.top-install-shots .shot {
  width: 100% !important;
  max-width: none !important;
}

.top-install-shots .media {
  aspect-ratio: 16/9; /* mantiene proporción sin deformar */
}

.top-install-shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.top-model .right-col .top-install-shots .media{
  aspect-ratio: 16/9;   /* evita distorsión */
}

.top-model .right-col .top-install-shots img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* === PROMO BANNER === */
.promo{
  margin:40px auto 18px;              /* un pelín más cerca del top product */
  background: linear-gradient(135deg, rgba(230,0,18,.06), rgba(0,102,204,.05));
  border:1px solid rgba(230,0,18,.18);
  border-radius:16px;
  padding:22px 16px;
  text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.promo .wrap{ width:min(1100px,92%); margin:0 auto; }

.promo-badge{
  display:inline-block;
  margin-bottom:6px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:11px;
  letter-spacing:.3px;
  color:#fff;
  background:#e60012;                 /* rojo corporativo */
  box-shadow:0 8px 18px rgba(230,0,18,.25);
}

.promo-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 38px); /* más grande */
  color: #e60012;                    /* rojo corporativo */
  font-weight: 900;                   /* más bold */
  letter-spacing: -0.5px;
  text-transform: uppercase;          /* MAYÚSCULAS para más impacto */
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

.promo-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #e60012, #ff4d4d);
  border-radius: 2px;
}
.promo {
  width: var(--wrap);
  margin: 40px auto;
  padding: 0 14px;
}
.promo .wrap {
  background: #e6f3f2;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.promo-title {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.promo-sub {
  font-size: 1.1rem;
  margin: 0 auto;
  max-width: 600px;
  line-height: 1.5;
  color: #374151;
}