/* MOLTTEN — hoja de estilo generada por _motor/generar_web.py. No editar a mano. */
:root{
  --grafito:#2C2F36; --grafito-alto:#3A3E47; --grafito-hondo:#1B1D22; --grafito-medio:#26292F;
  --claro:#F3F6FB; --claro-2:#E5EAF3; --panel:#FFFFFF;
  --tinta:#1B1D22; --tinta-2:#4A505A; --tinta-3:#8D949E; --linea:#E7ECF3;
  --luz:226,236,252;
  --hueso:#FCF9F3; --hueso-2:#EDE8DE; --arena:#D8D2C6; --sol:255,246,226;
  --ancho:1180px;
  /* Redondeo: una escala, no valores sueltos. Las secciones a todo el ancho
     NO se redondean —una franja de borde a borde con puntas redondas se ve
     como un sticker—; sí las cosas que son objetos: tarjetas, fotos, paneles. */
  --r:16px; --r-chico:10px; --r-grande:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--claro);color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.env{max-width:var(--ancho);margin:0 auto;padding:0 24px;width:100%}

/* ---------------------------------------------------- tipografia de marca */
.display{font-family:'Archivo',sans-serif;text-transform:uppercase;line-height:.9;
  font-variation-settings:'wdth' 72,'wght' 700;letter-spacing:.02em}
.d-fino{font-variation-settings:'wdth' 66,'wght' 250;letter-spacing:.09em}
.d-grueso{font-variation-settings:'wdth' 66,'wght' 800;letter-spacing:.03em}
.rotulo{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  color:var(--tinta-3)}
.filete{height:2px;width:88px;background:linear-gradient(90deg,
  rgba(var(--luz),.08),rgba(var(--luz),.85),rgba(var(--luz),.08))}

/* ------------------------------------------------------ atmosfera oscura */
.osc{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(ellipse 128% 96% at 16% 2%,
    var(--grafito-alto) 0%, var(--grafito) 36%, var(--grafito-medio) 68%, var(--grafito-hondo) 100%)}
.osc>.cap{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;z-index:0}
.cap.luz{background:linear-gradient(62deg,transparent 22%,
  rgba(var(--luz),.13) 46%,rgba(var(--luz),.03) 62%,transparent 78%);filter:blur(70px)}
.cap.filo{background:linear-gradient(62deg,transparent 44%,
  rgba(var(--luz),.10) 47%,rgba(var(--luz),.10) 50%,transparent 54%);filter:blur(26px)}
.cap.rim{background:linear-gradient(270deg,rgba(202,218,242,.22) 0%,transparent 5%);filter:blur(6px)}
.cap.pool{background:radial-gradient(ellipse 62% 34% at 50% 108%,
  rgba(190,208,234,.24) 0%,transparent 74%);filter:blur(34px)}
.cap.vine{mix-blend-mode:normal;background:radial-gradient(ellipse 88% 80% at 50% 46%,
  transparent 48%,rgba(8,9,12,.42) 88%,rgba(8,9,12,.60) 100%)}
