/* Clorimax · estilos del sitio estático */
:root{
  color-scheme: light;
  --azul:#0B4FB3; --azul-osc:#083A85; --azul-2:#1466D9; --cielo:#1FA3E6; --cielo-claro:#E8F4FD; --turquesa:#17B8C4;
  --amarillo:#FFD400;
  --texto:#2B2E33; --gris:#646870; --gris-2:#9BA0A8; --fondo:#F4F6F9; --blanco:#FFF; --linea:#E4E7EC; --linea-2:#D5DAE2;
  --verde:#1E9E5A; --verde-wa:#25D366; --rojo:#E8412C; --naranja:#FF8A1E; --estrella:#F5B301; --marino:#0A2A55;
  --sombra:0 1px 3px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.06); --sombra-2:0 12px 32px rgba(16,24,40,.14); --r:12px; --r2:16px;
  --titulo:Poppins,system-ui,sans-serif; --cuerpo:"Instrument Sans",system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--fondo); color:var(--texto); font-family:var(--cuerpo); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; line-height:1.2; font-weight:700; font-family:var(--titulo)}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:inherit}
img{max-width:100%}
button{font:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--fondo); padding:2px 6px; border-radius:6px}
.wrap{width:100%; max-width:1600px; margin-inline:auto; padding-inline:clamp(16px,2.5vw,40px)}
:focus-visible{outline:3px solid var(--cielo); outline-offset:2px}
.oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* ── Botones ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-family:var(--titulo); font-size:.92rem; padding:11px 20px; border-radius:999px; border:2px solid transparent; cursor:pointer; text-decoration:none; transition:filter .12s, background .12s, transform .12s; line-height:1.2}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn-azul{background:var(--azul); color:#fff}
.btn-azul:hover{background:var(--azul-osc)}
.btn-amarillo{background:var(--amarillo); color:#1b1b1b}
.btn-blanco{background:#fff; color:var(--azul); border-color:#fff}
.btn-borde{background:#fff; color:var(--azul); border-color:var(--azul)}
.btn-borde:hover{background:var(--cielo-claro)}
.btn-borde-blanco{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn-borde-blanco:hover{background:rgba(255,255,255,.12)}
.btn-gris{background:#fff; color:var(--gris); border-color:var(--linea-2)}
.btn-wa{background:var(--verde-wa); color:#fff}
.btn-full{width:100%}
.btn-chico{padding:7px 14px; font-size:.82rem}
.btn-grande{padding:14px 28px; font-size:1.02rem}
.btn:disabled{opacity:.55; cursor:not-allowed; filter:none}
.btn svg{width:18px; height:18px; flex:0 0 auto}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--cielo-claro); color:var(--azul); letter-spacing:.02em}
.chip.mercadolibre{background:#FFE600; color:#2D3277}
.chip.google{background:#fff; color:#3c4043; border:1px solid var(--linea-2)}
.chip.tienda, .chip.whatsapp{background:#E7F5EC; color:#1B6B3D}

/* ── Barra superior y cabecera ── */
.mini{background:var(--marino); color:#fff; font-size:.76rem; font-weight:600; letter-spacing:.06em; text-align:center; padding:6px 12px; font-family:var(--titulo); text-transform:uppercase}
.mini b{color:var(--amarillo)}
.top{background:#fff; box-shadow:0 1px 0 var(--linea); position:relative; z-index:40}
.top .wrap{display:flex; align-items:center; gap:24px; min-height:92px; padding-block:12px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.logo svg{width:50px; height:50px}
.logo b{font-family:var(--titulo); font-size:1.8rem; font-weight:800; color:var(--azul); letter-spacing:-.04em; line-height:1; display:block}
.logo small{display:block; font-size:.66rem; font-weight:600; color:var(--turquesa); letter-spacing:.16em; text-transform:uppercase; margin-top:3px}
.busca{flex:1; display:flex; max-width:700px; margin-inline:auto; border:1.5px solid var(--linea-2); border-radius:999px; overflow:hidden; background:var(--fondo)}
.busca:focus-within{border-color:var(--azul); background:#fff}
.busca input{flex:1; border:0; padding:11px 20px; font:inherit; font-size:.95rem; min-width:0; background:transparent}
.busca input:focus{outline:none}
.busca button{border:0; background:var(--azul); color:#fff; width:52px; cursor:pointer; display:grid; place-items:center}
.busca button svg{width:18px; height:18px}
.top-acc{display:flex; align-items:center; gap:18px; flex:0 0 auto}
.top-acc a{text-decoration:none; font-size:.86rem; font-weight:600; color:var(--texto); display:inline-flex; align-items:center; gap:8px}
.top-acc a svg{width:22px; height:22px; color:var(--azul)}
.top-acc a.wa svg{color:var(--verde-wa)}
.carro-btn{position:relative}
.carro-btn .n{min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--rojo); color:#fff; font-size:.72rem; font-weight:700; display:grid; place-items:center; position:absolute; left:14px; top:-8px}
@media (max-width:980px){
  .top .wrap{flex-wrap:wrap; gap:12px; min-height:auto}
  .busca{order:3; flex-basis:100%; max-width:none}
  .top-acc{margin-left:auto}
  .top-acc a span{display:none}
  .logo b{font-size:1.45rem}
}

/* ── Navegación ── */
.nav{background:var(--azul); position:relative; z-index:35}
.nav .wrap{display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a, .nav button{font-family:var(--titulo); font-size:.86rem; font-weight:500; color:#fff; text-decoration:none; padding:14px 16px; white-space:nowrap; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.nav a:hover, .nav button:hover{background:rgba(255,255,255,.12)}
.nav button#btn-cats{background:var(--azul-osc); font-weight:600}
.nav .oferta{color:var(--amarillo); font-weight:600}
.nav svg{width:18px; height:18px}
.menu-cat{position:absolute; left:0; right:0; top:100%; background:#fff; box-shadow:var(--sombra-2); border-bottom:4px solid var(--cielo)}
.menu-cat .wrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px 20px; padding-block:20px; overflow:visible}
.menu-cat a{display:flex; align-items:center; gap:12px; color:var(--texto); font-size:.95rem; font-weight:500; padding:10px 12px; border-radius:10px; font-family:var(--cuerpo)}
.menu-cat a:hover{background:var(--cielo-claro); color:var(--azul)}
.menu-cat a .ico{width:38px; height:38px; border-radius:10px; background:var(--cielo-claro); color:var(--azul); display:grid; place-items:center; flex:0 0 auto}
.menu-cat a .ico svg{width:20px; height:20px}
.menu-cat a small{display:block; color:var(--gris); font-size:.78rem}

.migas{font-size:.82rem; color:var(--gris); padding-block:16px 8px; display:flex; gap:6px; flex-wrap:wrap}
.migas a{color:var(--azul); text-decoration:none}

/* ── Hero carrusel ── */
.hero{position:relative; margin-top:18px; border-radius:var(--r2); overflow:hidden; background:var(--azul); color:#fff; box-shadow:var(--sombra)}
.hero .slide{display:none; min-height:420px; align-items:center; padding:clamp(28px,4vw,56px); position:relative; overflow:hidden}
.hero .slide.activo{display:grid; grid-template-columns:1fr}
@media (min-width:900px){ .hero .slide.activo{grid-template-columns:1.1fr .9fr; gap:24px} }
.hero .slide::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 30%, rgba(255,255,255,.22), transparent 45%), radial-gradient(circle at 20% 100%, rgba(255,255,255,.12), transparent 40%)}
.hero .slide.s1{background:linear-gradient(110deg,#0B4FB3 0%,#1466D9 55%,#1FA3E6 100%)}
.hero .slide.s2{background:linear-gradient(110deg,#0A2A55 0%,#128C7E 60%,#25D366 100%)}
.hero .slide.s3{background:linear-gradient(110deg,#17B8C4 0%,#1FA3E6 50%,#0B4FB3 100%)}
.hero .slide > *{position:relative}
.hero .eti{display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); font-family:var(--titulo); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:16px}
.hero h1, .hero h2{font-size:clamp(1.8rem,3.8vw,3.2rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; max-width:18ch}
.hero h1 span, .hero h2 span{color:var(--amarillo)}
.hero p{margin-top:14px; font-size:1.05rem; max-width:48ch; color:rgba(255,255,255,.9)}
.hero .acciones{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.hero .arte{display:flex; gap:14px; justify-content:center; align-items:center}
.hero .arte img{width:30%; max-width:210px; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:16px; padding:12px; box-shadow:var(--sombra-2)}
.hero .arte img:nth-child(2){transform:translateY(-18px) scale(1.08)}
@media (max-width:899px){ .hero .arte{display:none} }
.hero .flecha{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.9); color:var(--azul); display:grid; place-items:center; cursor:pointer; z-index:2; box-shadow:var(--sombra)}
.hero .flecha svg{width:20px; height:20px}
.hero .flecha.izq{left:14px} .hero .flecha.der{right:14px}
@media (max-width:899px){ .hero .flecha{display:none} .hero .slide{min-height:340px} }
.hero .puntos{position:absolute; bottom:14px; left:0; right:0; display:flex; gap:8px; justify-content:center; z-index:2}
.hero .puntos button{width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; padding:0}
.hero .puntos button.activo{background:#fff; width:26px; border-radius:999px}

/* ── Secciones ── */
section.bloque{padding-block:34px}
.titulo-sec{font-size:1.5rem; margin-bottom:18px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.titulo-sec small{font-family:var(--cuerpo); font-size:.92rem; font-weight:500; color:var(--gris)}
.titulo-sec a{font-family:var(--cuerpo); color:var(--azul); font-weight:600; text-decoration:none; font-size:.9rem}
.titulo-centro{text-align:center; font-size:1.7rem; margin-bottom:8px}
.sub-centro{text-align:center; color:var(--gris); max-width:60ch; margin:0 auto 26px}
.confianza{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:18px}
.confianza .item{background:#fff; border-radius:var(--r); border:1px solid var(--linea); padding:16px 18px; display:flex; align-items:center; gap:14px; font-size:.88rem; color:var(--gris)}
.confianza .ico{width:46px; height:46px; border-radius:12px; background:var(--cielo-claro); color:var(--azul); display:grid; place-items:center; flex:0 0 auto}
.confianza .ico.wa{background:#E9F9EF; color:#1B6B3D}
.confianza .ico svg{width:24px; height:24px}
.confianza b{color:var(--texto); display:block; font-family:var(--titulo); font-weight:600; font-size:.9rem}

/* ── Carrusel horizontal ── */
.carr{position:relative}
.carr .pista{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px}
.carr .pista::-webkit-scrollbar{display:none}
.carr .pista > *{scroll-snap-align:start; flex:0 0 78%; max-width:340px}
@media (min-width:560px){ .carr .pista > *{flex-basis:calc((100% - 16px) / 2)} }
@media (min-width:860px){ .carr .pista > *{flex-basis:calc((100% - 2 * 16px) / 3); max-width:none} }
@media (min-width:1180px){ .carr .pista > *{flex-basis:calc((100% - 3 * 16px) / 4)} }
@media (min-width:1440px){ .carr .pista > *{flex-basis:calc((100% - 4 * 16px) / 5)} }
.carr .flecha{position:absolute; top:40%; width:42px; height:42px; border-radius:50%; border:1px solid var(--linea); background:#fff; color:var(--azul); display:grid; place-items:center; cursor:pointer; box-shadow:var(--sombra); z-index:2}
.carr .flecha svg{width:20px; height:20px}
.carr .flecha.izq{left:-18px} .carr .flecha.der{right:-18px}
@media (max-width:760px){ .carr .flecha{display:none} }

/* ── Tarjetas de producto ── */
.grilla{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:#fff; border-radius:var(--r); border:1px solid var(--linea); padding:16px; display:flex; flex-direction:column; gap:8px; position:relative; transition:box-shadow .15s, transform .15s, border-color .15s; min-width:0}
.card:hover{box-shadow:var(--sombra-2); transform:translateY(-3px); border-color:transparent}
.card .foto{aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border-radius:8px}
.card .foto img{width:100%; height:100%; object-fit:contain}
.card .etiq{position:absolute; top:12px; left:12px; background:var(--rojo); color:#fff; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; z-index:1; font-family:var(--titulo)}
.card .etiq.agot{background:var(--gris-2)}
.card .marca{font-size:.72rem; color:var(--gris-2); font-weight:600; text-transform:uppercase; letter-spacing:.06em}
.card h3{font-size:.9rem; font-weight:500; line-height:1.35; min-height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--cuerpo)}
.card h3 a{text-decoration:none}
.card .precio{font-family:var(--titulo); font-size:1.18rem; font-weight:700; color:var(--texto); white-space:nowrap}
.card .fila-precio{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.card .lista{font-size:.78rem; white-space:nowrap; color:var(--gris-2); text-decoration:line-through; margin-left:6px; font-weight:500}
.card .off{color:var(--verde); font-size:.78rem; white-space:nowrap; font-weight:700; margin-left:6px}
.card .iva{font-size:.76rem; color:var(--gris)}

/* ── Mosaicos de categoría ── */
.cat-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cat-tile{position:relative; min-height:250px; border-radius:var(--r2); overflow:hidden; text-decoration:none; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; background:linear-gradient(160deg,var(--cielo),var(--azul)); box-shadow:var(--sombra); transition:transform .15s}
.cat-tile:hover{transform:translateY(-3px)}
.cat-tile:nth-child(3n+2){background:linear-gradient(160deg,#17B8C4,#0B4FB3)}
.cat-tile:nth-child(3n+3){background:linear-gradient(160deg,#1466D9,#0A2A55)}
.cat-tile img{position:absolute; right:-8%; top:-10%; width:46%; max-width:160px; aspect-ratio:1; object-fit:contain; background:rgba(255,255,255,.92); border-radius:50%; padding:18px; transform:rotate(8deg); box-shadow:0 10px 30px rgba(0,0,0,.2)}
.cat-tile .ico{position:absolute; left:22px; top:22px; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center}
.cat-tile .ico svg{width:24px; height:24px}
.cat-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,20,50,.62) 30%,rgba(4,20,50,.12) 65%,transparent)}
.cat-tile > *{position:relative; z-index:1}
.cat-tile h3{font-size:1.25rem; font-weight:700; text-shadow:0 1px 8px rgba(4,20,50,.35); max-width:88%}
.cat-tile p{font-size:.86rem; color:rgba(255,255,255,.85); margin:4px 0 12px; max-width:30ch}
.cat-tile .btn{align-self:flex-start}
.cat-tile.mini{min-height:150px; padding:16px}
.cat-tile.mini h3{font-size:1.05rem}
.cat-tile.mini img{width:44%; max-width:110px; padding:10px}
.cat-tile.mini p{display:none}

/* ── Banners promo ── */
.promos{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:700px){ .promos{grid-template-columns:repeat(3,1fr)} }
.promo{border-radius:var(--r2); padding:22px 24px; display:flex; align-items:center; gap:16px; color:#fff; text-decoration:none; min-height:110px; box-shadow:var(--sombra); transition:transform .15s}
.promo:hover{transform:translateY(-2px)}
.promo.azul{background:linear-gradient(120deg,#0B4FB3,#1FA3E6)}
.promo.verde{background:linear-gradient(120deg,#128C7E,#25D366)}
.promo.marino{background:linear-gradient(120deg,#0A2A55,#0B4FB3)}
.promo .ico{width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.2); display:grid; place-items:center; flex:0 0 auto}
.promo .ico svg{width:28px; height:28px}
.promo b{font-family:var(--titulo); font-size:1.05rem; display:block; line-height:1.2}
.promo small{font-size:.86rem; opacity:.9}

/* ── Producto destacado en la home ── */
.spot{display:grid; gap:28px; grid-template-columns:1fr; background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:28px}
@media (min-width:900px){ .spot{grid-template-columns:.9fr 1.1fr; padding:36px} }
.spot .foto{background:var(--fondo); border-radius:var(--r2); display:grid; place-items:center; padding:24px; min-height:320px}
.spot .foto img{max-height:360px; object-fit:contain}
.spot .vend{font-size:.82rem; color:var(--gris); font-weight:600}
.spot h2{font-size:1.5rem; margin:6px 0 10px}
.spot .precio{font-family:var(--titulo); font-size:2rem; font-weight:800}
.spot .precio small{font-size:1rem; color:var(--gris-2); text-decoration:line-through; margin-left:10px; font-weight:500}
.spot .iva{color:var(--gris); margin:4px 0 16px; font-size:.92rem}
.spot dl{display:grid; gap:6px; margin:16px 0; font-size:.92rem}
.spot dl div{display:flex; gap:8px}
.spot dt{font-weight:700; color:var(--texto); flex:0 0 auto}
.spot dd{margin:0; color:var(--gris)}
.spot .acciones{display:flex; gap:10px; flex-wrap:wrap}

/* ── Opiniones ── */
.resenas-cab{display:grid; gap:24px; grid-template-columns:1fr; align-items:center; margin-bottom:22px}
@media (min-width:900px){ .resenas-cab{grid-template-columns:auto 1fr auto} }
.puntaje{display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:18px 24px}
.puntaje .n{font-family:var(--titulo); font-size:3rem; font-weight:800; color:var(--texto); line-height:1}
.puntaje .est{color:var(--estrella); font-size:1.2rem; letter-spacing:2px}
.puntaje .est span{color:var(--linea-2)}
.puntaje small{display:block; color:var(--gris); font-size:.85rem}
.fuentes{display:flex; gap:10px; flex-wrap:wrap}
.fuentes li{background:#fff; border:1px solid var(--linea); border-radius:999px; padding:8px 14px; font-size:.85rem; display:inline-flex; gap:8px; align-items:center}
.fuentes li b{font-family:var(--titulo)}
.resenas{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.resena{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:22px; display:flex; flex-direction:column; gap:10px; position:relative}
.resena .est{color:var(--estrella); letter-spacing:2px; font-size:1rem}
.resena .est span{color:var(--linea-2)}
.resena q{quotes:none; font-size:.97rem; line-height:1.55; color:var(--texto)}
.resena .quien{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:10px; border-top:1px solid var(--linea)}
.resena .ini{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--titulo); font-weight:700; color:#fff; font-size:.9rem; flex:0 0 auto}
.resena .quien b{display:block; font-size:.9rem}
.resena .quien small{color:var(--gris); font-size:.78rem}
.resena .quien .chip{margin-left:auto}
.resena .prod{font-size:.8rem; color:var(--azul); text-decoration:none; font-weight:600}

/* ── FAQ y texto ── */
.faq{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:900px){ .faq{grid-template-columns:1fr 1fr} }
.faq details{background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:0 20px}
.faq details[open]{border-color:var(--cielo)}
.faq summary{cursor:pointer; padding:16px 0; font-weight:600; font-family:var(--titulo); font-size:.95rem; display:flex; justify-content:space-between; gap:12px; align-items:center; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--azul); font-size:1.3rem; font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 16px; color:var(--gris); font-size:.93rem}
.texto-seo{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:28px 32px; columns:1; gap:40px; color:var(--gris); font-size:.95rem}
@media (min-width:900px){ .texto-seo{columns:2} }
.texto-seo h2{column-span:all; font-size:1.3rem; color:var(--texto); margin-bottom:12px}
.texto-seo p{margin-bottom:12px; break-inside:avoid}
.nosotros{display:grid; gap:28px; grid-template-columns:1fr; align-items:center}
@media (min-width:900px){ .nosotros{grid-template-columns:1fr 1fr} }
.nosotros .arte{border-radius:var(--r2); min-height:300px; background:linear-gradient(150deg,#0B4FB3,#17B8C4); position:relative; overflow:hidden; display:grid; place-items:center; color:#fff}
.nosotros .arte .cifras{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:30px; position:relative}
.nosotros .arte .cifras div{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:18px; text-align:center}
.nosotros .arte .cifras b{font-family:var(--titulo); font-size:2rem; display:block; line-height:1}
.nosotros .arte .cifras span{font-size:.82rem}
.nosotros h2{font-size:1.7rem; margin-bottom:12px}
.nosotros p{color:var(--gris); margin-bottom:12px}
.nosotros ul{display:grid; gap:10px; margin:16px 0}
.nosotros li{display:flex; gap:10px; align-items:flex-start}
.nosotros li svg{width:20px; height:20px; color:var(--verde); flex:0 0 auto; margin-top:2px}
.marcas{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.marcas li{background:#fff; border:1px solid var(--linea); border-radius:999px; padding:9px 20px; font-weight:600; color:var(--gris); font-family:var(--titulo); font-size:.9rem}

.wa-sec > *, .b2b > *, .nosotros > *, .spot > *, .ficha > *, .listado > *{min-width:0}
/* ── WhatsApp, B2B ── */
.wa-sec{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:clamp(24px,4vw,44px); display:grid; gap:24px; grid-template-columns:1fr; align-items:center}
@media (min-width:900px){ .wa-sec{grid-template-columns:1fr 1fr} }
.wa-sec h2{font-size:clamp(1.5rem,3vw,2rem)}
.wa-sec p{margin-top:10px; color:var(--gris); max-width:50ch}
.wa-sec .usos{display:grid; gap:10px; margin-top:16px}
.wa-sec .usos li{display:flex; gap:10px; align-items:center; font-weight:500}
.wa-sec .usos svg{width:20px; height:20px; color:var(--verde-wa)}
.wa-sec .tarjeta-wa{background:#E9F9EF; border-radius:14px; padding:26px; display:grid; gap:12px; text-align:center}
.wa-sec .tarjeta-wa .num{font-family:var(--titulo); font-size:1.4rem; font-weight:700; color:#0B5A2C; text-decoration:none}
.b2b{background:var(--marino); color:#fff; border-radius:var(--r2); padding:clamp(24px,4vw,48px); display:grid; gap:26px; grid-template-columns:1fr; align-items:center}
@media (min-width:900px){ .b2b{grid-template-columns:1.1fr .9fr} }
.b2b .eti{display:inline-block; background:var(--amarillo); color:#1b1b1b; font-family:var(--titulo); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:12px}
.b2b h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.b2b p{margin-top:12px; color:#c9d6e3; max-width:52ch; font-size:1.02rem}
.b2b .benef{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:18px}
.b2b .benef li{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:14px; font-size:.92rem}
.b2b .benef b{display:block; color:var(--amarillo); margin-bottom:3px; font-family:var(--titulo)}
.b2b .caja{background:#fff; color:var(--texto); border-radius:14px; padding:26px; display:grid; gap:12px; text-align:center}

/* ── Listado ── */
.cat-hero{background:linear-gradient(120deg,#0B4FB3,#1FA3E6); color:#fff; border-radius:var(--r2); padding:clamp(22px,3vw,36px); margin-top:8px; display:grid; gap:20px; grid-template-columns:1fr; align-items:center; position:relative; overflow:hidden}
@media (min-width:800px){ .cat-hero{grid-template-columns:1fr auto} }
.cat-hero h1{font-size:clamp(1.6rem,3vw,2.3rem)}
.cat-hero p{margin-top:8px; color:rgba(255,255,255,.9); max-width:60ch}
.cat-hero .subs{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.cat-hero .subs a{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff; text-decoration:none; padding:6px 14px; border-radius:999px; font-size:.84rem; font-weight:600}
.cat-hero .subs a.activo{background:#fff; color:var(--azul)}
.cat-hero img{width:180px; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:50%; padding:20px; justify-self:end}
@media (max-width:799px){ .cat-hero img{display:none} }
.listado{display:grid; gap:24px; grid-template-columns:1fr; padding-block:20px 10px}
@media (min-width:900px){ .listado{grid-template-columns:260px 1fr} }
.lateral{background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:18px; align-self:start; position:sticky; top:14px}
.lateral h3{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gris); margin:0 0 10px; font-family:var(--cuerpo)}
.lateral h3 + ul{margin-bottom:20px}
.lateral li a{display:flex; justify-content:space-between; padding:8px 10px; border-radius:8px; text-decoration:none; font-size:.92rem; font-weight:500}
.lateral li a:hover, .lateral li a.activo{background:var(--cielo-claro); color:var(--azul)}
.lateral li a span{color:var(--gris-2); font-size:.8rem}
.lateral .ayuda{background:var(--fondo); border-radius:10px; padding:14px; font-size:.86rem; color:var(--gris)}
.herr{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px}
.herr select{font:inherit; padding:8px 12px; border:1px solid var(--linea-2); border-radius:999px; background:#fff}
.herr .n{font-size:.88rem; color:var(--gris)}
.nada{background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:30px; text-align:center; color:var(--gris)}

/* ── Ficha ── */
.ficha{display:grid; gap:30px; grid-template-columns:1fr; padding-block:10px 24px}
@media (min-width:900px){ .ficha{grid-template-columns:1fr 1fr} }
@media (min-width:1300px){ .ficha{grid-template-columns:1.05fr .95fr} }
.ficha .foto{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); display:grid; place-items:center; padding:28px; min-height:400px; position:relative}
.ficha .foto img{max-height:520px; object-fit:contain}
.ficha .foto .etiq{position:absolute; top:14px; left:14px; background:var(--rojo); color:#fff; font-weight:700; font-size:.78rem; padding:5px 12px; border-radius:999px; font-family:var(--titulo)}
.ficha .info{display:flex; flex-direction:column; gap:12px}
.ficha .marca{color:var(--gris-2); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem}
.ficha h1{font-size:1.6rem; font-weight:700}
.ficha .vendidos{font-size:.86rem; color:var(--gris)}
.ficha .precio-g{font-family:var(--titulo); font-size:2.2rem; font-weight:800; line-height:1}
.ficha .precio-g small{font-size:1rem; color:var(--gris-2); text-decoration:line-through; margin-left:10px; font-weight:500}
.ficha .ahorro{display:inline-block; background:#E7F5EC; color:#1B6B3D; font-weight:700; font-size:.78rem; padding:4px 10px; border-radius:999px; margin-left:10px; vertical-align:middle}
.ficha .iva{color:var(--gris); font-size:.9rem}
.stock{font-size:.88rem; font-weight:600}
.stock.si{color:var(--verde)} .stock.no{color:var(--rojo)}
.cantidad{display:inline-flex; align-items:center; border:1.5px solid var(--linea-2); border-radius:999px; overflow:hidden; background:#fff}
.cantidad button{width:40px; height:42px; border:0; background:#fff; cursor:pointer; font-size:1.2rem; font-weight:700; color:var(--azul)}
.cantidad button:hover{background:var(--cielo-claro)}
.cantidad span{min-width:44px; text-align:center; font-weight:700}
.ficha .compra{display:grid; gap:10px}
.ficha .compra .fila{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.ficha .compra .btn-grande{flex:1}
.ficha .otros-canales{display:grid; gap:8px; grid-template-columns:1fr 1fr}
@media (max-width:520px){ .ficha .otros-canales{grid-template-columns:1fr} }
.ficha .envio-info{background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:14px 16px; font-size:.9rem; display:grid; gap:8px}
.ficha .envio-info div{display:flex; gap:10px; align-items:center}
.ficha .envio-info svg{width:20px; height:20px; color:var(--azul); flex:0 0 auto}
.bloque-ficha{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:24px; margin-bottom:20px}
.bloque-ficha h2{font-size:1.1rem; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--linea)}
.bloque-ficha p{color:var(--gris); font-size:.95rem}
.wa-ficha{background:#E9F9EF; border-color:#c9ecd6; display:grid; gap:12px; grid-template-columns:1fr; align-items:center}
@media (min-width:760px){ .wa-ficha{grid-template-columns:1fr auto} }
.wa-ficha h2{border:0; margin:0; padding:0; color:#0B5A2C}
.wa-ficha p{color:#2f4a38}
.tech{display:grid; gap:0; grid-template-columns:1fr}
@media (min-width:700px){ .tech{grid-template-columns:1fr 1fr; column-gap:30px} }
.tech div{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--linea); font-size:.92rem}
.tech div span:first-child{color:var(--gris); font-weight:600}
.tech div span:last-child{text-align:right}
.cuidados{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cuidados li{background:var(--fondo); border-radius:10px; padding:14px; font-size:.88rem; display:flex; gap:10px; align-items:flex-start}
.cuidados svg{width:22px; height:22px; color:var(--azul); flex:0 0 auto}
.trust{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:20px; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:20px}
.trust div{display:flex; gap:12px; align-items:center; font-size:.86rem; color:var(--gris)}
.trust svg{width:26px; height:26px; color:var(--azul); flex:0 0 auto}
.trust b{display:block; color:var(--texto); font-family:var(--titulo); font-weight:600}

/* ── Carrito y finalizar compra ── */
.dos-col{display:grid; gap:24px; grid-template-columns:1fr; align-items:start}
@media (min-width:900px){ .dos-col{grid-template-columns:1fr 380px} }
.tabla{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.tabla th, .tabla td{padding:12px; text-align:left; border-bottom:1px solid var(--linea); vertical-align:middle; font-size:.92rem}
.tabla th{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gris); background:var(--fondo)}
.tabla tr:last-child td{border-bottom:0}
.tabla .mini{width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--linea); border-radius:8px}
.tabla .nom{font-weight:600; font-size:.88rem}
.tabla .nom a{text-decoration:none}
.tabla .sub{font-weight:700; font-family:var(--titulo); white-space:nowrap}
@media (max-width:640px){ .tabla thead{display:none} .tabla tr{display:grid; grid-template-columns:64px 1fr; gap:4px 12px; padding:12px; border-bottom:1px solid var(--linea)} .tabla td{padding:0; border:0} .tabla td:first-child{grid-row:1 / span 4} .tabla td:last-child{grid-column:2} }
.quitar{background:none; border:0; color:var(--gris); cursor:pointer; text-decoration:underline; font-size:.82rem; padding:0}
.quitar:hover{color:var(--rojo)}
.resumen{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:22px; display:grid; gap:12px; position:sticky; top:14px}
.resumen h2{font-size:1.1rem}
.resumen h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gris); font-family:var(--cuerpo)}
.resumen .fila{display:flex; justify-content:space-between; gap:10px; font-size:.95rem}
.resumen .fila.total{border-top:2px solid var(--texto); padding-top:12px; font-size:1.25rem; font-weight:700; font-family:var(--titulo)}
.resumen .ok{color:var(--verde); font-weight:700}
.resumen .pago{display:grid; gap:10px; padding:14px; border:1px dashed var(--linea-2); border-radius:12px}
.campo{display:grid; gap:5px}
.campo label{font-size:.82rem; font-weight:600; color:var(--gris)}
.campo input, .campo select, .campo textarea{font:inherit; font-size:.95rem; padding:10px 14px; border:1.5px solid var(--linea-2); border-radius:10px; background:#fff; width:100%}
.campo input:focus, .campo select:focus, .campo textarea:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 3px var(--cielo-claro)}
.campo textarea{min-height:80px; resize:vertical}
.fila-2{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:600px){ .fila-2{grid-template-columns:1fr 1fr} }
.opciones{display:grid; gap:8px}
.opcion{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--linea); border-radius:10px; padding:12px 14px; cursor:pointer}
.opcion:has(input:checked){border-color:var(--azul); background:var(--cielo-claro)}
.opcion input{margin-top:4px}
.opcion b{display:block}
.opcion small{color:var(--gris)}
.confirm{text-align:center; padding:40px 20px; max-width:680px; margin-inline:auto}
.confirm .tick{width:84px; height:84px; border-radius:50%; background:#E6F6EC; color:var(--verde); display:grid; place-items:center; margin:0 auto 18px}
.confirm .tick svg{width:40px; height:40px}
.confirm h1{margin-bottom:10px}
.confirm .num{font-family:var(--titulo); font-size:1.4rem; font-weight:700; color:var(--azul)}
.confirm .detalle{display:grid; gap:4px; margin:20px auto 0; padding:16px; background:#fff; border:1px solid var(--linea); border-radius:var(--r); font-size:.92rem; color:var(--gris); text-align:left; max-width:520px}
.confirm .acciones{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); background:#1b1f27; color:#fff; padding:12px 18px; border-radius:999px; font-weight:600; font-size:.92rem; opacity:0; transition:all .2s; z-index:300; display:flex; gap:12px; align-items:center; pointer-events:none}
.toast.ver{opacity:1; transform:translateX(-50%); pointer-events:auto}
.toast a{color:var(--amarillo); text-decoration:none}
@media (max-width:739px){ .toast{bottom:80px} }

/* ── Páginas de texto ── */
.pagina{padding-block:16px 40px}
.pagina h1{font-size:1.7rem; margin-bottom:18px}
.formulario{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:24px; display:grid; gap:16px}
.formulario h2{font-size:1.05rem; padding-bottom:10px; border-bottom:1px solid var(--linea)}
.formulario a{color:var(--azul)}
.contacto-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.contacto-grid > div{background:#fff; border:1px solid var(--linea); border-radius:var(--r2); padding:22px; display:grid; gap:8px; align-content:start}
.contacto-grid .ico{width:44px; height:44px; border-radius:12px; background:var(--cielo-claro); color:var(--azul); display:grid; place-items:center}
.contacto-grid .ico.wa{background:#E9F9EF; color:#1B6B3D}
.contacto-grid .ico svg{width:22px; height:22px}
.contacto-grid h2{font-size:1.02rem}
.contacto-grid p{color:var(--gris); font-size:.93rem}
.contacto-grid a{color:var(--azul); text-decoration:none; font-weight:600}
.contacto-grid .btn{justify-self:start; margin-top:6px}
.aviso{font-size:.85rem; color:var(--gris); background:var(--fondo); padding:10px 14px; border-radius:10px}

/* ── Pie ── */
footer{background:var(--marino); color:#c9d6e3; margin-top:40px; padding-block:40px 90px}
@media (min-width:740px){ footer{padding-bottom:36px} }
.pie-grid{display:grid; gap:28px; grid-template-columns:1fr}
@media (min-width:640px){ .pie-grid{grid-template-columns:1.3fr 1fr 1fr} }
@media (min-width:980px){ .pie-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr} }
.pie-col h4{font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:#fff; margin-bottom:12px}
.pie-col li{margin-bottom:8px; font-size:.92rem}
.pie-col a{text-decoration:none; color:#c9d6e3}
.pie-col a:hover{color:#fff}
.pie-col p{font-size:.92rem}
.pie-col .logo b{color:#fff} .pie-col .logo small{color:var(--turquesa)}
.pagos{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.pagos span{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:4px 10px; font-size:.74rem; font-weight:600; color:#fff}
.pagos span.pronto{background:transparent; color:#c9d6e3; border-style:dashed}
.legal{margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap}
.wa-flot{position:fixed; right:18px; bottom:84px; width:58px; height:58px; border-radius:50%; background:var(--verde-wa); color:#fff; display:grid; place-items:center; box-shadow:var(--sombra-2); z-index:90; text-decoration:none}
.wa-flot svg{width:30px; height:30px}
@media (min-width:740px){ .wa-flot{bottom:22px} }
.barra-movil{position:fixed; inset:auto 0 0 0; z-index:95; display:flex; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--linea)}
.barra-movil .btn{flex:1}
@media (min-width:740px){ .barra-movil{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }