/* ============================================================
   OLINSA — Materiales Eléctricos e Industriales
   Rediseño calcado de ferrelectrica.cl en paleta verde/amarillo
   ============================================================ */

:root{
  --ancho: 1240px;   /* banda de contenido = 1200px (1240 - 2 x 20px de padding) */
  /* Verde ENCENDIDO propuesto por el cliente (#0BC420, H127 S89%).
     Se mantiene su tono; solo baja la luminosidad donde hay texto encima,
     porque el color puro sobre blanco da 2.35 de contraste y no se lee. */
  --verde-vivo: #0BC420;    /* el propuesto, tal cual: acentos y degradados */
  --verde: #088717;         /* base legible (4.68 con blanco) */
  --verde-panel: #0A9D1B;   /* paneles con titular grande */
  --verde-oscuro: #077814;  /* hover y bordes */
  --verde-noche: #04460C;   /* degradados oscuros */
  --verde-claro: #0BC420;
  --verde-brillo: #0DD824;
  --amarillo: #FBBB26;      /* amarillo EXACTO del logo */
  --amarillo-claro: #FFD20B;
  --fondo: #F6F8F9;
  --blanco: #ffffff;
  --gris-input: #F2F2F2;
  --texto: #212529;
  --gris-marca: #5D5D5D;
  --verde-link: #088717;
  --ph: #f1f1f1;
  --sombra-header: 0 2px 10px rgba(0,0,0,.14);
  --radius-card: 12px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Montserrat', system-ui, sans-serif;
  color:var(--texto);
  background:var(--blanco);
  font-size:16px;
  line-height:1.45;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; }

.container{ max-width:var(--ancho); margin-inline:auto; padding-inline:1.25rem; }

/* placeholder de imagen / icono (Capa 2 y 3 los reemplazan) */
.ph{ background:var(--ph); display:block; }
.ph-icon{ background:var(--ph); border-radius:50%; display:inline-block; flex-shrink:0; }
.img-contain{ object-fit:contain; }
.img-multiply{ mix-blend-mode:multiply; object-fit:contain; }
.foto-cover{ background-size:cover; background-position:center; background-repeat:no-repeat; }

