/* ============================================================
   CRONOSTEC CHILE — conversión fiel de cronostec-elevate-main
   (React + Tailwind) a HTML/CSS/JS plano.
   Fuente: C:\xampp\htdocs\cronostec-data\prototipos\cronostec-elevate-main
   Mapeo:  C:\xampp\htdocs\cronostec-data\mapeos\cronostec-chile.txt
   ============================================================ */

/* ---------- Variables / tokens ---------- */
:root{
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --background: #ffffff;
  --foreground: #1f2430;
  --muted-foreground: #94a1b8;
  --border: #e7ebf1;

  --brand: #F4C430;
  --brand-deep: #C9971F;
  --brand-ink: #000000;
  --danger: #000000;
  --danger-deep: #1A1A1A;
  --industrial: #FFC700;
  --whatsapp: #25D366;
  --steel: #1F2937;
  --steel-soft: #F7F8FA;

  --gradient-brand: linear-gradient(135deg, var(--brand), var(--brand-deep));
  --gradient-brand-deep: linear-gradient(140deg, #e0b84a 0%, var(--brand-deep) 55%, #1A1A1A 100%);
  --gradient-danger: linear-gradient(135deg, var(--danger), var(--danger-deep));
  --gradient-title: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 45%, var(--danger) 100%);
  --gradient-title-light: linear-gradient(100deg, #ffffff 0%, #ffe9a8 45%, #cccccc 100%);

  --shadow-card: 0 2px 6px rgba(20,32,70,0.06), 0 14px 30px -18px rgba(20,32,70,0.28);
  --shadow-lift: 0 8px 20px rgba(20,32,70,0.12), 0 34px 60px -28px rgba(20,32,70,0.45);
  --shadow-cta: 0 10px 26px -8px rgba(0,0,0,0.45);

  --font-display: "Montserrat", sans-serif;
  --font-sans: "Montserrat", system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height:1.5;
}
h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ cursor:pointer; font-family:inherit; border:none; background:none; }
ul{ list-style:none; }

.container{ max-width:1280px; margin:0 auto; padding:0 1.5rem; }

