/* ========== Design Tokens ========== */
:root {
    --brand: #E30613;
    --brand-2: #ff3b3b;
    --ink: #0A0A0A;
    --bg: #FFFFFF;
    --card: #fefefe;
    --muted: #B9BDC6;
    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 8px 24px rgba(0, 0, 0, .28);
    --radius: 18px;
    --speed: .28s ease;
}
/* Reset & Base */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ink); background:var(--bg);
  line-height:1.5;
}
img{ max-width:100%; display:block }
a{ color:var(--ink); text-decoration:none }
h1,h2,h3{ margin:0 0 10px }
h1{ font-size: clamp(34px, 4.2vw, 56px); line-height:1.06 }
h2{ font-size: clamp(22px, 2.6vw, 34px) }
h3{ font-size: clamp(18px, 2.1vw, 22px) }
p.muted, .muted{ color: var(--muted) }

.container{ width: min(1280px, 96vw); margin-inline:auto }
.section{ padding:clamp(56px,7vw,112px) 0 }
.alt{ background: linear-gradient(180deg, rgba(227,6,19,.05), transparent) }
.txt-grad{ background:linear-gradient(90deg,var(--brand),#ee1b1b,rgb(199, 89, 89)); -webkit-background-clip:text; background-clip:text; color:transparent }

/* Header + Nav */
.site-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); z-index:50; box-shadow:0 2px 10px rgba(0,0,0,.04) }
.header-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; min-height:68px }
.brand-link{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px }
.brand-mark{ width:100px; height:100px; display:grid; place-items:center;}
.brand-name b{ color:var(--brand) }

/* Desktop nav */
.main-nav{ display:flex; gap:18px; justify-self:center }
.main-nav a{ opacity:.88; transition:opacity var(--speed) }
.main-nav a:hover{ opacity:1 }

/* Mobile nav */
.menu-toggle{ display:none; width:40px; height:40px; border:1px solid var(--border); background:#141416; border-radius:10px; align-items:center; justify-content:center; gap:4px }
.menu-toggle span{ width:18px; height:2px; background:var(--ink); display:block; border-radius:2px; transition: transform .2s ease }

.marquee__track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: scroll-left var(--marquee-speed) linear infinite;
  .logo {
    width: 140px;
    height: 64px;
    filter: grayscale(.1) contrast(1.05);
    opacity: .99;
    transition: transform var(--speed), opacity var(--speed), filter var(--speed);
    border-radius: 15px;}
}
@media (max-width: 920px){
  .menu-toggle{ display:flex }
  .main-nav{ position: fixed; inset: 64px 0 auto 0; background:#ffffff; backdrop-filter: blur(8px); border-bottom:1px solid var(--border);
    transform: translateY(-100%); transition: transform .25s ease; flex-direction:column; padding:12px 16px; gap:10px; z-index: 60; }
  body.nav-open .main-nav{ transform: translateY(0) }
  body.nav-open .menu-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg) }
  body.nav-open .menu-toggle span:nth-child(2){ transform: scaleX(0) }
  body.nav-open .menu-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }
  /* Hide desktop CTA when menu open? keep it */
}