/* ============ 1. TOPBAR ============ */
.topbar{ background:var(--verde); color:#fff; }
.topbar__inner{
  display:flex; align-items:center; justify-content:center; gap:14px;
  min-height:44px; padding-block:6px;
  font-size:13.5px; letter-spacing:.08em; font-weight:500;
}
.topbar__inner strong{ font-weight:700; }
.topbar__inner .amarillo{ color:var(--amarillo-claro); font-weight:700; }
.topbar__btn{
  background:var(--amarillo); color:var(--verde-oscuro);
  font-weight:800; font-size:12.5px; letter-spacing:.06em;
  padding:5px 14px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.topbar__btn:hover{ filter:brightness(1.05); }

/* ============ 2. HEADER: logo grande fuera + píldora ============ */
.header-zone{ background:var(--fondo); padding:16px 0 20px; }
.header-fila{ display:flex; align-items:center; justify-content:center; gap:26px; }
/* el logo vive FUERA de la píldora y manda por tamaño */
.marca-grande{ flex-shrink:0; display:block; }
.marca-grande img{ width:auto; height:138px; object-fit:contain; }
/* módulo AMARILLO (probando, a pedido del cliente) */
.header-pill{
  background:var(--amarillo); border:1px solid #e9b421;
  border-radius:38px; box-shadow:var(--sombra-header);
  display:flex; align-items:center; gap:20px;
  padding:16px 24px; flex:1; min-width:0;
}
.btn-menu{
  background:var(--verde); color:#fff;
  border-radius:30px; padding:15px 30px;
  font-size:17px; font-weight:700;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.btn-menu:hover{ background:var(--verde-oscuro); }
.btn-menu__bars{ display:inline-flex; flex-direction:column; gap:4px; }
.btn-menu__bars span{ width:18px; height:2px; background:#fff; border-radius:2px; }
.buscador{ flex:1; position:relative; }
.buscador input{
  width:100%; background:#fff; border:none; outline:none;
  border-radius:16px; padding:15px 48px 15px 20px; font-size:14.5px; color:var(--texto);
}
.buscador input::placeholder{ color:#8a8f94; }
.buscador__lupa{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
}
.header-icons{ display:flex; align-items:center; gap:10px; }
.hicon{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; position:relative; }
.hicon--user{ background:var(--verde); }
.hicon--cart{ background:#fff; }
.hicon__badge{
  position:absolute; top:-4px; right:-4px;
  background:#fff; color:#000; border:1px solid #ddd;
  font-size:11px; font-weight:700; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
}

/* rectángulo blanco de marca: en la píldora amarilla y repetido en el pie */
.marca-caja{
  flex-shrink:0; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center;
  background:#fff; border-radius:18px; padding:12px 22px;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.marca-caja__nombre{ font-size:27px; font-weight:800; color:var(--verde); line-height:1; letter-spacing:.02em; }
.marca-caja__tag{
  font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--verde-panel); margin-top:7px;
}
.marca-caja__tag2{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--verde-panel); margin-top:3px;
}
.marca-caja--footer{ align-self:flex-start; margin-bottom:22px; }

/* barra delgada reservada: despacho Express (se publica quitando el hidden) */
.barra-express{ background:var(--verde); color:#fff; }
.barra-express[hidden]{ display:none; }
.barra-express__inner{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:9px 0; font-size:14px; font-weight:600;
}
.barra-express__tag{
  background:var(--amarillo); color:#173B12; font-size:11.5px; font-weight:800;
  letter-spacing:.12em; padding:3px 12px; border-radius:12px;
}

/* ============ MENÚ DRAWER + MEGA PANEL ============ */
.menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.menu-overlay.abierto{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:300px; max-width:85vw;
  background:#fff; z-index:100; overflow-y:auto;
  transform:translateX(-100%); transition:transform .28s;
  box-shadow:4px 0 24px rgba(0,0,0,.18);
}
.drawer.abierto{ transform:translateX(0); }
.drawer__cerrar{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; font-size:14px; font-weight:600; color:var(--texto);
  border-bottom:1px solid #eee;
}
.drawer__buscar{ position:relative; border-bottom:1px solid #eee; }
.drawer__buscar input{
  width:100%; border:none; outline:none; padding:13px 40px 13px 14px; font-size:13.5px;
}
.drawer__cat{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; font-size:13.5px; font-weight:700; letter-spacing:.02em;
  color:var(--texto); text-transform:uppercase; text-align:left;
  border-bottom:1px solid #f3f3f3;
}
.drawer__cat:hover, .drawer__cat.activo{ background:var(--amarillo); color:var(--verde-oscuro); }
.drawer__cat .chev{ font-size:15px; color:inherit; }
.mega{
  position:fixed; top:0; left:300px; right:0;
  max-height:100vh; background:#fff; z-index:99; overflow-y:auto; display:none;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.mega.abierto{ display:block; }
.mega__head{
  background:var(--verde); color:#fff; font-weight:700; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase; padding:12px 24px;
  display:flex; align-items:center; gap:14px;
}
.mega__volver{
  display:none; background:rgba(255,255,255,.16); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  padding:7px 14px; border-radius:16px; flex-shrink:0;
}
.mega__cols{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0 38px; padding:26px 30px 34px; align-items:start;
}
.mega__col{ display:flex; flex-direction:column; min-width:0; }
.mega__grupo{ margin-bottom:24px; }
.mega__grupo:last-child{ margin-bottom:0; }
/* alto reservado para 2 líneas: la divisoria y el 1er ítem quedan a la misma altura en todas las columnas */
.mega__grupo h4{
  color:var(--verde); font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; line-height:1.3;
  min-height:2.6em; display:flex; align-items:flex-end;
  padding-bottom:7px; margin-bottom:8px; border-bottom:1px solid #e4e4e4;
}
.mega__grupo a{
  display:block; font-size:12.5px; color:#4a4f54; padding:3px 0; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mega__grupo a:hover{ color:var(--verde); }
.mega__grupo h4 a{ white-space:normal; overflow:visible; text-overflow:clip; font-size:inherit; padding:0; }
.mega__todos{
  display:inline-block; margin-top:5px; font-size:11.5px; font-weight:700;
  color:var(--verde); letter-spacing:.02em;
}
.mega__todos:hover{ text-decoration:underline; }

/* ============ 3. HERO SLIDER ============ */
.hero{ position:relative; background:var(--blanco); }
.hero__viewport{ overflow:hidden; }
.hero__track{ display:flex; transition:transform .5s ease; }
.hero__slide{
  min-width:100%;
  display:grid; grid-template-columns:40% 30% 30%;
  min-height:400px; position:relative;
}
.hero__foto{ position:relative; }
.hero__panel{
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(146deg, var(--verde-panel) 0%, var(--verde) 52%, var(--verde) 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:40px 34px; overflow:hidden;
}
/* textura técnica: líneas diagonales finísimas (se insinúan, no se ven) */
.hero__panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(58deg,
    rgba(255,255,255,.055) 0 1px, rgba(255,255,255,0) 1px 13px);
  mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 92%);
  -webkit-mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 92%);
}
/* arco amarillo del lenguaje de marca: cruza el panel de lado a lado */
.hero__panel::after{
  content:""; position:absolute; pointer-events:none;
  left:-210px; bottom:-215px; width:470px; height:470px;
  border:1.5px solid transparent;
  border-top-color:rgba(251,187,38,.5);
  border-right-color:rgba(251,187,38,.5);
  border-radius:50%;
  transform:rotate(-8deg);
}
.hero__titulo{
  font-size:33px; font-weight:700; line-height:1.25; text-align:center;
  position:relative; z-index:2; text-shadow:0 1px 14px rgba(0,0,0,.16);
}
.hero__cuad{ z-index:3; }
.hero__cuad{ position:absolute; width:30px; height:30px; background:var(--amarillo); }
.hero__cuad--izq{ left:-15px; top:110px; }
.hero__cuad--der{ right:-15px; top:64px; }
.hero__prod{
  background:#fff; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 30px; text-align:center; overflow:hidden;
}
.hero__prod-nombre{
  font-size:36px; font-weight:800; color:var(--verde-oscuro);
  text-transform:uppercase; line-height:1.06; position:relative; z-index:2;
}
.hero__fantasma{
  position:absolute; top:58px; left:0; right:0; z-index:1;
  font-size:34px; font-weight:800; color:#eef0f2; text-transform:uppercase;
  line-height:1.08; user-select:none; white-space:nowrap; overflow:hidden;
}
.hero__prod-img{ width:210px; height:210px; margin:18px auto 12px; position:relative; z-index:2; }
.btn-hero{
  background:var(--verde); color:#fff; font-size:15px; font-weight:600;
  padding:10px 34px; border-radius:10px; position:relative; z-index:2;
}
.btn-hero:hover{ background:var(--verde-oscuro); }
.hero__marca{ margin-top:16px; height:26px; width:150px; position:relative; z-index:2; }
.hero__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:34px; height:56px; display:grid; place-items:center;
  color:#9aa0a6; font-size:30px; font-weight:300;
}
.hero__flecha--izq{ left:6px; }
.hero__flecha--der{ right:6px; }
.hero__dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:9px; z-index:5;
}
.hero__dot{ width:9px; height:9px; border-radius:50%; background:#c9cdd1; }
.hero__dot.activo{ background:#8a9096; }

/* Diapositiva de UNA sola imagen a ancho completo, para los banners que arma
   el cliente (Canva u otro editor). Medida a enviar: 2880x940 px.
   Uso: <div class="hero__slide hero__slide--imagen">
          <img class="hero__banner" src="assets/banners/mi-banner.jpg" alt="..."></div> */
.hero__slide--imagen{ display:block; padding:0; }
.hero__slide--imagen .hero__banner{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}

/* ============ 4. ACCESOS (5 iconos) ============ */
.accesos{ padding:34px 0 8px; }
.accesos__fila{ display:flex; justify-content:space-between; gap:10px; }
.acceso{ display:flex; flex-direction:column; align-items:center; gap:10px; width:180px; }
.acceso__icono{
  width:56px; height:56px; border-radius:50%;
  background:var(--verde); display:grid; place-items:center;
  border:3px solid #E6F2E7;
}
.acceso__label{ color:var(--verde); font-size:13.5px; font-weight:700; text-align:center; }
.acceso:hover .acceso__icono{ background:var(--verde-oscuro); }

/* ============ 5. HORARIO ============ */
.horario{ text-align:center; padding:22px 0 6px; font-size:17px; }
.horario b{ font-size:19px; font-weight:700; }

/* ============ 6. BANDA ENVÍOS ============ */
.banda-envios{ padding:22px 0 6px; }
.banda-envios__pill{
  background:var(--verde); color:#fff; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:15px 28px; font-size:22px; flex-wrap:wrap;
}
.banda-envios__pill .g1{ font-weight:800; letter-spacing:.04em; }
.banda-envios__pill .g1 .am{ color:var(--amarillo-claro); }
.banda-envios__pill .sep{ opacity:.55; font-weight:300; }
.banda-envios__pill .g2{ font-size:15.5px; font-weight:500; }
.banda-envios__pill .g2 b{ font-size:20px; font-weight:700; }
.banda-envios__nota{
  text-align:right; font-size:11.5px; color:var(--verde); font-weight:600;
  margin-top:6px;
}

/* ============ 7. BANNERS CATEGORÍA (2-up) ============ */
.cat-banners{ padding:26px 0; }
.cat-banners__grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 60px; }
.catban{
  position:relative; height:206px; border-radius:6px; overflow:hidden; display:flex;
  box-shadow:0 0 0 2.5px #a9b0b6, 0 4px 14px rgba(0,0,0,.10);
}
.catban__panel{
  background:var(--m-bg, var(--verde)); color:var(--m-tx, #fff); flex:0 0 63%;
  position:relative; padding:22px 26px;
  clip-path:polygon(0 0, 100% 0, 86% 100%, 0 100%);
  z-index:2;
}
.catban--claro .catban__panel{ box-shadow:inset 0 0 0 3px #a9b0b6; }
.catban__logo{
  height:44px; max-width:190px; object-fit:contain; object-position:left center;
  margin-bottom:12px;
}
.catban--claro .catban__logo{ background:transparent; }
.catban:not(.catban--claro) .catban__logo{
  background:#fff; border-radius:8px; padding:6px 12px; height:52px;
}
.catban__titulo{ display:block; font-size:22px; font-weight:800; line-height:1.22; max-width:86%;
  hyphens:none; overflow-wrap:normal; }
.catban__cuad{ position:absolute; left:26px; bottom:26px; width:20px; height:20px; background:var(--amarillo); }
.catban__ver{
  position:absolute; left:58px; bottom:20px;
  background:#fff; border:1.5px solid var(--amarillo); color:#6a6f74;
  font-size:11.5px; font-weight:700; letter-spacing:.05em;
  padding:5px 16px; border-radius:14px;
}
.catban__foto{ position:absolute; inset:0; z-index:1; }

/* ============ 8. TARJETAS CATEGORÍA (4-up franja diagonal) ============ */
.cat-cards{ padding:30px 0 10px; }
.cat-cards__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.catcard{ text-align:center; }
.catcard__visual{
  position:relative; display:block; width:100%; aspect-ratio:1/1;
  margin:0 auto; border-radius:20px; overflow:hidden; max-width:200px;
  background:#fff; border:2px solid var(--verde);
  box-shadow:0 6px 18px rgba(8,135,23,.28), 0 2px 6px rgba(0,0,0,.08);
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.catcard:hover .catcard__visual{
  transform:translateY(-3px); border-color:var(--verde-vivo);
  box-shadow:0 12px 26px rgba(8,135,23,.38), 0 3px 8px rgba(0,0,0,.10);
}
.catcard__franja{ display:none; }
.catcard__img{
  position:absolute; left:12%; top:12%; width:76%; height:76%;
  object-fit:contain; z-index:2;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.18));
}
.catcard__label{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px;
  min-height:2.5em;
  color:var(--verde); font-size:14px; font-weight:700; line-height:1.25; text-align:center;
}
.catcard__flecha{ flex-shrink:0; width:0; height:0; border-block:6px solid transparent; border-left:9px solid var(--amarillo); }

/* ============ 9. BANDA COTIZA ============ */
.banda-cotiza{ padding:34px 0; }
.banda-cotiza__pill{
  display:flex; border-radius:34px; overflow:visible; height:56px; position:relative;
}
.banda-cotiza__am{
  background:var(--amarillo); color:var(--verde);
  flex:0 0 39%; border-radius:34px 0 0 34px;
  display:flex; align-items:center; justify-content:center;
  font-size:25px; font-weight:800;
}
.banda-cotiza__ve{
  background:var(--verde); color:#fff; flex:1; border-radius:0 34px 34px 0;
  display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:22px; font-weight:600; padding-right:150px;
}
.banda-cotiza__chev{ display:flex; gap:3px; }
.banda-cotiza__chev span{
  width:0; height:0; border-block:12px solid transparent; border-left:15px solid var(--amarillo);
}
.banda-cotiza__icono{
  position:absolute; right:70px; top:-24px; width:84px; height:84px;
}

/* ============ 10. COLECCIONES ============ */
.coleccion{ padding:26px 0 8px; }
.colban{
  position:relative; height:238px; border-radius:4px; overflow:hidden;
  display:flex; align-items:center;
}
.colban__foto{ position:absolute; inset:0; z-index:1; }
.colban__panel{
  position:relative; z-index:2;
  background:var(--verde); color:#fff;
  padding:26px 60px 26px 30px; min-width:310px;
  display:flex; align-items:center; gap:16px;
}
.colban__marca-tag{ width:15px; height:46px; background:var(--amarillo); flex-shrink:0; }
.colban__titulo{ font-size:30px; font-weight:600; }
.colban__claim{
  position:relative; z-index:2; color:#fff; font-size:21px; font-weight:700;
  text-align:center; margin-inline:auto; line-height:1.35;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.colban__logo{
  position:absolute; right:26px; bottom:22px; z-index:2;
  background:#fff; padding:5px 12px; font-size:15px; font-weight:800; color:var(--gris-marca);
  letter-spacing:.04em;
}
.colban__curva{
  position:absolute; z-index:2; left:110px; right:34%; bottom:34px; height:64px;
  border-left:2px solid var(--amarillo); border-bottom:2px solid var(--amarillo);
  border-radius:0 0 0 56px;
  pointer-events:none; opacity:.9;
}

/* carrusel productos */
.carrusel{ position:relative; margin-top:20px; }
.carrusel__viewport{ overflow:hidden; }
.carrusel__track{ display:flex; transition:transform .45s ease; }
.prod-card{
  flex:0 0 20%; padding:0 12px; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start;
}
.prod-card--4{ flex-basis:25%; }
.prod-card__imgbox{
  width:100%; aspect-ratio:1/1; background:#fff; position:relative; margin-bottom:14px;
}
.prod-card__img{ width:100%; height:100%; object-fit:contain; }
.prod-card__badge{
  position:absolute; top:8px; right:8px; background:var(--amarillo);
  color:var(--verde); font-size:14px; font-weight:800; padding:5px 10px; border-radius:8px;
}
.prod-card__marca{
  color:var(--gris-marca); font-size:11.2px; font-weight:800;
  letter-spacing:.02em; margin-bottom:5px; text-transform:uppercase;
}
.prod-card__nombre{
  font-size:15px; font-weight:700; color:var(--texto); line-height:1.3;
  margin-bottom:4px; display:block;
}
.prod-card__nombre:hover{ color:var(--verde); }
.prod-card__cat{
  color:var(--verde-link); font-size:13px; font-weight:700; text-transform:uppercase;
  margin-bottom:12px; display:block;
}
.cat-grid .prod-card{ display:flex; flex-direction:column; }
.prod-card__precio{ font-size:17.5px; font-weight:700; margin-bottom:12px; }
.btn-prod{
  background:var(--verde); color:#f2f2f2; font-size:14px; font-weight:600;
  padding:10px 0; width:88%; text-align:center; border-radius:28px;
  margin-top:auto;
}
.btn-prod:hover{ background:var(--verde-oscuro); }
.carrusel__dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.carrusel__dot{ width:8px; height:8px; border-radius:50%; background:var(--verde); opacity:.85; }
.carrusel__dot.activo{ background:var(--amarillo); }
.coleccion__ir{ display:flex; justify-content:flex-end; margin-top:14px; }
.btn-amarillo{
  background:var(--amarillo); color:#fff; font-size:14px; font-weight:600;
  padding:11px 26px; border-radius:28px; display:inline-block;
}
.btn-amarillo:hover{ filter:brightness(1.04); }

/* ============ 11. CÓMO COTIZAR ============ */
.como{ padding:40px 0 26px; }
.como__banda{
  background:var(--verde);
  color:var(--amarillo-claro); text-align:center;
  font-size:27px; font-weight:700; padding:13px 0; position:relative; overflow:hidden;
}
.como__banda::before,.como__banda::after{
  content:""; position:absolute; top:0; bottom:0; width:150px; opacity:.25;
  background-image:repeating-linear-gradient(60deg, transparent 0 14px, #fff 14px 16px, transparent 16px 30px),
                   repeating-linear-gradient(-60deg, transparent 0 14px, #fff 14px 16px, transparent 16px 30px);
}
.como__banda::before{ left:0; }
.como__banda::after{ right:0; }
.como__pill{
  margin-top:-6px; max-width:940px; margin-inline:auto;
  background:linear-gradient(90deg, #F79A2E, var(--amarillo) 22% 78%, #F79A2E);
  border-radius:70px; padding:26px 60px 22px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.paso{ text-align:center; }
.paso__icono{
  width:62px; height:62px; border-radius:50%; background:var(--verde);
  margin:0 auto 10px; display:grid; place-items:center; border:3px solid rgba(255,255,255,.5);
}
.paso__titulo{ color:var(--verde-oscuro); font-size:15.5px; font-weight:800; margin-bottom:5px; }
.paso__texto{ color:#254; font-size:12px; font-weight:500; line-height:1.4; max-width:200px; margin-inline:auto; }

/* ============ 13. BLOBS CATEGORÍAS ============ */
.blobs{ padding:36px 0 20px; }
.blobs__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:78px; }
.blob{ position:relative; height:230px; }
.blob__rombo{
  position:absolute; left:50%; top:44%;
  width:70%; aspect-ratio:1/1; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--amarillo); border-radius:14px;
}
/* la banda horizontal del logo OLIN, cruzando la parte baja del rombo */
.blob__banda{
  position:absolute; left:50%; top:72%; transform:translate(-50%,-50%);
  width:78%; height:19%; background:var(--amarillo); border-radius:4px; z-index:1;
}
.blob__img{
  position:absolute; left:14%; top:10%; width:72%; height:64%;
  object-fit:contain; z-index:2;
}
.blob__nombre{
  position:absolute; z-index:3; left:0; right:0; bottom:-8px; text-align:center;
  color:var(--verde); font-size:14.5px; font-weight:800; text-transform:uppercase;
}

/* ============ 15. BANNER PROYECTOS (verde) ============ */
.proyectos-band{ margin:36px 0; padding:0; position:relative;
  background:var(--verde);
}
.proyectos-band__titulo{
  text-align:center; color:#fff; font-size:23px; font-weight:700; padding:14px 0 12px;
}
.proyectos-band__card{
  max-width:900px; margin:0 auto; transform:translateY(0);
  background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.14);
  padding:26px 40px 30px; position:relative; margin-bottom:36px;
  display:grid; grid-template-columns:230px 1fr 250px; gap:18px; align-items:center;
}
.proyectos-band__fotos{ height:190px; }
.proyectos-band__centro{ text-align:center; }
.proyectos-band__pre{ color:var(--verde); font-size:16.5px; font-weight:600; margin-bottom:8px; }
.proyectos-band__pre b{ font-weight:800; }
.proyectos-band__grande{
  color:var(--verde); font-size:47px; font-weight:800; line-height:1.02; margin-bottom:10px;
}
.proyectos-band__sub{ color:var(--verde-oscuro); font-size:15.5px; font-weight:600; margin-bottom:16px; }
.btn-proy{
  background:var(--verde); color:#fff; font-size:19px; font-weight:700;
  padding:12px 30px; border-radius:6px; display:inline-flex; align-items:center; gap:12px;
}
.proyectos-band__hash{ position:absolute; right:26px; bottom:12px; font-size:14px; font-weight:600; color:var(--verde); }
.proyectos-band__hash b{ color:var(--verde-oscuro); }
.proyectos-band__eco{ height:190px; }

/* ============ 16. BANNER PROYECTO EQUIPO ============ */
.equipo-band{ margin:30px 0; position:relative; min-height:186px; background:#fff; overflow:hidden;
  border-bottom:14px solid var(--verde); }
.equipo-band__inner{ display:grid; grid-template-columns:1fr 300px 1.15fr; min-height:172px; }
.equipo-band__izq{ display:flex; align-items:center; gap:18px; padding-left:8%; }
.equipo-band__marca{ width:16px; height:92px; background:var(--amarillo); flex-shrink:0; }
.equipo-band__t1{ font-size:29px; font-weight:700; color:var(--verde); line-height:1.15; }
.equipo-band__t1 .am{ color:var(--amarillo); font-weight:800; }
.equipo-band__t2{ font-size:13.5px; font-weight:600; color:var(--verde); margin-top:6px; }
.equipo-band__foto{ position:relative; }
.equipo-band__der{
  position:relative; background:linear-gradient(105deg, transparent 0 6%, var(--verde) 6%);
  display:flex; align-items:center; justify-content:center; padding:20px 26px 20px 60px;
}
.equipo-band__claim{ color:#fff; font-size:23px; font-weight:400; text-align:center; line-height:1.3; }
.equipo-band__claim b{ font-weight:800; display:block; }

/* ============ 17. NOVEDADES / BLOG ============ */
.novedades{ padding:34px 0 16px; }
.novedades .container{ position:relative; }
.novedades__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:64px; padding-inline:14px; }
.nov-card{ text-align:left; }
.nov-card__img{ width:165px; height:150px; margin-inline:auto; border-radius:8px; }
.nov-card__titulo{
  display:block; color:var(--verde-link); font-size:15.5px; font-weight:700; margin:16px 0 12px;
  line-height:1.35;
}
.nov-card__texto{ font-size:13.5px; color:#333; line-height:1.5; }
.nov-card__ver{ display:block; text-align:center; color:var(--verde-link); font-weight:700; font-size:14.5px; margin-top:14px; }
.novedades__flecha{ position:absolute; top:45%; font-size:22px; color:var(--amarillo); font-weight:700; }
.novedades__flecha--izq{ left:-6px; color:#c9cdd1; }
.novedades__flecha--der{ right:-6px; }

/* ============ 18. TE ESPERAMOS ============ */
.visita{ background:var(--amarillo); position:relative; overflow:hidden; margin-top:26px; padding-bottom:22px; }
.visita__wm{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  color:#eaa81c; font-weight:800; font-size:30px; letter-spacing:.06em;
  line-height:1.6; white-space:nowrap; text-transform:uppercase; opacity:.8;
}
.visita__inner{ position:relative; display:flex; align-items:center; justify-content:center; gap:0; padding:24px 0 4px; }
.visita__escudo{ position:absolute; left:3.5%; top:0; width:64px; height:76px; }
.visita__mapa{ position:absolute; left:14%; top:8px; width:260px; height:74px; }
.visita__cajas{ display:flex; }
.visita__caja-b{ background:#fff; color:var(--verde); font-size:21px; font-weight:800; letter-spacing:.14em; padding:12px 24px; }
.visita__caja-v{ background:var(--verde); color:#fff; font-size:21px; font-weight:800; letter-spacing:.14em; padding:12px 24px; }
.visita__dir{
  position:relative; margin:14px auto 0; text-align:center; width:max-content; max-width:92%;
  background:#fff; color:var(--verde-oscuro);
  font-size:22px; font-weight:800; letter-spacing:.01em;
  padding:10px 26px; border-radius:14px; box-shadow:0 3px 10px rgba(0,0,0,.12);
}

/* ============ 19. RESEÑAS ============ */
.resenas{ padding:40px 0; }
.resenas__panel{
  background:var(--verde); border-radius:14px; color:#fff;
  max-width:1090px; margin-inline:auto;
  padding:34px 44px 30px;
}
.resenas__head{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:24px; align-items:center; margin-bottom:26px; }
.resenas__titulo{ font-size:25px; font-weight:700; line-height:1.25; }
.resenas__sub{ font-size:12.5px; font-weight:400; opacity:.85; margin-top:6px; }
.resenas__score{ display:flex; align-items:center; gap:16px; }
.resenas__nota{ font-size:38px; font-weight:800; }
.resenas__stars{ color:var(--amarillo); font-size:19px; letter-spacing:2px; }
.resenas__n{ font-size:12.5px; opacity:.85; border-left:1px solid rgba(255,255,255,.4); padding-left:14px; }
.btn-resena{
  background:var(--amarillo); color:#1a1a1a; font-size:17px; font-weight:700;
  padding:16px 22px; border-radius:6px; text-align:center; line-height:1.3;
}
.resenas__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.resena{
  background:#fff; color:var(--texto); border-radius:10px; padding:20px 18px;
  display:flex; flex-direction:column; min-height:250px;
}
.resena__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.resena__stars{ color:var(--amarillo); font-size:17px; letter-spacing:1.5px; }
.resena__nota{ font-size:19px; font-weight:800; margin-right:6px; }
.resena__fecha{ font-size:12.5px; color:#666; }
.resena__texto{ font-size:13.5px; line-height:1.55; flex:1; }
.resena__mas{ color:var(--verde-link); font-weight:600; }
.resena__pie{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.resena__quien{ display:flex; align-items:center; gap:9px; }
.resena__avatar{
  width:32px; height:32px; border-radius:50%; background:#9aa0a6; color:#fff;
  font-size:12px; font-weight:600; display:grid; place-items:center;
}
.resena__nombre{ font-size:13px; color:#333; }
.resenas__pag{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px;
  font-size:14px;
}
.resenas__pag .num{ opacity:.8; }
.resenas__pag .num.activo{ font-weight:800; opacity:1; border-bottom:2px solid #fff; padding-inline:2px; }

/* ============ 20. MARCAS ============ */
.marcas{ background:#fff; padding:38px 0 44px; position:relative; }
.marcas__fila{ display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; }
.marca-logo{ height:44px; max-width:128px; object-fit:contain; filter:none; }
.marca-logo--destacada{ height:96px; }
/* Teletric es la marca principal: se muestra más grande que el resto */
.marca-logo--teletric{ height:72px; max-width:210px; }
.marcas__flecha{ position:absolute; top:50%; transform:translateY(-50%); color:var(--amarillo); font-size:24px; font-weight:800; }
.marcas__flecha--izq{ left:12%; color:#c9cdd1; }
.marcas__flecha--der{ right:12%; }

/* ============ 22. FOOTER ============ */
.footer{ background:var(--verde); color:#fff; padding:52px 0 40px; }
.footer a:hover{ text-decoration:underline; }
.footer__top{ display:grid; grid-template-columns:1.25fr 1fr 1fr 1.25fr; gap:38px; }
.footer__logo{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.footer__logo-simbolo{ width:auto; height:124px; object-fit:contain; }
.footer__logo-nombre{ font-size:36px; font-weight:800; color:#fff; letter-spacing:.02em; line-height:1; }
.footer__logo-nombre span{ color:var(--amarillo); margin-left:.3em; }
.footer__logo-tag{ font-size:12px; font-weight:700; letter-spacing:.22em; color:rgba(255,255,255,.9); margin-top:8px; }
.footer__redes{ display:flex; gap:12px; }
.footer__red{
  width:38px; height:38px; border-radius:50%; background:var(--amarillo);
  display:grid; place-items:center;
}
.footer__col h4{
  font-size:15.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:18px; text-decoration:underline; text-underline-offset:6px;
}
.footer__col li{ margin-bottom:11px; }
.footer__col a, .footer__col span{ font-size:13.5px; font-weight:600; }
.footer__tel{ display:flex; align-items:center; gap:8px; }
.footer__tel .mini{ width:14px; height:14px; flex-shrink:0; }
.footer__bottom{
  display:grid; grid-template-columns:1fr 2fr; gap:38px; margin-top:34px; align-items:end;
}
.footer__ubic h4{
  font-size:20px; font-weight:800; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:6px; margin-bottom:16px;
}
.footer__ubic p{ font-size:21px; font-weight:700; display:flex; gap:10px; align-items:center; margin-bottom:11px; line-height:1.4; }
.footer__ubic .mini{ width:22px; height:22px; }
.footer__pagos{ display:flex; align-items:center; justify-content:flex-end; gap:26px; flex-wrap:wrap; }
.footer__pago{ height:30px; width:96px; }
.footer__pago-item{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; line-height:1.25; }
.footer__firma{
  margin-top:30px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
  text-align:center; font-size:12.5px; opacity:.85;
}
.footer__firma a{ color:inherit; font-weight:inherit; }
.footer__firma a:hover{ text-decoration:underline; }

/* ============ PÁGINAS INTERIORES ============ */
.breadcrumb-zone{ background:var(--fondo); }
.breadcrumb{ padding:14px 1.25rem; font-size:14.5px; color:#444; max-width:var(--ancho); margin-inline:auto; }
.breadcrumb a{ color:#444; }
.breadcrumb a:hover{ color:var(--verde); }
.breadcrumb .sep{ margin-inline:8px; color:#999; }

/* categoría */
.cat-layout{ display:grid; grid-template-columns:265px 1fr; gap:34px; padding:30px 0 50px; }
.filtros__titulo{ font-size:23px; font-weight:600; margin-bottom:14px; }
.filtros__botones{ display:flex; gap:10px; margin-bottom:20px; }
.btn-limpiar{ background:var(--amarillo); color:#fff; font-weight:600; font-size:14px; padding:9px 18px; border-radius:20px; display:inline-flex; gap:7px; align-items:center; }
.btn-filtrar{ background:var(--verde); color:#fff; font-weight:600; font-size:14px; padding:9px 18px; border-radius:20px; display:inline-flex; gap:7px; align-items:center; }
.filtro-acc{ border:1px solid #ddd; border-radius:12px; margin-bottom:10px; overflow:hidden; background:#fff; }
.filtro-acc summary{
  list-style:none; cursor:pointer; padding:12px 16px; font-size:14.5px; font-weight:500;
  display:flex; justify-content:space-between; align-items:center;
}
.filtro-acc summary::after{ content:"⌄"; color:#666; font-size:15px; }
.filtro-acc[open] summary::after{ transform:rotate(180deg); }
.filtro-acc__body{ padding:2px 16px 12px; }
.filtro-acc__body a{ display:block; font-size:13px; color:#4a4f54; padding:5px 0; }
.filtro-acc__body a:hover, .filtro-acc__body a.activo{ color:var(--verde); font-weight:600; }
.cat-grid__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.cat-grid__titulo{ color:#8a8f94; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.cat-grid__mostrando{ font-size:14px; color:#444; margin-top:4px; }
.cat-grid__orden select{
  border:1px solid #ccc; border-radius:8px; padding:10px 14px; font-size:14px; color:#333; background:#fff;
}
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 10px; margin-top:22px; }
.cat-grid .prod-card{ flex-basis:auto; padding:0; }
.paginacion{ display:flex; justify-content:center; gap:8px; margin:34px 0 10px; }
.paginacion button{
  min-width:38px; height:38px; border-radius:8px; border:1px solid #ddd; background:#fff;
  font-size:14px; font-weight:600; color:#333;
}
.paginacion button.activo{ background:var(--verde); color:#fff; border-color:var(--verde); }

/* producto */
.prod-layout{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; padding:36px 0 30px; }
.galeria__principal{ width:100%; aspect-ratio:1/1; max-height:520px; background:#fff; }
.galeria__principal img{ width:100%; height:100%; object-fit:contain; }
.galeria__thumbs{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; }
.galeria__thumb{ width:96px; height:96px; background:#fff; border:1px solid #eee; padding:6px; cursor:pointer; }
.galeria__thumb img{ width:100%; height:100%; object-fit:contain; }
.galeria__thumb.activo{ border-color:var(--verde); }
.pd__titulo{ font-size:27px; font-weight:700; text-transform:uppercase; line-height:1.25; }
.pd__cat{ color:#5d6166; font-size:14.5px; margin-top:6px; text-transform:uppercase; }
.pd__sku{ color:var(--verde); font-size:17px; font-weight:800; margin-top:10px; }
.pd__marca{ margin-top:22px; height:26px; width:150px; }
.pd__badge{
  display:inline-block; background:var(--amarillo); color:#fff; font-size:14.5px; font-weight:700;
  padding:9px 18px; border-radius:20px; margin-top:26px;
}
.pd__dispo{
  display:inline-block; background:var(--verde); color:#fff; font-size:12px; font-weight:700;
  padding:3px 8px; border-radius:3px; margin-top:14px;
}
.pd__cotiza{ font-size:25px; font-weight:800; margin-top:16px; }
.pd__cant-label{ color:var(--amarillo); font-size:14px; font-weight:700; letter-spacing:.04em; margin-top:18px; text-transform:uppercase; }
.pd__cant{ display:flex; align-items:center; margin-top:8px; width:236px; }
.pd__cant button{
  width:42px; height:40px; background:var(--amarillo); color:#fff;
  font-size:20px; font-weight:800; line-height:1; flex-shrink:0;
}
.pd__cant button:first-child{ border-radius:20px 0 0 20px; }
.pd__cant button:last-child{ border-radius:0 20px 20px 0; }
.pd__cant input{
  flex:1; height:40px; border:none; background:transparent;
  text-align:center; font-size:16px; color:var(--texto); outline:none;
}
.pd__btn{
  display:block; width:300px; text-align:center; background:var(--verde); color:#fff;
  font-size:15px; font-weight:600; padding:12px 0; border-radius:28px; margin-top:18px;
}
.pd__btn:hover{ background:var(--verde-oscuro); }
.pd__banda{
  margin-top:26px; display:flex; align-items:center; height:52px; border-radius:4px; overflow:hidden;
}
.pd__banda-ve{ background:var(--verde); color:#fff; font-size:19px; font-weight:700; padding:0 22px; height:100%; display:flex; align-items:center; gap:14px; flex:1; }
.pd__banda-aqui{ background:#fff; color:var(--verde); font-size:15px; font-weight:800; padding:6px 16px; border-radius:6px; }
.pd__banda-am{ background:var(--amarillo); height:100%; display:flex; align-items:center; gap:14px; padding:0 20px; }
.pd__desc{ padding:10px 0 46px; }
.pd__desc h3{ font-size:15.5px; font-weight:800; margin:18px 0 8px; text-transform:uppercase; }
.pd__desc p, .pd__desc li{ font-size:14.5px; line-height:1.6; }
.pd__desc .nombre{ font-size:16px; font-weight:700; margin-bottom:4px; }

/* nosotros / contacto */
.page-hero{ background:var(--verde); color:#fff; padding:34px 0; }
.page-hero h1{ font-size:31px; font-weight:800; }
.page-body{ padding:36px 0 54px; }
.page-body h2{ color:var(--verde); font-size:22px; font-weight:800; margin:22px 0 10px; }
.page-body p{ font-size:15px; line-height:1.65; margin-bottom:12px; max-width:900px; }
.contacto-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:44px; }
.contacto-datos p{ display:flex; align-items:center; gap:10px; font-size:15px; margin-bottom:14px; }
.contacto-datos .mini{ width:18px; height:18px; flex-shrink:0; }
.form label{ display:block; font-size:13.5px; font-weight:600; margin:14px 0 5px; }
.form input, .form textarea{
  width:100%; border:1px solid #ddd; border-radius:8px; padding:11px 14px; font-size:14px; outline:none;
}
.form textarea{ min-height:120px; resize:vertical; }
.form input:focus, .form textarea:focus{ border-color:var(--verde); }
.btn-verde{
  background:var(--verde); color:#fff; font-size:15px; font-weight:600;
  padding:12px 34px; border-radius:28px; margin-top:18px; display:inline-block;
}
.contacto-mapa{ width:100%; height:300px; border-radius:12px; margin-top:34px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .hero__slide{ grid-template-columns:1fr 1fr; min-height:340px; }
  .hero__foto{ display:none; }
  .cat-cards__grid, .blobs__grid{ grid-template-columns:repeat(2,1fr); gap:40px; }
  .como__pill{ grid-template-columns:repeat(2,1fr); border-radius:0 0 30px 30px; }
  .prod-card{ flex-basis:33.34%; }
  .prod-card--4{ flex-basis:50%; }
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .resenas__head{ grid-template-columns:1fr; text-align:center; }
  .resenas__score{ justify-content:center; }
  .proyectos-band__card{ grid-template-columns:1fr; }
  .proyectos-band__fotos,.proyectos-band__eco{ display:none; }
  .equipo-band__inner{ grid-template-columns:1fr; }
  .equipo-band__foto{ display:none; }
  .equipo-band__der{ background:var(--verde); }
  /* el mega cubre la pantalla POR ENCIMA del drawer y se vuelve con "‹ Volver" */
  .mega{ left:0; z-index:101; box-shadow:none; }
  .mega__volver{ display:inline-block; }
  .mega__head{ position:sticky; top:0; z-index:2; }
  .mega__cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 26px; padding:20px 22px 30px; }
}
@media (max-width: 760px){
  .topbar__inner{ font-size:11px; flex-wrap:wrap; gap:8px; }
  .hero__titulo{ font-size:23px; }
  .hero__prod-nombre{ font-size:26px; }
  .hero__fantasma{ font-size:25px; top:44px; }
  .header-pill{ flex-wrap:wrap; gap:10px; padding:12px 16px; }
  .buscador{ order:5; flex-basis:100%; }
  .logo{ min-width:0; }
  .hero__slide{ grid-template-columns:1fr; }
  /* accesos: 3 por fila (los 2 últimos centrados), no una columna vertical */
  .accesos__fila{ flex-wrap:wrap; justify-content:center; gap:22px 10px; }
  .acceso{ width:calc(33.333% - 8px); gap:8px; }
  .acceso__icono{ width:50px; height:50px; }
  .acceso__label{ font-size:11.5px; line-height:1.3; }
  .mega__cols{ grid-template-columns:1fr; }
  .banda-envios__pill{ font-size:16px; }
  .banda-envios__pill .g2{ font-size:13px; }
  .cat-banners__grid{ grid-template-columns:1fr; gap:24px; }
  .catban{ height:auto; min-height:170px; }
  .catban__panel{ padding:20px 18px 58px; }
  .catban__titulo{ font-size:19px; }
  .catban__cuad{ bottom:26px; }
  .catban__ver{ bottom:18px; }
  .banda-cotiza__pill{ flex-direction:column; height:auto; border-radius:20px; }
  .banda-cotiza__am,.banda-cotiza__ve{ border-radius:0; padding:12px; font-size:18px; }
  .banda-cotiza__icono{ display:none; }
  .novedades__grid{ grid-template-columns:1fr; gap:34px; }
  .resenas__grid{ grid-template-columns:1fr; }
  .prod-card{ flex-basis:50%; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-layout{ grid-template-columns:1fr; }
  .prod-layout{ grid-template-columns:1fr; }
  .footer__top,.footer__bottom{ grid-template-columns:1fr; }
  .footer__pagos{ justify-content:flex-start; }
  .contacto-grid{ grid-template-columns:1fr; }
  .visita__mapa,.visita__escudo{ display:none; }
  .como__pill{ grid-template-columns:1fr; padding:22px 26px; }
  .colban__panel{ min-width:0; margin-left:16px; padding:18px 24px; }
  .colban__titulo{ font-size:22px; }
  .colban__claim{ display:none; }
}

/* ============ CARRO COTIZADOR ============ */
.hicon__badge--lleno{ background:var(--amarillo); color:var(--verde-oscuro); border-color:var(--amarillo); }

.coti-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px);
  background:var(--verde); color:#fff; border-radius:30px;
  padding:13px 22px; display:flex; align-items:center; gap:12px;
  font-size:14px; font-weight:600; box-shadow:0 6px 26px rgba(0,0,0,.22);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:200;
  max-width:calc(100vw - 32px);
}
.coti-toast.visible{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.coti-toast--aviso{ background:var(--amarillo); color:var(--verde-oscuro); }
.coti-toast__check{
  width:22px; height:22px; border-radius:50%; background:var(--amarillo); color:var(--verde-oscuro);
  display:grid; place-items:center; font-size:13px; font-weight:800; flex-shrink:0;
}
.coti-toast--aviso .coti-toast__check{ background:var(--verde-oscuro); color:var(--amarillo); }
.coti-toast__ver{
  background:var(--amarillo); color:var(--verde-oscuro); font-weight:700; font-size:13px;
  padding:6px 14px; border-radius:20px; white-space:nowrap;
}
.coti-toast--aviso .coti-toast__ver{ background:var(--verde); color:#fff; }

.coti-page{ padding:32px 1.25rem 60px; }
.coti-titulo{ font-size:31px; font-weight:800; color:var(--verde); }
.coti-bajada{ font-size:15px; color:#444; margin:8px 0 26px; max-width:760px; line-height:1.6; }

.coti-vacio{ text-align:center; padding:56px 20px 70px; }
.coti-vacio__t{ font-size:21px; font-weight:700; margin-bottom:8px; }
.coti-vacio__p{ font-size:15px; color:#555; margin-bottom:22px; }

.coti-layout{ display:grid; grid-template-columns:1fr 400px; gap:40px; align-items:start; }
.coti-tabla__head{
  display:grid; grid-template-columns:1fr 190px 44px; gap:14px; align-items:center;
  padding:0 4px 10px; border-bottom:2px solid var(--verde);
  font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--verde);
}
.coti-tabla__head .col-cant{ text-align:center; }
.coti-fila{
  display:grid; grid-template-columns:1fr 190px 44px; gap:14px; align-items:center;
  padding:16px 4px; border-bottom:1px solid #eee;
}
.coti-fila .col-prod{ display:flex; align-items:center; gap:16px; min-width:0; }
.coti-fila__img{
  width:74px; height:74px; flex-shrink:0; background:#fff; border:1px solid #eee; border-radius:8px;
  display:grid; place-items:center; overflow:hidden;
}
.coti-fila__img img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.coti-fila__txt{ min-width:0; }
.coti-fila__nombre{ display:block; font-size:14.5px; font-weight:700; line-height:1.35; }
.coti-fila__nombre:hover{ color:var(--verde); }
.coti-fila__sku{ display:block; font-size:12.5px; color:var(--gris-marca); font-weight:600; margin-top:4px; }
.coti-fila__cat{ display:block; font-size:12px; color:var(--verde-link); font-weight:700; text-transform:uppercase; margin-top:2px; }
.coti-cant{ display:flex; align-items:center; justify-content:center; }
.coti-cant button{
  width:36px; height:36px; background:var(--amarillo); color:#fff;
  font-size:18px; font-weight:800; line-height:1; flex-shrink:0;
}
.coti-cant button:first-child{ border-radius:18px 0 0 18px; }
.coti-cant button:last-child{ border-radius:0 18px 18px 0; }
.coti-cant input{
  width:56px; height:36px; border:none; background:#f7f7f7;
  text-align:center; font-size:15px; font-weight:600; color:var(--texto); outline:none;
}
.coti-quitar{
  width:32px; height:32px; border-radius:50%; background:#f2f2f2; color:#777;
  font-size:14px; font-weight:700; display:grid; place-items:center;
}
.coti-quitar:hover{ background:#e6413a; color:#fff; }
.coti-tabla__pie{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 4px 0; flex-wrap:wrap;
}
.coti-vaciar{ font-size:13px; font-weight:600; color:#777; text-decoration:underline; }
.coti-vaciar:hover{ color:#e6413a; }
.coti-resumen{ font-size:14.5px; color:#333; }
.coti-seguir{ display:inline-block; margin-top:22px; font-size:14px; font-weight:700; color:var(--verde); }
.coti-seguir:hover{ text-decoration:underline; }

.coti-form-zona{
  background:var(--fondo); border:1px solid #e8eaec; border-radius:14px; padding:26px 24px 28px;
  position:sticky; top:20px;
}
.coti-form__titulo{ font-size:19px; font-weight:800; color:var(--verde); margin-bottom:4px; }
.coti-form label:first-of-type{ margin-top:10px; }
.coti-form textarea{ min-height:96px; }
.coti-enviar{ width:100%; text-align:center; border:none; cursor:pointer; }
.coti-wsp{ display:block; text-align:center; margin-top:12px; font-size:13.5px; font-weight:600; color:var(--verde); }
.coti-wsp:hover{ text-decoration:underline; }
.coti-legal{ font-size:11.5px; color:#777; line-height:1.5; margin-top:16px; text-align:center; }
.coti-error{
  background:#fdecea; border:1px solid #f5c6c2; color:#a4302a;
  font-size:13px; line-height:1.5; padding:11px 14px; border-radius:8px; margin-top:16px;
}
.coti-error a{ color:#a4302a; font-weight:700; text-decoration:underline; }

.coti-ok{ text-align:center; padding:50px 20px 70px; max-width:640px; margin-inline:auto; }
.coti-ok__icono{
  width:66px; height:66px; border-radius:50%; background:var(--verde); color:#fff;
  font-size:32px; font-weight:800; display:grid; place-items:center; margin:0 auto 20px;
}
.coti-ok h2{ font-size:26px; font-weight:800; color:var(--verde); margin-bottom:12px; }
.coti-ok p{ font-size:15.5px; line-height:1.65; margin-bottom:12px; }
.coti-ok span{ font-weight:700; }
.coti-ok__nota{ font-size:14px; color:#555; margin-bottom:24px; }
.coti-ok__nota a{ color:var(--verde); font-weight:700; }

@media (max-width: 1080px){
  .coti-layout{ grid-template-columns:1fr; gap:30px; }
  .coti-form-zona{ position:static; }
}
@media (max-width: 760px){
  .coti-tabla__head{ display:none; }
  .coti-fila{ grid-template-columns:1fr 44px; gap:10px 12px; }
  .coti-fila .col-cant{ grid-column:1; justify-self:start; }
  .coti-fila .col-quitar{ grid-row:1; grid-column:2; align-self:start; }
  .coti-titulo{ font-size:25px; }
  .coti-toast{ flex-wrap:wrap; justify-content:center; text-align:center; bottom:14px; }
}

/* estados "agregado" de los botones de cotización */
.btn-prod--ok, .pd__btn--ok{ background:var(--amarillo) !important; color:var(--verde-oscuro) !important; }
.btn-prod{ border:none; cursor:pointer; }
.pd__btn{ border:none; cursor:pointer; }

/* producto sin foto: marca de agua, nunca un bloque gris vacío */
.sin-foto{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:#fafbfb; border:1px dashed #e2e6e8; border-radius:8px; text-align:center;
}
.sin-foto img{ width:46%; max-width:110px; opacity:.16; }
.sin-foto span{ font-size:11.5px; font-weight:600; color:#9aa0a6; line-height:1.4; }
.galeria__principal .sin-foto{ position:relative; height:100%; }
.galeria__principal .sin-foto img{ max-width:190px; }

/* confirmación del formulario de contacto */
.contacto-ok{
  background:#EEF8EF; border:1px solid #BFE3C3; border-radius:12px; padding:24px 22px;
}
.contacto-ok__t{ color:var(--verde); font-size:19px; font-weight:800; margin-bottom:8px; }

/* ============ OFERTAS DE LA SEMANA ============ */
.ofertas{ padding:44px 0 20px; }
.ofertas__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.ofertas__eyebrow{
  display:block; color:#D92B1E; font-size:12.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px;
}
.ofertas__titulo{ font-size:33px; font-weight:800; color:#C22318; line-height:1.15; }
.ofertas__todas{ font-size:14px; font-weight:700; color:#C22318; white-space:nowrap; }
.ofertas__todas:hover{ text-decoration:underline; }
.ofertas__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.oferta{
  position:relative; display:flex; align-items:stretch; gap:0; overflow:hidden;
  border-radius:16px; background:linear-gradient(135deg, #D92B1E 0%, #A81C12 100%);
  color:#fff; min-height:158px; box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition:transform .18s, box-shadow .18s;
}
.oferta:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.16); }
.oferta--b{ background:linear-gradient(135deg, #C22318 0%, #7E140D 100%); }
.oferta--c{ background:linear-gradient(135deg, #E8452F 0%, #C22318 100%); }
.oferta__desc{
  flex-shrink:0; width:150px; display:flex; align-items:center; justify-content:center;
  background:var(--amarillo); color:#A81C12;
  font-size:56px; font-weight:800; letter-spacing:-.03em; line-height:1;
}
.oferta__desc small{ font-size:26px; font-weight:800; margin-left:2px; }
.oferta__cuerpo{ display:flex; flex-direction:column; justify-content:center; padding:20px 20px 20px 18px; min-width:0; }
.oferta__marca{ font-size:11.5px; font-weight:800; letter-spacing:.12em; opacity:.9; text-transform:uppercase; }
.oferta__nombre{ font-size:19px; font-weight:800; line-height:1.22; margin:5px 0 4px; }
.oferta__texto{ font-size:13px; opacity:.92; line-height:1.4; }
.oferta__cta{ font-size:13.5px; font-weight:800; color:var(--amarillo); margin-top:12px; }
.ofertas__nota{ font-size:12px; color:#777; text-align:right; margin-top:14px; }

/* ============ NEWSLETTER ============ */
.news{ padding:34px 0 44px; }
.news__caja{
  background:var(--verde);
  border-radius:18px; padding:32px 38px;
  display:grid; grid-template-columns:1fr auto; gap:22px 34px; align-items:center;
}
.news__titulo{ color:#fff; font-size:26px; font-weight:800; line-height:1.2; }
.news__sub{ color:rgba(255,255,255,.9); font-size:14.5px; margin-top:6px; max-width:520px; }
.news__form{ display:flex; gap:10px; flex-wrap:wrap; }
.news__form input{
  width:290px; max-width:100%; border:none; outline:none; border-radius:26px;
  padding:14px 20px; font-size:14.5px; color:var(--texto);
}
.news__btn{
  background:var(--amarillo); color:var(--verde-oscuro);
  font-size:14.5px; font-weight:800; padding:14px 28px; border-radius:26px; white-space:nowrap;
}
.news__btn:hover{ filter:brightness(1.05); }
.news__btn:disabled{ opacity:.7; cursor:default; }
.news__aviso{
  grid-column:1/-1; background:rgba(255,255,255,.16); color:#fff;
  font-size:13.5px; font-weight:600; padding:11px 16px; border-radius:10px;
}
.news__aviso--ok{ background:var(--amarillo); color:var(--verde-oscuro); }

@media (max-width: 1080px){
  .ofertas__grid{ grid-template-columns:1fr; }
  .news__caja{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .ofertas__head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .ofertas__titulo{ font-size:24px; }
  .oferta__desc{ width:104px; font-size:40px; }
  .oferta__nombre{ font-size:17px; }
  .news__caja{ padding:26px 22px; }
  .news__titulo{ font-size:21px; }
  .news__form input{ width:100%; }
  .news__btn{ width:100%; }
}

/* fila de marcas ampliable: entran tantas como el cliente envíe, en 2 filas si hace falta */
.marcas__fila{ row-gap:26px; }
.marca-logo{ flex:0 0 auto; }

/* P1: canales de contacto en la ficha de producto */
.pd__canales{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 10px; }
.pd__canal{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1.5px solid var(--verde); color:var(--verde);
  font-size:14px; font-weight:700; padding:10px 18px; border-radius:26px;
}
.pd__canal:hover{ background:var(--verde); color:#fff; }
.pd__canal--wsp{ background:var(--verde); color:#fff; }
.pd__canal--wsp:hover{ background:var(--verde-oscuro); }
.pd__despacho{ font-size:14px; color:#555; }

/* P5: logo OLIN junto a la marca en los banners de colección */
.colban__marcas{
  position:absolute; right:26px; bottom:22px; z-index:2;
  display:flex; align-items:center; gap:10px;
}
.colban__marcas .colban__logo{ position:static; }
.colban__marca-logo{
  height:34px; width:auto; max-width:150px; object-fit:contain;
  background:#fff; border-radius:8px; padding:5px 10px;
}
.colban__olin{
  width:52px; height:52px; object-fit:contain;
  background:#fff; border-radius:10px; padding:4px;
}

/* Campo trampa anti-robots: invisible para las personas. */
.trampa{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }