: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;
}

/* Mientras llega el producto, el overlay global (#ml-preload) tapa la página.
   is-hydrating evita mostrar el placeholder del HTML antes de pintar el SKU. */
.wrap.is-hydrating{
  position:relative;
  min-height:70vh;
}
.wrap.is-hydrating > *{
  visibility:hidden;
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}
.ficha-error{
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-size:14px;
  font-weight:500;
  line-height:1.45;
}
.ficha-error[hidden]{display:none !important;}

/* —— 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 — miniaturas en columna al costado de la foto principal */
.gallery{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "thumbs main"
    ". share";
  column-gap:12px;
  row-gap:12px;
  align-items:start;
  position:sticky;top:28px;
  z-index:2;
}
.thumbs{
  grid-area:thumbs;
  display:flex;flex-direction:column;gap:10px;
  overflow-x:hidden;overflow-y:auto;
  align-self:start;
  max-height:100%;
}
.thumb{
  width:76px;height:76px;flex:none;padding:0;border-radius:10px;
  border:2px solid transparent;background:var(--paper);
  cursor:pointer;overflow:hidden;
  min-height:0;max-height:none;
  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;justify-content:center;
  width:36px;height:36px;padding:0;
  border:1px solid var(--line-strong);background:var(--white);
  border-radius:8px;
  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;justify-content:space-between;gap:8px 16px;
  margin:0 0 clamp(22px,3vw,30px);font-size:var(--fs-sm);color:var(--muted);
}
.meta-ids{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0;}
.meta b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;}
.meta .dot{width:1px;height:14px;border-radius:0;background:#d5dae1;flex:none;}

.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:12px;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:2.5px solid #edecec;border-radius:10px;
  background:var(--white);color:rgb(110, 112, 112);
  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:#54b1e5;background:#f4faff;color:rgb(56, 58, 58);}
.variant-chip.active{
  background:#f4faff;border-color:#54b1e5;
  color:rgb(56, 58, 58);font-weight:600;cursor:default;
}
.variant-chip-radio,
.focus-angle-radio{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  pointer-events:none !important;
  clip:rect(0,0,0,0) !important;
}
.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:clamp(18px,2.5vw,25px) 0 0;
  padding-top:clamp(18px,2.5vw,25px);
  border-top:1px solid var(--line-soft);
}
.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:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:16px 8px;
  box-shadow:0 1px 2px rgba(10,14,25,.03),0 8px 20px rgba(10,14,25,.04);
}
.quick-specs[data-count="1"]{grid-template-columns:minmax(0,1fr);}
.quick-specs[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.quick-specs[data-count="0"]{display:none;}
.qspec{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:2px 18px;text-align:left;
}
.qspec:not([hidden]) + .qspec:not([hidden]){border-left:1px solid var(--line-soft);}
.qspec[hidden]{display:none !important;}
.qspec-icon{color:#8b95a3;margin-bottom:4px;}
.qspec .label{
  display:block;font-size:var(--fs-sm);font-weight:500;
  color:var(--muted);margin:0;
}
.qspec .val{font-size:var(--fs-md);font-weight:600;color:var(--navy);}

/* —— 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:clamp(18px,2.5vw,25px) 0 clamp(20px,3vw,28px);
}

.actions{display:flex;gap:10px;margin:0;align-items:stretch;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;min-width:0;
  min-height:48px;padding:12px 18px;border-radius:10px;
  font-family:var(--font);
  font-size:var(--fs-base);font-weight:600;letter-spacing:.02em;cursor:pointer;
  border:1px solid transparent;
}
.actions .btn{white-space:nowrap;}
.actions .btn-primary{flex:1 1 auto;}
.actions .btn-ghost{flex:0 0 auto;min-width:184px;padding:12px 24px;}
.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[aria-busy="true"],
.dl-card[aria-busy="true"]{
  cursor:progress;
  opacity:.72;
  pointer-events:none;
}
.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 —— */
.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-groups{display:flex;flex-direction:column;gap:8px;}
.spec-group{border:none;}
.spec-group:first-child{border-top:none;}
.spec-group-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border:none;background:#8ab4c5;cursor:pointer;text-align:left;
  transition:background .15s ease;
  min-height:0;
}
.spec-group-head:hover{background:#7aa6b8;}
.sg-title{
  display:inline-flex;align-items:center;gap:0;min-width:0;
}
.sg-title svg{display:none;}
.sg-title-text{font-size:var(--fs-base);font-weight:600;color:#fff;}
.sg-toggle{
  font-size:19px;line-height:1;font-weight:400;color:#fff;
  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:10px 14px;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:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width:640px){
  .dl-list{grid-template-columns:1fr;}
}
.dl-card{
  display:flex;align-items:center;gap:clamp(12px,2vw,16px);
  min-width:0;
  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;}

/* 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{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "main"
      "thumbs";
    gap:10px;
    max-width:none;
  }
  .thumbs{
    flex-direction:row;
    max-height:none !important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding-bottom:0;
    width:100%;
  }
  .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{gap:0;padding:14px 4px;}
  .qspec .label{font-size:12px;}
  .qspec .val{font-size:14px;}
  .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:10px 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:10px 14px;}
  .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:2px 8px;}
  .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{max-width:420px;}
  .thumb{width:56px;height:56px;}
  .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;
  }
}