/* ---------- TRICON Parts: detalle de producto (producto.html) ----------
   Hereda variables y estilos base de styles.css + catalogo.css. */

.producto-shell{
  max-width:1240px; margin:0 auto;
  padding:12px 48px 40px;
}
.producto-breadcrumb{ margin-bottom:18px; }
.producto-breadcrumb a{
  font-family:var(--font-ui);
  font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--steel); text-decoration:none;
  transition: color 0.25s var(--ease);
}
.producto-breadcrumb a:hover{ color:var(--orange); }

.producto-notfound{ text-align:center; padding:80px 20px; color:var(--steel); }
.producto-notfound p{ margin-bottom:18px; font-size:15px; }
.producto-notfound .btn{ margin:0 auto; border:1.5px solid var(--ink); }

/* ---------- layout principal: galería izquierda / info derecha ---------- */
.producto-main{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:36px;
  align-items:start;
}

/* galería */
.producto-galeria{
  display:grid;
  grid-template-columns: 76px 1fr;
  gap:14px;
  align-items:start;
}
.producto-thumbs{ display:flex; flex-direction:column; gap:10px; }
.producto-thumb{
  width:76px; height:76px; padding:4px;
  background:#fff; border:1.5px solid var(--line); border-radius:8px;
  cursor:pointer; overflow:hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.producto-thumb img{ width:100%; height:100%; object-fit:contain; }
.producto-thumb:hover{ border-color:var(--orange); transform:translateY(-2px); }
.producto-thumb.active{ border-color:var(--orange); box-shadow:0 0 0 2px rgba(240,73,35,0.15); }
.producto-imagen-wrap{
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.producto-imagen-wrap img{
  width:100%; height:100%; object-fit:contain; padding:20px;
  transition: opacity 0.15s ease;
}
.producto-noimg{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:repeating-linear-gradient(45deg, rgba(19,19,19,0.02), rgba(19,19,19,0.02) 12px, transparent 12px, transparent 24px);
}
.producto-noimg span{
  font-family:var(--font-ui); font-size:13px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(19,19,19,0.35);
  border:1.5px dashed var(--line); border-radius:8px; padding:8px 14px;
  background:#fff;
}

/* info */
.producto-info .product-tag{ margin-bottom:14px; display:inline-block; }
/* [hidden] tiene menor especificidad que la regla de arriba, así que sin esto
   el atributo hidden de productoTag (producto.js) queda sin efecto y se ve
   una cápsula vacía sobre el título (bug real, confirmado en Chrome) */
.producto-info .product-tag[hidden]{ display:none; }
/* red de seguridad: cualquier .product-tag sin texto (espacios incluidos)
   tampoco debe reservar espacio, aunque falte hidden */
.producto-info .product-tag:empty{ display:none; margin:0; padding:0; }
.producto-nombre{
  font-family:var(--font-ui);
  font-weight:800;
  font-size:clamp(21px, 2.3vw, 28px); line-height:1.2;
  letter-spacing:-0.01em;
  margin-bottom:6px;
}
/* variante (medida / presentación): segunda línea del título */
.producto-variante{
  font-family:var(--font-ui);
  font-size:14px; font-weight:600; letter-spacing:0.01em;
  color:var(--steel);
  margin-bottom:16px;
}
.producto-variante[hidden]{ display:none; }
.producto-desc{ font-size:14.5px; line-height:1.65; color:var(--steel); max-width:56ch; margin-bottom:22px; }
.producto-meta-list{
  border-top:1px solid var(--line); margin-bottom:24px;
}
.producto-meta-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 2px; border-bottom:1px solid var(--line-soft);
  font-size:13.5px; line-height:1.4;
}
/* respiración extra antes de Marca: separa el bloque numérico
   (dimensiones/código) del dato de identidad de marca. Solo margin — el
   border-top de acá sumado al border-bottom heredado de .producto-meta-row
   en la fila anterior dibujaba DOS líneas a 6px de distancia (bug real,
   visible entre Dimensiones/Marca); la fila anterior ya aporta la única
   línea divisoria necesaria. */
.producto-meta-row--marca{ margin-top:6px; }
@media (max-width:560px){ .producto-meta-row{ padding:11px 2px; } }
.producto-meta-label{
  font-family:var(--font-ui); font-size:11px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--steel);
}

.producto-qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.producto-qty{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line); border-radius:999px; padding:6px 12px;
}
.producto-qty .qty-btn{ width:28px; height:28px; font-size:16px; }
.producto-qty .qty-value{ min-width:24px; font-size:15px; }
.producto-add{ flex:1; min-width:200px; justify-content:center; border:none; cursor:pointer; }