.cap.grano{mix-blend-mode:overlay;opacity:.13;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.osc>.env,.osc>.contenido{position:relative;z-index:2}
.barra-luz{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:linear-gradient(90deg,rgba(var(--luz),.05) 0%,rgba(var(--luz),.40) 36%,
    rgba(var(--luz),.54) 58%,rgba(var(--luz),.07) 100%)}

/* ------------------------------------------------------------- cabecera */
header.top{position:sticky;top:0;z-index:60;background:rgba(28,30,36,.92);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(var(--luz),.09)}
.top .env{display:flex;align-items:center;gap:20px;min-height:66px}
.marca{width:132px;flex:0 0 auto;display:block}
.marca svg{width:100%;height:auto;display:block}
nav.menu{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  justify-content:flex-end}
.wa-top{flex:0 0 auto}
nav.menu a{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:rgba(226,234,248,.72);padding:6px 0;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;white-space:nowrap}
nav.menu a:hover,nav.menu a[aria-current]{color:#fff;border-color:rgba(var(--luz),.55)}
.con-sub{position:relative;display:flex;align-items:center}
.flecha{margin-left:6px;font-size:8px;opacity:.7;position:relative;top:-1px}
.sub{position:absolute;top:100%;left:50%;translate:-50% 0;min-width:322px;z-index:70;
  display:none;text-align:center;
  background:rgba(23,25,30,.985);padding:18px 0;border-radius:var(--r);
  /* el borde transparente separa el panel de la barra sin cortar el hover:
     el mouse sigue estando adentro del elemento mientras cruza el hueco */
  border-top:12px solid transparent;background-clip:padding-box;
  box-shadow:0 26px 54px rgba(8,9,12,.55),0 2px 8px rgba(8,9,12,.4)}
.con-sub:hover .sub,.con-sub:focus-within .sub{display:block}
.sub a{display:block;padding:14px 30px;white-space:nowrap;border-bottom:0;
  letter-spacing:.12em;font-size:11px;line-height:1.3}
.sub a:hover{background:rgba(226,236,252,.09);color:#fff}
.menu-btn{display:none}

/* -------------------------------------------------------------- botones */
.pill{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:13px 26px;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;transition:transform .18s,box-shadow .18s,background .18s;
  white-space:nowrap;line-height:1}
.pill:hover{transform:translateY(-1px)}
.pill.claro{background:#fff;color:var(--grafito-hondo);
  box-shadow:0 8px 26px rgba(10,12,16,.28)}
.pill.claro:hover{box-shadow:0 12px 32px rgba(10,12,16,.36)}
.pill.oscuro{background:var(--grafito);color:#fff;box-shadow:0 10px 26px rgba(27,29,34,.22)}
.pill.oscuro:hover{background:var(--grafito-hondo)}
.pill.linea{border:1px solid rgba(var(--luz),.42);color:#fff}
.pill.linea:hover{background:rgba(var(--luz),.10)}
.pill svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

/* ----------------------------------------------------------------- hero */
.hero{padding:clamp(64px,10vw,116px) 0 clamp(58px,8vw,92px)}
.hero .env{max-width:var(--ancho)}
.hero .rotulo{color:rgba(214,226,244,.62);margin-bottom:22px}
.hero h1{margin:0 0 26px}
.hero h1 span{display:block}
.h-1{font-size:clamp(38px,7.4vw,86px);color:rgba(255,255,255,.88)}
.h-2{font-size:clamp(46px,9.2vw,108px);color:#fff}
.bajada{max-width:53ch;font-size:clamp(15px,1.6vw,17.5px);line-height:1.72;
  color:rgba(222,231,246,.80);margin-bottom:34px}
.acciones{display:flex;gap:14px;flex-wrap:wrap}

/* ------------------------------------------------------------- secciones */
.bloque{padding:clamp(56px,7vw,88px) 0}
.bloque.claro-frio{background:linear-gradient(184deg,#F5F7FC 0%,#EEF2F8 52%,#E7ECF4 100%)}
.cab-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:34px;flex-wrap:wrap}
.cab-sec h2{font-family:'Archivo',sans-serif;text-transform:uppercase;
  font-variation-settings:'wdth' 74,'wght' 620;letter-spacing:.02em;line-height:1.02;
  font-size:clamp(24px,3.4vw,38px)}
.cab-sec p{color:var(--tinta-2);max-width:46ch;font-size:15px}
.ver-mas{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--tinta-2);border-bottom:1px solid var(--tinta-3);padding-bottom:3px}
.ver-mas:hover{color:var(--tinta);border-color:var(--tinta)}

/* ------------------------------------------------------------- tarjetas */
.rejilla{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.rejilla.pocas{grid-template-columns:repeat(auto-fit,minmax(238px,320px));justify-content:start}
.tarjeta{background:var(--panel);display:flex;flex-direction:column;height:100%;
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 14px 38px rgba(27,29,34,.07),0 1px 2px rgba(27,29,34,.05);
  transition:transform .2s,box-shadow .2s}
.tarjeta:hover{transform:translateY(-3px);
  box-shadow:0 22px 52px rgba(27,29,34,.12),0 1px 2px rgba(27,29,34,.05)}
.t-foto{position:relative;aspect-ratio:4/3;min-height:0;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:20px;background:#fff}
.t-foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.etiqueta{position:absolute;top:12px;left:12px;z-index:2;border-radius:999px;
  padding:5px 11px;font-size:9px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;background:rgba(27,29,34,.07);color:var(--tinta-2)}
.etiqueta.fuerte{background:var(--grafito);color:#fff}
.etiqueta.suelta{position:static;margin-left:4px;font-size:9.5px;padding:6px 13px;
  align-self:center}
.t-sin{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#C4CAD3}
.t-cuerpo{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;
  border-top:1px solid var(--linea)}
.t-cat{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:8px}
.t-nom{font-family:'Archivo',sans-serif;text-transform:uppercase;
  font-variation-settings:'wdth' 84,'wght' 600;font-size:14.5px;line-height:1.24;
  letter-spacing:.014em;word-spacing:.14em;margin-bottom:14px}
.t-pie{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px}
.t-ir{padding-bottom:2px}
.precio{font-weight:600;font-size:17px;letter-spacing:.005em;color:var(--tinta)}
.precio small{font-weight:400;font-size:10.5px;color:var(--tinta-3);margin-left:4px;
  letter-spacing:.04em}
.precio em{font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);margin-right:6px}

/* ------------------------------------------------------- precio con rebaja
   El Precio Lista va tachado arriba y el que se cobra, abajo. No se ponen en
   una sola linea: dos numeros en guaranies no entran en el ancho de una
   tarjeta, y apilados el ojo lee primero el de abajo, que es el que importa.
   Sin pastilla de porcentaje: la diferencia se lee sola en los numeros. */
.precio.con-antes{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.antes{display:flex;align-items:baseline;gap:8px;font-weight:400;line-height:1.2}
.antes s{font-size:11.5px;color:#6E7681;letter-spacing:.01em;
  text-decoration-thickness:1px;text-decoration-color:rgba(110,118,129,.85)}
.rot-antes{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:#6E7681;line-height:1.7}
.ahora{display:block}
.t-ir{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.tarjeta:hover .t-ir{color:var(--tinta)}

/* ------------------------------------------------------- categorias home */
.cats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cat{position:relative;background:var(--panel);padding:0 0 22px;display:flex;
  flex-direction:column;border-radius:var(--r);overflow:hidden;
  box-shadow:0 14px 38px rgba(27,29,34,.07);transition:transform .2s}
.cat:hover{transform:translateY(-3px)}
.cat .t-foto{aspect-ratio:16/10}
.cat h3{font-family:'Archivo',sans-serif;text-transform:uppercase;
  font-variation-settings:'wdth' 78,'wght' 640;font-size:15px;letter-spacing:.03em;
  padding:16px 20px 4px;border-top:1px solid var(--linea)}
.cat span{padding:0 20px;font-size:12.5px;color:var(--tinta-3)}

/* ----------------------------------------------------------- ficha producto */
.ficha{padding:clamp(30px,4vw,46px) 0 clamp(56px,7vw,84px)}
.miga{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:26px}
.miga a:hover{color:var(--tinta)}
.f-grid{display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:start}
.f-foto{background:#fff;padding:34px;display:flex;align-items:center;justify-content:center;
  min-height:340px;border-radius:var(--r-grande);
  box-shadow:0 18px 46px rgba(27,29,34,.08),0 1px 2px rgba(27,29,34,.05)}
.f-foto img{max-height:460px;width:auto;object-fit:contain}
.tiras{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.tira{position:relative;width:80px;height:64px;padding:7px;background:#fff;border:0;
  border-radius:var(--r-chico);overflow:hidden;
  cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.58;
  box-shadow:0 6px 18px rgba(27,29,34,.07);transition:opacity .18s}
.tira img{max-width:100%;max-height:100%;object-fit:contain}
.tira:hover{opacity:.85}
.tira.activa{opacity:1}
.tira.activa::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;
  border-radius:2px;background:var(--tinta)}
.f-cat{margin-bottom:12px}
.f-info h1{font-family:'Archivo',sans-serif;text-transform:uppercase;
  font-variation-settings:'wdth' 78,'wght' 680;letter-spacing:.015em;line-height:1.06;
  font-size:clamp(26px,4vw,42px);margin-bottom:20px}
.f-precio{display:flex;align-items:flex-end;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.f-precio .precio{font-size:clamp(27px,3.4vw,35px);font-weight:600;letter-spacing:0}
.f-precio .precio small{font-size:13px;margin-left:6px;letter-spacing:.05em}
.f-precio .precio em{font-size:12px;margin-right:10px;letter-spacing:.2em}
.f-precio>.etiqueta:not(.fuerte){color:var(--tinta-3)}
.f-precio>.etiqueta{letter-spacing:.04em;align-self:flex-end;margin-bottom:4px}
.f-precio .antes s{font-size:16px}
.f-precio .rot-antes{font-size:9.5px}
.f-nota{font-size:12.5px;color:var(--tinta-3);margin-bottom:24px}
.f-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.f-texto{font-size:16px;line-height:1.75;color:var(--tinta-2);margin-bottom:26px}
.datos{border-top:1px solid var(--linea);margin-top:4px}
.dato{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--linea);
  font-size:14.5px;align-items:baseline}
.dato b{flex:0 0 128px;font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3)}
.dato.suelto span{padding-left:0}
.dato span{color:var(--tinta-2)}
.osc .datos{border-color:rgba(255,255,255,.14)}
.osc .dato{border-color:rgba(255,255,255,.14)}
.osc .dato b{color:#fff}
.osc .dato span{color:rgba(255,255,255,.72)}

/* ------------------------------------------------- precios por medida */
/* Mancuernas y discos no tienen UN precio: tienen uno por peso. En esas dos
   fichas la tabla ES el contenido, asi que va arriba —antes del boton— y cada
   renglon cierra por WhatsApp con la medida ya escrita en el mensaje. */
.precios{background:var(--panel);border-radius:var(--r);margin:4px 0 26px;
  box-shadow:0 14px 38px rgba(27,29,34,.07),0 1px 2px rgba(27,29,34,.05);
  overflow:hidden}
/* La cabecera y las filas son la MISMA maqueta de tres celdas —etiqueta,
   precio, flecha— para que el titulo de la columna caiga exactamente sobre
   los numeros. Antes la cabecera se alineaba al borde del panel y los precios
   quedaban 110px mas adentro, porque la flecha les reservaba el lugar: un
   escalon que en una lista de precios se ve enseguida. */
.p-cab,.p-fila{display:flex;align-items:baseline;gap:14px;padding:13px 20px}
.p-cab{padding:14px 20px 11px;border-bottom:1px solid var(--linea);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:500}
.p-fila{border-bottom:1px solid var(--linea);transition:background .16s}
.p-fila:last-child{border-bottom:0}
.p-fila:hover{background:#F6F8FC}
.p-et{flex:0 0 auto;font-size:15px;color:var(--tinta-2)}
.p-cab .p-et{flex:1;font-size:inherit;color:inherit}
/* puntitos de catalogo: llevan el ojo del peso al precio sin dibujar una caja */
.p-pun{flex:1;height:1px;align-self:center;
  background:repeating-linear-gradient(90deg,var(--linea) 0 2px,transparent 2px 6px)}
/* min-width, no width: un precio mas largo crece hacia la izquierda y el
   borde derecho —que es el que se mira— no se mueve nunca */
.p-val{flex:0 0 auto;min-width:104px;text-align:right;font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:600;color:var(--tinta);letter-spacing:.004em}
.p-cab .p-val{font-size:inherit;font-weight:500;color:inherit;
  letter-spacing:inherit}
.p-ir{flex:0 0 14px;text-align:right;font-size:13px;line-height:1;
  color:var(--tinta-3);transition:color .16s,translate .16s}
.p-fila:hover .p-ir{color:var(--tinta);translate:2px 0}
@media(max-width:520px){
  .p-cab,.p-fila{padding:12px 15px;gap:10px}
  .p-cab{padding:13px 15px 10px;font-size:9px}
  .p-et{font-size:14px}.p-val{font-size:15px;min-width:92px}}

/* --------------------------------------------------------------- editorial */
.dos-col{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start}
.kao-bloque{grid-template-columns:minmax(280px,.78fr) minmax(280px,1.22fr);
  gap:clamp(28px,3.6vw,46px)}
.kao-fila{grid-template-columns:repeat(var(--kao-n,2),minmax(0,1fr));gap:16px}
@media (max-width:980px){
  .kao-bloque{grid-template-columns:1fr}
  .kao-fila{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
}
@media (max-width:640px){.kao-fila{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.dos-col h2{font-family:'Archivo',sans-serif;text-transform:uppercase;line-height:1.04;
  font-variation-settings:'wdth' 66,'wght' 300;font-size:clamp(26px,3.5vw,42px);
  letter-spacing:.02em;text-wrap:balance}
.dos-col h2 b{font-variation-settings:'wdth' 70,'wght' 780;font-weight:400;display:block}
.dos-col p{color:rgba(224,232,246,.80);font-size:16px;line-height:1.78;margin-bottom:18px}
.osc .rotulo{color:rgba(214,226,244,.58)}
.lista-pasos{list-style:none;counter-reset:p;margin-top:8px}
.lista-pasos li{counter-increment:p;padding:16px 0 16px 46px;position:relative;
  border-top:1px solid rgba(var(--luz),.12);color:rgba(224,232,246,.82);font-size:15px}
.lista-pasos li:last-child{border-bottom:1px solid rgba(var(--luz),.12)}
.lista-pasos li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-size:11px;letter-spacing:.12em;color:rgba(var(--luz),.55);font-weight:600}
.lista-pasos b{color:#fff;font-weight:600}

.razones{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:8px}
.razon{border-top:2px solid var(--tinta);padding-top:16px}
.razon h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;
  font-weight:600}
.razon p{font-size:14.5px;color:var(--tinta-2);line-height:1.7}
.osc .razon{border-color:rgba(var(--luz),.5)}
.osc .razon p{color:rgba(224,232,246,.74)}

/* ------------------------------------------------------------------- pie */
footer.pie{padding:clamp(52px,6vw,76px) 0 0}
.pie-grid{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:48px}
.pie h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(214,226,244,.52);margin-bottom:16px;font-weight:500}
.pie li{list-style:none;margin-bottom:9px}
.pie a,.pie p{color:rgba(224,232,246,.80);font-size:14px}
.pie a:hover{color:#fff}
.pie .marca{width:150px;margin-bottom:18px}
.pie-legal{border-top:1px solid rgba(var(--luz),.12);padding:20px 0 26px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11.5px;color:rgba(206,218,238,.48);letter-spacing:.03em}

/* ---------------------------------------------------------------- KAOLAB */
body.kaolab{background:var(--hueso);color:#22242A}
.kaolab .kao-hero{position:relative;overflow:hidden;color:#22242A;
  background:linear-gradient(179deg,var(--arena) 0%,#E3DDD1 30%,var(--hueso-2) 62%,var(--hueso) 100%);
  padding:clamp(62px,9vw,104px) 0 clamp(56px,8vw,92px)}
.kao-sol{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 46% at 50% 8%,rgba(255,252,244,.96) 0%,
    rgba(var(--sol),.50) 28%,transparent 72%);filter:blur(34px)}
.kao-grano{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  opacity:.11;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.kaolab h1,.kaolab h2,.kaolab h3,.kaolab .t-nom,.kaolab .cab-sec h2{
  font-family:'Jost',sans-serif;font-weight:300;text-transform:none;letter-spacing:.01em;
  font-variation-settings:normal}
.kaolab h1{font-size:clamp(38px,6.6vw,72px);line-height:1.06;margin-bottom:22px}
.kaolab h1 b{font-weight:500}
.kaolab .bajada{color:#4A4740;max-width:50ch}
.kaolab .rotulo{color:#8A8377;letter-spacing:.3em}
.kaolab .pill.linea{border-color:rgba(34,36,42,.34);color:#22242A}
.kaolab .pill.linea:hover{background:rgba(34,36,42,.06)}
.kaolab .bloque.claro-frio{background:var(--hueso)}
.kaolab .tarjeta{box-shadow:0 16px 40px rgba(90,80,60,.10),0 1px 2px rgba(90,80,60,.06)}
.kaolab .t-nom{font-size:17px;line-height:1.3;letter-spacing:.005em}
.kaolab .t-cat,.kaolab .t-ir,.kaolab .precio small{color:#9A9186}
.kaolab .antes s,.kaolab .rot-antes{color:#7E756A}
.kaolab .antes s{text-decoration-color:rgba(126,117,106,.85)}
.kaolab .f-info h1{font-family:'Jost',sans-serif;font-weight:300;text-transform:none}
.kaolab .filete{background:linear-gradient(90deg,rgba(34,36,42,.05),rgba(34,36,42,.42),rgba(34,36,42,.05))}

/* ============================================================== movimiento
   El gesto de la marca es la luz fria entrando en el grafito. Hasta aca
   estaba congelada: esto la pone en el tiempo. Amanece una vez, al abrir,
   y despues la pieza se queda quieta. Nada se repite ni late.

   Todo cuelga de .js: si el navegador no corre el script, no se esconde
   nada y la pagina se ve entera igual. */

@keyframes luz-entra{from{opacity:0;transform:translate3d(-7%,-9%,0)}to{opacity:1;transform:none}}
@keyframes filo-entra{from{opacity:0;transform:translate3d(-11%,-11%,0)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes pool-sube{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes sube{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes barra-crece{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* la luz llega primero, el filo la sigue: es una sola luz, no dos */
.js .osc .cap.luz{animation:luz-entra 1150ms cubic-bezier(.16,.84,.34,1) both}
.js .osc .cap.filo{animation:filo-entra 1400ms cubic-bezier(.16,.84,.34,1) 170ms both}
.js .osc .cap.pool{animation:pool-sube 1250ms cubic-bezier(.16,.84,.34,1) 110ms both}
.js .osc .cap.rim{animation:aparecer 1000ms ease-out 300ms both}
.js .barra-luz{transform-origin:left center;
  animation:barra-crece 950ms cubic-bezier(.16,.84,.34,1) 240ms both}
.js .kao-sol{animation:aparecer 1300ms ease-out both}

/* el contenido de las cabeceras oscuras sube escalonado, una sola vez */
.js .osc>.env>.rotulo{animation:sube 700ms cubic-bezier(.2,.8,.3,1) 130ms both}
.js .osc>.env>h1{animation:sube 850ms cubic-bezier(.2,.8,.3,1) 230ms both}
.js .osc>.env>.bajada{animation:sube 850ms cubic-bezier(.2,.8,.3,1) 350ms both}
.js .osc>.env>.acciones,.js .osc>.env>.pill{animation:sube 850ms cubic-bezier(.2,.8,.3,1) 450ms both}
.js .kao-hero>.env>.rotulo{animation:sube 700ms cubic-bezier(.2,.8,.3,1) 130ms both}
.js .kao-hero>.env>h1{animation:sube 850ms cubic-bezier(.2,.8,.3,1) 230ms both}
.js .kao-hero>.env>.bajada{animation:sube 850ms cubic-bezier(.2,.8,.3,1) 350ms both}
.js .kao-hero>.env>.acciones{animation:sube 850ms cubic-bezier(.2,.8,.3,1) 450ms both}

/* lo que esta mas abajo espera a que llegues, y despues se queda quieto */
.js .aparece{opacity:0;translate:0 13px}
.js .aparece.visible{opacity:1;translate:0 0;
  transition:opacity .62s ease-out,translate .62s cubic-bezier(.2,.8,.3,1)}

/* La luz sigue viva despues de entrar: un vaiven lentisimo, de 26 segundos.
   No es un latido —no pulsa ni llama la atencion— es que el amanecer no se
   congela. Solo en escritorio: en el celular no vale la bateria. */
@keyframes luz-respira{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(2.5%,1.6%,0) scale(1.07)}}
@media (min-width:861px){
  .js .osc .cap.luz{animation:luz-entra 1150ms cubic-bezier(.16,.84,.34,1) both,
    luz-respira 26s ease-in-out 1300ms infinite alternate}
}

/* la foto se acerca apenas al pasar el mouse: la tarjeta reacciona */
.tarjeta .t-foto img{transition:scale .5s cubic-bezier(.2,.8,.3,1)}
.tarjeta:hover .t-foto img{scale:1.055}

/* tira que corre: lo unico que se mueve sin parar, y dice lo que vendes */
.tira-corre{overflow:hidden;background:var(--grafito-hondo);
  border-top:1px solid rgba(var(--luz),.10);border-bottom:1px solid rgba(var(--luz),.10)}
.tira-corre .riel{display:flex;width:max-content;
  animation:correr 42s linear infinite}
.tira-corre .tramo{display:flex;flex-shrink:0}
.tira-corre span{display:block;padding:15px 0;white-space:nowrap;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  color:rgba(226,234,248,.62)}
.tira-corre span i{font-style:normal;color:rgba(var(--luz),.34);padding:0 22px}
.tira-corre:hover .riel{animation-play-state:paused}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* WhatsApp siempre a mano: aparece al bajar y respira cada tanto */
.wa-flota{position:fixed;right:20px;bottom:20px;z-index:80;
  opacity:0;translate:0 18px;pointer-events:none;
  transition:opacity .45s ease-out,translate .45s cubic-bezier(.2,.8,.3,1)}
.wa-flota.visible{opacity:1;translate:0 0;pointer-events:auto}
.js .wa-flota.visible .pill{animation:respiro 9s ease-in-out 1.5s infinite}
@keyframes respiro{0%,88%,100%{scale:1}94%{scale:1.06}}
.wa-flota .pill{box-shadow:0 10px 30px rgba(8,9,12,.45)}
@media (max-width:640px){.wa-flota{right:14px;bottom:14px}}

/* al pasar de una pagina a otra, la foto del producto viaja hasta la ficha */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}

/* ------------------------------------------------------------------ aviso */
.saltar:focus{position:static!important;display:inline-block;margin:10px;padding:10px 16px;
  background:#fff;color:#1B1D22;border-radius:999px;font-size:12px;font-weight:600}
.pill:focus-visible,nav.menu a:focus-visible,.tarjeta:focus-visible,.cat:focus-visible,
.ver-mas:focus-visible{outline:2px solid rgba(120,170,255,.9);outline-offset:3px}
.aviso{background:#FFF4D6;color:#5A4A16;font-size:13px;padding:10px 0;text-align:center;
  letter-spacing:.02em}

/* ------------------------------------------------------------------ movil */
@media (max-width:860px){
  .f-grid{grid-template-columns:1fr}
  .top .env{min-height:58px;gap:14px}
  nav.menu{gap:14px}
  nav.menu a{font-size:10.5px;letter-spacing:.1em}
  .marca{width:112px}
}
@media (max-width:640px){
  .env{padding:0 18px}
  nav.menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(24,26,31,.98);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 18px 18px;
    border-bottom:1px solid rgba(var(--luz),.12)}
  nav.menu.abierto{display:flex}
  nav.menu a{width:100%;padding:12px 0;font-size:12.5px;
    border-bottom:1px solid rgba(var(--luz),.08)}
  .con-sub{width:100%;display:block}
  .flecha{display:none}
  .sub{position:static;display:block;background:none;box-shadow:none;border:0;
    padding:2px 0 8px;min-width:0;
    /* en el menú desplegable de celular no va ni centrado ni corrido */
    translate:none;text-align:left;border-radius:0}
  .sub a{padding:9px 0 9px 16px;font-size:11.5px;border-bottom:0;
    color:rgba(226,234,248,.60)}
  .menu-btn{display:flex;margin-left:auto;background:none;border:0;cursor:pointer;
    padding:10px;color:#fff}
  .menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .t-cuerpo{padding:14px 14px 18px}
  .t-nom{font-size:12.5px}
  .precio{font-size:15px}
  /* En el ancho de un celular la tarjeta tiene 134px utiles: el precio, el
     "Gs" y el "Ver" no entran los tres y el "Ver" terminaba pegado al borde.
     Se saca: la tarjeta entera ya es el link, y con el dedo eso se entiende
     solo. La flecha era una ayuda del mouse, no del pulgar. */
  .t-ir{display:none}
  .antes s{font-size:10.5px}
  .f-foto{padding:20px;min-height:260px}
  .tiras{gap:8px}
  .tira{width:62px;height:52px;padding:5px}
  /* En el celular la etiqueta va ARRIBA del valor, no al costado. Con la
     etiqueta al costado, una palabra larga que no puede partirse
     —"ACCIONAMIENTO"— empujaba su valor 16px a la derecha y la columna
     quedaba despareja; y al valor le quedaban 205px, que para una ficha de
     reformer son cinco renglones. Apilado no se desalinea nunca y el valor
     usa todo el ancho. */
  .dato{flex-direction:column;align-items:stretch;gap:3px;padding:13px 0}
  .dato b{flex:none}
  .cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat h3{font-size:12.5px;padding:14px 14px 4px;letter-spacing:.02em}
  .cat span{padding:0 14px;font-size:11.5px}
  .cat{padding-bottom:16px}
  .cat .t-foto{aspect-ratio:1/1;padding:14px}
  .hero .bajada{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .js .aparece{opacity:1;translate:none}
  .js .osc .cap,.js .barra-luz,.js .kao-sol,
  .js .osc>.env>*,.js .kao-hero>.env>*{animation:none!important}
  .tira-corre .riel{animation:none!important}
  .js .wa-flota.visible .pill{animation:none!important}
  .tarjeta:hover .t-foto img{scale:1}
  @view-transition{navigation:none}
}