/* =========================================================
   PROESOLDA — style.css
   Hoja de estilos única del sitio. Los colores viven en
   variables :root — cambia aquí y se actualiza todo el sitio.
   ========================================================= */

:root{
  /* ---- Paleta de marca (ajusta aquí si tienes los hex exactos) ---- */
  --color-primary:      #0B2C4D;   /* azul industrial oscuro (header, textos fuertes) */
  --color-primary-dark: #071B30;   /* azul aún más oscuro (footer, degradados) */
  --color-primary-light:#12437A;   /* azul medio (hovers, acentos suaves) */
  --color-accent:       #E1251B;   /* rojo de marca (CTA, detalles) */
  --color-accent-dark:  #B81E15;
  --color-accent-2:     #8C1116;   /* rojo oscuro (variante para detalles) */
  --color-light:        #F4F6F9;
  --color-white:        #FFFFFF;
  --color-gray:         #6B7686;
  --color-gray-light:   #E4E8EE;
  --color-dark-text:    #14202E;

  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(11,44,77,0.08);
  --shadow-md: 0 10px 30px rgba(11,44,77,0.14);
  --shadow-lg: 0 20px 50px rgba(11,44,77,0.22);

  --header-h: 92px;
  --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* =============== RESET BÁSICO =============== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body{
  font-family: var(--font-body);
  color: var(--color-dark-text);
  background: var(--color-white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4,h5{ font-family:var(--font-heading); color:var(--color-primary); line-height:1.25; font-weight:700; }
.container{ width:100%; max-width:1220px; margin:0 auto; padding:0 24px; }
section{ position:relative; }

/* Oculta cursor nativo SOLO cuando el cursor personalizado está activo (JS agrega esta clase) */
html.has-custom-cursor, html.has-custom-cursor *{ cursor:none !important; }

/* =============== CURSOR DINÁMICO =============== */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:8px; height:8px; background:var(--color-accent);
  transition: background .25s ease, opacity .2s ease, width .25s ease, height .25s ease;
}
.cursor-ring{
  width:38px; height:38px;
  border:1.5px solid rgba(225,37,27,0.7);
  background:rgba(225,37,27,0.06);
  transition: width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1),
              border-color .28s ease, background .28s ease, opacity .2s ease;
}
html.has-custom-cursor .cursor-ring.is-hover{
  width:64px; height:64px;
  background:rgba(225,37,27,0.12);
  border-color:var(--color-accent);
}
html.has-custom-cursor .cursor-ring.is-text{
  width:4px; height:26px; border-radius:3px; background:var(--color-primary); border:none;
}
html.has-custom-cursor .cursor-dot.is-hidden,
html.has-custom-cursor .cursor-ring.is-hidden{ opacity:0; }

/* =============== UTILIDADES =============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:50px; font-weight:600; font-size:.95rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn-primary{ background:var(--color-accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--color-accent-dark); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; color:var(--color-white); border:1.5px solid rgba(255,255,255,.6); }
.btn-outline:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); }
.btn-primary-outline{ background:transparent; color:var(--color-primary); border:1.5px solid var(--color-primary); }
.btn-primary-outline:hover{ background:var(--color-primary); color:#fff; transform:translateY(-3px); }
.btn-block{ width:100%; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--color-accent); font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; font-size:.78rem; margin-bottom:12px;
}
.eyebrow::before{ content:''; width:26px; height:2px; background:var(--color-accent); display:inline-block; }

.section-head{ max-width:680px; margin-bottom:46px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
.section-head p{ color:var(--color-gray); margin-top:14px; font-size:1.05rem; }

.section-pad{ padding:96px 0; }
.bg-light{ background:var(--color-light); }
.bg-primary{ background:var(--color-primary); color:#fff; }
.bg-primary h2,.bg-primary h3,.bg-primary h4{ color:#fff; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* =============== TOPBAR =============== */
.topbar{
  background:var(--color-primary-dark); color:#cfd9e6; font-size:.82rem;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; flex-wrap:wrap; gap:8px; }
.topbar-links{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-links a{ display:inline-flex; align-items:center; gap:7px; transition:color var(--transition); }
.topbar-links a:hover{ color:var(--color-accent); }
.topbar-social{ display:flex; gap:14px; align-items:center; }
.topbar-social a{ width:26px; height:26px; display:grid; place-items:center; background:rgba(255,255,255,.08); border-radius:50%; transition:background var(--transition), transform var(--transition); }
.topbar-social a:hover{ background:var(--color-accent); transform:translateY(-2px); }

/* Utilidad: oculto visualmente, disponible para lectores de pantalla / SEO */
.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; }

/* =============== HERO SLIDER (carrusel de imágenes, ancho completo, sin texto) =============== */
.hero-slider{
  position:relative; width:100%; height:78vh; min-height:380px; max-height:720px;
  overflow:hidden; background:var(--color-primary-dark);
}
.hero-slider-track{
  display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.hero-slider-track::-webkit-scrollbar{ display:none; }
.hero-slide{ position:relative; flex:0 0 100%; height:100%; scroll-snap-align:start; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center; z-index:5; transition:background var(--transition), transform var(--transition);
}
.hero-slider-arrow:hover{ background:var(--color-accent); border-color:var(--color-accent); transform:translateY(-50%) scale(1.06); }
.hero-slider-arrow.prev{ left:22px; }
.hero-slider-arrow.next{ right:22px; }

.hero-slider-dots{
  position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; gap:10px; z-index:5;
}
.hero-slider-dots button{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45);
  transition:all var(--transition);
}
.hero-slider-dots button.is-active{ width:26px; border-radius:6px; background:var(--color-accent); }

@media (max-width:640px){
  .hero-slider{ height:170px; min-height:170px; }
  .hero-slider-arrow{ width:42px; height:42px; }
  .hero-slider-arrow.prev{ left:10px; }
  .hero-slider-arrow.next{ right:10px; }
}
.site-header{
  position:sticky; top:0; z-index:900; background:#fff;
  height:var(--header-h); display:flex; align-items:center;
  box-shadow:0 1px 0 rgba(11,44,77,.06);
  transition: box-shadow var(--transition), height var(--transition);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); height:74px; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:26px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:800; font-size:1.4rem; color:var(--color-primary); flex-shrink:0; }
.logo .logo-mark{
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));
  display:grid; place-items:center; color:#fff; font-weight:800; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.logo .logo-mark::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(225,37,27,.55) 50%,transparent 70%); transform:translateX(-120%); animation:sheen 4.5s ease-in-out infinite; }
