:root{
  --navy:#00152B;
  --dark-blue--700:#00152B;
  --ink:#141821;
  --ink-soft:#48525f;
  --muted:#4f5a68;
  --line:#e6e6e6;
  --line-soft:#efefef;
  --line-strong:#c3c3c3;
  --line-hover:#a3a3a3;
  --fill-soft:#f8f8f8;
  --paper:#f5f5f5;
  --bg-page:#f5f5f5;
  --bg-card:#efefef;
  --white:#fff;
  --blue:#0077a8;
  --btn-blue:#0077a8;
  --blue-dark:#005f87;
  --btn-blue-dark:#005f87;
  --tint:rgb(227,242,253);
  --tint-text:rgb(0,110,165);
  --brand:#00bdff;
  --brand-dark:#0090c7;
  --stage:#efefef;
  --radius:12px;
  --radius-sm:8px;
  --max:1500px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Noto Sans',sans-serif;
  --focus-ring:0 0 0 3px rgba(0,189,255,.35);
  --btn-dur:.2s;
  --motion-dur:.6s;

  /* Fluid type scale */
  --fs-xs:clamp(.6875rem,.65rem + .15vw,.75rem);       /* ~11–12 */
  --fs-sm:clamp(.75rem,.7rem + .2vw,.8125rem);          /* ~12–13 */
  --fs-base:clamp(.875rem,.82rem + .22vw,.9375rem);     /* ~14–15 */
  --fs-md:clamp(.9375rem,.88rem + .25vw,1rem);          /* ~15–16 */
  --fs-lg:clamp(1rem,.94rem + .3vw,1.125rem);           /* ~16–18 */
  --fs-title:clamp(1.75rem,1.2rem + 2.2vw,3rem);        /* ~28–48 */
  --fs-section:clamp(1.375rem,1.1rem + 1.1vw,1.625rem); /* ~22–26 */

  /* Fluid space */
  --pad-x:clamp(16px,3.5vw,24px);
  --space-section:clamp(36px,5vw,64px);
  --space-hero:clamp(16px,2.5vw,20px) 0 clamp(32px,5vw,48px);
  --space-block:clamp(16px,2vw,22px);
  /* Proporcion de las columnas del hero. Subir --hero-gallery ensancha la card
     de la imagen; bajarla le pasa ancho a la columna de texto. */
  --hero-gallery:1.6fr;
  --hero-info:1fr;
  --gap-hero:clamp(28px,4.5vw,48px);
}

/* Achica la foto principal en desktop: le pasamos ancho de columna a
   Info en vez de dejarlo como espacio muerto (mismo mecanismo fr de
   siempre, solo que acá arrancamos de un --hero-gallery más chico). */
@media (min-width:1101px){
  :root{--hero-gallery:1.05fr;--gap-hero:clamp(40px,6vw,64px);}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body,button,input,select,textarea{
  font-family:var(--font);
}
body{
  margin:0;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
  background-color:#f5f5f5;
}
body.assistant-open{overflow:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.fancybox__container,.fancybox__caption,.fancybox__button{
  font-family:var(--font) !important;
}
/* El navbar (#macroled-menu) usa z-index:100000 !important — sin esto,
   el lightbox de Fancybox queda tapado por el navbar fijo. */
.fancybox__container{z-index:100010 !important;}
/* Scopeado (no global): un ":focus-visible" suelto pisaba también el buscador
   del navbar compartido (#macroled-menu), que ya tiene su propio anillo de foco
   en menu.css — se veían los dos superpuestos en la ficha y no en /nuevo-productos. */
.wrap :focus-visible,
.hero :focus-visible,
.detail :focus-visible,
.ai-panel :focus-visible,
.ai-launch:focus-visible,
.share-sheet :focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* Card blanca sobre fondo gris (cambio local). Padding fluido para mobile. */
main{padding:calc(26px + clamp(12px,2vw,24px)) clamp(12px,2vw,24px) 0;}
.wrap{
  max-width:var(--max);
  margin:0 auto 30px;
  padding:clamp(10px,1.5vw,16px) clamp(16px,5vw,60px);
  background:#fefefe;
  border-radius:10px;
}

/* Evita el flash de datos placeholder (nombre/SKU/specs) mientras el JS
   todavía no aplicó el producto real leído del embed CMS. El fallback en
   script.js (revealFicha) garantiza que esto se remueva igual si el CMS
   nunca aparece, para no dejar la ficha oculta. */
.wrap.is-hydrating .info,
.wrap.is-hydrating .crumb .here{
  opacity:0;
}
.info,
.crumb .here{
  transition:opacity .2s ease;
}

/* —— Site header —— */
.topbar{border-bottom:1px solid var(--line-soft);background:var(--white);}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2vw,20px) 0;gap:clamp(12px,2vw,24px);
}
.logo{
  font-weight:700;font-size:clamp(15px,1.2vw + .7rem,18px);letter-spacing:.08em;
  color:var(--navy);text-transform:uppercase;
}
.logo span{color:var(--brand);}
.mainnav{display:flex;gap:clamp(16px,2.5vw,28px);list-style:none;margin:0;padding:0;}
.mainnav a{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);transition:color .15s;
}
.mainnav a:hover{color:var(--navy);}
.search-btn{
  width:40px;height:40px;border:none;background:transparent;
  color:var(--navy);cursor:pointer;display:grid;place-items:center;
  flex:none;
}
.search-btn:hover{color:var(--btn-blue);}

/* —— Crumb —— (mismo estilo que la página de productos: separador "›", 13px) */
.crumb{
  padding:clamp(2px,1.5vw,15px) 0 clamp(6px,1vw,8px);
  font-size:13px;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  line-height:1.5;
}
.crumb a:hover{text-decoration:underline;color:var(--navy);}
.crumb .sep{opacity:.4;}
.crumb .here{color:var(--brand-dark);font-weight:700;}

/* —— Product hero —— */
.hero{
  display:grid;
  grid-template-columns:minmax(0,var(--hero-gallery)) minmax(0,var(--hero-info));
  gap:var(--gap-hero);
  padding:var(--space-hero);
  align-items:start;
}
@media (min-width:1101px){
  .hero{padding-bottom:clamp(56px,7vw,76px);}
}

/* Gallery — thumbs left, stage right, share under thumbs */
.gallery{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  grid-template-areas:
    "thumbs main"
    "thumbs share";
  gap:12px;
  align-items:start;
  position:sticky;top:28px;
  z-index:2;
}
.thumbs{
  grid-area:thumbs;
  display:flex;flex-direction:column;gap:10px;
  overflow:visible;
  /* Alto fijado por JS (syncThumbsHeight en script.js) para que la columna
     de miniaturas nunca pase el alto de la imagen principal — cae acá,
     no hasta el botón Compartir. Sin JS todavía corrido, cae a su alto
     natural (sin scroll de todas formas, ver .thumb más abajo). */
}
.thumb{
  width:100%;max-height:88px;padding:0;border-radius:10px;
  border:2px solid transparent;background:var(--paper);
  cursor:pointer;overflow:hidden;flex:1 1 0;
  /* Piso de seguridad: si por lo que sea .thumbs no tiene un alto explícito
     (JS todavía no corrió / midió mal), que las miniaturas caigan a esto en
     vez de colapsar a una tira invisible con flex-basis:0. */
  min-height:40px;
  transition:border-color .15s,background .15s;
}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6px;}
.thumb-fallback{
  display:block;width:100%;height:100%;
  background:linear-gradient(145deg,#e8eef2,#d5dde4);
}
.thumb.is-video{position:relative;}
.thumb.is-video img{opacity:.92;}
.thumb-play{
  position:absolute;inset:0;margin:auto;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,21,43,.78);color:#fff;
  pointer-events:none;
  box-shadow:0 2px 10px rgba(0,21,43,.35);
  z-index:1;
}
.thumb-play svg{display:block;margin-left:2px;width:16px;height:16px;}
.thumb.is-active{
  border-color:var(--brand);
}
.thumb:hover:not(.is-active){background:var(--tint);}

.gallery-main{grid-area:main;display:flex;flex-direction:column;gap:12px;min-width:0;}
.stage-wrap{position:relative;z-index:2;}
.stage-wrap.is-zooming{z-index:8;}
.gallery:has(.stage-wrap.is-zooming){z-index:6;}
.stage{
  position:relative;
  aspect-ratio:1;
  border-radius:var(--radius-sm);
  background:var(--bg-page);
  overflow:hidden;
  cursor:zoom-in;
}
.stage.is-video{cursor:pointer;}
.stage-video{
  width:100%;height:100%;
  object-fit:contain;
  background:#0b1220;
  display:block;
  position:absolute;inset:0;z-index:1;
}
.stage-video[hidden]{display:none !important;}
.stage-img{
  width:100%;height:100%;
  object-fit:contain;padding:clamp(20px,4vw,36px) clamp(16px,3vw,28px);
  pointer-events:none;user-select:none;
  position:relative;z-index:0;
}
.stage-play{
  position:absolute;inset:0;margin:auto;
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,21,43,.72);color:#fff;
  pointer-events:none;z-index:2;
  box-shadow:0 8px 24px rgba(0,21,43,.28);
}
.stage-play[hidden]{display:none !important;}
.stage-play svg{display:block;margin-left:3px;}
.stage.is-video .zoom-lens,
.stage.is-video ~ .zoom-pane{display:none !important;}
.stage-badge{
  position:absolute;top:clamp(10px,2vw,16px);left:clamp(10px,2vw,16px);z-index:3;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:rgba(255,255,255,.92);
  border-radius:4px;padding:6px 10px;
  pointer-events:none;
}
.stage-badge[hidden]{display:none !important;}
.smart-badge{
  position:absolute;top:clamp(10px,2vw,16px);left:clamp(10px,2vw,16px);z-index:3;
  background:linear-gradient(135deg,#00bdff,#0090c7);color:#fff;
  border-radius:999px;padding:.45rem .7rem;font-size:.75rem;font-weight:500;
  letter-spacing:.03em;line-height:1;
  display:flex;align-items:center;gap:5px;
  box-shadow:0 3px 10px rgba(0,144,199,.35);white-space:nowrap;
  pointer-events:none;
}
.smart-badge svg{flex:none;}
.smart-badge[hidden]{display:none !important;}
.stage-actions{
  position:absolute;top:16px;right:16px;z-index:3;
  display:flex;align-items:center;gap:8px;
}
.zoom-btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);background:var(--white);
  border-radius:var(--radius-sm);padding:9px 12px;
  font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;
}
.zoom-btn--share-mobile{display:none;}
.zoom-btn:hover{
  border-color:var(--line-hover);background:var(--bg-card);color:var(--ink);
}

