/* ==========================================================================
   PreventGas — producto.css
   Ficha individual: galería con lupa, datos clave, especificaciones,
   características, tipos de usos, relacionados y barra móvil.
   ========================================================================== */

/* -------------------------------------------------- volver
   Reemplaza a las migas: un solo camino de vuelta, con la flecha separada. */
.ficha__volver {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-block: 1.4rem .5rem;
  font: 500 var(--fs-small)/1 var(--body); letter-spacing: .02em;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.ficha__volver svg { flex: none; transition: transform .25s var(--ease); }

/* -------------------------------------------------- cabecera: 55 / 45 */
.ficha__grid {
  display: grid; gap: clamp(1.75rem, 4.5vw, 4.5rem);
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: start;
  padding-block: .5rem clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 900px) {
  .ficha__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* -------------------------------------------------- galería
   La foto es un recorte con alfa: el equipo flota sobre el mismo crema de la
   página, con un halo apenas más claro detrás (se disuelve antes del borde,
   así no hay caja) y una sombra de contacto debajo. La galería queda pegada
   mientras la columna de datos scrollea. */
.galeria { margin: 0; }
@media (min-width: 901px) {
  .galeria { position: sticky; top: calc(var(--nav-stuck, 108px) + 1.25rem); }
}
.galeria__main {
  --zx: 50%; --zy: 50%;
  position: relative; aspect-ratio: 1 / 1;
  overflow: hidden;
  background: radial-gradient(46% 40% at 50% 46%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
  view-transition-name: ficha-foto;
}
/* sombra de contacto: una elipse tenue a la altura de la base */
.galeria__main::before {
  content: ''; position: absolute; left: 20%; right: 20%; bottom: 8.5%; height: 8%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20,18,16,.18), rgba(20,18,16,0) 72%);
  transition: opacity .3s var(--ease);
}
.galeria__main img {
  position: absolute; inset: 9%;
  width: 82%; height: 82%; object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(20,18,16,.16));
  transform-origin: var(--zx) var(--zy);
  transition: transform .4s var(--ease), opacity .18s var(--ease);
}
.galeria__main.is-cambiando img { opacity: 0; }

/* lupa: solo con puntero fino. En touch la foto queda quieta. Mientras se
   gira (is-girando) la lupa se apaga: el cuadro cambia bajo el puntero y no
   tiene que escalar. */
@media (hover: hover) and (pointer: fine) {
  .galeria__main { cursor: zoom-in; }
  .galeria__main:hover:not(.is-girando) img {
    transform: scale(1.8);
    filter: drop-shadow(0 8px 10px rgba(20,18,16,.10));
  }
  .galeria__main:hover:not(.is-girando)::before { opacity: 0; }
}

/* -------------------------------------------------- giro
   Solo existe cuando hay más de un cuadro (data-giro lo pone el generador).
   Arrastrar en horizontal recorre los cuadros; el scroll vertical del dedo
   sigue siendo scroll (touch-action: pan-y). Sin transición en el cambio de
   cuadro: la respuesta tiene que ser inmediata, como un 360 real. */
.galeria__main[data-giro] {
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  outline: none;
}
.galeria__main[data-giro] img { -webkit-user-drag: none; }
.galeria__main[data-giro]:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .galeria__main[data-giro] { cursor: grab; }
  .galeria__main[data-giro]:hover img { transform: none; filter: drop-shadow(0 16px 18px rgba(20,18,16,.16)); }
  .galeria__main[data-giro]:hover::before { opacity: 1; }
  .galeria__main[data-giro].is-lupa { cursor: zoom-in; }
  .galeria__main[data-giro].is-lupa:hover:not(.is-girando) img { transform: scale(1.8); filter: drop-shadow(0 8px 10px rgba(20,18,16,.10)); }
  .galeria__main[data-giro].is-lupa:hover:not(.is-girando)::before { opacity: 0; }
}
.galeria__main.is-girando { cursor: grabbing !important; }
.galeria__main.is-girando img { transition: none; }
.galeria__main.is-girando ::selection { background: transparent; }

/* pista: mono chico, con dos flechas, abajo a la derecha. Desaparece a partir
   del primer giro (is-girado). */