/* popover "cotización por volumen": nube anclada al botón "+", no texto
   permanente. Hover/focus en escritorio (puro CSS); toque + clase .is-open
   en móvil (producto.js), sin bloquear el incremento de cantidad. */
.qty-plus-wrap{ position:relative; display:inline-flex; }
.producto-volumen{
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:min(70vw, 250px);
  background:var(--ink); color:#fff;
  font-size:11.5px; line-height:1.55; font-weight:500;
  padding:10px 12px; border-radius:8px;
  box-shadow:0 12px 26px -10px rgba(19,19,19,0.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index:30;
}
.producto-volumen::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ink);
}
.qty-plus-wrap:hover .producto-volumen,
.qty-plus-wrap:focus-within .producto-volumen,
.producto-volumen.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
@media (max-width:480px){
  /* la punta se mantiene centrada en el botón "+" (mismo left:50% de la
     regla base); solo se acota el ancho para reducir riesgo de salirse de
     pantalla en viewports angostos */
  .producto-volumen{ max-width:min(78vw, 220px); }
}

/* ---------- secciones detalles / specs / relacionados ---------- */
#productoDetalles{ white-space:pre-line; line-height:1.7; color:var(--steel); }
.producto-seccion{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line-soft); }
.producto-seccion h2{
  font-family:var(--font-ui);
  font-size:15px; font-weight:800; letter-spacing:0.01em;
  margin-bottom:14px;
}
.producto-seccion > p{ font-size:14px; line-height:1.7; color:var(--steel); max-width:720px; text-align:justify; }
#productoDetalles, #productoAplic{ text-align:justify; }
.producto-specs{
  width:100%; max-width:720px; border-collapse:collapse;
  font-size:13px;
}
.producto-specs th{
  text-align:left; font-family:var(--font-ui);
  font-size:10.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--steel); width:200px;
  padding:6px 10px; border-bottom:1px solid var(--line-soft);
  background:rgba(19,19,19,0.02);
}
.producto-specs td{ padding:6px 10px; border-bottom:1px solid var(--line-soft); color:var(--ink); }
/* ---------- relacionados: carrusel amplio en retícula (columna derecha estirada) ---------- */
.rel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.rel-head h2{ margin-bottom:0; }
.rel-arrows{ display:flex; gap:8px; }
.rel-arrow{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--line); border-radius:9px;
  font-size:20px; line-height:1; color:var(--ink); cursor:pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.rel-arrow:hover:not(:disabled){ border-color:var(--orange); color:var(--orange); }
.rel-arrow:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.rel-arrow:disabled{ opacity:0.35; cursor:default; }
/* objetivo táctil mínimo de 44px en dispositivos de puntero grueso */
@media (pointer:coarse){
  .rel-arrow{ width:44px; height:44px; }
}