/* Buttons */
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; font-weight:800; border:1px solid var(--border); overflow:hidden }
.btn .btn-bg{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent); transform:translateY(60%); transition: transform .35s ease }
.btn .btn-label{ position:relative; color: #ffffff; }
.btn:hover .btn-bg{ transform:translateY(0) }
.btn-primary{ background: linear-gradient(180deg, var(--brand), var(--brand-2)); border:none; box-shadow:0 10px 18px rgba(227,6,19,.25); color: #ffffff; }
.btn-secondary{ background:#18181B }
.btn-ghost{ background:transparent; border-color:rgba(0,0,0,.12); color:var(--ink) }

/* CTA pulse + Magnetic */
.btn-cta{ animation: pulse 2.8s infinite }
@keyframes pulse{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.03) } }
.cta-mag{ will-change: transform; transition: transform .15s ease }
.cta-mag.is-magnetic{ transform: translate(var(--mx,0), var(--my,0)) }

/* Hero */
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center }
.hero-copy p{ color:var(--ink); max-width:52ch }
.hero-visual{ position:relative; height: clamp(220px, 34vw, 420px) }
.hero-visual img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.orb{ position:absolute; border-radius:50%; filter: blur(30px); opacity:.35; animation: float 8s ease-in-out infinite }
.orb-1{ width:240px; height:240px; background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0) 60%); left:8%; top:10% }
.orb-2{ width:180px; height:180px; background: radial-gradient(circle at 60% 60%, #ffb3b3, rgba(255,0,0,0) 60%); right:12%; top:0% }
.orb-3{ width:140px; height:140px; background: radial-gradient(circle at 40% 40%, #ffdede, rgba(255,255,255,0) 60%); right:24%; bottom:8% }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@media (max-width: 920px){ .hero-grid{ grid-template-columns: 1fr } }

/* Inputs & Chips */
.input{ width:100%; background:#fff; border:1px solid rgba(0,0,0,.12); color:var(--ink); padding:12px 14px; border-radius:12px; outline:none }
.chip-row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
.chip{ background:#141417; border:1px solid var(--border); color:#fff; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:700; transition:background var(--speed), transform var(--speed) }
.chip.is-active{ background:#1b1b1f; outline:2px solid rgba(255,255,255,.06) }
.chip:active{ transform:scale(.98) }

/* Products */
.product-grid{ margin-top:20px; display:grid; grid-template-columns: repeat(12, 1fr); gap:14px }
.product-card, .skeleton-card{
  grid-column: span 12;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow:hidden; position:relative; isolation:isolate;
}
@media (min-width:540px){ .product-card, .skeleton-card{ grid-column: span 6 } }
@media (min-width:980px){ .product-card, .skeleton-card{ grid-column: span 4 } }
@media (min-width:1280px){ .product-card, .skeleton-card{ grid-column: span 3 } }

.skeleton-card{ height:220px; background:linear-gradient(90deg, #141416, #181820, #141416); background-size:200% 100%; animation: shimmer 1.2s infinite linear }
@keyframes shimmer{ 0%{ background-position:0 0 } 100%{ background-position:-200% 0 } }

.product-media{ aspect-ratio: 4 / 3; background:#0b0b0d }
.product-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.03) }
.product-info{ padding:14px; display:grid; gap:8px }
.product-title{ font-weight:800 }
.product-meta{ color:var(--muted); font-size:.92rem }
.price{ font-weight:900 }
.product-cta{ display:flex; gap:10px; margin-top:6px }
.product-card .btn{ padding:10px 14px }

/* Hover microinteraction */
.product-card{  background: var(--card);  border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card.in{ transform: translateY(0); opacity:1; filter: none }
.product-card:hover{ transform: translateY(-4px) }
.product-card:hover .product-media img{ transform: scale(1.03); transition: transform .35s ease }

/* Cards & grid helpers */
.card-flat{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow) }
.cards-3{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:820px){ .cards-3{ grid-template-columns:repeat(3,1fr) } }
.card-link{ display:block; transition: transform .2s ease, outline-color .2s ease }
.card-link:hover{ transform: translateY(-4px) }
.stack-16 > * + * { margin-top:16px }

/* Brand rows */
.brand-logos{ display:flex; align-items:center; gap:32px; flex-wrap:nowrap; overflow:hidden; padding:8px 0 }
.brand-logos::-webkit-scrollbar{ display:none }
.brand-logos{ -ms-overflow-style:none; scrollbar-width:none }
.brand-logos .logo{ height:38px; opacity:.86; filter: grayscale(.1) contrast(1.05); transition: transform var(--speed), opacity var(--speed), filter var(--speed) }
.brand-logos .logo:hover{ transform: translateY(-4px) scale(1.03); opacity:1; filter:none }

/* Marquee */
.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  --marquee-speed: 20s;
}

.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scroll-left var(--marquee-speed) linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.logo {
  width: 140px;
  height: 64px;
  object-fit: contain;
}


/* Map */
.map-card-wrap {
  position: relative;
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  min-height: 220px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.map-frame {
  position: relative;
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
  background: #f3f3f3;
  display: block;
}
.map-glow {
  position: absolute;
  inset: auto -40% -40% -40%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227,6,19,.08), transparent 70%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.map-link {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: #fff;
  border-radius: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.map-link a {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.98em;
  text-decoration: underline;
}
.map-link a:hover {
  color: var(--ink);
}

/* Eliminar estilos antiguos de map-wrap y map-frame global */
.map-wrap, .map-wrap .map-frame, .map-wrap .map-glow {
  display: none !important;
}

/* Pill switch */
.pill-switch{ width: 250px ; position:relative; display:inline-flex; gap:8px; padding:8px; border:1px solid rgba(0,0,0,.12); border-radius:999px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.06); margin:24px 0 }
.pill-switch .pill{ position:relative; z-index:1; appearance:none; border:0; background:transparent; cursor:pointer; padding:12px 20px; border-radius:999px; font-weight:800; letter-spacing:.2px; color:var(--ink); transition:color var(--speed) }
.pill-switch .pill.is-active{ color:#fff }
.pill-switch .indicator{ position:absolute; z-index:0; left:8px; top:8px; height:calc(100% - 16px); width:50%; background:var(--brand); border-radius:999px; transition:transform .32s ease, width .32s ease; box-shadow:0 10px 18px rgba(227,6,19,.18), inset 0 0 0 2px rgba(255,255,255,.24) }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding:24px 0; color:var(--muted); text-align:center }
.site-footer a{ color:#333; text-decoration:underline }

/* Reveal on scroll */
[data-animate]{ opacity:0; transform: translateY(14px); filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease }
.reveal-in{ opacity:1 !important; transform: none !important; filter: none !important }

/* Preloader */
#preloader{ position:fixed; inset:0; display:grid; place-items:center; background: radial-gradient(60% 60% at 50% 0%, rgba(227,6,19,.08), transparent 60%), #0d0d0f;
  z-index:999; transition: opacity .4s ease, visibility .4s ease }
#preloader.is-hidden{ opacity:0; visibility:hidden }
.loader-core{ position:relative; display:grid; place-items:center; gap:12px }
.loader-core .brand{ font-weight:900; letter-spacing:1px }
.loader-core .ring{ width:84px; height:84px; border-radius:50%; border:3px solid rgba(255,255,255,.08); border-top-color:#fff; animation: spin 1s linear infinite;
  box-shadow: 0 0 0 1px rgba(227,6,19,.2) inset, 0 0 30px rgba(227,6,19,.1) }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important }
  .marquee{ animation:none !important }
}

/* Helpers */
.hero-cta{ display:flex; gap:12px; margin-top:14px }
.input:focus{ outline:2px solid rgba(227,6,19,.28); box-shadow:0 0 0 3px rgba(227,6,19,.12) }


/* === Mobile menu: full viewport & scrollable (2025-10-01) === */
:root{ --header-h: 60px }

@media (max-width: 920px){
  .site-header{ position: sticky; top:0; z-index: 80; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.04) }
  .header-grid{ grid-template-columns: auto 1fr auto; gap:12px; min-height: var(--header-h) }

  /* Burger visible */
  .menu-toggle{ display:flex; width:40px; height:40px; align-items:center; justify-content:center }

  /* Ocultamos CTA grande en mobile para evitar que tape el nav */
  #cta-whatsapp{ display:none }

  /* Panel del menú como dropdown fijo que ocupa el alto restante */
  .main-nav{
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column;
    gap: 8px; padding: 12px 16px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform .25s ease;
    z-index: 75;
  }
  .main-nav a{ padding: 12px 6px; font-size: 1rem }

  /* Abrimos el panel */
  body.nav-open .main-nav{ transform: translateY(0) }

  /* Overlay visual para enfocar el menú */
  body.nav-open::before{
    content:""; position: fixed;
    top: var(--header-h); left:0; right:0; bottom:0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(1px);
    z-index: 70;
  }

  /* Evita scroll del body cuando el menú está abierto */
  body.nav-open{ overflow:hidden }
}

@media (min-width: 921px){
  .menu-toggle{ display:none }

  .main-nav{ position: static; transform:none; display:flex; flex-direction:row; gap:18px; padding:0; background:transparent; border:0; max-height: none; overflow: visible }
}
/* === End mobile menu patch === */


/* === Mobile TABS nav (<=520px) — show all options clearly === */
@media (max-width: 520px){
  :root{ --header-h: 56px }
  .brand-mark{ width:52px; height:auto }
  .menu-toggle{ display:none !important }
  .brand-name { display:none !important }
  .main-nav { font-size: 8px; }
  #cta-whatsapp{ display:inline-flex }

  .site-header{
    #cta-whatsapp{ display:none; }
  }
  /* Nav como tira de solapas SIEMPRE visible */
  .main-nav{
    position: sticky !important;
    top: var(--header-h) !important;
    left:0; right:0;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 70;
  }
  .main-nav a{
    display:grid; place-items:center;
    padding: 12px 6px;
    font-weight: 800;
    border-bottom: 3px solid transparent;
  }
  /* Estado hover/foco para sensación de pestaña */
  .main-nav a:hover, .main-nav a:focus{ background: rgba(0,0,0,.03) }
}

/* Optional: highlight current page by URL endsWith */
@supports(selector(:has(*))){
  @media (max-width: 520px){
    body:has(main h1:contains("Productos")) .main-nav a[href$="productos.html"]{ border-bottom-color: var(--brand) }
    body:has(main h1:contains("Ubicación")) .main-nav a[href$="ubicacion.html"]{ border-bottom-color: var(--brand) }
    body:has(main h1:contains("Sobre")) .main-nav a[href$="sobre.html"]{ border-bottom-color: var(--brand) }
  }
}
/* === End Mobile TABS nav === */