/* ===== Extertronic — réplica de diseño (PrestaShop ecommtheme17) ===== */
/* tokens del tema: acento #f53453 · navy #003057 */
:root{
  --accent:#f53453;
  --accent-dark:#d51f3c;
  --navy:#003057;
  --ink:#232323;
  --gray:#7a7a7a;
  --line:#e5e5e5;
  --soft:#f6f6f6;
  --container:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:#fff;
  font-family:'Mukta','Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-weight:700;margin:0 0 .6em;color:var(--navy);line-height:1.25}
.container{max-width:var(--container);margin:0 auto;padding:0 15px}
.clearfix::after{content:"";display:block;clear:both}

/* ---------- topbar ---------- */
.topbar{background:var(--accent);color:#fff;height:34px;line-height:34px;font-size:13px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar .promo{text-align:center;flex:1;font-weight:500;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .social{display:flex;gap:12px}
.topbar .social a,.topbar .toplinks a{color:#fff;font-size:12px;text-transform:uppercase;font-weight:600;letter-spacing:.3px}
.topbar .toplinks{display:flex;gap:14px;align-items:center}

/* ---------- header ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.logo img{height:58px;width:auto}
.searchbox{flex:1;max-width:560px;display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.searchbox input{flex:1;border:0;padding:11px 14px;font-size:14px;font-family:inherit;outline:none}
.searchbox button{background:var(--accent);color:#fff;border:0;padding:0 18px;font-size:16px;cursor:pointer}
.searchbox button:hover{background:var(--accent-dark)}

/* ---------- main nav ---------- */
.mainnav{background:var(--accent)}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.mainnav>ul>li>a{display:block;color:#fff;padding:13px 18px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.mainnav>ul>li>a:hover,.mainnav>ul>li.active>a{background:var(--navy);color:#fff}

/* ---------- section title bar ---------- */
.section-bar{background:var(--navy);color:#fff;text-align:center;text-transform:uppercase;font-size:20px;font-weight:700;letter-spacing:.5px;padding:14px 0;margin:0 0 32px}
.section-title{font-size:20px;text-transform:uppercase;color:#fff;font-weight:700;background:var(--navy);padding:15px 0;margin:0 0 40px;text-align:center}

/* ---------- hero ---------- */
.hero{position:relative;background:#003057}
.hero img{width:100%;height:auto;object-fit:cover;max-height:420px}
.hero .hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 8%;background:linear-gradient(90deg,rgba(0,48,87,.82) 0%,rgba(0,48,87,.55) 45%,rgba(0,48,87,0) 75%)}
.hero .hero-overlay h1{color:#fff;font-size:34px;max-width:560px;margin:0 0 10px;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.hero .hero-overlay p{color:#fff;font-size:17px;max-width:520px;margin:0 0 18px;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:2px;
  font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.5px;border:0;cursor:pointer}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn-navy{background:var(--navy)}.btn-navy:hover{background:#001f3a;color:#fff}
.btn-outline{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}

/* ---------- promo banners ---------- */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:36px auto}
.promo-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff}
.promo-card .promo-head{background:var(--navy);color:#fff;padding:20px 22px 26px;min-height:150px;position:relative}
.promo-card .promo-head h3{color:#fff;font-size:20px;margin:0 0 8px;text-transform:uppercase}
.promo-card .promo-head p{color:#cfe0ef;font-size:13px;margin:0}
.promo-card .promo-head .arrow{position:absolute;right:22px;bottom:16px;color:var(--accent);font-size:30px;font-weight:700;line-height:1}
.promo-card .promo-img{background:#f6f6f6;display:flex;align-items:center;justify-content:center;height:250px;padding:8px}
.promo-card .promo-img img{max-height:100%;width:auto;object-fit:contain}

/* ---------- category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:46px}
.cat-item{text-align:center;border:1px solid var(--line);border-radius:3px;padding:22px 12px;transition:box-shadow .2s,border-color .2s;background:#fff}
.cat-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);border-color:var(--accent)}
.cat-item img{height:120px;width:auto;object-fit:contain;margin:0 auto 14px}
.cat-item h3{font-size:17px;color:var(--navy);margin:0;text-transform:capitalize}

/* ---------- cards (articles/products) ---------- */
.card-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:46px}
.card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:box-shadow .2s}
.card:hover{box-shadow:0 5px 18px rgba(0,0,0,.12)}
.card .card-img{display:block;aspect-ratio:3/2;overflow:hidden;background:#f1f1f1}
.card .card-img img{width:100%;height:100%;object-fit:cover}
.card .card-body{padding:14px 15px 18px;display:flex;flex-direction:column;flex:1}
.card .card-cat{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  text-transform:uppercase;padding:3px 9px;border-radius:2px;margin-bottom:9px;align-self:flex-start}
.card h3{font-size:16px;margin:0 0 8px}
.card h3 a{color:var(--navy)}
.card h3 a:hover{color:var(--accent)}
.card p{font-size:13px;color:var(--gray);margin:0 0 12px;flex:1}
.card .price{color:var(--ink);font-weight:700;font-size:16px;margin:0 0 10px}
.card .card-btn{margin-top:auto}

/* ---------- article cards (blog) ---------- */
.blog-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:46px}
.blog-card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.blog-card .card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#f1f1f1}
.blog-card .card-img img{width:100%;height:100%;object-fit:cover}
.blog-card .card-body{padding:16px}
.blog-card .card-cat{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:2px;margin-bottom:9px}
.blog-card h3{font-size:17px;margin:0 0 8px}
.blog-card h3 a{color:var(--navy)}
.blog-card p{font-size:13px;color:var(--gray);margin:0 0 12px}
.more{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.4px}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:50px auto}
.service{text-align:center}
.service .ic{width:104px;height:104px;border-radius:50%;background:var(--navy);color:#fff;display:flex;
  align-items:center;justify-content:center;margin:0 auto -26px;position:relative;z-index:2;font-size:40px;border:5px solid #fff}
.service .body{background:var(--accent);color:#fff;padding:44px 22px 26px;border-radius:3px}
.service .body h3{color:#fff;font-size:19px;margin:0 0 10px;text-transform:uppercase}
.service .body p{margin:0;font-size:13px;color:#ffe3e8}
.service .body .k{font-weight:700;color:#fff}

/* ---------- footer ---------- */
.site-footer{background:var(--soft);border-top:4px solid var(--accent);padding:44px 0 26px;margin-top:40px}
.footer-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.footer-cols h4{color:var(--navy);font-size:18px;margin:0 0 16px}
.footer-cols ul{list-style:none;margin:0;padding:0}
.footer-cols li{margin-bottom:8px}
.footer-cols a{color:var(--navy);font-size:13px}
.footer-cols a:hover{color:var(--accent)}
.footer-cols .contact-line{font-size:13px;color:var(--navy);margin-bottom:7px}
.newsletter form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.newsletter input[type=email]{flex:1;min-width:150px;padding:9px 10px;border:1px solid #999;background:#fff;font-family:inherit;font-size:13px}
.newsletter button{background:var(--navy);color:#fff;border:0;padding:9px 16px;font-weight:600;cursor:pointer}
.newsletter .gdpr{font-size:11px;color:var(--navy);display:flex;gap:6px;align-items:flex-start;margin-top:6px}
.footer-bottom{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:12px;color:var(--gray)}

/* ---------- breadcrumbs ---------- */
.breadcrumb{font-size:12px;color:var(--gray);padding:16px 0}
.breadcrumb a{color:var(--gray)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span.sep{margin:0 6px}

/* ---------- article / content ---------- */
.page-hero{background:var(--navy);color:#fff;padding:34px 0}
.page-hero h1{color:#fff;margin:0;font-size:30px}
.page-hero p{color:#cfe0ef;margin:10px 0 0;font-size:15px;max-width:820px}
.content-wrap{max-width:900px;margin:0 auto}
article.post{font-size:16px;line-height:1.7;color:#2b2b2b}
article.post h2{font-size:23px;margin:1.6em 0 .6em;color:var(--navy);border-left:4px solid var(--accent);padding-left:12px}
article.post h3{font-size:19px;margin:1.3em 0 .5em;color:var(--navy)}
article.post p{margin:0 0 1.05em}
article.post ul,article.post ol{margin:0 0 1.2em;padding-left:1.4em}
article.post li{margin-bottom:.5em}
article.post figure{margin:1.4em 0}
article.post figure img{width:100%;border-radius:3px}
article.post figcaption{font-size:12px;color:var(--gray);text-align:center;margin-top:6px}
table.article-table-wrap,.article-table-wrap{width:100%;overflow-x:auto;margin:1.5em 0}
table.article-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
table.article-table thead th{background:var(--navy);color:#fff;text-align:left;padding:10px 12px;font-weight:700}
table.article-table td{padding:9px 12px;border:1px solid var(--line)}
table.article-table tbody tr:nth-child(even){background:var(--soft)}
.lead{font-size:18px;color:#333;font-weight:500;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.meta{font-size:12px;color:var(--gray);margin-bottom:18px;text-transform:uppercase;letter-spacing:.3px}
.related{margin:44px 0 10px}
.related h2{font-size:20px;color:var(--navy)}
.notice{background:var(--soft);border-left:4px solid var(--accent);padding:14px 18px;font-size:14px;color:#333;margin:1.4em 0}

/* ---------- listing ---------- */
.listing{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:30px 0 50px}
.pagination{display:flex;gap:8px;justify-content:center;margin:10px 0 40px;list-style:none;padding:0}
.pagination a,.pagination span{padding:7px 13px;border:1px solid var(--line);color:var(--navy);font-size:13px}
.pagination .cur{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- mobile ---------- */
@media(max-width:992px){
  .cat-grid,.card-row{grid-template-columns:repeat(2,1fr)}
  .promos,.blog-row,.services,.footer-cols,.listing{grid-template-columns:1fr}
  .site-header .container{flex-wrap:wrap;gap:14px}
  .searchbox{max-width:100%;order:3;flex-basis:100%}
  .mainnav ul{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mainnav ul::-webkit-scrollbar{display:none}
  .mainnav>ul>li>a{padding:11px 13px;font-size:12px;white-space:nowrap}
  .hero .hero-overlay h1{font-size:23px}
  .hero .hero-overlay p{font-size:14px}
  .topbar .promo{font-size:11px}
}
@media(max-width:560px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .topbar .toplinks{display:none}
  .hero .hero-overlay{background:linear-gradient(180deg,rgba(0,48,87,.85),rgba(0,48,87,.6))}
  article.post h2{font-size:20px}
}