@keyframes sheen{ 0%,60%{transform:translateX(-120%);} 80%,100%{transform:translateX(120%);} }
.logo small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:2px; color:var(--color-accent); }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a, .main-nav > ul > li > button.nav-toggle{
  display:flex; align-items:center; gap:6px;
  padding:14px 16px; font-weight:600; font-size:.94rem; color:var(--color-dark-text);
  border-radius:8px; transition:color var(--transition), background var(--transition);
}
.main-nav > ul > li > a:hover, .main-nav > ul > li.is-open > button.nav-toggle,
.main-nav > ul > li > a.is-active{ color:var(--color-accent); }
.main-nav .chev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform var(--transition); margin-top:-3px; }

.dropdown{
  position:absolute; top:100%; left:0; min-width:230px; background:#fff;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  border-top:3px solid var(--color-accent);
}
/* Se abre al pasar el mouse (hover) o con teclado (focus-within);
   la clase .is-open (JS) sigue funcionando como respaldo táctil/click */
.main-nav li.has-dropdown:hover .dropdown,
.main-nav li.has-dropdown:focus-within .dropdown,
.main-nav li.is-open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.main-nav li.has-dropdown:hover .chev,
.main-nav li.has-dropdown:focus-within .chev,
.main-nav li.is-open .chev{ transform:rotate(-135deg); margin-top:3px; }
.main-nav li.has-dropdown:hover > button.nav-toggle,
.main-nav li.has-dropdown:focus-within > button.nav-toggle{ color:var(--color-accent); }
/* "Puente" invisible entre el botón y el panel para que el hover no se pierda al bajar el mouse */
.main-nav li.has-dropdown::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:12px;
}
.dropdown a{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:8px; font-weight:600; font-size:.9rem; color:var(--color-primary); transition:background var(--transition), color var(--transition), padding-left var(--transition); }
.dropdown a:hover{ background:var(--color-light); color:var(--color-accent-dark); padding-left:18px; }
.dropdown .brand-tag{ font-size:.68rem; padding:3px 8px; border-radius:20px; background:var(--color-light); color:var(--color-gray); font-weight:700; transition:background var(--transition), color var(--transition); }
.dropdown .brand-tag:hover{ background:var(--color-accent); color:#fff; }
.dropdown-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-radius:8px; transition:background var(--transition); }
.dropdown-row:hover{ background:var(--color-light); }
.dropdown-row > a:first-child{ padding:0; font-weight:700; font-size:.9rem; color:var(--color-primary); flex:1; }
.dropdown-row .brand-tags{ display:flex; gap:6px; }
.dropdown-divider{ height:1px; background:var(--color-gray-light); margin:6px 4px; }