/* hilera única horizontal: tarjetas compactas lado a lado, carrusel con snap */
.producto-rel-viewport{
  display:flex; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* aire interior en los CUATRO lados para que contorno, borde hover y elevación
     no se recorten en las tarjetas de los extremos; el snap respeta el mismo aire */
  padding:4px 6px 6px;
  scroll-padding-inline:6px;
}
.producto-rel-viewport::-webkit-scrollbar{ display:none; }
/* tarjeta compacta: imagen arriba, datos debajo, CTA al pie */
.rel-item{
  scroll-snap-align:start;
  flex:0 0 calc(20% - 10px); min-width:0;
  display:flex; flex-direction:column;
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:10px;
  text-decoration:none; color:inherit;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.rel-item:hover{ border-color:var(--orange); transform:translateY(-2px); }
/* contorno interior: nunca se recorta con el overflow del carrusel */
.rel-item:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
/* contenedor de imagen uniforme: fondo blanco propio (sirve a transparentes y a fondo blanco) */
.rel-thumb{
  width:100%; height:104px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line-soft); border-radius:8px;
  padding:6px; overflow:hidden; margin-bottom:9px;
}
.rel-thumb img{ max-width:100%; max-height:100%; object-fit:contain; object-position:center; }
.rel-thumb--empty{
  background:repeating-linear-gradient(45deg, rgba(19,19,19,0.03), rgba(19,19,19,0.03) 8px, transparent 8px, transparent 16px);
}
.rel-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.rel-name{
  font-family:var(--font-ui); font-weight:700; font-size:12.5px; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rel-variant{ font-size:11px; color:var(--steel); margin-top:2px; }
.rel-meta{ font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--steel); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rel-cta{
  margin-top:8px; font-family:var(--font-ui); font-size:11px; font-weight:700;
  color:var(--orange);
}
.rel-item:hover .rel-cta{ color:var(--orange-deep); }

/* franja de ancho completo: tarjetas completas por vista según el ancho real */
.producto-rel-franja{ max-width:none; }
@media (max-width:1359px){
  .rel-item{ flex-basis:calc(25% - 9px); }
}
@media (max-width:1023px){
  .rel-item{ flex-basis:calc(33.333% - 8px); }
}
@media (max-width:700px){
  .rel-item{ flex-basis:calc(50% - 6px); }
}
@media (max-width:430px){
  .rel-item{ flex-basis:86%; }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .producto-shell{ padding:8px 20px 32px; }
  .producto-main{ grid-template-columns:1fr; gap:28px; }
}
/* landscape corto (telefono/tablet acostado, ej. 844x390): el colapso a
   1 columna de arriba se activa solo por ancho y aqui produce una imagen
   cuadrada (aspect-ratio 1/1) casi del doble del alto del viewport,
   empujando nombre/precio/CTA cientos de px hacia abajo. Con poco alto
   pero ancho de sobra, se mantiene la galeria y la info lado a lado. */
@media (max-width:900px) and (max-height:500px){
  .producto-main{ grid-template-columns:1.1fr 1fr; gap:28px; }
}
@media (max-width:560px){
  .producto-galeria{ grid-template-columns:1fr; }
  .producto-thumbs{ flex-direction:row; order:2; flex-wrap:wrap; }
  .producto-thumb{ width:64px; height:64px; }
}

/* cuerpo de la ficha: dos columnas en escritorio (descripción | ficha técnica + relacionados) */
.producto-cuerpo{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:0 clamp(28px, 3vw, 60px); align-items:start;
}
.producto-col{ min-width:0; }
/* Aplicación: franja inferior de ancho completo, después de las dos columnas */
.producto-aplic-franja{ max-width:none; }
.producto-aplic-franja > p, #productoAplic{ max-width:860px; }
.producto-aplic-lista{
  list-style:none; margin:0; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:8px;
}
.producto-aplic-lista li{
  position:relative; padding-left:20px;
  font-size:14px; line-height:1.6; color:var(--steel);
}
.producto-aplic-lista li::before{
  content:''; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--orange);
}
@media (max-width:1023px){
  .producto-cuerpo{ grid-template-columns:minmax(0,1fr); }
}

/* aviso ilustrativo de imágenes: discreto, no compite con el CTA de cotización.
   Bloque centrado respecto al ancho útil; texto centrado (probado primero,
   legible por ser un aviso corto de 2 frases dentro de 820px). */
.producto-aviso-img{
  font-size:11px; line-height:1.6; color:var(--steel);
  max-width:820px; margin:18px auto 0; padding-top:14px;
  border-top:1px solid var(--line-soft);
  text-align:center;
}

/* mención de otro producto dentro de una tabla (ej. "Este producto incluye"):
   sin subrayado permanente (saturaba la tabla) — se distingue por peso de
   fuente + color de enlace, y confirma "es clicable" con cursor/hover/focus */
.producto-mencion-link{
  color:var(--orange-deep); font-weight:600; text-decoration:none;
  text-underline-offset:2px; cursor:pointer;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.producto-mencion-link:hover{ color:var(--orange); text-decoration:underline; text-decoration-color:var(--orange); }
.producto-mencion-link:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; text-decoration:underline; }

/* ---------- "Experiencias de nuestros clientes" (testimonios reales) ----------
   V1: grid de 3 cards oscuras. V2: panel #131313 completo -- rechazado por
   "sección aparte"/"cortado". V3: sin panel, pero demasiado integrado --
   "no se nota que empieza otra sección". V4 (esta): contenedor propio
   off-white con borde fino (la señal de "nueva sección" sin volver al
   panel oscuro) + dos paneles editoriales blancos dentro (principal +
   siguiente que asoma) -- delimitación real sin ser 3 cards de reviews. */