.zoom-lens{
  position:absolute;z-index:2;pointer-events:none;
  width:150px;height:150px;
  border:1px solid rgba(255,255,255,.95);
  background:rgba(170,182,198,.32);
  box-shadow:inset 0 0 0 1px rgba(0,21,43,.1);
  border-radius:4px;
  display:none;
}
.stage-wrap.is-zooming .zoom-lens{display:block;}
.zoom-pane{
  position:absolute;top:0;left:calc(100% + 14px);z-index:50;
  width:min(440px,46vw);aspect-ratio:1;
  border-radius:12px;border:1px solid var(--line);
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:0 18px 48px rgba(0,21,43,.18);
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .12s,visibility .12s;
}
.zoom-pane.is-below{
  top:calc(100% + 14px);left:0;width:100%;aspect-ratio:16/10;
}
.stage-wrap.is-zooming .zoom-pane{
  opacity:1;visibility:visible;
}

.gallery-actions{
  grid-area:share;
  display:flex;align-items:center;justify-content:flex-start;
  align-self:start;
  padding-top:0;
}
.share-wrap{position:relative;}
.share-btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);background:var(--white);
  border-radius:var(--radius-sm);padding:8px 12px;
  font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;
}
.share-btn:hover,.share-btn[aria-expanded="true"]{
  color:var(--tint-text);border-color:var(--tint-text);background:var(--tint);
}
.share-btn svg{flex:none;}
.share-menu{
  position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;
  min-width:200px;padding:6px;
  background:var(--white);border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,21,43,.12);
}
.share-menu[hidden]{display:none;}
.share-opt{
  width:100%;display:flex;align-items:center;gap:10px;
  border:none;background:transparent;border-radius:7px;
  padding:10px 12px;font-size:13px;font-weight:500;color:var(--ink);
  cursor:pointer;text-align:left;text-decoration:none;
}
.share-opt:hover{background:var(--paper);}
.share-opt svg{flex:none;color:var(--muted);}
.share-toast{
  position:fixed;left:50%;bottom:28px;z-index:90;
  transform:translateX(-50%) translateY(12px);
  background:var(--navy);color:#fff;
  font-size:13px;font-weight:600;
  padding:12px 18px;border-radius:999px;
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  box-shadow:0 10px 28px rgba(0,21,43,.25);
}
.share-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}

/* Mobile share sheet — oculto en desktop */
.share-sheet{display:none;}