.header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-cta .btn{ padding:13px 24px; }
.burger{ display:none; width:44px; height:44px; border-radius:10px; background:var(--color-light); align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span{ width:20px; height:2px; background:var(--color-primary); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =============== HERO =============== */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,var(--color-primary-dark) 0%,var(--color-primary) 60%,var(--color-primary-light) 100%);
  padding:110px 0 130px;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image: radial-gradient(circle at 2px 2px, #fff 1.4px, transparent 1.4px);
  background-size:26px 26px;
}
.hero::after{
  content:''; position:absolute; right:-10%; top:-20%; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle,rgba(225,37,27,.35),transparent 70%); filter:blur(10px);
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
.hero h1{ color:#fff; font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.15; }
.hero h1 span{ color:var(--color-accent); }
.hero p{ margin-top:20px; color:#cfe0f2; font-size:1.12rem; max-width:520px; }
.hero-actions{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:48px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-heading); font-size:1.9rem; color:#fff; }
.hero-stats div span{ font-size:.82rem; color:#9fb7cf; }

.hero-visual{ position:relative; }
.hero-card{
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  padding:22px; position:absolute; box-shadow:var(--shadow-lg);
  animation: floaty 5s ease-in-out infinite;
}
.hero-card img{ width:44px; margin-bottom:10px; }
.hero-card strong{ display:block; color:#fff; font-size:.92rem; }
.hero-card span{ font-size:.78rem; color:#a9c1d8; }
.hero-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.15); }
.hero-photo img{ width:100%; height:420px; object-fit:cover; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.marquee-wrap{ background:var(--color-white); padding:34px 0; border-bottom:1px solid var(--color-gray-light); overflow:hidden; }
.marquee-label{ text-align:center; color:var(--color-gray); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:22px; }
.marquee{ display:flex; width:max-content; gap:70px; animation:scroll-x 26s linear infinite; align-items:center; }
.marquee-wrap:hover .marquee{ animation-play-state:paused; }
.marquee img{ height:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.65; transition:opacity var(--transition), filter var(--transition); }
.marquee img:hover{ filter:grayscale(0); opacity:1; }
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =============== ABOUT / SOMOS =============== */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.about-photos{ position:relative; }
.about-photos img{ border-radius:var(--radius); box-shadow:var(--shadow-md); }
.about-photos .ph-1{ position:relative; z-index:2; }
.about-photos .ph-2{ position:absolute; bottom:-34px; right:-34px; width:58%; border:6px solid #fff; z-index:3; }
.about-badge{ position:absolute; top:20px; left:-20px; background:var(--color-accent); color:#fff; padding:16px 20px; border-radius:14px; box-shadow:var(--shadow-md); z-index:4; text-align:center; }
.about-badge strong{ display:block; font-family:var(--font-heading); font-size:1.6rem; }
.about-badge span{ font-size:.72rem; text-transform:uppercase; letter-spacing:1px; }
.about-list{ margin-top:26px; display:grid; gap:16px; }
.about-list li{ display:flex; gap:14px; align-items:flex-start; }
.check{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:rgba(225,37,27,.12); color:var(--color-accent); display:grid; place-items:center; font-weight:800; font-size:.8rem; }

/* =============== FEATURES / SOLUCIONES =============== */
.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.feature-card{
  background:#fff; border:1px solid var(--color-gray-light); border-radius:var(--radius);
  padding:34px 28px; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position:relative; overflow:hidden;
}
.feature-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.feature-card .ic{ width:58px; height:58px; border-radius:14px; background:var(--color-light); display:grid; place-items:center; margin-bottom:20px; overflow:hidden; }
.feature-card .ic img{ width:30px; height:30px; object-fit:contain; }
.feature-card h5{ font-size:1.08rem; margin-bottom:10px; }
.feature-card p{ color:var(--color-gray); font-size:.93rem; }

/* =============== PRODUCT TOGGLE (Miller/Lincoln) =============== */
.brand-switch{
  display:inline-flex; padding:6px; background:var(--color-light); border-radius:50px; gap:4px; margin-bottom:38px;
  border:1px solid var(--color-gray-light);
}
.brand-switch button, .brand-switch a{
  display:flex; align-items:center; gap:10px; padding:11px 26px; border-radius:50px;
  font-weight:700; font-size:.92rem; color:var(--color-gray); transition:all var(--transition);
}
.brand-switch button img, .brand-switch a img{ height:18px; width:auto; object-fit:contain; opacity:.65; transition:opacity var(--transition); }
.brand-switch button.is-active, .brand-switch a.is-active{ background:#fff; color:var(--color-primary); box-shadow:var(--shadow-sm); }
.brand-switch button.is-active img, .brand-switch a.is-active img{ opacity:1; }

.brand-panel{ display:none; }
.brand-panel.is-active{ display:block; animation:fadein .45s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.cat-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.cat-filters button{
  padding:9px 18px; border-radius:50px; font-size:.85rem; font-weight:600;
  border:1.5px solid var(--color-gray-light); color:var(--color-gray); transition:all var(--transition);
}
.cat-filters button.is-active, .cat-filters button:hover{ border-color:var(--color-accent); color:var(--color-accent-dark); background:rgba(225,37,27,.08); }

.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.product-card{
  background:#fff; border:1px solid var(--color-gray-light); border-radius:var(--radius); overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition); display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.product-card .thumb{ aspect-ratio:4/3.1; background:var(--color-light); position:relative; overflow:hidden; }
.product-card .thumb img{ width:100%; height:100%; object-fit:contain; padding:22px; transition:transform .5s ease; }
.product-card:hover .thumb img{ transform:scale(1.07); }
.product-card .brand-pill{ position:absolute; top:12px; left:12px; background:#fff; padding:4px 12px; border-radius:20px; font-size:.7rem; font-weight:800; letter-spacing:.5px; box-shadow:var(--shadow-sm); color:var(--color-primary); }
.product-card .badge-best{ position:absolute; top:12px; right:12px; background:var(--color-accent); color:#fff; padding:4px 12px; border-radius:20px; font-size:.68rem; font-weight:800; letter-spacing:.3px; box-shadow:var(--shadow-sm); }
.product-card .body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-card .tag{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--color-accent); }
.product-card h6{ font-family:var(--font-heading); color:var(--color-primary); font-size:1.02rem; font-weight:700; }
.product-card p{ font-size:.86rem; color:var(--color-gray); flex:1; }
.product-card .specs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.product-card .specs span{ font-size:.72rem; background:var(--color-light); color:var(--color-gray); padding:4px 9px; border-radius:6px; }
.product-card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:14px; border-top:1px solid var(--color-gray-light); }
.product-card .foot a{ font-size:.85rem; font-weight:700; color:var(--color-accent-dark); display:flex; align-items:center; gap:6px; }
.product-card .foot a:hover{ gap:10px; }
.product-card .foot a.ficha-mini{ color:var(--color-gray); font-weight:600; }
.product-card .foot a.ficha-mini:hover{ color:var(--color-accent-dark); gap:6px; }

/* =============== CARRUSEL (Más Vendidos) =============== */
.carousel-wrap{ position:relative; }
.carousel-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 6px 22px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track .product-card{ min-width:290px; max-width:290px; flex:0 0 auto; scroll-snap-align:start; }
.carousel-btn{
  position:absolute; top:38%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-md); display:grid; place-items:center; z-index:5;
  transition:background var(--transition), transform var(--transition);
  border:1px solid var(--color-gray-light);
}
.carousel-btn:hover{ background:var(--color-accent); border-color:var(--color-accent); transform:translateY(-50%) scale(1.06); }
.carousel-btn:hover svg{ stroke:#fff; }
.carousel-btn.prev{ left:-22px; }
.carousel-btn.next{ right:-22px; }
@media (max-width:1080px){
  .carousel-btn.prev{ left:0; }
  .carousel-btn.next{ right:0; }
}
@media (max-width:640px){
  .carousel-track .product-card{ min-width:80vw; max-width:80vw; }
  .carousel-btn{ display:none; }
}

/* =============== SERVICIOS DETALLE =============== */
.service-block{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.service-block.rev{ direction:rtl; }
.service-block.rev > *{ direction:ltr; }
.service-block img{ border-radius:var(--radius); box-shadow:var(--shadow-md); width:100%; height:380px; object-fit:cover; }

/* =============== MONTAJES GALLERY =============== */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:16px; }
.gallery-grid a{ position:relative; border-radius:var(--radius-sm); overflow:hidden; display:block; }
.gallery-grid a:nth-child(4n+1){ grid-row:span 2; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-grid a::after{ content:'+'; position:absolute; inset:0; display:grid; place-items:center; font-size:2.4rem; color:#fff; background:rgba(11,44,77,.35); opacity:0; transition:opacity var(--transition); }
.gallery-grid a:hover::after{ opacity:1; }
.gallery-grid a:hover img{ transform:scale(1.09); }

.gallery-grid-uniforme {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-grid-uniforme a {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
  height: 190px;
}
.gallery-grid-uniforme img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.gallery-grid-uniforme a::after {
  content: '+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  color: #fff;
  background: rgba(11,44,77,.35);
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-grid-uniforme a:hover::after { opacity: 1; }
.gallery-grid-uniforme a:hover img { transform: scale(1.09); }

@media (max-width: 768px) {
  .gallery-grid-uniforme {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============== EXPERIENCIA (counter) =============== */
.exp-band{ display:grid; grid-template-columns:.5fr 1fr; gap:50px; align-items:center; }
.exp-count{ font-family:var(--font-heading); font-weight:800; font-size:clamp(3.2rem,7vw,5.4rem); color:var(--color-accent); line-height:1; }
.exp-count small{ font-size:1.6rem; color:var(--color-primary); }
.exp-band img{ border-radius:var(--radius); box-shadow:var(--shadow-md); width:100%; height:280px; object-fit:cover; }

/* =============== CONTACTO / CTA =============== */
.contact-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.contact-side{ background:linear-gradient(150deg,var(--color-primary-dark),var(--color-primary)); color:#fff; padding:52px 44px; }
.contact-side h3{ color:#fff; font-size:1.5rem; }
.contact-side p{ color:#c9d9e8; margin-top:14px; font-size:.95rem; }
.contact-side .ci{ display:flex; gap:14px; margin-top:24px; align-items:flex-start; }
.contact-side .ic{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); display:grid; place-items:center; flex-shrink:0; }
.contact-form-box{ background:#fff; padding:52px 44px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:700; color:var(--color-primary); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--color-gray-light); border-radius:10px;
  transition:border-color var(--transition), box-shadow var(--transition); background:var(--color-light);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 4px rgba(225,37,27,.12); background:#fff; }
.field textarea{ resize:vertical; min-height:120px; }
.form-msg{ padding:14px 16px; border-radius:10px; font-size:.9rem; margin-bottom:18px; display:none; }
.form-msg.ok{ display:block; background:#e5f7ec; color:#1a7a43; }
.form-msg.err{ display:block; background:#fdeceb; color:#c62f28; }
.g-recaptcha{ margin-bottom:18px; }

/* =============== BLOG =============== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card{ border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--color-gray-light); transition:transform var(--transition), box-shadow var(--transition); }
.blog-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.blog-card .thumb{ height:200px; overflow:hidden; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .thumb img{ transform:scale(1.08); }
.blog-card .body{ padding:24px; }
.blog-card .date{ font-size:.75rem; color:var(--color-accent); font-weight:700; text-transform:uppercase; }
.blog-card h5{ margin-top:10px; font-size:1.05rem; }
.blog-card p{ margin-top:10px; color:var(--color-gray); font-size:.88rem; }
.blog-card .more{ margin-top:16px; display:inline-flex; gap:6px; font-weight:700; font-size:.85rem; color:var(--color-accent-dark); }

/* =============== FOOTER =============== */
.site-footer{ background:var(--color-primary-dark); color:#b9c8d8; padding-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-grid h6{ color:#fff; font-family:var(--font-heading); margin-bottom:20px; font-size:1rem; }
.footer-grid p{ font-size:.88rem; line-height:1.7; }
.footer-grid ul li{ margin-bottom:12px; }
.footer-grid ul a{ font-size:.88rem; transition:color var(--transition), padding-left var(--transition); display:inline-block; }
.footer-grid ul a:hover{ color:var(--color-accent); padding-left:5px; }
.footer-grid .ci{ display:flex; gap:10px; margin-bottom:14px; font-size:.86rem; align-items:flex-start; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:all var(--transition); }
.footer-social a:hover{ background:var(--color-accent); transform:translateY(-3px); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:.82rem; flex-wrap:wrap; gap:10px; }
.footer-bottom a:hover{ color:var(--color-accent); }

/* =============== FLOATING BUTTONS =============== */
.float-stack{ position:fixed; right:26px; bottom:26px; z-index:800; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.float-btn{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow-lg); transition:transform var(--transition), box-shadow var(--transition);
  position:relative;
}
.float-btn:hover{ transform:translateY(-4px) scale(1.05); }
.float-btn.whats{ background:#25D366; }
.float-btn.call{ background:var(--color-accent); }
.float-btn.top{ background:var(--color-primary); width:46px; height:46px; opacity:0; pointer-events:none; transform:translateY(10px); }
.float-btn.top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.float-btn.whats::before{ content:''; position:absolute; inset:0; border-radius:50%; background:#25D366; animation:pulse 2.2s ease-out infinite; z-index:-1; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.55;} 100%{ transform:scale(1.9); opacity:0;} }
.float-btn svg{ width:26px; height:26px; }

/* =============== PÁGINA DE PRODUCTO (detalle) =============== */
.product-detail{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:start; }
.product-detail-gallery{ position:sticky; top:110px; }
.product-detail-gallery .main-image{
  background:var(--color-light); border-radius:var(--radius); overflow:hidden; aspect-ratio:1/0.92;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--color-gray-light); position:relative;
}
.product-detail-gallery .main-image img{ width:100%; height:100%; object-fit:contain; padding:34px; }
.product-detail-gallery .main-image .brand-pill{ position:absolute; top:16px; left:16px; }
.product-detail-info .brand-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.product-detail-info .brand-row img{ height:20px; width:auto; object-fit:contain; }
.product-detail-info .brand-row .tag{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--color-accent); background:rgba(225,37,27,.08); padding:5px 12px; border-radius:20px; }
.product-detail-info h1{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
.product-detail-info .lead{ color:var(--color-gray); font-size:1.06rem; margin-bottom:8px; }
.product-detail-info .extra{ color:var(--color-gray); font-size:.98rem; margin-top:10px; }
.spec-list{ margin:24px 0 8px; display:grid; gap:13px; }
.spec-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:var(--color-dark-text); }
.spec-table{ width:100%; border-collapse:collapse; margin:18px 0 8px; }
.spec-table tr{ border-bottom:1px solid var(--color-gray-light); }
.spec-table td{ padding:14px 8px; font-size:.92rem; line-height:1.55; vertical-align:top; }
.spec-table td:first-child{ color:var(--color-gray); width:42%; font-weight:600; }
.spec-table td:last-child{ font-weight:700; color:var(--color-primary); }
.product-detail-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.product-detail-note{
  display:flex; gap:12px; background:var(--color-light); border-radius:var(--radius-sm);
  padding:16px 18px; margin-top:28px; font-size:.85rem; color:var(--color-gray); align-items:flex-start;
  border:1px solid var(--color-gray-light);
}
.product-detail-back{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:var(--color-gray); margin-bottom:26px; }
.product-detail-back:hover{ color:var(--color-accent-dark); }
@media (max-width:900px){
  .product-detail{ grid-template-columns:1fr; gap:34px; }
  .product-detail-gallery{ position:static; }
}

/* =============== BREADCRUMB / PAGE HERO =============== */
.page-hero{ background:linear-gradient(120deg,var(--color-primary-dark),var(--color-primary)); color:#fff; padding:64px 0 54px; position:relative; overflow:hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; opacity:.1; background-image:radial-gradient(circle at 2px 2px,#fff 1.3px,transparent 1.3px); background-size:24px 24px; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.85rem; color:#a9c1d8; margin-bottom:14px; }
.breadcrumb a:hover{ color:var(--color-accent); }
.breadcrumb span{ opacity:.6; }
.page-hero p{ margin-top:12px; color:#cfe0f2; max-width:640px; }

/* =============== RESPONSIVE =============== */
@media (max-width:1080px){
  .features-grid,.products-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid,.hero-grid,.service-block,.exp-band{ grid-template-columns:1fr; }
  .service-block.rev{ direction:ltr; }
  .hero-visual{ order:-1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-wrap{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .main-nav, .header-cta .btn-primary{ display:none; }
  .burger{ display:flex; }
  .header-cta{ gap:10px; }
  .marquee img{ height:30px; }
}
@media (max-width:640px){
  .section-pad{ padding:64px 0; }
  .features-grid,.products-grid,.blog-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:150px; }
  .contact-side,.contact-form-box{ padding:34px 24px; }
  .hero{ padding:80px 0 90px; }
  .about-photos .ph-2{ width:62%; right:-14px; bottom:-24px; }
  .float-stack{ right:16px; bottom:16px; }
  .float-btn{ width:52px; height:52px; }
}

/* Mobile nav drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(340px,86vw); background:#fff; z-index:1200;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg); overflow-y:auto; padding:26px;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-overlay{ position:fixed; inset:0; background:rgba(7,27,48,.5); z-index:1100; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.mobile-overlay.is-open{ opacity:1; pointer-events:auto; }
.mobile-nav .m-close{ width:40px; height:40px; border-radius:10px; background:var(--color-light); display:grid; place-items:center; margin-bottom:26px; font-size:1.2rem; }
.mobile-nav details{ border-bottom:1px solid var(--color-gray-light); }
.mobile-nav summary{ list-style:none; padding:15px 4px; font-weight:700; color:var(--color-primary); display:flex; justify-content:space-between; align-items:center; }
.mobile-nav summary::-webkit-details-marker{ display:none; }
.mobile-nav a{ display:block; padding:12px 4px; font-weight:600; color:var(--color-dark-text); }
.mobile-nav .sub a{ padding-left:16px; font-weight:500; color:var(--color-gray); }
.mobile-nav .m-cta{ margin-top:20px; }