/*
Theme Name: ECATL + WooCommerce (FULL)
Theme URI: https://ecatl.shop
Author: ECATL
Author URI: https://ecatl.shop
Description: Tema completo ECATL con integración WooCommerce, mini‑carrito, Customizer y plantilla 'Comparador CCTV'.
Version: 1.2.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecatl
*/
:root{
  --primary:#0b1f3b;       /* azul marino */
  --accent:#1a73e8;        /* azul rey */
  --bg:#f6f8fb;
  --text:#0b1220;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:16px;
  --ring:rgba(26,115,232,.35);
  --shadow:0 1px 6px rgba(0,0,0,.05), 0 6px 24px rgba(11,31,59,.06);
  --maxw:1200px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:38px;width:auto}
.brand .name{font-weight:800;color:var(--primary);letter-spacing:.2px}
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid #d8dee8;background:#fff;color:var(--primary);padding:8px 12px;border-radius:10px;font-size:13px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cart-pill{display:inline-flex;gap:6px;align-items:center;border:1px solid #d8dee8;background:#fff;padding:6px 10px;border-radius:999px;font-size:13px}
.cart-pill .count{background:var(--accent);color:#fff;border-radius:999px;padding:2px 8px;font-weight:700}

/* ===== HERO ===== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  /* Degradado + imagen DESKTOP (16:9) */
  background:
    linear-gradient(120deg, rgba(11,31,59,.72), rgba(16,43,85,.35)),
    url('https://ecatl.shop/wp-content/uploads/2025/08/hero-desktop.png') center center / cover no-repeat;
  background-color:#0b1f3b; /* color base si falla la imagen */
  border-bottom:1px solid #e5e7eb;
  min-height:320px; /* altura de fábrica en escritorio */
}
/* Eliminado el ::before anterior para evitar conflicto */

.hero .inner{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto; padding:38px 20px 26px;
}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(26,115,232,.10);border:1px solid var(--ring);color:var(--accent);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600}
.hero h1{margin:10px 0 8px;color:#fff;font-size:clamp(22px,4.2vw,36px);font-weight:900;letter-spacing:.2px}
.hero p{margin:0;color:#e6eefc;max-width:900px}
.hero .contact{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.9);color:var(--primary);border:1px solid #e7eef9;border-radius:999px;padding:6px 10px;font-size:12px}

/* ===== FOOTER + CONTENT ===== */
.footer{margin-top:24px;padding:18px 20px;border-top:1px solid #e5e7eb;background:#fff}
.footer .cols{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.made{font-size:12px;color:var(--muted)}
.entry-content{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}

/* ===== WooCommerce ===== */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button{
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:10px; padding:10px 14px;
}
.woocommerce .button.alt,.woocommerce a.button.alt{background:var(--primary);border-color:var(--primary)}
.woocommerce div.product .product_title{color:var(--primary);font-weight:900}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;
}
.woocommerce .price{color:var(--primary);font-weight:700}
.woocommerce-message,.woocommerce-error,.woocommerce-info{border-radius:12px}
.woocommerce-message{border-top-color:var(--accent)}
.woocommerce-error{border-top-color:#ef4444}
.woocommerce-info{border-top-color:#14b8a6}

/* Mini-cart dropdown */
.minicart{position:relative}
.minicart-panel{display:none;position:absolute;right:0;top:120%;width:320px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:var(--shadow);padding:12px;z-index:60}
.minicart.open .minicart-panel{display:block}
.minicart .mini-items{max-height:320px;overflow:auto}
.minicart .mini-footer{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.minicart .mini-footer .button{flex:1}

/* Comparator grid */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.mp{font-weight:800;color:var(--primary)}
.res{font-size:12px;color:var(--muted)}
.canvasWrap{position:relative;display:grid;place-items:center;aspect-ratio:16/10;background:repeating-conic-gradient(from 0deg, #f2f4f8 0 25%, #eaeef5 0 50%) 50%/20px 20px;border:1px dashed #cdd5df;border-radius:12px;overflow:hidden}
.box{position:relative;display:block;border-radius:10px;overflow:hidden;border:2px solid rgba(11,31,59,.35);background:
linear-gradient(45deg, rgba(11,31,59,.06) 25%, transparent 25%) 0 0/12px 12px,
linear-gradient(-45deg, rgba(11,31,59,.06) 25%, transparent 25%) 0 0/12px 12px,
linear-gradient(45deg, transparent 75%, rgba(11,31,59,.06) 0) 0 0/12px 12px,
linear-gradient(-45deg, transparent 75%, rgba(11,31,59,.06) 0) 0 0/12px 12px;
transition:transform .2s ease}
.box:hover{transform:scale(1.03)}
.label{position:absolute;inset:auto 8px 8px auto;background:rgba(11,31,59,.85);color:#fff;font-size:11px;padding:4px 8px;border-radius:999px}
@media (max-width:640px){.brand .name{display:none}}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width:768px){
  /* Cambiamos a la imagen MOBILE (4:5) y hacemos el hero más compacto */
  .hero{
    background:
      linear-gradient(120deg, rgba(11,31,59,.72), rgba(16,43,85,.35)),
      url('https://ecatl.shop/wp-content/uploads/2025/08/hero-mobile.png') center top / cover no-repeat;
    min-height:170px;
  }
  .hero .inner{ padding-top:22px; padding-bottom:18px; }
  .hero h1{ font-size:20px; margin:0 0 6px; }
  .hero p{ font-size:14px; line-height:1.35; }
}