/* Info column — sin max-width fijo para aprovechar el ancho con galería más ancha */
.hero .info{min-width:0;position:relative;z-index:1;padding:0 clamp(8px,1.5vw,20px);}
@media (min-width:1101px){
  .hero .info{padding:0 clamp(24px,3vw,44px);}
}
.eyebrow{
  display:block;margin:0 0 clamp(8px,1.5vw,12px);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.info h1{
  margin:0 0 clamp(16px,2.5vw,30px);
  font-size:var(--fs-title);
  font-weight:600;letter-spacing:-.02em;line-height:1.15;
  color:var(--navy);
  text-wrap:balance;
}
.lead{
  margin:0 0 clamp(16px,2.2vw,25px);
  font-size:15px;line-height:1.55;color:#7e8691;
  text-wrap:pretty;
}

.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 clamp(22px,3vw,30px);font-size:var(--fs-sm);color:var(--muted);
}
.meta b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;}
.meta .dot{width:3px;height:3px;border-radius:50%;background:#c5cad3;}

.sku-copy-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:4px;padding:2px;border:0;background:transparent;color:#48525f;
  cursor:pointer;border-radius:6px;vertical-align:middle;line-height:0;
  transition:color .15s ease;
}
.sku-copy-btn:hover{color:#141821;background:transparent;}
.sku-copy-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.sku-copy-btn.copied{color:#0086b5;}
.sku-copy-btn .sku-copy-check{display:none;}
.sku-copy-btn.copied .sku-copy-icon{display:none;}
.sku-copy-btn.copied .sku-copy-check{display:inline-block;}

.sku-copy-msg{
  position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  background:var(--navy);color:#fff;
  font-size:12px;font-weight:600;line-height:1;
  padding:7px 10px;border-radius:8px;
  box-shadow:0 8px 20px rgba(0,21,43,.2);
  opacity:0;pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
  z-index:20;
}
.sku-copy-msg::after{
  content:"";position:absolute;left:50%;top:100%;
  width:8px;height:8px;background:var(--navy);
  transform:translateX(-50%) translateY(-50%) rotate(45deg);
}
.sku-copy-msg.show{opacity:1;transform:translateX(-50%) translateY(0);}
.sku-copy-msg svg{flex:none;width:12px;height:12px;}

.chars-label{
  display:block;margin:0 0 10px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}

/* —— Variantes CMS —— */
#product-variants,
.container_variants{
  display:flex;flex-direction:column;gap:18px;
  width:100%;margin:0 0 22px;padding-top:22px;
  border-top:1px solid var(--line);
}
#product-variants[hidden],
.container_variants[hidden]{display:none;}
.variant-group{display:flex;flex-direction:column;gap:8px;width:100%;}
.variant-label{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.variant-chips{display:flex;flex-wrap:wrap;gap:8px;}
.variant-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:5px 12px;
  border:1.5px solid #edecec;border-radius:100px;
  background:var(--white);color:var(--ink);
  font-size:var(--fs-base);font-weight:500;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
  font-family:var(--font);
}
.variant-chip:hover{border-color:var(--brand);background:var(--tint);color:var(--tint-text);}
.variant-chip.active{
  background:var(--tint);border-color:var(--brand);
  color:var(--tint-text);font-weight:600;cursor:default;
}
.variant-chip-radio{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}
.variant-swatch{
  width:14px;height:14px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(20,24,33,.14);
}
.variant-chip.active .variant-swatch{
  box-shadow:inset 0 0 0 1px rgba(0,189,255,.25),0 0 0 2px rgba(0,189,255,.12);
}
.variant-chip.is-unavailable{
  color:var(--muted);border-style:dashed;border-color:#d8d6d6;background:var(--white);
  text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:currentColor;
  opacity:.5;
}
.variant-chip.is-unavailable .variant-swatch{opacity:.35;filter:grayscale(.4);}
.variant-chip.is-unavailable:hover{
  border-style:dashed;border-color:var(--brand);background:var(--white);color:var(--muted);
  opacity:.8;
}
.cms-product-source,
.cms-variants-source{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

.chars-block{
  margin:0 0 clamp(32px,4vw,42px);
  padding-top:clamp(12px,1.6vw,18px);
}
.chars-block[hidden]{display:none !important;}
.chars-block:has(.quick-specs[hidden]),
.chars-block:has(.quick-specs[data-count="0"]){display:none !important;}
.quick-specs{
  display:inline-grid;
  width:fit-content;
  max-width:100%;
  grid-auto-flow:column;
  grid-auto-columns:minmax(7.5rem,max-content);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:14px 8px;
  overflow:hidden;
  vertical-align:top;
  box-shadow:0 1px 2px rgba(10,14,25,.03),0 6px 16px rgba(10,14,25,.04);
}
.quick-specs[data-count="3"]{
  display:grid;
  width:100%;
  grid-auto-flow:unset;
  grid-auto-columns:unset;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.quick-specs[data-count="0"]{display:none;}
.qspec{padding:0 clamp(16px,2.4vw,24px);text-align:left;}
.qspec:not([hidden]) + .qspec:not([hidden]){border-left:1px solid var(--line);}
.qspec .label{
  display:block;font-size:var(--fs-sm);font-weight:500;
  color:var(--muted);margin-bottom:4px;
}
.qspec .val{font-size:var(--fs-md);font-weight:500;color:var(--ink);}

/* —— Trust block: línea divisoria simple, sin fondo de color —— */
.trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:14px 12px;
  margin:clamp(18px,2.5vw,25px) 0 0;
  padding-top:clamp(18px,2.5vw,25px);
  background:transparent;
  border-top:1px solid var(--line-soft);
}
.trust-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  font-size:var(--fs-xs);font-weight:500;line-height:1.35;color:var(--muted);
}
.trust-item[hidden]{display:none;}
.trust-item svg{color:var(--navy);flex:none;}
.trust-lines{
  display:flex;flex-direction:column;gap:2px;
}
.trust-lines [hidden]{display:none !important;}

/* —— Aviso de instalación (tecla Smart Roma / Tokio) —— */
.smart-warning{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:clamp(16px,2.2vw,22px);
  padding:14px 16px;
  border:1px solid #f2d9a6;border-radius:10px;
  background:#fdf3e0;
  color:#7a5518;
}
.smart-warning[hidden]{display:none !important;}
.smart-warning svg{flex:none;margin-top:1px;color:#b3811f;}
.smart-warning p{margin:0;font-size:var(--fs-sm);line-height:1.5;}
.smart-warning strong{color:#5c3f10;}

/* —— Smart app banner (Roma / Tokio smart) —— */
/* .smart-banner-section reusa .wrap para el ancho/max-width/centrado (igual
   cálculo que el resto de los containers, en todos los breakpoints). El bug
   de las veces anteriores: solo se anulaba el padding-top/bottom del wrap,
   pero el padding IZQUIERDO/DERECHO seguía activo — como .smart-banner vive
   ADENTRO de ese padding, su fondo oscuro quedaba más angosto que el borde
   visible (blanco) de las demás cards, que sí llega hasta el borde del wrap.
   Acá se anula el padding completo del wrap (los 4 lados) y ese espacio se
   suma como padding interno de .smart-banner, así el fondo del banner llega
   exactamente al mismo borde externo que el resto de los containers. */
.smart-banner-section > .wrap{
  padding:0;
  margin-bottom:0;
  background:transparent;
  border-radius:0;
}
.smart-banner-section:has(.smart-banner[hidden]){display:none;}
.smart-banner{
  position:relative;
  margin-top:clamp(22px,3vw,30px);
  margin-bottom:clamp(22px,3vw,30px);
  min-height:clamp(240px,26vw,300px);
  border-radius:20px;
  overflow:hidden;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  background:
    radial-gradient(38% 55% at 80% 12%, rgba(0,110,230,.18) 0%, transparent 72%),
    radial-gradient(32% 45% at 18% 75%, rgba(120,175,255,.22) 0%, transparent 72%),
    radial-gradient(26% 35% at 42% 38%, rgba(255,225,185,.12) 0%, transparent 72%),
    linear-gradient(175deg,rgba(255,255,255,.6) 0%,rgba(242,246,251,.6) 60%,rgba(238,243,250,.6) 100%);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 20px 40px -20px rgba(20,40,80,.16),
    0 4px 14px rgba(20,40,80,.08);
  border:1px solid rgba(255,255,255,.5);
  padding:clamp(40px,5vw,64px) clamp(48px,6.5vw,88px);
}
/* Guiño tech, bien leve: grano fino sobre el glow celeste del fondo. */
.smart-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.1;
  pointer-events:none;
}
.smart-banner[hidden]{display:none !important;}
.smart-banner__content{
  position:relative;
  z-index:1;
  flex:1 1 320px;min-width:0;max-width:70%;
}
.smart-banner__header{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin-bottom:14px;
}
.smart-banner__logo{
  height:clamp(20px,2vw,26px);width:auto;
  color:var(--brand);
}
.smart-banner__tag{
  font-size:clamp(.95rem,1.3vw,1.1rem);
  font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.smart-banner__copy{
  margin:0 0 24px;max-width:560px;
  font-size:var(--fs-md);font-weight:500;
  color:var(--ink-soft);line-height:1.55;
}
.smart-banner__invite{
  margin:0 0 8px;max-width:560px;
  font-size:clamp(1.05rem,.95rem + .5vw,1.25rem);font-weight:600;
  color:var(--ink-soft);line-height:1.3;
}
.smart-banner__stores{
  display:flex;flex-wrap:wrap;gap:12px;
}
.smart-store-btn{
  display:inline-flex;align-items:center;gap:11px;
  flex:0 1 auto; /* Webflow ships a bare a{flex:1;} rule; sin esto se estira full-width */
  min-height:52px;padding:10px 22px;
  border-radius:var(--radius-sm);
  background:var(--navy);
  border:1px solid var(--navy);
  color:#fff;
  font-size:12px;font-weight:700;line-height:1.2;
  box-shadow:0 8px 20px -6px rgba(0,21,43,.45);
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.smart-store-btn svg{flex:none;width:24px;height:24px;}
.smart-store-btn:hover{
  background:var(--brand-dark);
  border-color:var(--brand-dark);
  box-shadow:0 10px 24px -6px rgba(0,144,199,.5);
  transform:translateY(-2px);
}
.smart-store-btn__sub{display:block;opacity:.75;font-weight:500;font-size:10px;color:#fff;}
.smart-store-btn strong{display:block;font-size:14px;font-weight:800;letter-spacing:.01em;color:#fff;}
.smart-banner__media{
  position:absolute;
  z-index:1;
  right:clamp(16px,8vw,114px);
  top:clamp(14px,2vw,20px);
  width:clamp(190px,17vw,220px);
  pointer-events:none;
}
.smart-banner__media::before{
  content:"";
  position:absolute;
  inset:-25% -35%;
  background:radial-gradient(circle,rgba(0,110,230,.16) 0%,transparent 68%);
  filter:blur(18px);
  z-index:0;
}
.smart-banner__media img{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(20,40,80,.22));
}
@media (max-width:760px){
  .smart-banner{flex-direction:column;text-align:center;padding-bottom:0;}
  .smart-banner__content{flex:1 1 auto;width:100%;max-width:100%;}
  .smart-banner__header{align-items:center;}
  .smart-banner__copy,
  .smart-banner__invite{margin-left:auto;margin-right:auto;}
  .smart-banner__stores{justify-content:center;width:100%;margin-bottom:20px;}
  .smart-banner__media{
    position:relative;right:auto;top:auto;
    width:clamp(150px,42vw,200px);
    height:clamp(110px,80vw,226px);
    margin:4px auto 0;
    overflow:hidden;
  }
  .smart-banner__media img{
    position:absolute;top:0;left:50%;
    width:100%;height:auto;
    transform:translateX(-50%);
  }
}
@media (max-width:480px){
  .smart-store-btn{flex:1;min-width:calc(50% - 6px);justify-content:center;padding:10px 12px;}
}

.trust-ally,
.distribution-note{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);
  color:var(--muted);font-size:var(--fs-xs);font-weight:600;line-height:1.4;
}
.trust-ally img,
.distribution-note img{
  display:block;height:26px;width:auto;max-width:160px;object-fit:contain;
}
.distribution-note{
  justify-content:center;text-align:center;
  margin-top:clamp(24px,3vw,34px);padding-top:18px;
}

/* —— CTA stack: jerarquía nueva ——
   Fila 1 (.actions): ficha técnica (fuerte, más ancho) + catálogo (secundario)
   Fila 2 (.cta-utility): comparar (pill) + preguntá (link, terciario) */
.cta-stack{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(20px,3vw,28px);}

.actions{display:flex;gap:8px;margin:0;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:0 0 calc(50% - 4px);min-width:0;
  min-height:44px;padding:12px 16px;border-radius:var(--radius-sm);
  font-family:var(--font);
  font-size:var(--fs-base);font-weight:600;letter-spacing:.02em;cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{
  background:var(--btn-blue);color:#fff;
}
.btn-primary:hover{
  background:var(--btn-blue-dark);
  box-shadow:0 6px 16px rgba(0,119,168,.22);
}
.btn-ghost{
  background:var(--white);color:var(--ink);border-color:var(--line-strong);
}
.btn-ghost:hover{
  background:var(--bg-card);border-color:var(--line-hover);
}
.btn svg{flex:none;}
.actions .btn[hidden],
.actions[hidden]{display:none !important;}

/* Fila utilitaria: comparar izq + preguntá der.
   Grid + !important: Webflow suele forzar button/label a block/100% y los apila. */
.cta-utility{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  justify-items:stretch;
  column-gap:12px;
  row-gap:0;
  width:100%;
}
.cta-utility > .compare-row{
  grid-column:1;
  justify-self:start;
  width:auto !important;
  max-width:100%;
}
.cta-utility > .btn-ai{
  grid-column:2;
  justify-self:end;
  width:auto !important;
  max-width:100%;
  white-space:nowrap;
}

/* Preguntá por este producto — bajado a link terciario, ya no compite con los botones */
.btn-ai{
  width:auto !important;margin:0 !important;
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;
  min-height:auto;padding:6px 0;border:none !important;border-radius:0;
  background:transparent !important;
  font-size:var(--fs-sm);font-weight:600;color:var(--btn-blue);cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:text-decoration-color var(--btn-dur) var(--ease),color var(--btn-dur) var(--ease);
}
.btn-ai:hover{
  background:transparent;color:var(--btn-blue-dark);
  text-decoration-color:currentColor;
}
.btn-ai svg{color:currentColor;}

/* Unified button / control hovers */
.btn,
.btn-ai,
.zoom-btn,
.share-btn,
.dl-card__btn,
.nl button,
.ai-send,
.ai-chip,
.ai-close,
.variant-chip,
.compare-row{
  transition:
    background var(--btn-dur) var(--ease),
    border-color var(--btn-dur) var(--ease),
    color var(--btn-dur) var(--ease),
    transform var(--btn-dur) var(--ease),
    box-shadow var(--btn-dur) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,
  .zoom-btn:hover,
  .share-btn:hover,
  .nl button:hover,
  .ai-send:hover,
  .ai-chip:hover,
  .compare-row:hover,
  .dl-card:hover .dl-card__btn{
    transform:translateY(-1px);
  }
  .btn:active,
  .btn-ai:active,
  .zoom-btn:active,
  .share-btn:active,
  .nl button:active,
  .ai-send:active,
  .compare-row:active{
    transform:translateY(0) scale(.98);
  }
}

/* —— Agregar a comparación: pill clickeable, consistente con variant-chip —— */
.compare-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.compare-row{
  display:inline-flex !important;align-items:center;gap:9px;
  width:auto !important;
  min-height:40px;padding:9px 12px;
  margin-left:-12px; /* compensa el padding para alinear con el borde de los botones de arriba */
  border:none;
  border-radius:999px;
  background:transparent;
  font-size:var(--fs-base);font-weight:600;letter-spacing:.02em;
  color:var(--ink);cursor:pointer;user-select:none;margin-bottom:0;
}
.compare-row:hover{
  background:transparent;
  color:var(--tint-text);
}
.compare-row:has(input:checked){
  background:transparent;color:var(--tint-text);font-weight:700;
}
.compare-row:has(input:focus-visible){
  box-shadow:var(--focus-ring);
}
.compare-row.row-disabled{opacity:.45;cursor:not-allowed;color:var(--ink);}
.compare-row .cb-wrap{position:relative;width:16px;height:16px;flex:none;}
.compare-row .cb-wrap input{
  position:absolute;inset:0;opacity:0;margin:0;cursor:inherit;
  width:100%;height:100%;z-index:1;
}
.compare-row .cb{
  width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-strong);
  background:#fff;display:grid;place-items:center;flex:none;
  pointer-events:none;
  transition:background var(--btn-dur) var(--ease),border-color var(--btn-dur) var(--ease);
}
.compare-row:hover .cb{border-color:var(--btn-blue);}
.compare-row .cb svg{width:10px;height:10px;opacity:0;color:#fff;}
.compare-row input:checked + .cb{background:var(--btn-blue);border-color:var(--btn-blue);}
.compare-row input:checked + .cb svg{opacity:1;}
.compare-msg{
  margin:0;
  font-size:12px;
  color:#d1453b;
  display:none;
}
.compare-msg.is-visible{display:block;}

body.assistant-open .ai-launch{
  visibility:hidden;
  pointer-events:none;
}
@media (max-width:640px){
  .compare-checkbox{font-size:16px;}
  .compare-row{font-size:14px;}
}

/* Tabs below hero */
.detail{
  padding:0;
}
.tabs{
  display:flex;gap:4px;border-bottom:1px solid var(--line);
  margin-bottom:8px;
  /* Solo scroll horizontal (mobile la hace swipeable) — con pan-y habilitado
     acá tambien, un swipe vertical que arrancaba sobre las tabs quedaba
     "atrapado" por este elemento en vez de scrollear la página normalmente. */
  touch-action:pan-x;
}
.tab{
  appearance:none;border:none;background:transparent;
  padding:clamp(12px,2vw,16px) clamp(12px,2vw,18px) clamp(10px,1.5vw,14px);
  font-size:var(--fs-base);font-weight:600;
  color:var(--muted);cursor:pointer;position:relative;
  white-space:nowrap;transition:color .15s;
  min-height:44px;
}
.tab:hover{color:var(--ink);}
.tab.is-active{color:var(--btn-blue);}
.tab.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:var(--btn-blue);border-radius:2px 2px 0 0;
}
.tab-panel{display:none;padding:clamp(14px,2vw,20px) 0 8px;}
.tab-panel.is-active{display:block;}

.spec-group{border-bottom:1px solid var(--line);}
.spec-group:first-child{border-top:1px solid var(--line);}
.spec-group-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(12px,2vw,14px) clamp(12px,2vw,16px);border:none;background:#e7f2f7;cursor:pointer;text-align:left;
  transition:background .15s ease;
  min-height:48px;
}
.spec-group-head:hover{background:#d9ebf3;}
.sg-title{
  display:inline-flex;align-items:center;gap:10px;min-width:0;
}
.sg-title svg{
  width:18px;height:18px;flex:none;color:var(--btn-blue);
}
.sg-title-text{font-size:var(--fs-base);font-weight:600;color:var(--navy);}
.sg-toggle{
  font-size:19px;line-height:1;font-weight:400;color:var(--navy);
  width:18px;text-align:center;flex:none;
}

.spec-body{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.spec-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(8px,2vw,12px);
  padding:clamp(12px,2vw,15px) clamp(12px,2vw,16px);border-top:1px solid var(--line-soft);
  font-size:var(--fs-sm);
}
.spec-row:first-child{border-top:none;}
.spec-row[hidden],
.spec-group[hidden],
.qspec[hidden]{display:none !important;}
.spec-row .k{
  color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;min-width:0;
}
.spec-row .v{color:var(--ink);font-weight:500;text-align:left;}

/* Tooltip: label normal + ícono outline discreto (sin subrayado) */
.spec-tip{
  appearance:none;border:none;background:transparent;padding:0;margin:0;
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:inherit;font-weight:inherit;color:inherit;
  text-align:left;cursor:help;
  transition:color .15s;
}
.spec-tip__mark{
  flex:none;width:14px;height:14px;color:#a2acbb;
  transition:color .15s,transform .15s;
}
.spec-tip:hover,
.spec-tip:focus-visible,
.spec-tip.is-open{
  color:var(--tint-text);
  outline:none;
}
.spec-tip:hover .spec-tip__mark,
.spec-tip:focus-visible .spec-tip__mark,
.spec-tip.is-open .spec-tip__mark{
  color:var(--btn-blue);
}
.tip-bubble{
  position:fixed;z-index:2000;
  max-width:min(280px,calc(100vw - 24px));
  padding:12px 14px;
  background:#fff;
  color:var(--ink);
  font-family:var(--font);
  font-size:12.5px;font-weight:500;line-height:1.45;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,21,43,.12), 0 1px 2px rgba(0,21,43,.04);
  pointer-events:none;
  opacity:0;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;
}
.tip-bubble.show{opacity:1;transform:translateY(0);}
.tip-bubble::after{
  content:"";position:absolute;left:var(--tip-arrow-x,50%);bottom:-6px;
  width:10px;height:10px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);
}
.tip-bubble.is-below::after{
  bottom:auto;top:-6px;
  border-right:none;border-bottom:none;
  border-left:1px solid var(--line);border-top:1px solid var(--line);
}
.tip-bubble__title{
  display:block;margin:0 0 4px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);
}
.tip-bubble__body{display:block;color:var(--ink-soft);}

.flat-table{border-bottom:1px solid var(--line);}
.flat-table .spec-row:first-child{border-top:none;}
#commercialTable.spec-body .spec-row:first-child{border-top:none;}

.dl-list{
  display:flex;flex-direction:column;gap:12px;
  max-width:720px;
}
.dl-card{
  display:flex;align-items:center;gap:clamp(12px,2vw,16px);
  padding:clamp(12px,2vw,16px) clamp(14px,2vw,18px);
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  text-decoration:none;color:inherit;
  transition:
    border-color var(--btn-dur) var(--ease),
    background var(--btn-dur) var(--ease),
    transform var(--btn-dur) var(--ease),
    box-shadow var(--btn-dur) var(--ease);
}
.dl-card:hover{
  border-color:var(--line-strong);background:#fafbfc;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,21,43,.06);
}
.dl-card[hidden]{display:none !important;}
.dl-card__icon{
  flex:none;width:40px;height:48px;
  display:grid;place-items:center;
  color:var(--btn-blue);
}
.dl-card__icon svg{width:36px;height:44px;display:block;}
.dl-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dl-card__title{
  display:block;
  margin:0;
  font-size:var(--fs-md);font-weight:700;color:var(--ink);line-height:1.25;
}
.dl-card__meta{
  display:block;
  margin:0;
  font-size:var(--fs-sm);font-weight:400;color:var(--ink-soft);line-height:1.35;
}
.dl-card__btn{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:10px 18px;
  border-radius:10px;
  background:var(--bg-card);
  color:var(--ink);
  font-size:var(--fs-sm);font-weight:700;
  transition:background .15s,color .15s;
}
.dl-card:hover .dl-card__btn{background:#e4e6ea;}
@media (max-width:560px){
  .dl-card{flex-wrap:wrap;gap:12px;}
  .dl-card__btn{width:100%;justify-content:center;}
}

/* Compatible / Related products (home cards + slider) */
.ml-related-products {
  --ml-grey-100: #fafafa;
  --ml-grey-200: #f5f5f5;
  --ml-grey-600: #5d5c5c;
  --ml-grey-800: #1c1c1a;
  --ml-grey-900: #0a0a0a;
  --ml-light-blue-500: #00bdff;
  --ml-light-blue-700: #0086b5;
  --ml-light-blue-800: #00688c;
  /* Este embed vive fuera de <main> en Webflow, así que no hereda su
     padding lateral — lo replicamos acá para que el wrap quede alineado
     con el card principal (mismo left/right que main{padding:...}). */
  padding: 0 clamp(12px,2vw,24px);
  background: transparent;
  overflow: hidden;
}
.ml-related-products[hidden]{display:none !important;}
.ml-related-products > .wrap{
  padding-top: 30px;
}
.ml-related-products__head{
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  margin-bottom:clamp(8px,1.5vw,12px);
}
.ml-related-products__head h2{
  margin:0;
  font-size:clamp(1.5rem,1.15rem + 1.35vw,1.85rem);
  font-weight:600;color:var(--navy);letter-spacing:-.02em;line-height:1.15;
  text-wrap:balance;
}
.ml-related-products__head .link-more{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem 0;
  border:0;
  background:transparent;
  color:var(--ml-light-blue-700);
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  transition:color .2s,transform .2s,filter .2s;
}
.ml-related-products__head .link-more span{
  display:inline-block;
  transition:transform .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .ml-related-products__head .link-more:hover{
    color:var(--ml-light-blue-800);
    filter:brightness(.92);
    transform:translateY(-1px);
  }
  .ml-related-products__head .link-more:hover span{
    transform:translateX(4px);
  }
}
.ml-related-products__viewport{
  position:relative;
  width:100%;
}
.ml-related-products__track{
  display:flex;
  width:100%;
  gap:1rem;
  margin-inline:auto;
  padding:1.25rem 0 1rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:.25rem;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}
.ml-related-products__track.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
  scroll-snap-type:none;
}
.ml-related-products__track.is-dragging .ml-product-card{pointer-events:none;}
.ml-related-products__track::-webkit-scrollbar{display:none;}
.ml-related-products__track .ml-product-card{
  flex:0 0 calc((100% - 3rem) / 4);
  min-width:min(240px, 60vw);
  background:#fff;
  box-shadow:2px 3px 20px 2px rgba(0,17,33,.04);
  scroll-snap-align:start;
  border: solid 1px #f1f1f1;
}
.ml-related-products__controls{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  margin-top:.5rem;
}
.ml-related-products__controls[hidden]{display:none;}
.ml-related-products__progress{
  position:relative;
  flex:0 0 clamp(6rem,10vw,9rem);
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(0,13,25,.12);
}
.ml-related-products__progress span{
  position:absolute;
  inset:0 auto 0 0;
  border-radius:inherit;
  background:var(--ml-light-blue-700);
  opacity:0;
  transition:transform .2s ease,width .2s ease,opacity .2s ease;
}
.ml-related-products__progress.has-progress span{opacity:.72;}
.ml-related-products__arrows{
  position:absolute;
  inset:1.25rem 0 1rem;
  z-index:3;
  pointer-events:none;
}
.ml-related-products__arrows[hidden]{display:none;}
.ml-related-products__nav{
  position:absolute;
  top:50%;
  display:grid;
  place-items:center;
  width:2.625rem;
  height:2.625rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(0,21,43,.1);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ml-light-blue-500);
  cursor:pointer;
  pointer-events:auto;
  transition:background .2s,color .2s,box-shadow .2s,opacity .2s,transform .2s;
}
.ml-related-products__nav svg{
  width:1.125rem;height:1.125rem;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.ml-related-products__nav[data-related-prev]{
  left:0;
  transform:translateY(-50%);
}
.ml-related-products__nav[data-related-next]{
  right:0;
  transform:translateY(-50%);
}
.ml-related-products__nav:hover{
  background:#fff;
  color:#007ba8;
  box-shadow:inset 0 1px 0 #fff,0 7px 20px rgba(0,87,119,.16);
}
.ml-related-products__nav[data-related-prev]:hover{
  transform:translate(-2px,-50%);
}
.ml-related-products__nav[data-related-next]:hover{
  transform:translate(2px,-50%);
}
.ml-related-products__nav:active{
  background:#f2fbfe;color:#006b92;scale:.94;
}
.ml-related-products__nav:disabled{
  opacity:0;cursor:default;pointer-events:none;
}
.ml-related-products__nav:focus-visible{
  outline:3px solid var(--ml-light-blue-500);
  outline-offset:3px;
}
.ml-related-products__state{
  width:100%;
  padding:3rem 1.25rem;
  color:var(--muted);
  text-align:center;
  font-size:var(--fs-md);
}

/* Product cards — mismo lenguaje visual que macroled.webflow.io/nuevo-home-final. */
.ml-product-card{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  position:relative;
  min-width:0;
  padding:.8rem;
  overflow:visible;
  border-radius:1rem;
  border:1px solid #f1f1f1;
  background:#fff;
  color:var(--ml-grey-800);
  box-shadow:2px 3px 20px 2px rgba(0,17,33,.04);
  text-decoration:none;
  transition:transform .2s ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.ml-product-card:hover{transform:translateY(-3px);}
.ml-product-card--disabled:hover{transform:none;}

.ml-product-card .media{
  position:relative;
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid #f5f4f4;
  border-radius:.75rem;
  background:#f6f6f6;
  transition:background-color .25s ease;
}
.ml-product-card:hover .media{background:#e6f8ff;}
.ml-product-card .media-frame{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.ml-product-card .media img{
  position:relative;
  width:62%;height:62%;
  max-width:none;max-height:none;
  object-fit:contain;
  transition:transform .25s ease;
}
.ml-product-card:hover .media img{transform:scale(1.08);}

/* Nuevo arriba a la izquierda, Smart arriba a la derecha — mismo
   layout que nuevo-home-final cuando coinciden los dos (no se apilan). */
.ml-product-card .media-badges-left{
  position:absolute;z-index:2;
  top:.6rem;left:.6rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.ml-product-card .media-badges-right{
  position:absolute;z-index:2;
  top:.6rem;right:.6rem;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.ml-product-role-badge{
  padding:.32rem .55rem;border-radius:999px;
  font-size:.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
}
.ml-product-role-badge.is-armado,
.ml-product-role-badge.is-despiece,
.ml-product-role-badge.is-compatible{background:#5b6572;}
.ml-product-smart-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:.45rem .7rem;border-radius:999px;
  background:linear-gradient(135deg,#00bdff,#0090c7);
  color:#fff;box-shadow:0 3px 10px rgba(0,144,199,.35);
  font-size:.68rem;font-weight:500;line-height:1;letter-spacing:.03em;white-space:nowrap;
}
.ml-product-smart-badge svg{flex:none;}
.ml-product-nuevo-badge{
  display:inline-flex;align-items:center;
  padding:.45rem .7rem;
  border:0;border-radius:999px;
  background:#ddca97;color:#16294f;
  box-shadow:0 3px 10px rgba(201,179,118,.35);
  font-size:.68rem;font-weight:600;line-height:1;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
}

/* Temperatura de color: pill abajo a la derecha, una fila por tono. */
.ml-product-card .card-overlays{position:absolute;inset:0;z-index:1;pointer-events:none;}
.ml-product-card .temp-dots{
  position:absolute;z-index:2;right:8px;bottom:8px;
  display:inline-flex;flex-direction:row;align-items:center;gap:8px;
  max-width:calc(100% - 16px);
  padding:5px 8px;overflow:hidden;
  border:1px solid #e6e6e6;border-radius:20px;
  background:#fff;box-shadow:0 1px 3px rgba(20,24,33,.06);
  pointer-events:auto;
}
.ml-product-card .temp-dots-row{display:flex;align-items:center;gap:5px;min-width:0;}
.ml-product-card .temp-dots-label{
  color:#5d5c5c;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;
}
.ml-product-card .temp-dots .luz-dot{
  display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(20,24,33,.12);
}
.ml-product-card .temp-dots-icon{
  display:none;flex:none;align-items:center;justify-content:center;
  color:#5d5c5c;line-height:0;
}
.ml-product-card .temp-dots.is-collapsed{gap:4px;padding:5px 7px;}
.ml-product-card .temp-dots.is-collapsed .temp-dots-label{
  max-width:0;margin:0;overflow:hidden;opacity:0;
  transform:translateX(6px);
  transition:max-width .28s ease,opacity .2s ease,transform .28s ease;
}
.ml-product-card .temp-dots.is-collapsed .temp-dots-row{gap:0;}
@media (hover:hover) and (pointer:fine){
  .ml-product-card .temp-dots.is-collapsed:hover,
  .ml-product-card .temp-dots.is-collapsed:focus-within{gap:8px;padding:5px 8px 5px 10px;}
  .ml-product-card .temp-dots.is-collapsed:hover .temp-dots-label,
  .ml-product-card .temp-dots.is-collapsed:focus-within .temp-dots-label{
    max-width:72px;opacity:1;transform:translateX(0);
  }
  .ml-product-card .temp-dots.is-collapsed:hover .temp-dots-row,
  .ml-product-card .temp-dots.is-collapsed:focus-within .temp-dots-row{gap:5px;}
}

.ml-product-card__title{
  margin:0 0 10px;
  color:#16294f;
  font-size:1.1rem;font-weight:600;line-height:1.35;
}
.ml-product-card__specs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content));
  justify-content:start;
  column-gap:28px;row-gap:.5rem;
  margin-top:auto;
}
.ml-product-card__spec{min-width:0;}
.ml-product-card__spec-label{
  display:block;margin:0 0 2px;overflow:hidden;
  color:#94989c;font-size:.7rem;font-weight:500;
  text-overflow:ellipsis;white-space:nowrap;
}
.ml-product-card__spec-value{
  display:flex;align-items:center;gap:.25rem;overflow:hidden;
  color:#474747;font-size:.8rem;font-weight:500;
  text-overflow:ellipsis;white-space:nowrap;
}
.ml-product-card__note{
  display:block;color:#7b8389;font-size:.68rem;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* —— Tabs "Productos armados" / "Despiece" / "Compatibles" (panel-armados / panel-despiece / panel-compatibles) —— */
.tab .tab-count{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--fill-soft);color:var(--muted);font-size:.72rem;font-weight:700;
  vertical-align:1px;
}
.tab.is-active .tab-count{background:var(--tint);color:var(--tint-text);}
.tab[hidden]{display:none;}

.panel-intro{font-size:var(--fs-sm);color:var(--muted);margin:0 0 14px;max-width:60ch;}

/* Carrusel de las tabs armados/despiece/compatibles — mismo lenguaje visual
   y comportamiento (flechas, drag, progreso) que .ml-related-products__* */
.ml-rel-carousel{
  position:relative;
}
.ml-rel-carousel__viewport{position:relative;width:100%;}
.ml-rel-carousel__track{
  display:flex;
  width:100%;
  gap:1rem;
  margin-inline:auto;
  padding:.25rem 0 1rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:.25rem;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}
.ml-rel-carousel__track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.ml-rel-carousel__track.is-dragging .ml-product-card{pointer-events:none;}
.ml-rel-carousel__track::-webkit-scrollbar{display:none;}
.ml-rel-carousel__track[aria-busy="true"]:empty::after{
  content:"Cargando…";width:100%;padding:2rem 1.25rem;color:var(--muted);
  font-size:var(--fs-sm);text-align:center;
}
.ml-rel-carousel__track .ml-product-card{
  flex:0 0 calc((100% - 3rem) / 4);
  min-width:min(240px, 78vw);
  background:#fff;
  box-shadow:2px 3px 20px 2px rgba(0,17,33,.04);
  scroll-snap-align:start;
  border:solid 1px #f1f1f1;
}
.ml-rel-carousel__controls{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:2.75rem;margin-top:.25rem;
}
.ml-rel-carousel__controls[hidden]{display:none;}
.ml-rel-carousel__progress{
  position:relative;flex:0 0 clamp(6rem,10vw,9rem);height:2px;
  overflow:hidden;border-radius:999px;background:rgba(0,13,25,.12);
}
.ml-rel-carousel__progress span{
  position:absolute;inset:0 auto 0 0;border-radius:inherit;
  background:var(--ml-light-blue-700,var(--brand));opacity:0;
  transition:transform .2s ease,width .2s ease,opacity .2s ease;
}
.ml-rel-carousel__progress.has-progress span{opacity:.72;}
.ml-rel-carousel__arrows{position:absolute;inset:.25rem 0 1rem;z-index:3;pointer-events:none;}
.ml-rel-carousel__arrows[hidden]{display:none;}
.ml-rel-carousel__nav{
  position:absolute;top:50%;display:grid;place-items:center;
  width:2.625rem;height:2.625rem;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(0,21,43,.1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ml-light-blue-500,var(--brand));cursor:pointer;pointer-events:auto;
  transition:background .2s,color .2s,box-shadow .2s,opacity .2s,transform .2s;
}
.ml-rel-carousel__nav svg{
  width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.ml-rel-carousel__nav[data-rel-prev]{left:0;transform:translateY(-50%);}
.ml-rel-carousel__nav[data-rel-next]{right:0;transform:translateY(-50%);}
.ml-rel-carousel__nav:hover{
  background:#fff;color:#007ba8;box-shadow:inset 0 1px 0 #fff,0 7px 20px rgba(0,87,119,.16);
}
.ml-rel-carousel__nav[data-rel-prev]:hover{transform:translate(-2px,-50%);}
.ml-rel-carousel__nav[data-rel-next]:hover{transform:translate(2px,-50%);}
.ml-rel-carousel__nav:active{background:#f2fbfe;color:#006b92;scale:.94;}
.ml-rel-carousel__nav:disabled{opacity:0;cursor:default;pointer-events:none;}
.ml-rel-carousel__nav:focus-visible{outline:3px solid var(--ml-light-blue-500,var(--brand));outline-offset:3px;}

.ml-product-card__sku{
  display:block;margin-top:-.4rem;
  font-size:.68rem;color:var(--ink-soft);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

@media (max-width:1100px){
  .ml-related-products__track .ml-product-card{
    flex-basis:calc((100% - 2rem) / 3);
  }
  .ml-rel-carousel__track .ml-product-card{
    flex-basis:calc((100% - 2rem) / 3);
  }
}
@media (max-width:900px){
  .ml-related-products__head{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .ml-related-products__track .ml-product-card,
  .ml-rel-carousel__track .ml-product-card{
    flex-basis:calc((100% - 1rem) / 2);
  }
  .ml-product-card__title{font-size:1rem;}
  .ml-product-card__spec-label{font-size:14px;}
  .ml-product-card__spec-value{font-size:15px;}
}
/* Mismo corte que .ml-home .ml-product-card en home.css: la tipografía de
   la card se achica recién a 560px, no en el corte de layout de 640px. */
@media (max-width:560px){
  .ml-product-card{padding:.6rem;border-radius:.75rem;}
  .ml-product-card__title{margin-bottom:6px;font-size:15px;}
  .ml-product-card__spec-label{font-size:13px;}
  .ml-product-card__spec-value{font-size:14px;}
}
@media (max-width:640px){
  .ml-related-products{padding:0 8px;}
  .ml-product-card .temp-dots{right:5px;bottom:5px;max-width:46%;padding:4px 6px;}
  .ml-product-card .temp-dots .luz-dot{width:8px;height:8px;}
  .ml-product-card .temp-dots-label{font-size:11px;}
  .ml-related-products > .wrap{
    padding-bottom:30px;
  }
  .ml-related-products__head h2{font-size:1.2rem;}
  .ml-related-products__head .link-more{font-size:.875rem;}
  .ml-related-products__track,
  .ml-rel-carousel__track{
    width:100%;
    margin:0;
    padding:1.25rem 0 1rem;
    scroll-snap-type:x proximity;
    scroll-behavior:auto;
    scroll-padding-inline:0;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
  }
  .ml-related-products__track .ml-product-card,
  .ml-rel-carousel__track .ml-product-card{
    max-width:100%;
    flex-basis:60vw;
    box-sizing:border-box;
    scroll-snap-align:center;
  }
  .ml-related-products__controls,
  .ml-rel-carousel__controls{
    width:100%;
    min-height:0;
    flex-direction:column;
    gap:.875rem;
    margin-top:1rem;
  }
  .ml-related-products__arrows,
  .ml-rel-carousel__arrows{
    position:relative;
    inset:auto;
    display:flex;
    order:1;
    justify-content:center;
    align-items:center;
    gap:.75rem;
    width:100%;
    pointer-events:auto;
  }
  .ml-related-products__progress,
  .ml-rel-carousel__progress{
    order:2;
    width:min(9rem,45%);
    flex:0 0 auto;
  }
  .ml-related-products__nav,
  .ml-related-products__nav[data-related-prev],
  .ml-related-products__nav[data-related-next],
  .ml-related-products__nav[data-related-prev]:hover,
  .ml-related-products__nav[data-related-next]:hover,
  .ml-rel-carousel__nav,
  .ml-rel-carousel__nav[data-rel-prev],
  .ml-rel-carousel__nav[data-rel-next],
  .ml-rel-carousel__nav[data-rel-prev]:hover,
  .ml-rel-carousel__nav[data-rel-next]:hover{
    position:static;
    transform:none;
  }
  .ml-related-products__nav,
  .ml-rel-carousel__nav{
    width:2.375rem;height:2.375rem;
  }
  .ml-related-products__nav:disabled,
  .ml-rel-carousel__nav:disabled{opacity:.3;}
}

/* Legacy compat aliases (por si quedan refs) */
.compat{padding:var(--space-section) 0 clamp(48px,8vw,80px);border-top:1px solid var(--line-soft);}
.compat-head{
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  margin-bottom:clamp(20px,3vw,28px);
}
.compat-head h2{
  margin:0;
  font-size:var(--fs-section);font-weight:800;color:var(--navy);letter-spacing:-.02em;
  text-wrap:balance;
}
.link-more{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:6px;
  flex:none;
}
.link-more:hover{color:var(--navy);}

.compat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,16px);}
.pcard{display:block;}
.pcard-media{
  aspect-ratio:1;border-radius:var(--radius);background:var(--bg-card);
  display:grid;place-items:center;margin-bottom:clamp(10px,1.5vw,14px);overflow:hidden;
  transition:background .2s;
}
.pcard:hover .pcard-media{background:#e6f8ff;}
.pcard-media img{
  width:72%;height:72%;object-fit:contain;
  transition:transform .3s var(--ease);
}
.pcard:hover .pcard-media img{transform:scale(1.05);}
.pcard .pfam{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;
}
.pcard h3{
  margin:0 0 4px;font-size:var(--fs-base);font-weight:600;color:var(--navy);line-height:1.3;
}
.pcard .psku{margin:0;font-size:var(--fs-xs);color:var(--muted);}

/* Footer */
.site-footer{
  background:var(--navy);color:rgba(255,255,255,.7);
  padding:clamp(40px,6vw,56px) var(--pad-x) clamp(20px,3vw,28px);
}
.footer-inner{max-width:var(--max);margin:0 auto;}
.footer-top{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-logo{
  font-weight:700;font-size:var(--fs-md);letter-spacing:.08em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;
}
.footer-logo span{color:var(--brand);}
.footer-copy{font-size:var(--fs-sm);line-height:1.55;max-width:28ch;margin:0 0 18px;color:rgba(255,255,255,.55);}
.nl{display:flex;gap:8px;max-width:300px;}
.nl input{
  flex:1;min-width:0;border:none;border-radius:var(--radius-sm);padding:11px 14px;
  font-size:var(--fs-sm);font-family:inherit;background:rgba(255,255,255,.08);color:#fff;
}
.nl input::placeholder{color:rgba(255,255,255,.35);}
.nl button{
  border:none;border-radius:var(--radius-sm);padding:11px 14px;background:var(--btn-blue);
  color:#fff;font-weight:700;font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;font-family:inherit;
}
.nl button:hover{
  background:var(--btn-blue-dark);
  box-shadow:0 6px 16px rgba(0,119,168,.22);
}
.footer-col h4{
  margin:0 0 14px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
}
.footer-col a{
  display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.55);
  margin-bottom:10px;transition:color .15s;
}
.footer-col a:hover{color:#fff;}
.socials{display:flex;gap:8px;}
.socials a{
  width:36px;height:36px;border-radius:var(--radius-sm);margin:0;
  background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;
}
.socials a:hover{background:var(--btn-blue);}
.footer-bottom{padding-top:22px;font-size:var(--fs-xs);color:rgba(255,255,255,.4);}

/* —— AI assistant (prototype) —— */
.ai-launch{
  position:fixed;
  right:max(16px,env(safe-area-inset-right,0px));
  left:auto;
  bottom:max(20px,env(safe-area-inset-bottom,0px));
  z-index:501;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:auto;height:48px;
  padding:8px 18px 8px 14px;border:none;border-radius:999px;
  background:var(--navy) !important;color:#fff !important;
  font-size:15px !important;font-weight:600 !important;cursor:pointer;
  box-shadow:0 12px 32px rgba(0,21,43,.28);
  transition:transform var(--btn-dur) var(--ease),background var(--btn-dur) var(--ease),box-shadow var(--btn-dur) var(--ease),visibility .2s,bottom .3s var(--ease);
}
.ai-launch:hover{
  background:#021c38 !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,21,43,.34);
}
.ai-launch svg{flex:none;width:18px;height:18px;color:#fff !important;stroke:#fff !important;}
.ai-launch > span{color:#fff !important;font-size:15px !important;font-weight:600 !important;line-height:1.2 !important;}
.ai-launch-dot{
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(0,189,255,.25);
  flex:none;
}

.ai-backdrop{
  position:fixed;inset:0;z-index:510;
  background:rgba(6,12,22,.35);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.ai-backdrop.is-open{opacity:1;pointer-events:auto;}

.ai-panel{
  position:fixed;top:0;right:0;z-index:530;
  width:min(400px,100%);height:100%;
  background:var(--white);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(105%);
  transition:transform .3s var(--ease);
  box-shadow:-16px 0 48px rgba(0,21,43,.12);
}
.ai-panel.is-open{transform:none;}

.ai-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:26px 18px 16px;border-bottom:1px solid var(--line-soft);
}
.ai-head-main{
  display:flex;align-items:center;gap:14px;min-width:0;
}
.ai-avatar{
  position:relative;flex:none;
  width:52px;height:52px;border-radius:50%;
  background:var(--navy);
  color:#fff;
  display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(0,21,43,.22);
}
.ai-avatar svg,
.ai-avatar-icon{
  display:block;width:22px;height:22px;object-fit:contain;color:#fff;stroke:#fff;fill:none;
}
.ai-avatar-online{
  position:absolute;right:2px;bottom:2px;
  width:12px;height:12px;border-radius:50%;
  background:#22c55e;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(34,197,94,.25);
}
.ai-head-copy{min-width:0;}
.ai-head-copy h2{
  margin:0 0 4px;font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.2px;line-height:1.15;
}
.ai-head-sub{
  margin:0;font-size:14px;color:var(--muted);line-height:1.35;
}
.ai-close{
  width:36px;height:36px;border:none;border-radius:var(--radius-sm);
  background:transparent;color:var(--muted);cursor:pointer;
  display:grid;place-items:center;flex:none;
}
.ai-close:hover{background:var(--bg-card);color:var(--navy);}

.ai-messages{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
}
.ai-msg{min-width:0;max-width:92%;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;}
.ai-msg.bot{align-self:flex-start;}
.ai-msg.user{align-self:flex-end;}
.ai-bubble{
  padding:12px 14px;border-radius:12px;
  overflow-wrap:anywhere;word-break:break-word;overflow-x:hidden;max-width:100%;
}
.ai-msg.bot .ai-bubble{
  background:var(--paper);color:var(--ink);border-radius:4px 12px 12px 12px;
}
.ai-msg.user .ai-bubble{
  background:var(--navy);color:#fff;border-radius:12px 12px 4px 12px;
}
.ai-msg a{color:var(--btn-blue);font-weight:600;text-decoration:underline;overflow-wrap:anywhere;word-break:break-word;}
.ai-msg.user a{color:#9fe0ff;}
.ai-typing{
  display:none;align-self:flex-start;gap:4px;padding:12px 14px;
  background:var(--paper);border-radius:4px 12px 12px 12px;
}
.ai-typing.is-on{display:flex;}
.ai-typing span{
  width:6px;height:6px;border-radius:50%;background:#b0b8c4;
  animation:aiDot 1s infinite ease-in-out;
}
.ai-typing span:nth-child(2){animation-delay:.15s;}
.ai-typing span:nth-child(3){animation-delay:.3s;}
@keyframes aiDot{
  0%,80%,100%{transform:translateY(0);opacity:.4}
  40%{transform:translateY(-3px);opacity:1}
}

.ai-suggestions{
  display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 12px;
}
.ai-chip{
  border:1px solid var(--line);background:var(--white);
  border-radius:var(--radius-sm);padding:8px 12px;
  font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;
}
.ai-chip:hover{border-color:var(--tint-text);background:var(--tint);color:var(--tint-text);}

.ai-form{
  display:flex;gap:8px;padding:14px 16px 18px;
  border-top:1px solid var(--line-soft);background:var(--white);
}
.ai-form input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:13.5px;font-family:inherit;color:var(--ink);
}
.ai-form input:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus-ring);}
.ai-send{
  width:44px;height:44px;border:none;border-radius:var(--radius-sm);
  background:var(--btn-blue);color:#fff;cursor:pointer;display:grid;place-items:center;flex:none;
}
.ai-send:hover{background:var(--btn-blue-dark);}
.ai-send:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}

/* —— Page motion: entrance + scroll reveal —— */
@keyframes ml-fade-up{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:none;}
}
@keyframes ml-fade-in{
  from{opacity:0;}
  to{opacity:1;}
}
@media (prefers-reduced-motion:no-preference){
  .crumb{
    animation:ml-fade-up .55s var(--ease) both;
  }
  /* Gallery: opacity only — transform breaks hover-zoom containing block */
  .hero .gallery{
    animation:ml-fade-in .65s var(--ease) .06s both;
  }
  .hero .info > *{
    animation:ml-fade-up .6s var(--ease) both;
  }
  .hero .info > *:nth-child(1){animation-delay:.1s;}
  .hero .info > *:nth-child(2){animation-delay:.16s;}
  .hero .info > *:nth-child(3){animation-delay:.22s;}
  .hero .info > *:nth-child(4){animation-delay:.28s;}
  .hero .info > *:nth-child(5){animation-delay:.34s;}
  .hero .info > *:nth-child(6){animation-delay:.4s;}
  .hero .info > *:nth-child(7){animation-delay:.46s;}
  .hero .info > *:nth-child(8){animation-delay:.52s;}
  .stage-img{
    animation:ml-fade-in .75s var(--ease) .12s both;
  }
  .ai-launch{
    animation:ml-fade-up .55s var(--ease) .55s both;
  }

  [data-reveal]{
    opacity:0;
    transform:translateY(28px);
    transition:
      opacity var(--motion-dur) var(--ease),
      transform var(--motion-dur) var(--ease);
    will-change:opacity,transform;
  }
  [data-reveal].is-in{
    opacity:1;
    transform:none;
  }
  [data-reveal="left"]{transform:translateX(-24px);}
  [data-reveal="left"].is-in{transform:none;}
  [data-reveal="stagger"] > *{
    opacity:0;
    transform:translateY(18px);
    transition:
      opacity .5s var(--ease),
      transform .5s var(--ease);
  }
  [data-reveal="stagger"].is-in > *{opacity:1;transform:none;}
  [data-reveal="stagger"].is-in > *:nth-child(1){transition-delay:.04s;}
  [data-reveal="stagger"].is-in > *:nth-child(2){transition-delay:.1s;}
  [data-reveal="stagger"].is-in > *:nth-child(3){transition-delay:.16s;}
  [data-reveal="stagger"].is-in > *:nth-child(4){transition-delay:.22s;}
  [data-reveal="stagger"].is-in > *:nth-child(5){transition-delay:.28s;}
  [data-reveal="stagger"].is-in > *:nth-child(6){transition-delay:.34s;}

  .tab-panel.is-active{
    animation:ml-fade-up .4s var(--ease) both;
  }
  .pcard{
    transition:transform var(--btn-dur) var(--ease);
  }
  .pcard:hover{transform:translateY(-3px);}
}
@media (prefers-reduced-motion:reduce){
  .crumb,.hero .gallery,.hero .info > *,.stage-img,.ai-launch{animation:none !important;}
  [data-reveal],[data-reveal="stagger"] > *{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}

/* —— Responsive layout —— */

/* Tablet: mismo corte que el navbar global (menu.css pasa a hamburguesa acá
   tambien, 1100px) — el hero pasa directo al layout apilado de tablet en vez
   de achicarse primero a 2 columnas angostas, que quedaba peor. */
@media (max-width:1100px){
  .hero{
    grid-template-columns:1fr;
    gap:28px;
    padding:12px 0 36px;
  }
  .gallery{
    position:static;
    max-width:none;
    width:100%;
  }
  .stage{aspect-ratio:1;}
  .zoom-pane{display:none !important;}
  .hero .info{
    max-width:none;
  }
  .mainnav{display:none;}
  .trust{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:16px 14px;}
  .compat-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px;}

  /* "Agregar a comparación" y "Preguntá por este producto" quedaban chicas
     frente al resto de la tipografía cuando el hero pasa a columnas más
     angostas — se suben un poco a partir de acá. */
  .compare-row,.btn-ai{font-size:14px;}
  .compare-row{min-height:44px;gap:10px;}
  .compare-row .cb-wrap,.compare-row .cb{width:18px;height:18px;}
  .compare-row .cb svg{width:11px;height:11px;}
}

/* Small tablet */
@media (max-width:768px){
  .trust{gap:16px 14px;}
  .qspec{padding:0 12px;}
  .zoom-btn{font-size:var(--fs-xs);}
  .footer-top{gap:24px;}
  .spec-row{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  }
}

/* Mobile */
@media (max-width:640px){
  :root{--pad-x:12px;}
  main{padding:calc(26px + 8px) 8px 0;}
  .wrap{
    padding:10px 12px;
    margin:0 6px 16px;
    border-radius:8px;
  }
  .hero{gap:22px;padding:8px 0 28px;}
  .hero .info{padding:0 var(--pad-x);}
  .detail{padding:0;}

  .gallery{
    grid-template-columns:1fr;
    grid-template-areas:
      "main"
      "thumbs"
      "share";
    gap:10px;
    max-width:none;
  }
  .thumbs{
    flex-direction:row;max-height:none;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-gutter:auto;
    gap:8px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .thumb{
    width:64px;height:64px;flex:none;
    scroll-snap-align:start;
  }
  .gallery-actions{display:none !important;}
  .share-menu{display:none !important;}
  .stage{cursor:pointer;border-radius:10px;touch-action:pan-y;}
  .stage-img{padding:20px 16px;}
  .zoom-lens,.zoom-pane{display:none !important;}
  /* Ampliar + Compartir como iconos, misma esquina */
  .stage-actions{top:12px;right:12px;gap:8px;}
  .zoom-btn{
    padding:10px;
    min-width:40px;min-height:40px;
    justify-content:center;
    border-radius:10px;
  }
  .zoom-btn__label{display:none;}
  .zoom-btn--share-mobile{display:inline-flex;}

  /* Bottom sheet compartir */
  .share-sheet{
    display:block;
    position:fixed;inset:0;z-index:560;
    pointer-events:none;
  }
  .share-sheet[hidden]{display:none !important;}
  .share-sheet.is-open{pointer-events:auto;}
  .share-sheet__backdrop{
    position:absolute;inset:0;
    border:0;padding:0;margin:0;cursor:pointer;
    background:rgba(20,24,32,.48);
    opacity:0;
    transition:opacity .28s ease;
  }
  .share-sheet.is-open .share-sheet__backdrop{opacity:1;}
  .share-sheet__panel{
    position:absolute;left:0;right:0;bottom:0;
    background:#fff;
    border-radius:20px 20px 0 0;
    padding:20px 20px calc(22px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -10px 40px rgba(0,21,43,.16);
    transform:translateY(110%);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
  }
  .share-sheet.is-open .share-sheet__panel{transform:translateY(0);}
  .share-sheet__head{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin:0 0 22px;
  }
  .share-sheet__title{
    margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;
    color:#1a1f27;line-height:1.25;
  }
  .share-sheet__close{
    flex:none;width:36px;height:36px;border:0;border-radius:50%;
    background:transparent;color:#3a4150;cursor:pointer;
    display:grid;place-items:center;
  }
  .share-sheet__close:active{background:rgba(0,0,0,.06);}
  .share-sheet__grid{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:8px;width:100%;
  }
  .share-sheet__opt{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    border:0;background:transparent;padding:0;cursor:pointer;
    text-decoration:none;color:#1a1f27;
    -webkit-tap-highlight-color:transparent;
  }
  .share-sheet__icon{
    width:56px;height:56px;border-radius:50%;
    border:1px solid #d9dde3;
    background:#fff;
    display:grid;place-items:center;
    color:#1a1f27;
    transition:background .15s ease,transform .15s ease;
  }
  .share-sheet__opt:active .share-sheet__icon{
    background:#f3f5f7;transform:scale(.96);
  }
  .share-sheet__icon--wa{color:#25D366;}
  .share-sheet__icon--in{color:#0A66C2;}
  .share-sheet__label{
    font-size:12px;font-weight:500;line-height:1.25;
    text-align:center;color:#1a1f27;
  }
  .share-toast{
    bottom:calc(28px + env(safe-area-inset-bottom,0px));
    z-index:570;
  }
  body.share-sheet-open{overflow:hidden;}
  body.share-sheet-open .share-toast{
    bottom:min(42vh, 280px);
  }
  body.share-sheet-open .ai-launch,
  body.share-sheet-open .ai-backdrop,
  body.share-sheet-open .ai-panel{
    z-index:1 !important;
  }

  .eyebrow{letter-spacing:.1em;font-size:12px;}

  .quick-specs{padding:12px 4px;border-radius:12px;}
  .quick-specs[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
  .qspec{
    padding:0 10px;
    text-align:center;
  }
  .quick-specs[data-count="3"] .qspec{padding:0 6px;}
  .qspec:not([hidden]) + .qspec:not([hidden]){border-left:1px solid var(--line);border-top:none;}
  .qspec .label{margin-bottom:2px;font-size:13px;}
  .qspec .val{font-size:16px;}
  .meta{font-size:13px;}

  /* CTAs en mobile: apilados en columna, ancho completo */
  .actions{flex-direction:column;}
  .btn,.btn-primary,.btn-ghost{width:100%;flex-basis:auto;flex:none;}
  #btn-ficha{font-size:.875rem;}

  /* Mobile: comparar y preguntá apilados, uno arriba del otro */
  .cta-utility{
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:column;
    align-items:flex-start !important;
    justify-content:flex-start;
    gap:6px;
  }
  .compare-row{
    justify-content:flex-start;
    width:auto !important;
    margin-left:calc(var(--pad-x) * -1);
    padding:8px var(--pad-x);
    font-size:14px;
  }
  .cta-utility .btn-ai{
    margin-left:-8px !important;
    padding:8px 10px !important;
    font-size:14px;
  }

  .trust{
    display:block;
    grid-template-columns:none;
    gap:0;
    padding:clamp(14px,2.5vw,20px) 0 0;
    margin-top:clamp(14px,2.5vw,20px);
    border-top:1px solid var(--line-soft);
    background:transparent;
    min-height:0;
  }
  .trust-item{display:none !important;}
  .trust-lines{display:none !important;}

  .tabs{
    gap:0;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    margin-left:calc(var(--pad-x) * -1);
    margin-right:calc(var(--pad-x) * -1);
    padding:0 var(--pad-x);
    border-bottom:1px solid var(--line);
    /* Fade en los bordes para insinuar que hay más tabs fuera de pantalla */
    mask-image:linear-gradient(to right,transparent 0,#000 var(--pad-x),#000 calc(100% - var(--pad-x)),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--pad-x),#000 calc(100% - var(--pad-x)),transparent 100%);
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab{
    padding:8px;
    font-size:.875rem;
    flex:0 0 auto;
    min-width:max-content;
    text-align:center;
    scroll-snap-align:start;
  }
  .tab.is-active::after{left:10px;right:10px;}

  .spec-row{
    grid-template-columns:1fr;
    gap:4px;
    padding:12px var(--pad-x);
    font-size:14px;
  }
  .spec-row .k,
  .spec-row .v,
  .spec-row .spec-tip{
    font-size:14px;
  }
  .spec-row .v{text-align:left;font-weight:600;}
  .spec-group-head{padding:12px var(--pad-x);}
  .sg-title svg{width:16px;height:16px;}

  .compat-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .compat-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .pcard-media{margin-bottom:10px;}

  .footer-top{grid-template-columns:1fr;gap:28px;}
  .nl{max-width:none;}

  .ai-launch{
    width:56px;height:56px;padding:0;gap:0;
    border-radius:50%;
    justify-content:center;
  }
  .ai-launch svg{width:24px;height:24px;}
  .ai-launch > span:not(.ai-launch-dot){display:none;}
  .ai-launch-dot{
    display:block;position:absolute;right:2px;bottom:2px;
    width:12px;height:12px;
    border:2px solid #fff;background:#22c55e;
    box-shadow:none;
  }

  .share-toast{
    left:16px;right:16px;bottom:max(20px,env(safe-area-inset-bottom));
    width:auto;transform:translateY(12px);
    text-align:center;border-radius:12px;
  }
  .share-toast.is-on{transform:translateY(0);}

  .ai-panel{width:100%;}
  .ai-form{padding:12px 14px max(14px,env(safe-area-inset-bottom));}
  /* iOS zooms if focused control is <16px — force on #aiInput against Webflow resets */
  #aiInput,
  .ai-form input,
  .ai-form input:focus{
    font-size:16px !important;
  }
  .ai-msg{font-size:14px;line-height:1.45;}
  .ai-chip{font-size:12px;}
}

/* Small phones */
@media (max-width:400px){
  :root{--pad-x:10px;}
  .thumb{width:56px;height:56px;}
  .trust{gap:10px 6px;}
  .trust-item{font-size:10.5px;}
  .qspec{padding:0 4px;}
  .compat-grid{gap:10px;}
  .pcard h3{font-size:13px;}
  .btn{font-size:12px;padding:11px 12px;}
  .btn-ai{font-size:12px;padding:6px 0;}
  .meta{font-size:13px;}
  .crumb{font-size:13px;}
  .tab{padding:12px 4px;font-size:13px;}
}

/* Landscape phones: keep gallery usable */
@media (max-width:960px) and (max-height:480px) and (orientation:landscape){
  .gallery{
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:
      "thumbs main"
      "thumbs share";
    max-width:420px;
  }
  .thumbs{
    flex-direction:column;max-height:min(280px,70vh);
    overflow-x:hidden;overflow-y:auto;
  }
  .thumb{width:100%;height:auto;aspect-ratio:1;}
  .hero{padding-bottom:20px;}
}

/* —— Webflow isolation ——
   Reassert ficha type/color so Designer globals (body color, bold inheritance,
   link styles) don't alter the local design. Keep this stylesheet last in Head. */
/* El Embed de Webflow que envuelve este código trae la clase .embed_fichas con un
   padding-top propio desde el Designer. Se anula acá para que el espaciado real
   lo controle solo main{padding:...} de este archivo. */
.embed_fichas{padding-top:0 !important;}
/* Webflow's own compiled CSS ships a bare `a{flex:1;}` rule (for some Designer
   component elsewhere on the site). Since .crumb's links are plain <a> tags
   with no Webflow classes, that rule reaches them too and stretches "Productos"
   and the family link to equal-width flex columns — the "space-between" look
   on mobile. Reassert the intended tight, left-aligned layout with !important. */
.wrap .crumb{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:6px !important;
  width:auto !important;
}
.wrap .crumb a{
  flex:0 1 auto !important;
}
.wrap,
.hero,
.detail,
.ai-panel{
  font-family:var(--font);
  color:var(--ink);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* Dark-background controls keep their own color. */
.ai-launch{
  font-family:var(--font);
  color:#fff;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
}
.wrap *,
.hero *,
.detail *,
.ai-panel *,
.ai-launch *{
  font-family:inherit;
}
.wrap a,
.hero a,
.detail a,
.ai-panel a{
  font-weight:inherit;
  text-decoration:none;
}
.ai-panel .ai-msg a{
  color:var(--btn-blue);
  font-weight:600;
  text-decoration:underline;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.lead{
  font-weight:400;
  color:#7e8691;
}
.eyebrow,
.chars-label,
.qspec .label,
.trust-item,
.meta,
.crumb,
.spec-row .k,
.variant-label{
  font-weight:500;
}
.qspec .val,
.spec-row .v,
.variant-chip{
  font-weight:500;
}
.sg-title-text,
.btn,
.btn-ai,
.btn-ghost,
.btn-primary,
.zoom-btn,
.share-btn,
.tab,
.dl-card__btn,
.compare-row{
  font-weight:600;
}
.compare-row:has(input:checked){font-weight:700;}
.info h1{
  font-weight:600;
  color:var(--navy);
}
.btn-primary,
.btn-ai,
.btn-ghost,
.variant-chip,
.zoom-btn,
.share-btn,
.dl-card,
.ai-chip{
  font-family:var(--font);
}

/* Layout crítico vs Webflow globals (va al final para ganar cascada) */
.cta-utility{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
}
.cta-utility .compare-row,
.cta-utility .btn-ai{
  display:inline-flex !important;
  width:auto !important;
  max-width:100%;
  float:none !important;
  clear:none !important;
}
.cta-utility .compare-row{justify-self:start;}
.cta-utility .btn-ai{
  justify-self:end;
  white-space:nowrap;
  border:none !important;
  background:transparent !important;
}

@media (max-width:640px){
  .compare-row{font-size:14px;}
  .cta-utility{
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:column;
    align-items:flex-start !important;
    gap:6px;
  }
  .cta-utility .btn-ai{
    justify-self:auto;
    margin-left:-8px !important;
    padding:8px 10px !important;
    font-size:14px;
  }
}