/* ==========================================================================
   J. MARÍN — Venta de contenedores y Depósitos y Reparaciones
   Sistema de diseño compartido — todas las páginas cargan este archivo
   ========================================================================== */

:root{
  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-2:#eef2f5;
  --ink:#0d1b2a;
  --ink-2:#31465c;
  --muted:#6e7b88;
  --line:#d9e2ea;
  --brand:#10263f;
  --brand-2:#183555;
  --accent:#f0a500;
  --accent-2:#ffbe2e;
  --success:#15803d;
  --warning:#b45309;
  --danger:#b91c1c;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 10px 24px rgba(13, 27, 42, .10);
  --shadow-soft: 0 4px 12px rgba(13, 27, 42, .07);
  --container: min(1280px, calc(100vw - 2rem));
  --header-h: 82px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top right, rgba(240,165,0,.10), transparent 24%),
    linear-gradient(180deg,#f8fafb 0%, #f2f5f8 100%);
  color:var(--ink);
  font-family:"Nunito Sans", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:var(--container);margin-inline:auto}
.section{padding:clamp(3.5rem, 6vw, 7rem) 0}
.section-sm{padding:clamp(2.4rem, 4vw, 4rem) 0}

.skip-link{
  position:absolute; left:1rem; top:-60px; z-index:100;
  background:var(--brand); color:#fff; padding:.8rem 1.2rem; border-radius:var(--radius-sm);
  font-weight:700; transition:top .2s ease;
}
.skip-link:focus{top:1rem}

:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .7rem;border-left:3px solid var(--accent);
  background:rgba(255,255,255,.06);
  color:#dfe9f2;font-weight:700;font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.tag{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--surface-2); color:var(--brand);
  border-left:3px solid var(--accent);
  padding:.42rem .7rem; font-size:.86rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
}
.title{
  font-family:"Nunito Sans", sans-serif;
  line-height:1;
  letter-spacing:-.03em;
  margin:0 0 1rem;
}
.title-xl{font-size:clamp(2.6rem, 6.4vw, 5.4rem); line-height:.98}
.title-lg{font-size:clamp(1.9rem, 4.2vw, 3.3rem)}
.title-md{font-size:clamp(1.35rem, 2.3vw, 1.9rem)}
.lead{
  color:var(--muted);
  font-size:clamp(1rem, 1.6vw, 1.16rem);
  line-height:1.65;
  max-width:70ch;
}
.muted{color:var(--muted)}
.grid{display:grid;gap:1.2rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.95rem 1.3rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:var(--accent);
  color:#1f2328;
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{background:var(--accent-2)}
.btn-dark{
  background:var(--brand);
  color:#fff; box-shadow:var(--shadow-soft);
}
.btn-dark:hover{background:var(--brand-2)}
.btn-ghost{
  border-color:var(--line);
  background:#fff;
  color:var(--brand);
}
.btn-sm{padding:.6rem .95rem; font-size:.92rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(217,226,234,.7);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  background:rgba(243,246,248,.86);
}
.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.9rem; font-weight:800;
}
.brand-logo{display:block; height:52px; width:auto}
/* El logo es azul marino: sobre el fondo oscuro del pie necesita una placa blanca. */
.footer-logo{display:inline-block; background:#fff; border-radius:var(--radius); padding:.7rem .9rem; margin-bottom:1rem}
.footer-logo img{display:block; width:240px; max-width:100%; height:auto}

.nav{display:flex; align-items:center; gap:1.2rem}
.nav-links{display:flex; align-items:center; gap:1.15rem; font-weight:600; color:var(--ink-2)}
.nav-links > li{position:relative; list-style:none}
.nav-links a{position:relative; padding:.4rem 0; display:inline-flex; align-items:center; gap:.3rem}
.nav-links > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-.15rem; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-links > li > a:hover::after,
.nav-links > li.is-active > a::after{transform:scaleX(1)}
.nav-links > li.is-active > a{color:var(--brand)}

.has-submenu{position:relative}
.submenu{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 8px);
  min-width:260px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.5rem; display:grid; gap:.15rem;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  z-index:60;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu{
  opacity:1; pointer-events:auto; transform:translate(-50%, 0);
}
.submenu a{
  display:block; padding:.65rem .75rem; border-radius:var(--radius-sm); font-weight:600; color:var(--ink-2);
}
.submenu a:hover{background:var(--surface-2); color:var(--brand)}

.header-actions{display:flex; align-items:center; gap:.75rem}
.icon-btn{
  width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--line);
  display:grid; place-items:center;background:rgba(255,255,255,.7); color:var(--brand);
  box-shadow:var(--shadow-soft); cursor:pointer; transition:.2s ease;
}
.icon-btn:hover{transform:translateY(-2px); background:#fff}
.cart-badge{position:relative}
.cart-badge::after{
  content:attr(data-count);
  position:absolute; top:-5px; right:-5px; width:20px; height:20px;
  border-radius:50%; background:var(--accent); color:#1f2328;
  display:grid; place-items:center; font-size:.75rem; font-weight:800;
  border:2px solid #fff;
}
.cart-badge[data-count="0"]::after{display:none}
.menu-toggle{display:none}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; overflow:hidden;
  color:#fff;
}
.hero-slides{position:absolute; inset:0; z-index:0}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.is-active{
  opacity:1;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(135deg, rgba(13,27,42,.92), rgba(21,48,79,.84)),
    radial-gradient(circle at 80% 20%, rgba(240,165,0,.18), transparent 24%),
    linear-gradient(0deg, rgba(9,18,28,.55), transparent 40%);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; gap:2rem;
  align-items:center;
  min-height:calc(100vh - var(--header-h));
  padding:3rem 0 4.5rem;
}
.hero-copy{position:relative; z-index:2; max-width:46rem}
.hero-copy .lead{color:#c9d6e3; max-width:62ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin:1.6rem 0 2rem}
.hero-dots{
  position:relative; z-index:2;
  display:flex; justify-content:center; gap:.6rem;
  padding-bottom:1.8rem; margin-top:-1rem;
}
.hero-dot{
  width:32px; height:4px; border-radius:var(--radius); border:none; padding:0;
  background:rgba(255,255,255,.28); cursor:pointer;
  transition:background .3s ease, width .3s ease;
}
.hero-dot:hover{background:rgba(255,255,255,.5)}
.hero-dot.is-active{background:var(--accent); width:50px}
.hero-checks{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; margin:0 0 1.8rem; padding:0; list-style:none;
  color:#dfe9f2; font-weight:600; font-size:.92rem;
}
.hero-checks li{display:flex; align-items:center; gap:.5rem}
.hero-checks svg{flex:none; color:var(--accent)}
.stat{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius:var(--radius); padding:1rem;
}
.stat strong{display:block; font-size:1.5rem; font-family:"Nunito Sans", sans-serif}
.stat span{color:#c6d2dd; font-size:.92rem}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position:relative; overflow:hidden; color:#fff; padding:clamp(2.6rem, 5vw, 4.5rem) 0;
  background:
    linear-gradient(135deg, rgba(13,27,42,.93), rgba(21,48,79,.88)),
    radial-gradient(circle at 85% 10%, rgba(240,165,0,.16), transparent 24%),
    url('/assets/images/hero-container.jpg') center 70%/cover no-repeat;
}
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  font-size:.9rem; color:#b9c7d6; margin-bottom:1rem;
}
.breadcrumbs a{color:#dfe9f2; font-weight:600}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs span[aria-hidden]{color:#6d84a0}
.page-hero .lead{color:#c9d6e3; max-width:70ch}

/* ---------- Section headers ---------- */
.section-head{display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:2rem}

/* ---------- Advantages / feature cards ---------- */
.adv-grid{grid-template-columns:repeat(4,1fr)}
.adv{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  padding:1.2rem;
  box-shadow:var(--shadow-soft);
  min-height:180px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.adv:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.adv-icon{
  width:48px;height:48px;
  background:var(--brand);
  color:#fff;
  display:grid; place-items:center;
  margin-bottom:1rem;
}
.adv h3{margin:.2rem 0 .6rem; font-size:1.05rem}
.adv p{margin:0;color:var(--muted);line-height:1.55}

/* ---------- Category cards (homepage) ---------- */
.category-grid{grid-template-columns:repeat(5,1fr)}
.category-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  padding:1.1rem;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-top-color:var(--accent)}
.category-card h3{margin:.2rem 0 .3rem; font-size:.98rem; color:var(--ink)}
.category-card p{margin:0; color:var(--muted); font-size:.88rem}

/* ---------- Service cards ---------- */
.services-grid{grid-template-columns:repeat(3,1fr)}
.service-card{
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.service-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.service-media{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(180deg, #dfe9f1 0%, #cfdce7 100%);
}
.service-media img{transition:transform .35s ease}
.service-card:hover .service-media img{transform:scale(1.045)}
.service-body{padding:1.2rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.service-body h3{margin:0; font-size:1.15rem}
.service-body p{margin:0; color:var(--muted); line-height:1.6}
.service-body .btn{margin-top:auto; align-self:flex-start}
.service-benefit{color:var(--brand) !important; font-weight:600; font-size:.92rem}
.service-points{list-style:none; margin:0; padding:0; display:grid; gap:.35rem}
.service-points li{color:var(--ink-2); font-size:.9rem; padding-left:1.1rem; position:relative}
.service-points li::before{content:""; position:absolute; left:.1rem; top:.42em; width:.55rem; height:.28rem; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
.service-ctas{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:auto; padding-top:.2rem}

/* ---------- Timeline ---------- */
.timeline{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem}
.step{
  position:relative; padding:1.2rem 1rem 1rem;
  background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft);
}
.step::before{
  content:""; position:absolute; top:28px; right:-1rem; width:2rem; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.step:last-child::before{display:none}
.step .num{font-family:"Nunito Sans", sans-serif; color:var(--accent); font-size:1.5rem; margin-bottom:.5rem}
.step strong{display:block; margin-bottom:.35rem}
.step.is-done{border-color:var(--success)}
.step.is-done .num{color:var(--success)}
.step.is-current{border-color:var(--accent); box-shadow:0 0 0 2px rgba(240,165,0,.18)}

/* ---------- Stats strip ---------- */
.stats-strip{grid-template-columns:repeat(4,1fr)}
.stats-strip .stat{background:#fff; border-color:var(--line)}
.stats-strip .stat strong{color:var(--brand)}
.stats-strip .stat span{color:var(--muted)}

/* ---------- Content / legal cards ---------- */
.content-card, .legal-card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:1.3rem 1.4rem;
}
.legal-card h3{margin-top:0}
.legal-card dl{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; margin:0}
.legal-card dt{font-weight:700; color:var(--ink-2)}
.legal-card dd{margin:0; color:var(--muted)}
.placeholder-value{
  color:var(--warning); background:#fff2df; border:1px solid #f6d9aa;
  border-radius:var(--radius-sm); padding:.05rem .45rem; font-weight:700; font-size:.92em;
}

.two-col{display:grid; grid-template-columns:1.05fr .95fr; gap:1.3rem; align-items:start}
.two-col.reverse{grid-template-columns:.95fr 1.05fr}

/* ---------- Installations / map ---------- */
.map-card{background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden}
.map-embed{display:block; width:100%; aspect-ratio:16/10; border:none}
.map-card--sm .map-embed{aspect-ratio:16/9}

.facility-list{display:grid; gap:.7rem; margin:1rem 0}
.facility-item{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem; border-radius:var(--radius); background:#f8fbfd; border:1px solid var(--line);
}

/* ---------- Testimonials ---------- */
.quotes{grid-template-columns:repeat(3,1fr)}
.quote{
  background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem;
  box-shadow:var(--shadow-soft);
}
.stars{color:var(--accent); letter-spacing:.18em; margin-bottom:.8rem}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid; grid-template-columns: .86fr 1.14fr; gap:1.2rem}
.faq-list{display:grid; gap:.75rem}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft)}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:1rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:700; cursor:pointer; color:var(--ink);
}
.faq-q .icon{transition:transform .22s ease; flex:none}
.faq-q[aria-expanded="true"] .icon{transform:rotate(45deg)}
.faq-a{overflow:hidden; transition:max-height .28s ease; color:var(--muted)}
.faq-a[hidden]{display:block; max-height:0}
.faq-a p{padding:0 1.1rem 1rem; margin:0; line-height:1.6}

/* ---------- Forms ---------- */
.forms-grid{display:grid; grid-template-columns: .84fr 1.16fr; gap:1.25rem}
.form-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:1.3rem;
}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem}
.form-grid .full{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:.4rem}
.field label{font-size:.9rem; font-weight:700; color:var(--ink-2)}
.field .hint{font-weight:500; color:var(--muted); font-size:.85rem}
.field input, .field select, .field textarea{
  width:100%; border-radius:var(--radius); border:1px solid var(--line);
  background:#fff; color:var(--ink);
  padding:.85rem 1rem; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(240,165,0,.15);
}
.check{display:flex; align-items:flex-start; gap:.7rem; color:var(--muted); margin-top:.9rem; font-size:.94rem}
.check input{margin-top:.3rem}
.check a{color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.check a:hover{color:var(--accent)}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-success{
  display:none; align-items:center; gap:.6rem; margin-top:1rem;
  background:#eaf7ef; color:var(--success); border:1px solid #bde3c8;
  border-radius:var(--radius); padding:.9rem 1rem; font-weight:600;
}
.form-success.is-visible{display:flex; animation:fadeUp .5s ease}
.form-error{
  display:none; margin-top:1rem; background:#fdecec; color:var(--danger);
  border:1px solid #f3c2c2; border-radius:var(--radius); padding:.9rem 1rem; font-weight:600;
}
.form-error.is-visible{display:block; animation:fadeUp .5s ease}

.contact-list{display:grid; gap:.8rem; margin-top:1rem}
.contact-row{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem; border-radius:var(--radius); background:#f8fbfd; border:1px solid var(--line);
}
.contact-row a{font-weight:700; color:var(--brand)}

.tech-table{width:100%; border-collapse:collapse; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
.tech-table tr:not(:last-child){border-bottom:1px solid var(--line)}
.tech-table td{padding:.9rem 1rem; vertical-align:top}
.tech-table td:first-child{width:38%; color:var(--ink-2); font-weight:700; background:#f8fbfd}

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(180deg,#102132,#0b1724);
  color:#d4dde6;
  margin-top:2rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:1.5rem; padding:3.5rem 0 2rem}
.footer h4{color:#fff; margin:0 0 .9rem; font-family:"Nunito Sans", sans-serif}
.footer a{display:block; color:#c2cfdb; margin:.48rem 0}
.footer a:hover{color:#fff}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  padding:1.4rem 0; font-size:.86rem; color:#93a4b5; line-height:1.7;
}
.footer-legal strong{color:#c2cfdb}
.footer-bottom{
  padding:1rem 0 2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:#aebdca; font-size:.92rem;
}

/* ---------- Mobile CTA ---------- */
.mobile-cta{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:45; display:none; gap:.7rem}

.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;
}


@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .form-success, .form-error{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important}
}

/* ---------- Catálogo de productos ---------- */
.catalog-shell{display:grid; grid-template-columns:280px 1fr; gap:1.25rem; align-items:start}
.filters{
  position:sticky; top:calc(var(--header-h) + 1rem);
  background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; box-shadow:var(--shadow-soft);
}
.filters h3{margin:.2rem 0 1rem}
.filter-group{margin-bottom:1rem}
.filter-group label{display:block; font-weight:700; margin:0 0 .45rem}
.sortbar{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:1rem}
.sortbar .left, .sortbar .right{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.filters-toggle{display:none; width:100%; margin-bottom:1rem}
.chip-row{display:flex; flex-wrap:wrap; gap:.6rem}
.chip{
  display:inline-flex; align-items:center; padding:.55rem 1rem; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line); color:var(--ink-2); font-weight:600; font-size:.92rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.chip:hover{transform:translateY(-2px); border-color:var(--accent)}
.chip.is-active{background:var(--brand); border-color:var(--brand); color:#fff}
.product-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
.product-grid--3col{grid-template-columns:repeat(3, minmax(0, 1fr))}
.product-card{
  background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.product-media{position:relative}
.product-media img{transition:transform .35s ease}
.product-card:hover .product-media img{transform:scale(1.045)}
.badge-row{position:absolute; top:1rem; left:1rem; right:1rem; display:flex; gap:.5rem; flex-wrap:wrap}
.badge{
  padding:.42rem .68rem; border-radius:var(--radius); font-size:.78rem; font-weight:800;
  letter-spacing:.02em; border:1px solid transparent; background:#fff; color:var(--brand);
}
.badge-available{background:#eaf7ef; color:var(--success); border-color:#bde3c8}
.badge-oferta{background:#fff2df; color:var(--warning); border-color:#f6d9aa}
.badge-nuevo{background:#eaf2fb; color:#17456f; border-color:#c9ddf1}
.badge-usado{background:#eef2f5; color:#4b5d6f; border-color:#dce5ec}
.badge-reacondicionado{background:#fff2df; color:#b45309; border-color:#f6d9aa}
.product-body{padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.8rem; flex:1}
.product-title{display:flex; justify-content:space-between; gap:1rem; align-items:start}
.product-title h3{margin:0; font-size:1.1rem}
.price{white-space:nowrap; font-family:"Nunito Sans", sans-serif; color:var(--brand); font-size:1.1rem}
.price-old{text-decoration:line-through; color:var(--muted); font-size:.9rem; font-weight:600; margin-right:.4rem}
.specs{display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem .8rem; color:var(--ink-2); font-size:.95rem}
.specs div{display:flex; justify-content:space-between; gap:.6rem; padding:.48rem .58rem; border-radius:var(--radius-sm); background:var(--surface-2)}
.product-actions{display:flex; gap:.7rem; margin-top:auto; flex-wrap:wrap}

/* ---------- Ficha de producto ---------- */
.product-page{display:grid; grid-template-columns:1.02fr .98fr; gap:1.2rem; align-items:start}
.gallery{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft)}
.gallery-main{
  aspect-ratio:16/10; position:relative;
  background: linear-gradient(180deg,#dee8f0,#c8d7e4);
}
.gallery-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.gallery-slide.is-active{opacity:1}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; padding:1rem}
.gallery-thumb{
  padding:0; border-radius:var(--radius); border:2px solid transparent; overflow:hidden; cursor:pointer;
  aspect-ratio:4/3; background:none; transition:border-color .2s ease;
}
.gallery-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.gallery-thumb.is-active{border-color:var(--accent)}
.gallery-thumb:hover{border-color:var(--line)}
.product-panel{background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow-soft)}
.meta-list{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin:1rem 0 1.1rem}
.meta-item{border:1px solid var(--line); border-radius:var(--radius); padding:.85rem .95rem; background:#fbfdff}
.meta-item span{display:block; color:var(--muted); font-size:.9rem}
.meta-item strong{display:block; margin-top:.2rem}

/* ---------- Carrito y checkout ---------- */
.cart-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1.2rem}
.cart-list{display:grid; gap:.9rem}
.cart-item{
  display:grid; grid-template-columns:140px 1fr auto; gap:1rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow-soft);
}
.cart-thumb{aspect-ratio:4/3; border-radius:var(--radius); position:relative; overflow:hidden; background:linear-gradient(180deg,#dfe9f1,#cfdce7); display:grid; place-items:end center; padding:.6rem}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden}
.qty button{width:38px; height:38px; border:none; background:#f6f9fb; cursor:pointer; font-weight:800}
.qty input{width:46px; text-align:center; font-weight:700; border:none; background:none}
.summary{padding:1.2rem}
.checkout-grid{display:grid; grid-template-columns:1fr .86fr; gap:1.2rem}

@media (max-width: 1180px){
  .hero-grid, .two-col, .forms-grid, .faq-wrap{grid-template-columns:1fr}
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(3,1fr)}
  .quotes{grid-template-columns:1fr 1fr}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
  .catalog-shell{grid-template-columns:1fr}
  .filters{position:static}
  .filters-toggle{display:block}
  #filtersForm{display:none}
  .filters.is-open #filtersForm{display:block}
  .product-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .product-page, .cart-grid, .checkout-grid{grid-template-columns:1fr}
}

@media (max-width: 860px){
  :root{--header-h:76px}
  .menu-toggle{display:grid}
  .nav-links, .header-actions .desktop-only{display:none}
  .nav{
    position:fixed; inset:var(--header-h) 1rem auto 1rem;
    background:rgba(255,255,255,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border:1px solid var(--line); border-radius:var(--radius); padding:1rem;
    box-shadow:var(--shadow); display:none; max-height:calc(100vh - var(--header-h) - 2rem); overflow:auto;
  }
  .nav.open{display:block}
  .nav-links{display:grid; gap:.3rem}
  .nav-links > li > a{padding:.7rem .3rem}
  .has-submenu .submenu{
    position:static; transform:none; opacity:1; pointer-events:auto; display:none;
    box-shadow:none; border:none; padding:0 0 0 .8rem; margin-top:.2rem;
  }
  .has-submenu.is-open .submenu{display:grid}
  .adv-grid, .category-grid, .services-grid, .quotes, .footer-grid, .form-grid, .stats-strip{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .section-head{align-items:start; flex-direction:column}
  .mobile-cta{display:flex}
  .product-grid{grid-template-columns:1fr}
  .meta-list{grid-template-columns:1fr}
  .cart-item{grid-template-columns:1fr}
  .product-actions{flex-direction:column}
  .sortbar{flex-direction:column; align-items:stretch}
}

@media (max-width: 560px){
  .brand-logo{height:40px}
  .timeline{grid-template-columns:1fr}
  .container{width:min(100vw - 1rem, 1280px)}
  .btn{width:100%}
  .hero-actions{display:grid; grid-template-columns:1fr}
}

/* Lista de enlaces (pagina 404). */
.link-list{margin:0; padding-left:1.1rem; display:grid; gap:.5rem; line-height:1.6}
.link-list a{color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:3px}