/* ---------- Utilidades del sistema ---------- */
.grad-brand{ background-image: var(--gradient-brand); }
.grad-brand-deep{ background-image: var(--gradient-brand-deep); }
.grad-danger{ background-image: var(--gradient-danger); }
.text-gradient{
  background-image: var(--gradient-title);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-light{
  background-image: var(--gradient-title-light);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shadow-card{ box-shadow: var(--shadow-card); }
.shadow-lift{ box-shadow: var(--shadow-lift); }
.shadow-cta{ box-shadow: var(--shadow-cta); }

.grid-lines{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 68px 68px;
}
.diag-stripes{
  background-image: repeating-linear-gradient(-45deg, rgba(255,199,0,.9) 0 10px, transparent 10px 20px);
}
.card-hover{
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .45s ease;
}
.card-hover:hover{ transform: translateY(-7px); box-shadow: var(--shadow-lift); }


.arrow-slide{ transition: transform .35s cubic-bezier(.22,1,.36,1); }
.group:hover .arrow-slide{ transform: translateX(5px); }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; padding:.4rem .9rem;
  font-family: var(--font-sans); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.badge--brand{ background:rgba(244,196,48,.1); color:var(--brand); box-shadow: inset 0 0 0 1px rgba(244,196,48,.2); }
.badge--danger{ background-image: var(--gradient-danger); color:#fff; box-shadow: var(--shadow-cta); }
.badge--light{ background:rgba(255,255,255,.1); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.badge--industrial{ background: var(--industrial); color: var(--steel); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* Section title */
.section-title{ max-width:48rem; }
.section-title.center{ margin:0 auto; text-align:center; }
.section-title h2{
  margin-top:1.25rem; font-size:2.5rem; line-height:0.95; font-weight:800;
  letter-spacing:-0.01em; color: var(--steel);
}
.section-title.light h2{ color:#fff; }
.section-title h2.text-gradient{ color: transparent; }
.section-title p{
  margin-top:1.25rem; font-size:1rem; line-height:1.65; color: var(--muted-foreground);
}
.section-title.light p{ color: rgba(255,255,255,.7); }
@media (min-width:640px){ .section-title h2{ font-size:3rem; } }
@media (min-width:1024px){ .section-title h2{ font-size:3.75rem; } }

/* Reveal on scroll */
.reveal{
  opacity:0; transform:translateY(26px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* CTA buttons */
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  border-radius: var(--radius); padding:.85rem 1.5rem;
  font-family: var(--font-sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  transition: all .3s ease;
}
.cta-btn:active{ transform: translateY(0); }
.cta-btn--danger{ background-image: var(--gradient-danger); color:#fff; box-shadow: var(--shadow-cta); }
.cta-btn--danger:hover{ transform: translateY(-2px); filter:brightness(1.1); }
.cta-btn--brand{ background-image: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-card); }
.cta-btn--brand:hover{ transform: translateY(-2px); filter:brightness(1.1); }
.cta-btn--outline{ border:1px solid rgba(244,196,48,.25); background:#fff; color:var(--brand); box-shadow: var(--shadow-card); }
.cta-btn--outline:hover{ transform: translateY(-2px); border-color:var(--brand); background:var(--brand); color:#fff; }
.cta-btn--ghost-light{ border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.05); color:#fff; backdrop-filter: blur(4px); }
.cta-btn--ghost-light:hover{ transform: translateY(-2px); border-color:#fff; background:rgba(255,255,255,.15); }

/* ---------- Keyframes ---------- */
@keyframes reveal-up{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:translateY(0);} }
@keyframes float-soft{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(244,196,48,.55); }
  70%{ box-shadow:0 0 0 18px rgba(244,196,48,0); }
  100%{ box-shadow:0 0 0 0 rgba(244,196,48,0); }
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.float-soft{ animation: float-soft 6s ease-in-out infinite; }
.marquee-track{ animation: marquee 32s linear infinite; }
.marquee-track:hover{ animation-play-state: paused; }

/* ============================================================
   1. HEADER — puerto fiel de la estructura real (tema Brasil
   cronostec-theme-PT-BR-v2.1.0 / theme.css + header-extras +
   search.css), con nuestra paleta (sin verde: --blue→--brand-ink,
   --green→--brand, --yellow→--industrial).
   ============================================================ */

/* Barra teléfono/email — solo mobile */
.cronos-topbar{ display:none; background: var(--brand-ink); align-items:center; justify-content:center; gap:8px; padding:5px 12px; font-size:11px; color:#fff; }
.cronos-topbar a{ color: var(--industrial); text-decoration:none; font-size:11px; }
.cronos-topbar-sep{ width:1px; height:12px; background: rgba(255,255,255,.3); }
.cronos-topbar svg{ flex-shrink:0; }
@media (max-width:1023px){ .cronos-topbar{ display:flex; } }

.header{
  position:sticky; top:0; z-index:100;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 1px 8px rgba(20,32,70,.07);
}
.header-inner{ display:flex; align-items:center; justify-content:center; gap:1.5rem; padding:.85rem 0; }
@media (max-width:1023px){ .header{ padding:.5rem 0; } .header .container{ padding:0; } .header-inner{ padding:0 14px; } }

.cronos-logo-flags{ display:flex; flex-direction:row; align-items:center; gap:.65rem; flex-shrink:0; }
.logo-wrap{ display:flex; align-items:center; gap:.75rem; }
.logo-img{ height:65px; width:auto; display:block; }
@media (max-width:1023px){ .logo-img{ height:48px; } }
.logo-text{ font-family: var(--font-display); font-weight:900; font-size:1.6rem; line-height:1; letter-spacing:-0.02em; color: var(--brand-ink); }
.logo-text span{ color: var(--danger); }
.logo-sub{ font-size:.62rem; font-weight:900; letter-spacing:.28em; text-transform:uppercase; color: var(--brand); }
@media (max-width:1023px){ .logo-text{ font-size:1.3rem; } .logo-sub{ font-size:.5rem; } }

.cronos-flags{ display:flex; flex-direction:column; gap:1px; align-items:center; flex-shrink:0; line-height:1; }
.cronos-flags a{ display:flex; line-height:1; }
.cronos-flag{ width:28px; height:18px; border-radius:2px; border:.5px solid rgba(0,0,0,.1); flex-shrink:0; display:block; }
@media (max-width:1023px){ .cronos-flags{ gap:2px; } .cronos-flag{ width:18px; height:12px; } }
@media (min-width:768px) and (max-width:1023px){ .cronos-flags{ gap:1px; } .cronos-flag{ width:28px; height:18px; } }
@media (max-width:599px){ .cronos-logo-flags{ flex-direction:column; align-items:flex-start; gap:4px; } .cronos-flags{ flex-direction:row; gap:4px; } .header .btn-cotizar-wrap{ display:none; } }

.header-nav{ display:none; align-items:center; gap:.25rem; justify-content:center; }
.header-nav a{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--brand-ink);
  transition: color 0s, background .5s cubic-bezier(.4,0,.2,1); padding:.55rem .75rem; border-radius: var(--radius);
}
.header-nav a:hover{ background-image: var(--gradient-brand); color:#fff; }
.header-nav a.active{ background-image: var(--gradient-brand); color:#fff; }
@media (min-width:1024px){ .header-nav{ display:flex; } }

/* Dropdown "Productos" — 13 categorías reales, al hover */
.nav-dropdown-wrap{ position:relative; }
.nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:.35rem; }
.nav-arrow{ transition: transform .35s ease; flex-shrink:0; }
.nav-dropdown-wrap:hover .nav-arrow{ transform: rotate(180deg); }
.nav-dropdown{
  position:absolute; top:calc(100% + .1rem); left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:230px; background:#fff; border-radius:.85rem; box-shadow: var(--shadow-lift);
  padding:.5rem; opacity:0; pointer-events:none; transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1); z-index:200;
}
.nav-dropdown::before{ content:''; position:absolute; top:-.85rem; left:0; right:0; height:.85rem; }
.nav-dropdown-wrap:hover .nav-dropdown{ opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.nav-dropdown a{
  display:block; width:100%; padding:.6rem .9rem; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color: var(--brand-ink); border-radius:.5rem; background:transparent; transition: background .22s ease, color .22s ease;
}
.nav-dropdown a:hover{ background: #000000; color:#fff; }

.header-contact{ display:none; flex-direction:column; align-items:flex-end; line-height:1.3; }
.header-contact .phone{ font-size:.78rem; font-weight:700; color: var(--brand-ink); }
.header-contact .email{ font-size:.7rem; color: var(--muted-foreground); }
@media (min-width:1280px){ .header-contact{ display:flex; } }

/* CTA "cotizar" — botón circular con pastilla animada al hover */
.btn-cotizar-wrap{ position:relative; display:inline-flex; align-items:center; flex-shrink:0; text-decoration:none; cursor:pointer; }
.btn-cotizar-icon{ width:42px; height:42px; background: var(--industrial); border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; flex-shrink:0; color: var(--brand-ink); }
.btn-cotizar-wrap:hover .btn-cotizar-icon{ animation: cronos-heartbeat .75s ease-in-out infinite; }
@keyframes cronos-heartbeat{ 0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,199,0,.65); } 30%{ transform:scale(1.1); box-shadow:0 0 0 8px rgba(255,199,0,.2); } 60%{ transform:scale(1.04); box-shadow:0 0 0 14px rgba(255,199,0,0); } 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,199,0,0); } }
.btn-cotizar-pill{
  position:absolute; right:calc(100% - 4px); top:50%; transform:translateY(-50%);
  background: var(--brand-ink); color:#fff; font-family: var(--font-display); font-size:.63rem; font-weight:900;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; padding:0 20px 0 16px; height:42px;
  display:flex; align-items:center; border-radius:999px 0 0 999px; pointer-events:none; max-width:0; overflow:hidden;
  opacity:0; transition: max-width .38s cubic-bezier(.4,0,.2,1), opacity .28s ease; z-index:1;
}
.btn-cotizar-wrap:hover .btn-cotizar-pill{ max-width:360px; opacity:1; }
.pill-dot{ width:6px; height:6px; border-radius:50%; background: var(--industrial); margin-right:9px; flex-shrink:0; animation: cronos-pulse-dot 1.4s ease-in-out infinite; }
@keyframes cronos-pulse-dot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.65); } }
@media (max-width:1023px){ .btn-cotizar-pill{ display:none; } .btn-cotizar-icon{ width:38px; height:38px; } }

.hamburger{ display:flex; flex-direction:column; gap:5px; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; border:1px solid var(--border); border-radius: var(--radius); }
.hamburger span{ display:block; width:20px; height:2px; background: var(--steel); border-radius:2px; transition: all .3s ease; transform-origin:center center; }
.hamburger.open span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; transform: translateX(-10px); }
.hamburger.open span:nth-child(3){ transform: rotate(-45deg) translate(5px,-5px); }
@media (min-width:1024px){ .hamburger{ display:none; } }

/* Panel mobile — desliza desde la izquierda (estructura real: cronos-panel) */
.mnav-backdrop{ display:none; position:fixed; inset:0; background: rgba(20,32,70,.3); z-index:99998; opacity:0; transition:opacity .3s; }
.mnav-backdrop.active{ display:block; opacity:1; }
.mobile-nav.cronos-panel{
  display:flex; flex-direction:column; position:fixed; top:0; left:-100%; width:100%; height:100vh; height:100dvh;
  background:#fff; z-index:99999; padding:20px 0; transition:left .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 8px 0 40px rgba(20,32,70,.15); overflow-y:auto; overflow-x:hidden; gap:0;
}
.mobile-nav.cronos-panel.open{ left:0; }
.mnav-close{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; background: var(--steel-soft); border:none; border-radius:50%; cursor:pointer; color: var(--brand-ink); font-size:18px; margin:0 0 8px 16px; flex-shrink:0; }
.mnav-item{ display:flex; align-items:center; gap:10px; padding:11px 20px; font-size:13px; font-weight:600; color: var(--brand-ink); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; transition: background .15s; }
.mnav-item svg{ color: var(--brand); flex-shrink:0; width:16px; height:16px; }
.mnav-item span{ flex:1; }
.mnav-item:active{ background: var(--steel-soft); }
.mnav-sep{ height:.5px; background: var(--border); margin:4px 16px; }

/* "(Estándar)" de las specs de los prod-card — solo se oculta en móvil,
   queda visible la cantidad de metros. */
@media (max-width:767px){ .pc-std{ display:none; } }

/* ── Acordeón "Productos" del menú móvil — copiado y adaptado de
   tes-cronostec (functions.php: .mnav-toggle/.mnav-cat-panel/.mnav-cat-grid/
   .mnav-cat-chip), con la paleta Cronostec Chile. ── */
.mnav-toggle{ position:relative; cursor:pointer; }
.mnav-arrow{ margin-left:auto; color: var(--muted-foreground); transition:transform .3s; width:12px; height:12px; }
.mnav-arrow.open{ transform:rotate(90deg); color: var(--brand); }
.mnav-toggle.active{ background: var(--steel-soft); border-left:3px solid var(--brand); }
.mnav-cat-panel{ display:none; background: var(--steel-soft); }
.mnav-cat-panel.open{ display:block; }
.mnav-cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:5px; padding:10px 14px; }
.mnav-cat-chip{
  background:#fff; border:.5px solid var(--border); border-radius:6px; padding:8px 6px; text-align:center;
  font-size:10px; font-weight:500; color: var(--brand-ink); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:3px; transition:all .2s;
}
.mnav-cat-chip img{ width:18px; height:18px; object-fit:contain; }
.mnav-cat-chip:active{ background: var(--brand-ink); color:#fff; border-color: var(--brand-ink); }
.mnav-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 16px 6px; padding:11px; background: var(--industrial); border-radius:10px; font-size:13px; font-weight:600; color: var(--brand-ink); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }
.mnav-contact{ display:flex; flex-direction:column; gap:8px; align-items:center; padding:6px 16px 12px; font-size:10px; color: var(--muted-foreground); }
.mnav-contact a{ color: var(--brand-ink); text-decoration:none; font-weight:500; }
@media (min-width:1024px){ .mobile-nav.cronos-panel{ display:none; } }

/* ── Buscador en tiempo real (puerto fiel de search.css real) — solo los 40 productos reales ── */
.header-search-wrap{ position:relative; flex-shrink:0; }
@media (min-width:1024px){ .header-search-wrap{ margin-right:0; } }
.cronos-search-toggle{ display:none; }
.cronos-search-box{
  display:flex; align-items:center; gap:9px; padding:8px 14px; width:260px;
  background: var(--steel-soft); border:2px solid var(--border); border-radius:999px;
  transition: border-color .2s, box-shadow .2s, width .3s ease; cursor:text;
}
.cronos-search-box:focus-within{ border-color: var(--brand-ink); box-shadow:0 0 0 3px rgba(20,32,70,.08); background:#fff; width:300px; }
.cronos-search-icon{ color: var(--muted-foreground); flex-shrink:0; }
.cronos-search-input{ flex:1; border:none; outline:none; font-size:.85rem; color: var(--steel); background:transparent; min-width:0; }
.cronos-search-input::placeholder{ color: var(--muted-foreground); }
.cronos-search-clear{ width:20px; height:20px; border-radius:50%; background: var(--border); border:none; cursor:pointer; display:none; align-items:center; justify-content:center; color: var(--muted-foreground); font-size:11px; transition: background .15s; flex-shrink:0; }
.cronos-search-clear:hover{ background:#cbd5e1; }
.cronos-search-clear.visible{ display:flex; }
.cronos-spinner{ width:13px; height:13px; border:2px solid var(--border); border-top-color: var(--brand-ink); border-radius:50%; animation: cronos-spin .6s linear infinite; display:none; flex-shrink:0; }
.cronos-spinner.active{ display:block; }
@keyframes cronos-spin{ to{ transform:rotate(360deg); } }

.cronos-search-dropdown{
  position:fixed; top:68px; left:50%; transform:translateX(-50%) translateY(-8px); width:760px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:18px; box-shadow: var(--shadow-lift); border:1px solid var(--border); overflow:hidden;
  z-index:9999; opacity:0; pointer-events:none; transition: opacity .22s ease, transform .22s ease; display:flex;
}
.cronos-search-dropdown.open{ opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.cronos-search-left{ flex:1; max-height:620px; overflow-y:auto; }
.cronos-search-group-label{ padding:12px 18px 6px; font-family: var(--font-display); font-size:.6rem; font-weight:800; color: var(--muted-foreground); letter-spacing:.14em; text-transform:uppercase; }

.cronos-search-item{ display:flex; align-items:center; gap:10px; padding:11px 18px; cursor:pointer; transition: background .15s; border-left:3px solid transparent; color: var(--steel); text-decoration:none; }
.cronos-search-item:hover, .cronos-search-item.hovered{ background: rgba(20,32,70,.04); border-left-color: var(--brand-ink); }
.cronos-item-icon{ width:28px; height:28px; border-radius:7px; background: rgba(20,32,70,.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .15s; overflow:hidden; }
.cronos-search-item:hover .cronos-item-icon, .cronos-search-item.hovered .cronos-item-icon{ background: rgba(20,32,70,.13); }
.cronos-item-icon svg{ color: var(--brand-ink); }
.cronos-item-text{ font-size:.83rem; font-weight:500; }
.cronos-item-text strong{ color: var(--brand-ink); font-weight:900; }

.cronos-prod-item{ border-left:3px solid transparent; }
.cronos-prod-item:hover, .cronos-prod-item.hovered{ border-left-color: var(--industrial); }
.cronos-item-thumb{ width:38px; height:38px; border-radius:8px; background: var(--steel-soft); border:1px solid var(--border); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cronos-item-thumb img{ width:100%; height:100%; object-fit:contain; }

.cronos-search-divider{ height:1px; background: var(--border); margin:4px 0; }
.cronos-ver-todos{ display:flex; align-items:center; justify-content:center; gap:6px; padding:13px 18px; font-family: var(--font-display); font-size:.7rem; font-weight:800; color: var(--brand); text-transform:uppercase; letter-spacing:.06em; border-top:1px solid var(--border); cursor:pointer; transition: background .15s; text-decoration:none; }
.cronos-ver-todos:hover{ background: var(--steel-soft); }

.cronos-search-right{ width:300px; border-left:1px solid var(--border); display:none; flex-direction:column; background:#fff; flex-shrink:0; }
.cronos-search-right.visible{ display:flex; }
.cronos-search-right.mode-product .preview-cat-panel, .cronos-search-right.mode-cat .preview-prod-panel{ display:none; }
.cronos-search-right.mode-product .preview-prod-panel{ display:flex; flex-direction:column; height:100%; }
.cronos-search-right.mode-cat .preview-cat-panel{ display:flex; flex-direction:column; height:100%; }
.cronos-preview-back{ display:none; }
.cronos-preview-img{ height:auto; background: var(--steel-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--border); flex-shrink:0; }
.cronos-preview-img img{ width:100%; height:100%; object-fit:contain; padding:14px; }
.cronos-preview-body{ padding:18px; flex:1; display:flex; flex-direction:column; }
.cronos-preview-name{ font-family: var(--font-display); font-size:.78rem; font-weight:900; color: var(--brand-ink); margin-bottom:10px; line-height:1.3; text-transform:uppercase; }
.cronos-preview-specs{ font-size:.72rem; color: var(--muted-foreground); line-height:1.9; margin-bottom:14px; flex:1; }
.cronos-preview-specs b{ color: var(--brand-ink); font-weight:700; }
.cronos-preview-btn{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px; background: var(--industrial); color: var(--brand-ink); border-radius:999px; font-family: var(--font-display); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition: background .18s, transform .15s; }
.cronos-preview-btn:hover{ background:#e8b800; transform:translateY(-1px); }

.cronos-cat-header{ padding:16px 18px 12px; border-bottom:1px solid var(--border); background: rgba(20,32,70,.03); flex-shrink:0; }
.cronos-cat-label{ font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--muted-foreground); margin-bottom:4px; }
.cronos-cat-title{ font-family: var(--font-display); font-weight:900; font-size:.9rem; color: var(--brand-ink); text-transform:uppercase; line-height:1.2; }
.cronos-cat-body{ flex:1; overflow-y:auto; padding:8px 0; }
.cronos-cat-prod{ display:flex; align-items:center; gap:10px; padding:9px 18px; text-decoration:none; transition: background .15s; }
.cronos-cat-prod:hover{ background: var(--steel-soft); }
.cronos-cat-prod img{ width:40px; height:40px; border-radius:8px; background: var(--steel-soft); border:1px solid var(--border); object-fit:contain; flex-shrink:0; }
.cronos-cat-prod span{ font-size:.74rem; color: var(--steel); line-height:1.35; }
.cronos-cat-footer{ padding:12px 18px; border-top:1px solid var(--border); flex-shrink:0; }
.cronos-cat-btn{ display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; background: var(--brand-ink); color:#fff; border-radius:999px; font-family: var(--font-display); font-size:.68rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition: background .18s, transform .15s; }
.cronos-cat-btn:hover{ background: var(--brand); transform:translateY(-1px); }

.cronos-search-empty{ padding:32px 18px; text-align:center; font-size:.82rem; color: var(--muted-foreground); }
.cronos-search-placeholder{ padding:24px 20px; display:flex; align-items:center; gap:14px; }
.cronos-ph-icon{ width:44px; height:44px; border-radius:12px; background: rgba(20,32,70,.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--muted-foreground); }
.cronos-ph-text{ display:flex; flex-direction:column; gap:3px; }
.cronos-ph-title{ font-size:.82rem; font-weight:600; color: var(--muted-foreground); }
.cronos-ph-sub{ font-size:.72rem; color: var(--muted-foreground); }

@media (max-width:1023px){
  .header-search-wrap{ margin-left:auto; margin-right:0; }
  .cronos-search-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background: var(--steel-soft); border:2px solid var(--border); cursor:pointer; flex-shrink:0; transition: border-color .2s, background .2s; color: var(--brand-ink); }
  .cronos-search-toggle.active{ border-color: var(--brand-ink); background:#fff; }
  .cronos-search-box{ display:none; position:fixed; top:0; left:0; right:0; width:100%; height:88px; background:#fff; border:none; border-bottom:2px solid var(--brand-ink); border-radius:0; padding:0 50px 0 14px; z-index:9200; gap:10px; box-shadow:0 2px 12px rgba(20,32,70,.1); }
  .cronos-search-box.mobile-open{ display:flex; width:100%; }
  .cronos-search-input{ font-size:.9rem; }
  .cronos-search-close-mobile{ display:none; }
  .cronos-search-box.mobile-open .cronos-search-close-mobile{ display:flex; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background: rgba(20,32,70,.08); border:none; cursor:pointer; align-items:center; justify-content:center; font-size:15px; font-weight:700; color: var(--brand-ink); z-index:9201; }
  .cronos-search-dropdown{ position:fixed; top:88px; left:0; right:0; width:100%; height:calc(90vh - 88px - 68px); overflow-y:auto; background:#fff; border-radius:0; border:none; box-shadow:none; z-index:9150; display:none; transform:none; max-width:100%; }
  .cronos-search-dropdown.open{ display:block; transform:none; left:0; right:0; width:100%; }
  .cronos-search-left{ max-height:none; height:auto; }
  .cronos-search-dropdown.preview-open .cronos-search-left{ display:none; }
  .cronos-search-right{ width:100%; border-left:none; display:none; flex-direction:column; background:#fff; }
  .cronos-search-dropdown.preview-open .cronos-search-right{ display:flex; }
  .cronos-preview-back{ display:flex; align-items:center; gap:8px; padding:13px 18px; background: var(--steel-soft); border:none; border-bottom:1px solid var(--border); width:100%; cursor:pointer; font-family: var(--font-display); font-size:.7rem; font-weight:800; color: var(--brand-ink); text-transform:uppercase; letter-spacing:.06em; flex-shrink:0; }
  .cronos-preview-img{ height:300px; max-height:300px; }
}

/* ============================================================
   2. HERO — sin padding-top artificial: el header es sticky y
   ocupa su propio espacio en el flujo normal.
   ============================================================ */
.hero{
  position:relative; isolation:isolate; height:50vh; min-height:290px; overflow:hidden;
  background: var(--brand-ink);
}
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(105deg, rgba(20,32,70,.96) 0%, rgba(201,151,31,.86) 45%, rgba(15,24,55,.55) 100%); }
.hero-glow{ position:absolute; top:-6rem; right:-6rem; width:34rem; height:34rem; border-radius:50%; background: radial-gradient(circle, rgba(0,0,0,.28), transparent 65%); filter: blur(40px); }

.hero-content{ position:relative; height:100%; margin:0 auto; max-width:80rem; padding:0 1.5rem; display:flex; flex-direction:column; justify-content:center; }
.hero-text{ max-width:40rem; }
.hero-text h1{
  margin-top:.75rem; font-size:1.75rem; line-height:1.05; font-weight:800;
  color:#fff;
}
.hero-text p{ margin-top:.85rem; max-width:32rem; font-size:.85rem; line-height:1.55; color: rgba(255,255,255,.75); }
.hero-actions{ margin-top:1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.hero-actions .cta-btn{ padding:.55rem .95rem; font-size:.62rem; border-radius:999px; }
.hero-explore{ margin-top:1.5rem; display:none; align-items:center; gap:.75rem; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.5); }
.hero-explore:hover{ color:#fff; }
@media (min-width:1024px){ .hero-explore{ display:inline-flex; } }

@media (min-width:640px){ .hero-text h1{ font-size:2.25rem; } }
@media (min-width:768px){ .hero{ height:50vh; min-height:330px; } }
@media (max-width:767px){
  .hero{ height:auto; min-height:0; max-height:none; padding-block: 3rem; }
  .hero-content{ height:auto; }
  .hero-text .badge, .hero-text p{ display:none; }
  .hero-text h1{ margin-top:0; font-size:1.4rem; }
  .hero-actions{ margin-top:.6rem; }
  .hero-actions .cta-btn--ghost-light{ display:none; }
  .hero-actions .cta-btn--danger{ padding:.4rem .75rem; font-size:.58rem; }
}
@media (min-width:1024px){
  .hero-text h1{ font-size:2.75rem; }
}

/* ============================================================
   3. CATEGORÍAS
   ============================================================ */
.categorias{ background:#fff; padding:6rem 0; }
.categorias-head{ display:flex; flex-direction:column; gap:2rem; }
.categorias-link{ display:inline-flex; align-items:center; gap:.75rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--brand); }
.categorias-link-icon{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius: var(--radius-md); background-image: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-card); transition: transform .3s; }
.categorias-link:hover .categorias-link-icon{ transform: translateX(4px); }

.cat-grid{ margin-top:3.5rem; display:grid; gap:1.25rem; grid-template-columns: 1fr; }
.cat-card{ position:relative; display:block; min-height:15rem; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(231,235,241,.7); background-image: var(--gradient-brand-deep); }
.cat-card.tall{ min-height:22rem; }
.cat-card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:luminosity; opacity:.9; }
.cat-card-overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(20,32,70,.95) 0%, rgba(201,151,31,.55) 45%, transparent 85%); transition: opacity .5s; }
.cat-card:hover .cat-card-overlay{ opacity:.9; }
.cat-card-topline{ position:absolute; inset:0 0 auto 0; height:4px; background-image: var(--gradient-danger); opacity:0; transition: opacity .5s; }
.cat-card:hover .cat-card-topline{ opacity:1; }
.cat-card-badge{ position:absolute; top:1.25rem; left:1.25rem; }
.cat-card-bottom{ position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1.5rem; }
.cat-card-bottom h3{ font-size:1.5rem; font-weight:800; color:#fff; }
.cat-card.tall .cat-card-bottom h3{ font-size:2rem; }
.cat-card-bottom p{ margin-top:.5rem; max-width:20rem; font-size:.85rem; line-height:1.6; color: rgba(255,255,255,.7); }
.cat-card-arrow{ display:grid; place-items:center; flex-shrink:0; width:2.75rem; height:2.75rem; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color:#fff; backdrop-filter: blur(4px); transition: all .3s; }
.cat-card:hover .cat-card-arrow{ background-image: var(--gradient-danger); border-color: transparent; }

@media (min-width:640px){ .cat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){
  .categorias-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .cat-grid{ grid-template-columns: repeat(12,1fr); }
  .cat-card.span-7{ grid-column: span 7; grid-row: span 2; }
  .cat-card.span-5{ grid-column: span 5; }
  .cat-card.span-4{ grid-column: span 4; }
}

/* ============================================================
   4. PRODUCTOS
   ============================================================ */
.productos{ position:relative; overflow:hidden; background: var(--steel-soft); padding:6rem 0; }
.productos-head{ display:flex; flex-direction:column; gap:2.5rem; }
.productos-nav{ display:flex; gap:.75rem; }
.productos-nav button{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius: var(--radius-md);
  border:1px solid var(--border); background:#fff; color: var(--steel); box-shadow: var(--shadow-card);
  transition: all .3s;
}
.productos-nav button:hover{ transform: translateY(-2px); color:#fff; border-color:transparent; background-image: var(--gradient-danger); }

.productos .section-title h2{ font-size:1.75rem; }
.productos .section-title p{ font-size:.85rem; }
@media (min-width:640px){ .productos .section-title h2{ font-size:2.1rem; } }
@media (min-width:1024px){ .productos .section-title h2{ font-size:2.4rem; } }

.prod-track-wrap{ margin-top:3.5rem; overflow:hidden; }
.prod-track{ display:flex; gap:1.5rem; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.prod-card{ display:block; position:relative; flex:0 0 82%; overflow:hidden; border-radius: var(--radius-xl); background:#fff; box-shadow: var(--shadow-card); transition: background-color .35s ease; }
.prod-card:hover{ background-color: var(--brand); }
.prod-card-media{ position:relative; z-index:1; aspect-ratio: 1; overflow:hidden; background: linear-gradient(160deg,#f7f8fa,#eceff3); }
.prod-card-media img{ position:absolute; inset:0; width:100%; object-fit:contain; mix-blend-mode:multiply; }
.prod-card-badge{ position:absolute; top:1rem; left:1rem; }
.prod-card-body{ position:relative; z-index:1; border-top:1px solid rgba(231,235,241,.7); padding:1.5rem; }
.prod-card:hover .prod-card-body{ border-top-color: transparent; }
.prod-card-body h3{ font-size:1.1rem; line-height:1.05; font-weight:800; color: var(--steel); transition: color .35s ease; }
.prod-card:hover .prod-card-body h3{ color:#000000; }
.prod-specs{ margin-top:.75rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.prod-specs div{ border-radius: var(--radius-md); background: var(--steel-soft); padding:.4rem .55rem; transition: background .35s ease; }
.prod-card:hover .prod-specs div{ background: rgba(255,255,255,.15); }
.prod-specs dt{ font-size:.55rem; line-height:1; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--muted-foreground); transition: color .35s ease; }
.prod-card:hover .prod-specs dt{ color: #000000; }
.prod-specs dd{ margin-top:.15rem; font-family: var(--font-display); font-size:.85rem; line-height:1; font-weight:700; color: #1F2937; transition: color .35s ease; }
.prod-card:hover .prod-specs dd{ color:#000000; }
.prod-card-link{ margin-top:.9rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(231,235,241,.7); padding-top:.75rem; font-size:.62rem; line-height:1; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: #1F2937; transition: color .35s ease, border-color .35s ease; }
.prod-card:hover .prod-card-link{ color:#000000; border-top-color: rgba(0,0,0,.25); }

.prod-dots{ margin-top:2.5rem; display:flex; justify-content:center; gap:.5rem; }
.prod-dots button{ height:6px; width:1rem; border-radius:999px; background: var(--border); transition: all .3s; }
.prod-dots button.active{ width:2.25rem; background-image: var(--gradient-danger); }

@media (min-width:640px){ .prod-card{ flex-basis:46%; } }
@media (min-width:1024px){
  .productos-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .prod-card{ flex-basis: calc(25% - 1.125rem); }
}

/* ============================================================
   5. SERVICIOS
   ============================================================ */
.servicios{ position:relative; overflow:hidden; background: var(--brand-ink); padding:6rem 0; }

.servicios-controls{ margin-top:2.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.servicios-nav{ display:flex; gap:.75rem; }
.servicios-nav button{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius: var(--radius-md);
  border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff;
  transition: all .3s;
}
.servicios-nav button:hover{ transform: translateY(-2px); border-color: transparent; color:#000; background-image: var(--gradient-brand); }

.svc-track-wrap{ margin-top:3.5rem; overflow:hidden; }
.svc-track{ display:flex; gap:1.5rem; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.svc-card{ display:block; position:relative; flex:0 0 82%; height:auto; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.85); backdrop-filter: blur(4px); transition: background .35s ease; }
.svc-card:hover{ background:#F5F3EE; }
.svc-media{ position:relative; height:14rem; overflow:hidden; }
.svc-media img{ width:100%; height:100%; object-fit:cover; }
.svc-media-overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.85) 10%, rgba(201,151,31,.35) 60%, transparent); transition: opacity .35s ease; }
.svc-card:hover .svc-media-overlay{ opacity:0; }
.svc-badge{ position:absolute; top:1.25rem; left:1.25rem; }
.svc-body{ position:relative; padding:1.75rem; }
.svc-body h3{ font-size:1.5rem; line-height:1.15; font-weight:800; color:#fff; transition: color .35s ease; }
.svc-card:hover .svc-body h3{ color:#000; }
.svc-body p{ margin-top:.75rem; font-size:.85rem; line-height:1.6; color: rgba(255,255,255,.65); transition: color .35s ease; }
.svc-card:hover .svc-body p{ color:#000; }
.svc-link{ margin-top:1.5rem; display:inline-flex; align-items:center; gap:.75rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; transition: color .35s ease; }
.svc-card:hover .svc-link{ color:#000; }
.svc-card:hover .arrow-slide{ transform:none; }
.svc-link span{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,.25); transition: all .3s; }
.svc-card:hover .svc-link span{ background-image: var(--gradient-brand); border-color: transparent; color:#000; }

.svc-dots{ display:flex; align-items:center; gap:.5rem; }
.svc-dots button{ height:6px; width:1rem; border-radius:999px; background: rgba(255,255,255,.25); transition: all .3s; }
.svc-dots button:hover{ background: var(--brand); }
.svc-dots button.active{ width:2.25rem; background:#fff; }

@media (min-width:640px){ .svc-card{ flex-basis:46%; } }
@media (min-width:1024px){ .svc-card{ flex-basis:31.4%; } }

/* ============================================================
   6. INSTITUCIONAL / EMPRESA
   ============================================================ */
.institucional{ background:#fff; padding:6rem 0; }
.inst-grid{ display:grid; gap:3.5rem; align-items:center; }
.inst-media{ position:relative; }
.inst-media-main{ position:relative; overflow:hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); }
.inst-media-main img{ aspect-ratio:4/3; width:100%; object-fit:cover; }
.inst-media-main-tint{ position:absolute; inset:0; background: linear-gradient(140deg, rgba(201,151,31,.35), transparent 60%); }
.inst-media-float{ position:absolute; right:-1rem; bottom:-3rem; width:13rem; overflow:hidden; border-radius: var(--radius-xl); border:4px solid #fff; box-shadow: var(--shadow-lift); }
.inst-media-float img{ aspect-ratio:1/1; width:100%; object-fit:cover; }
.inst-chip{ position:absolute; left:1rem; bottom:-2.5rem; border-radius: var(--radius-xl); background-image: var(--gradient-brand); padding:1.25rem 1.5rem; box-shadow: var(--shadow-lift); }
.inst-chip .num{ font-family: var(--font-display); font-size:2.25rem; font-weight:700; color:#fff; }
.inst-chip .num span{ color: var(--industrial); }
.inst-chip p{ margin-top:.25rem; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.75); }

.inst-content h2{ margin-top:1.25rem; font-size:1.75rem; line-height:.95; font-weight:700; text-transform:uppercase; color: var(--steel); }
.inst-content h2.text-gradient{ color: transparent; }
.inst-content p.lead{ margin-top:1.5rem; font-size:.85rem; line-height:1.7; color: var(--muted-foreground); }
@media (min-width:640px){ .inst-content h2{ font-size:2.1rem; } }
.inst-points{ margin-top:2.25rem; display:flex; flex-direction:column; gap:.9rem; }
.inst-point{ display:flex; align-items:flex-start; gap:1rem; border-radius: var(--radius-lg); border:1px solid rgba(231,235,241,.7); background:#fff; padding:1rem; box-shadow: var(--shadow-card); transition: all .3s; }
.inst-point:hover{ transform: translateY(-2px); border-color: rgba(244,196,48,.3); }
.inst-point .check{ display:grid; place-items:center; flex-shrink:0; margin-top:.15rem; width:1.5rem; height:1.5rem; border-radius:6px; background-image: var(--gradient-brand); color:#fff; }
.inst-point span{ font-size:.85rem; line-height:1.6; font-weight:500; color: var(--steel); }
.inst-actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; }

@media (min-width:1024px){
  .inst-grid{ grid-template-columns: 1fr 1fr; gap:5rem; }
  .inst-content h2{ font-size:2.4rem; }
}

/* ============================================================
   7. BANDA INDUSTRIAL
   ============================================================ */
.banda{ position:relative; isolation:isolate; overflow:hidden; padding:6rem 0; }
.banda-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banda-overlay{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(20,32,70,.97) 10%, rgba(0,50,130,.92) 55%, rgba(60,30,110,.88) 100%); }
.banda-grid{ position:relative; display:grid; gap:3rem; align-items:center; }
.banda-content h2{ margin-top:1.25rem; font-size:2.5rem; line-height:.95; font-weight:800; color:#fff; }
.banda-content p{ margin-top:1.5rem; max-width:32rem; font-size:1rem; line-height:1.7; color: rgba(255,255,255,.7); }
.banda-content .cta-btn{ margin-top:2.25rem; }

.banda-diff{ display:grid; gap:1rem; }
.diff-card{ height:100%; border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); padding:1.5rem; backdrop-filter: blur(6px); transition: all .3s; }
.diff-card:hover{ transform: translateY(-7px); }
.diff-icon{ display:grid; place-items:center; width:3rem; height:3rem; border-radius: var(--radius-md); background-image: var(--gradient-danger); color:#fff; box-shadow: var(--shadow-cta); }
.diff-card h3{ margin-top:1.25rem; font-size:1.5rem; font-weight:800; color:#fff; }
.diff-card p{ margin-top:.5rem; font-size:.85rem; line-height:1.6; color: rgba(255,255,255,.6); }

@media (min-width:640px){ .banda-diff{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .banda-grid{ grid-template-columns: 1fr 1.1fr; } }

/* ============================================================
   8. MARCAS
   ============================================================ */
.marcas{ position:relative; overflow:hidden; background: var(--steel-soft); padding:6rem 0 5rem; }
.marcas-grid{ margin-top:3.5rem; display:grid; gap:1.25rem; }
.marca-card{ position:relative; height:100%; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(231,235,241,.7); background:#fff; padding:1.75rem; box-shadow: var(--shadow-card); }
.marca-card-topline{ position:absolute; inset:0 0 auto 0; height:4px; background-image: var(--gradient-brand); transform: scaleX(0); transition: transform .5s; }
.marca-card:hover .marca-card-topline{ transform: scaleX(1); }
.marca-card span.name{ font-family: var(--font-display); font-size:1.75rem; font-weight:700; text-transform:uppercase; color: var(--steel); transition:color .3s; }
.marca-card:hover span.name{ color: var(--brand); }
.marca-card p{ margin-top:.5rem; font-size:.85rem; color: var(--muted-foreground); }

.marquee{ margin-top:4rem; overflow:hidden; border-top:1px solid rgba(231,235,241,.7); border-bottom:1px solid rgba(231,235,241,.7); background:#fff; padding:1.25rem 0; }
.marquee-track{ display:flex; width:max-content; gap:3.5rem; padding-right:3.5rem; }
.marquee-track span{ font-family: var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:.14em; white-space:nowrap; text-transform:uppercase; color: rgba(148,161,184,.6); }
.marquee-track span em{ margin-left:3.5rem; font-style:normal; color: var(--danger); }

@media (min-width:640px){ .marcas-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .marcas-grid{ grid-template-columns: repeat(3,1fr); } }

/* ============================================================
   9. COTIZACIÓN
   ============================================================ */
.cotizacion{ position:relative; overflow:hidden; background:#fff; padding:6rem 0; }
.cotizacion-grid{ display:grid; gap:2rem; }
.cotiz-panel{ position:relative; overflow:hidden; border-radius: var(--radius-2xl); padding:2.25rem; box-shadow: var(--shadow-lift); }
.cotiz-panel::before{ content:''; position:absolute; inset:-15%; z-index:0; background-image: linear-gradient(140deg, #C9971F 0%, #F4C430 55%, #8a6a10 100%); filter: blur(80px); }
.cotiz-panel::after{ content:''; position:absolute; inset:0; z-index:0; background: rgba(0,0,0,.15); }
.cotiz-panel > .inner{ position:relative; z-index:1; }
.cotiz-panel h2{ margin-top:1.5rem; font-size:2.25rem; line-height:.95; font-weight:800; color:#fff; }
.cotiz-panel > .inner > p{ margin-top:1.25rem; max-width:28rem; font-size:.9rem; line-height:1.7; color: rgba(255,255,255,.7); }
.cotiz-contact{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.75rem; }
.cotiz-contact a{ display:flex; align-items:center; gap:1rem; border-radius: var(--radius-lg); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding:1rem; transition: all .3s; }
.cotiz-contact a:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); }
.cotiz-contact-icon{ display:grid; place-items:center; flex-shrink:0; width:2.5rem; height:2.5rem; border-radius: var(--radius-md); background: rgba(255,255,255,.12); color:#fff; }
.cotiz-contact-label{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.5); }
.cotiz-contact-value{ display:block; margin-top:.15rem; font-size:.9rem; font-weight:600; color:#fff; }

.cotiz-form{ height:100%; border-radius: var(--radius-2xl); border:1px solid rgba(231,235,241,.7); background:#fff; padding:2rem; box-shadow: var(--shadow-lift); }
.cotiz-form .eyebrow{ font-size:.62rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--muted-foreground); }
.cotiz-form h3{ margin-top:.75rem; font-size:1.75rem; font-weight:800; color: var(--steel); }
.form-grid{ margin-top:1.75rem; display:grid; gap:1rem; }
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; border-radius: var(--radius-md); border:1px solid var(--border); background:#fff;
  padding:.85rem 1rem; font-size:.85rem; color: var(--steel); font-family: var(--font-sans);
  outline:none; transition: all .3s;
}
.form-grid textarea{ resize:none; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px rgba(244,196,48,.12); }
.form-grid .full{ grid-column: 1 / -1; }
.cotiz-form button[type="submit"]{
  margin-top:1.5rem; display:flex; width:100%; align-items:center; justify-content:center; gap:.75rem;
  border-radius: var(--radius-md); background-image: var(--gradient-danger); color:#fff;
  padding:1rem 1.5rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  box-shadow: var(--shadow-cta); transition: all .3s;
}
.cotiz-form button[type="submit"]:hover{ transform: translateY(-2px); filter:brightness(1.1); }
.cotiz-form .note{ margin-top:1rem; text-align:center; font-size:.72rem; color: var(--muted-foreground); }

@media (min-width:640px){ .form-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .cotizacion-grid{ grid-template-columns: 1.05fr .95fr; } .cotiz-panel{ padding:3rem; } }

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer{ position:relative; overflow:hidden; background:#000000; color:#fff; }
.footer-topline{ height:4px; width:100%; background-image: var(--gradient-danger); }
.footer-main{ position:relative; margin:0 auto; max-width:1280px; padding:4rem 1.5rem 5rem; }
@media (max-width:767px){ .footer-main{ padding-top:2rem; } }
.footer-grid{ display:grid; gap:3rem; }
.footer-brand p{ margin-top:0; font-size:.85rem; line-height:1.7; color: rgba(255,255,255,.6); }
.footer-contact{ margin-top:1.75rem; display:flex; flex-direction:column; gap:.75rem; font-size:.85rem; color: rgba(255,255,255,.7); }
.footer-contact li{ display:flex; align-items:flex-start; gap:.75rem; }
.footer-contact svg{ color: var(--industrial); flex-shrink:0; margin-top:.15rem; }
.footer-contact a:hover{ color:#fff; }

.footer-col h3{ font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#fff; }
.footer-col-line{ display:block; margin-top:.75rem; height:2px; width:2rem; background-image: var(--gradient-danger); }
.footer-col ul{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color: rgba(255,255,255,.6); transition: color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-col a .dash{ height:1px; width:0; background: var(--danger); transition: width .3s; }
.footer-col a:hover .dash{ width:1rem; }

.footer-bottom{ margin-top:3.5rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; border-top:1px solid rgba(255,255,255,.12); padding-top:1.75rem; }
.footer-bottom p{ font-size:.72rem; letter-spacing:.02em; color: rgba(255,255,255,.45); }
.footer-top-link{ display:inline-flex; align-items:center; gap:.75rem; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.6); }
.footer-top-link:hover{ color:#fff; }
.footer-top-link span{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,.2); transition: all .3s; }
.footer-top-link:hover span{ background-image: var(--gradient-danger); border-color: transparent; }

@media (min-width:1024px){
  .footer-grid{ grid-template-columns: 1.3fr .8fr .8fr .8fr; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; }
}

/* ============================================================
   11. WHATSAPP FAB
   ============================================================ */
.wa-fab{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:200;
  width:3.5rem; height:3.5rem; border-radius:50%; background: var(--whatsapp);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px -4px rgba(37,211,102,.65); transition:.3s;
}
.wa-fab:hover{ transform:scale(1.1); box-shadow:0 10px 32px -4px rgba(37,211,102,.85); }
.wa-fab svg{ width:1.85rem; height:1.85rem; fill:#fff; }