.galeria__hint {
  position: absolute; right: .75rem; bottom: .75rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  background: rgba(255,255,255,.72); border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.galeria__hint svg { color: var(--ink); }
.galeria__main.is-girado .galeria__hint { opacity: 0; transform: translateY(4px); }
@media (hover: none) { .galeria__hint span { display: none; } .galeria__hint { padding: .45rem .5rem; } }

/* indicador de cuadro: una raya por cuadro, la activa en amarillo. Vive en
   la tira de miniaturas para no tapar la foto. */
.galeria__pos {
  display: flex; gap: 4px; align-items: center;
  margin: .75rem 0 0; padding: 0; list-style: none;
}
.galeria__pos li { width: 18px; height: 3px; background: var(--border-2); transition: background .2s var(--ease); }
.galeria__pos li.is-on { background: var(--accent); }

.galeria__thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.galeria__thumbs button {
  width: 66px; height: 66px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; place-items: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.galeria__thumbs button[aria-pressed="true"] {
  border-color: var(--ink); background: var(--card);
  box-shadow: inset 0 -3px 0 var(--accent);
}
/* width/height del HTML se respetan en proporción: la miniatura es cuadrada
   como la foto (1000×1000), así el navegador no reserva espacio de más. */
.galeria__thumbs img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; }

/* -------------------------------------------------- datos */
.ficha__marca {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  margin: .35rem 0 .9rem;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.ficha__marca span + span { display: inline-flex; align-items: center; gap: .75rem; }
.ficha__marca span + span::before { content: ''; width: 18px; height: 1px; background: var(--border-2); }

/* El nombre es la única apuesta grande de la cabecera. */
.ficha__nombre {
  font: 400 clamp(2.7rem, 5.4vw, 4.6rem)/.92 var(--display);
  letter-spacing: .03em; text-transform: uppercase;
}
.ficha__sim {
  margin: .9rem 0 1.4rem; padding-left: .9rem;
  border-left: 3px solid var(--accent);
  font-size: var(--fs-lead); color: var(--ink);
}

/* tira de datos clave: cifras en Barlow, etiqueta en mono */
.ficha__kd {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border);
  margin-bottom: 1.3rem;
}
.kd {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .95rem .9rem .85rem;
  border-left: 1px solid var(--border);
}
.kd:first-child { border-left: 0; padding-left: 0; }
.kd__v {
  display: flex; align-items: last baseline; flex-wrap: wrap; gap: .3rem;
  min-height: 1em;   /* las cifras largas (un cuerpo menor) se asientan en la misma línea que las grandes */
  font: 600 clamp(1.75rem, 2.7vw, 2.4rem)/1 var(--head);
  color: var(--ink); letter-spacing: .005em;
}
.kd__v b { font-weight: inherit; }
.kd__v small {
  font: 500 var(--fs-small)/1 var(--head);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.kd__v .kd__largo { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.15; }
.kd__k {
  font: 500 var(--fs-micro)/1.25 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 480px) {
  .ficha__kd { grid-template-columns: 1fr 1fr; }
  .kd:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kd:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

.ficha__meta { margin-bottom: 1.3rem; }
.ficha__desc p { color: var(--fg); max-width: 52ch; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* -------------------------------------------------- barra pegajosa (móvil)
   Al pasar las acciones, WhatsApp sigue a mano abajo. Reemplaza al globo
   flotante mientras está visible, para no apilar dos botones verdes. */
.ficha__barra { display: none; }
@media (max-width: 900px) {
  .ficha__barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem clamp(1.15rem, 4vw, 2.75rem);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(20,18,16,.08);
    transform: translateY(110%);
    transition: transform .3s var(--ease);
  }
  .ficha__barra.is-visible { transform: none; }
  .ficha__barra-n {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 1.05rem/1.1 var(--head); text-transform: uppercase; color: var(--ink);
  }
  .ficha__barra .btn { flex: none; padding: .75rem 1.1rem; }
  body:has(.ficha__barra.is-visible) .wa-float {
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
  }
}

/* -------------------------------------------------- especificaciones
   Lista de definición: etiqueta en mono arriba, valor grande abajo, una raya
   fina entre filas. Dos columnas de filas en escritorio. */
.ficha__detalle-sec { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.ficha__detalle {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
.ficha__detalle:has(> .detalle__col:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .ficha__detalle { grid-template-columns: 1fr; } }

.detalle__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem;
  margin-bottom: .9rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--ink);
}
.specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.25rem; }
@media (max-width: 1080px) and (min-width: 861px), (max-width: 560px) {
  .specs { grid-template-columns: 1fr; }
}
.specs__fila {
  position: relative;
  display: grid; gap: .3rem;
  padding: .85rem 0 .8rem .0rem;
  border-bottom: 1px solid var(--border);
  transition: padding-left .25s var(--ease);
}
/* al pasar el puntero, la fila se corre y aparece la raya amarilla a la
   izquierda: la misma marca que usa la cabecera para el descriptor. */
.specs__fila::before {
  content: ''; position: absolute; left: 0; top: .85rem; bottom: .8rem; width: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .25s var(--ease);
}
@media (hover: hover) {
  .specs__fila:hover { padding-left: .8rem; }
  .specs__fila:hover::before { transform: none; }
}
.specs dt {
  font: 500 var(--fs-micro)/1.3 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.specs dd {
  margin: 0;
  font: 600 1.25rem/1.2 var(--head);
  color: var(--ink); letter-spacing: .01em;
  overflow-wrap: anywhere;
}

/* barra proporcional: solo en filas con escala real (--p lo pone el
   generador contra el máximo de la categoría). Riel fino, relleno amarillo
   que crece al entrar en pantalla y una nota mono con la referencia. */
.specs__fila--barra dd { display: grid; gap: .45rem; }
.specs__barra {
  display: block; height: 3px; width: 100%;
  background: var(--border);
  overflow: hidden;
}
.specs__barra i {
  display: block; height: 100%; width: var(--p, 0%);
  background: var(--ink);
  transform-origin: left;
  transition: background .25s var(--ease);
}
.specs__nota {
  font: 400 var(--fs-micro)/1.35 var(--mono);
  letter-spacing: .02em; color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .specs__barra i {
      animation-name: specBarra;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes specBarra { from { transform: scaleX(0); } to { transform: none; } }

/* cabecera de la columna: comparar (enlace) y copiar (botón), del mismo tono */
.detalle__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin-left: auto; }
.detalle__tools .copiar { margin-left: 0; }

/* copiar: aparece solo cuando el navegador tiene portapapeles */
.copiar {
  display: inline-flex; align-items: center; gap: .45rem; flex: none; margin-left: auto;
  padding: .4rem .15rem;
  font: 600 var(--fs-micro)/1 var(--body);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  transition: color .2s var(--ease);
}
.copiar[hidden] { display: none; }
.copiar svg { flex: none; }
.copiar.is-ok svg { color: var(--accent); }

/* -------------------------------------------------- características
   Marcador cuadrado amarillo. Con soporte de timeline de scroll, cada ítem
   entra escalonado según su índice (--i, puesto en el HTML). Sin soporte o
   con reduced-motion, la lista simplemente está. */
.lista {
  display: grid; gap: 0 2rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.lista li {
  display: flex; gap: .75rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
  font-size: var(--fs-small); color: var(--fg);
}
.lista li::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: .3rem;
  background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .lista--ficha { view-timeline: --lista-ficha block; }
    .lista--ficha li {
      /* Propiedades separadas: el atajo `animation` pisa el timeline y deja
         la duración en 0s. */
      animation-name: fichaItem;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --lista-ficha;
      animation-range: entry calc(var(--i, 0) * 5%) entry calc(45% + var(--i, 0) * 5%);
    }
  }
}
@keyframes fichaItem {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------- tipos de usos
   Cruce de datos reales: los gases del equipo, la categoría y las
   aplicaciones que comparten gas. Sin gases, el bloque no existe. */
.uso { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--border); }
.uso__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.uso__grid:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .uso__grid { grid-template-columns: 1fr !important; } }
.uso__lead { color: var(--muted); font-size: var(--fs-lead); max-width: 34ch; margin: 1rem 0 1.4rem; }
.uso__cat {
  display: inline-flex; align-items: center; gap: .55rem;
  padding-bottom: .35rem; border-bottom: 2px solid var(--accent);
  font: 600 var(--fs-small)/1 var(--body);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
.uso__cat svg { transition: transform .25s var(--ease); }
.uso__t {
  margin-bottom: .4rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--ink);
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.uso__gases a, .uso__apps a {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
  color: var(--muted);
  transition: color .2s var(--ease);
}
.uso__gases a svg { transition: transform .25s var(--ease); }
.uso__f {
  display: inline-block; text-align: center;
  padding: .32rem .35rem;
  background: var(--accent); color: var(--accent-fg);
  font: 500 var(--fs-small)/1 var(--mono); letter-spacing: .02em;
}
.uso__n { font: 600 1.05rem/1.2 var(--head); color: var(--ink); letter-spacing: .01em; }
.uso__apps a { grid-template-columns: minmax(0, 1fr) auto; }
.uso__apps .uso__f {
  background: var(--surface); border: 1px solid var(--border-2); color: var(--fg);
  font-size: var(--fs-micro); letter-spacing: .06em;
}

/* -------------------------------------------------- relacionados */
.rel__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }

/* -------------------------------------------------- entrada escalonada
   Las columnas de "Tipos de usos" y las tarjetas relacionadas entran una
   detrás de otra según --i (lo pone el generador). Con observador en JS es
   un retardo; con timeline de scroll, cada una arranca un poco más tarde en
   su propio recorrido de entrada. */
.js .uso__grid > .reveal,
.js .ficha .pgrid > .reveal { --delay: calc(var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .scroll-nativo.js .uso__grid > .reveal,
    .scroll-nativo.js .ficha .pgrid > .reveal {
      animation-range: entry calc(var(--i, 0) * 9%) entry calc(72% + var(--i, 0) * 9%);
    }
  }
}

/* -------------------------------------------------- hover solo con mouse
   En una pantalla táctil no hay hover: el navegador lo simula y el estilo
   queda pegado después de tocar. Estas reglas son las mismas de arriba,
   movidas acá sin cambiarles nada, para que solo corran donde hay puntero
   fino. El feedback táctil va por :active, que funciona en todo. */
@media (hover: hover) and (pointer: fine) {
  .ficha__volver:hover { color: var(--ink); }
  .ficha__volver:hover svg { transform: translateX(-3px); }
  .galeria__thumbs button:hover { border-color: var(--border-2); }
  .specs__fila--barra:hover .specs__barra i { background: var(--accent); }
  /* el display propio le ganaba al [hidden] del UA */
  .copiar:hover, .copiar.is-ok { color: var(--ink); }
  .uso__cat:hover svg { transform: translateX(3px); }
  .uso__gases a:hover { color: var(--ink); }
  .uso__gases a:hover svg { transform: translateX(3px); }
}