.producto-testi-franja{
  background:#fafaf9; border:1px solid var(--line); border-radius:12px;
  padding:30px clamp(18px,3vw,38px) 28px;
}
.testi-head{ align-items:baseline; margin-bottom:4px; }
.testi-heading{ display:flex; flex-direction:column; gap:4px; }
.testi-head h2{
  font-family:var(--font-display); font-weight:800; font-style:normal;
  font-size:clamp(18px,1.8vw,21px); letter-spacing:-0.01em; color:var(--ink); margin:0;
}
.testi-sub{ font-size:12.5px; color:var(--steel); margin:3px 0 0; max-width:480px; }
.testi-head .rel-arrows{ display:flex; gap:6px; }
.testi-arrow{ background:#fff; }
.testi-arrow:hover:not(:disabled){ border-color:var(--orange); color:var(--orange); }

.testi-viewport{
  display:flex; gap:20px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* padding horizontal en 0 a propósito: con scroll-snap-type:x mandatory,
     Chromium fuerza scrollLeft inicial a igualar cualquier padding/margin
     antes del primer .testi-card (bug de motor, no de layout) -- eso
     recortaba el borde izquierdo del primer testimonio. Verificado con
     harness CDP real. El respiro vertical (6/10px) no participa del eje
     de scroll y sí se mantiene. */
  padding:6px 0 10px;
  margin-top:22px;
  outline:none;
}
.testi-viewport::-webkit-scrollbar{ display:none; }
.testi-viewport:focus-visible{ box-shadow:0 0 0 2px var(--orange) inset; }

/* dos paneles editoriales: el principal domina (~67%), el siguiente asoma
   (~30-35%) -- borde fino en reposo, naranja al hover/focus, sin sombra
   grande ni glow. translateY(-2px) muy sutil. */
.testi-card{
  scroll-snap-align:start;
  flex:0 0 67%; min-width:0;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:26px 28px 24px;
  position:relative;
  transition:border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.testi-card:hover, .testi-card:focus-within{ border-color:var(--orange); transform:translateY(-2px); }
.testi-quote-mark{
  position:absolute; top:6px; left:16px;
  font-family:var(--font-display); font-size:96px; line-height:1;
  color:var(--orange); opacity:0.12; pointer-events:none; user-select:none;
  transition:opacity 0.22s var(--ease);
}
.testi-card:hover .testi-quote-mark, .testi-card:focus-within .testi-quote-mark{ opacity:0.2; }
.testi-text{
  position:relative;
  font-family:var(--font-ui); font-size:clamp(16px,1.3vw,18px); line-height:1.6;
  color:var(--ink); font-weight:400;
  margin:34px 0 20px; max-width:54ch;
}
.testi-byline{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.testi-name{ font-family:var(--font-ui); font-size:13px; font-weight:700; color:var(--ink); }
.testi-stars{ display:flex; gap:1px; color:var(--orange); transition:opacity 0.2s var(--ease); opacity:0.85; }
.testi-card:hover .testi-stars, .testi-card:focus-within .testi-stars{ opacity:1; }
.testi-star{ width:11px; height:11px; }
.testi-star--empty{ color:var(--line); }

.testi-progress{
  position:relative;
  height:1.5px; margin-top:22px;
  background:var(--line);
  overflow:hidden;
}
.testi-progress-bar{ height:100%; width:0%; background:var(--orange); transition:width 0.25s var(--ease); }

/* reveal con stagger: heading -> principal -> siguiente (+100ms) -> nav.
   Reutiliza .bb-reveal/.in-view + @keyframes rise (styles.css). */
.testi-heading.bb-reveal.in-view{ animation-delay:0ms; }
.testi-card.bb-reveal{ opacity:0; transform:translateY(18px); }
.testi-card.bb-reveal.in-view{ animation:rise 0.6s var(--ease) forwards; }
.testi-viewport .testi-card.bb-reveal.in-view:nth-child(1){ animation-delay:60ms; }
.testi-viewport .testi-card.bb-reveal.in-view:nth-child(2){ animation-delay:160ms; }
.testi-viewport .testi-card.bb-reveal.in-view:nth-child(n+3){ animation-delay:220ms; }
.testi-head .rel-arrows.bb-reveal.in-view{ animation-delay:260ms; }

@media (max-width:1023px){
  .testi-card{ flex:0 0 74%; padding:24px 24px 22px; }
  .testi-quote-mark{ font-size:80px; }
  .testi-text{ margin-top:28px; }
}
@media (max-width:700px){
  .producto-testi-franja{ padding:24px 16px 22px; border-radius:10px; }
  .testi-head{ flex-wrap:wrap; gap:14px; align-items:center; }
  .testi-head .rel-arrows{ margin-left:auto; }
  .testi-viewport{ gap:14px; }
  .testi-card{ flex:0 0 90%; padding:22px 20px 20px; }
  .testi-text{ font-size:16px; margin-top:26px; }
  .testi-quote-mark{ font-size:68px; top:4px; left:14px; }
}
@media (prefers-reduced-motion: reduce){
  .testi-progress-bar{ transition:none; }
  .testi-card, .testi-quote-mark, .testi-stars{ transition:none; }
  /* especificidad igual a la regla que dispara la animación (.testi-card.bb-reveal.in-view)
     para que gane sobre ella bajo esta media query — el override genérico .bb-reveal de
     styles.css tiene menor especificidad y no la anularía por sí solo */
  .testi-card.bb-reveal.in-view{ animation:none; opacity:1; transform:none; }
}