/* ==========================================================================
   PreventGas — components.css
   Navbar, footer, marquee, cards, modal, formulario, migas.
   ========================================================================== */

/* -------------------------------------------------- navbar
   Dos filas, como en la versión que armó el cliente. Arriba la credencial:
   logo, Riken Keiki con su bajada de representación exclusiva, un divisor, el
   resto de las marcas y el botón de WhatsApp. Abajo la navegación y los
   teléfonos, que conviene tener siempre a la vista. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s var(--ease);
}
.nav.is-stuck { box-shadow: 0 2px 16px rgba(20,18,16,.10); }

.nav__wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 3vw, 2rem);
  box-sizing: border-box;
}

/* ── fila 1 ─────────────────────────────────────────────────────────────── */
.nav__fila1 {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .55rem 0 .5rem;
  border-bottom: 1px solid var(--border);
}
.nav__logo { flex: none; display: flex; align-items: center; }
.nav__logo img { height: 42px; width: auto; }

.nav__rki { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.nav__rki img { height: 22px; width: auto; }
.nav__rki span {
  font: 600 .55rem/1 var(--body);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

.nav__divisor { flex: none; width: 1px; height: 32px; background: var(--border-2); }

.nav__marcas {
  display: flex; align-items: center; gap: 1.1rem;
  flex: 1; overflow: hidden;
}
.nav__marcas img {
  height: 20px; width: auto; flex: none;
  opacity: .85;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.nav__wa {
  flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  background: #25d366; color: #fff;
  padding: .5rem 1.1rem; border-radius: var(--radius);
  font: 600 .78rem/1 var(--body); letter-spacing: .03em;
  white-space: nowrap;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.nav__wa svg { width: 16px; height: 16px; fill: currentColor; }

/* ── fila 2 ─────────────────────────────────────────────────────────────── */
.nav__fila2 {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .3rem 0;
}
.nav__links { display: flex; align-items: center; gap: 0; }
.nav__link {
  position: relative;
  padding: .45rem 1rem;
  font: 600 .86rem/1 var(--body);
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(20, 18, 16, .6);
  transition: color .15s var(--ease), background .15s var(--ease);
  border-radius: var(--radius);
}
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .15rem;
  height: 2px; background: var(--accent);
}

.nav__tel {
  margin: 0; white-space: nowrap;
  font: 400 .72rem/1 var(--mono); letter-spacing: .04em; color: var(--muted);
}
.nav__tel a { color: var(--muted); transition: color .15s var(--ease); }
.nav__tel i { font-style: normal; margin-inline: .4rem; color: var(--border-2); }

/* ── hamburguesa y menú desplegable ─────────────────────────────────────── */
.nav__toggle {
  display: none; flex: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  align-items: center; justify-content: center;
}
.nav__toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  position: relative; transition: background .2s var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top:  6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__rki span { display: none; }
  .nav__marcas { gap: .85rem; }
}

@media (max-width: 900px) {
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__divisor, .nav__marcas { display: none; }
  .nav__wa { display: none; }
  /* En móvil la tira de teléfonos va arriba de todo: así es la que se va al
     scrollear y queda pegada solo la barra con el logo y el menú. */
  .nav__wrap { display: flex; flex-direction: column; }
  .nav__fila2 { order: -1; display: block; padding: 0; }
  .nav__fila1 { order: 0; border-bottom: 0; padding: .6rem 0; }

  .nav__links {
    position: fixed; inset: var(--nav-stuck, 66px) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: .5rem clamp(1.15rem, 3vw, 2rem) 1.25rem;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s var(--ease), visibility .3s;
  }
  .nav.is-open .nav__links { max-height: 80vh; visibility: visible; overflow-y: auto; }
  .nav__link {
    padding: .9rem 0; border-bottom: 1px solid var(--border);
    font-size: .95rem; border-radius: 0;
  }
  .nav__link:hover { background: none; }
  .nav__link[aria-current="page"]::after { left: 0; right: auto; width: 22px; bottom: .55rem; }

  /* Los teléfonos quedan en una tira propia, que sí se va al scrollear. */
  .nav__tel {
    display: flex; justify-content: center; gap: .25rem;
    padding: .4rem 0; border-bottom: 1px solid var(--border);
    font-size: .68rem;
  }
  .nav { top: calc(-1 * var(--tel-h, 26px)); }
}

/* -------------------------------------------------- marquee industrias */
.marquee {
  background: var(--ink); color: var(--bg);
  padding-block: .95rem; overflow: hidden;
  border-block: 1px solid var(--ink);
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__group span {
  font: 700 var(--fs-small)/1 var(--head);
  letter-spacing: .22em; text-transform: uppercase;
  padding-inline: 1.5rem;
}
.marquee__group span::after { content: '·'; color: var(--accent); margin-left: 1.5rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* -------------------------------------------------- card de producto
   Sin caja. El equipo apoya sobre el papel de la página, con su sombra de
   contacto, y lo único dibujado es una línea fina bajo la marca. La categoría
   y las fórmulas dejan de ser chapas y pasan a ser texto, que es lo que son:
   cinco rectángulos anidados por tarjeta, repetidos 56 veces, eran lo que
   hacía leer el catálogo como una plantilla. Al pasar el cursor no se mueve
   la tarjeta: se mueve el objeto. */
.pcard {
  position: relative;
  display: flex; flex-direction: column;
}

.pcard__media {
  position: relative; aspect-ratio: 4 / 3;
}
/* Los recortes son 1000×1000 con fondo transparente: el producto flota sobre
   la superficie crema, con una sombra de contacto debajo (el degradé radial)
   que se difumina cuando la tarjeta se levanta. Sin caja blanca ni blend. */
.pcard__media::before {
  content: ''; position: absolute;
  left: 22%; right: 22%; bottom: 9%; height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,18,16,.16), rgba(20,18,16,0));
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.pcard__media img {
  position: absolute; inset: .2rem .2rem 1.4rem;
  width: calc(100% - .4rem); height: calc(100% - 1.6rem);
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(20,18,16,.10));
  transition: transform .45s var(--ease), filter .45s var(--ease);
}

.pcard__body { display: flex; flex-direction: column; gap: .55rem; padding: .25rem 0 0; flex: 1; }

/* Marca a la izquierda, categoría a la derecha, y la única línea de la
   tarjeta debajo. Es el renglón que ordena todo lo que viene después. */
.pcard__alto {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin: 0; padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.pcard__marca, .pcard__tipo {
  font: 500 var(--fs-micro)/1.3 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.pcard__tipo { flex: none; color: var(--fg); }

.pcard__nombre { font: 600 1.14rem/1.15 var(--head); color: var(--ink); letter-spacing: .01em; }
.pcard__nombre a::after { content: ''; position: absolute; inset: 0; }
.pcard__sim { font-size: var(--fs-small); color: var(--muted); margin: 0; }

/* Las dos acciones ya no son botones dibujados, pero siguen siendo botones:
   el relleno vertical les da un área de toque cómoda sin que se vea nada. */
.pcard__foot {
  margin-top: auto; padding-top: .35rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.pcard__ver {
  flex: none; padding: .55rem 0;
  font: 600 var(--fs-micro)/1 var(--body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: .35rem;
}
.pcard__ver i { font-style: normal; transition: transform .25s var(--ease); }

/* Las fórmulas, dentro de la tarjeta, son texto corrido separado por punto
   medio. La chapa con borde sigue viva en el resto del sitio. */
.pcard .gaschips { display: block; font: 500 var(--fs-micro)/1.4 var(--mono); color: var(--fg); }
.pcard .gaschip {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: .06em;
}
.pcard .gaschip + .gaschip::before { content: ' · '; color: var(--muted); }

.pgrid {
  display: grid;
  gap: clamp(2.4rem, 4.5vw, 3.4rem) var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

/* -------------------------------------------------- migas */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font: 400 var(--fs-small)/1 var(--body); color: var(--muted);
  padding-block: 1.4rem;
}
.crumbs span[aria-current] { color: var(--ink); }
.crumbs i { font-style: normal; color: var(--border-2); }

/* -------------------------------------------------- formulario */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .4rem; }
.field label {
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.field label .req { color: var(--accent); }
.field input, .field textarea {
  padding: .8rem .9rem;
  background: var(--card);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(245, 196, 0, .35);
}
.field textarea { resize: vertical; min-height: 132px; }
.field[data-error] input, .field[data-error] textarea { border-color: #b3261e; }
.field .err { font-size: var(--fs-small); color: #b3261e; min-height: 0; }
.field:not([data-error]) .err { display: none; }

.form__status {
  padding: .85rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--border-2);
  font-size: var(--fs-small);
}
.form__status[hidden] { display: none; }
.form__status--ok  { border-color: #1f7a3d; background: #eaf6ee; color: #14532d; }
.form__status--err { border-color: #b3261e; background: #fdecea; color: #7f1d1d; }
.form__hp { position: absolute; left: -9999px; }

/* -------------------------------------------------- footer */
.footer { background: var(--ink); color: #9d9484; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer a { color: #cfc7ba; }
.footer__top {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer h3 {
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 1rem;
}
.footer ul { display: grid; gap: .6rem; font-size: var(--fs-small); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center; padding-top: 1.6rem;
  font: 400 var(--fs-micro)/1.6 var(--mono); letter-spacing: .05em;
}
.footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer__legal a { color: inherit; opacity: .78; }
@media (hover: hover) and (pointer: fine) {
  .footer__legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
}
.footer__fiscal img { height: 52px; width: auto; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

/* -------------------------------------------------- badge RKI */
.rki {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .7rem .95rem;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.rki img { height: 30px; width: auto; }
.rki span {
  font: 500 var(--fs-micro)/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.rki b { display: block; color: var(--ink); font-weight: 500; }

/* -------------------------------------------------- WhatsApp flotante */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(20,18,16,.22);
  transition: transform .22s var(--ease);
}
.wa-float svg { width: 27px; height: 27px; fill: currentColor; }

/* -------------------------------------------------- pie de tarjeta (acciones)
   El título abre la ficha (enlace que cubre la tarjeta); estos dos controles
   quedan por encima para que sigan siendo clickeables. */
.pcard__foot { position: relative; z-index: 1; }
.pcard__ver {
  font: 600 var(--fs-small)/1 var(--body); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem 0;
}
/* Comparar es la acción secundaria: mismo renglón que Vista rápida, pero en
   mono apagado y sin caja. Era el último rectángulo que le quedaba a la
   tarjeta. Cuando está activo se enciende y le aparece la tilde. */
.pcard__cmp {
  flex: none; padding: .55rem 0; background: none; border: 0;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  transition: color .2s var(--ease);
}
.pcard__cmp[aria-pressed="true"] { color: var(--ink); }
.pcard__cmp[aria-pressed="true"]::before { content: '✓\00a0'; }

/* -------------------------------------------------- modal
   <dialog> nativo abierto con showModal() desde products.js: capa superior,
   foco atrapado y Escape los pone el navegador. El dialog ocupa toda la
   pantalla y es transparente; la caja va adentro, así el clic en el fondo
   llega como clic en el propio dialog. Entrada: escala .98→1 y opacidad;
   salida al revés (is-cerrando). En móvil la caja es pantalla completa,
   sube desde abajo y se cierra deslizándola. */
dialog.modal {
  position: fixed; inset: 0; z-index: 150;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(.75rem, 2vw, 1.5rem); border: 0;
  background: transparent; color: inherit;
  display: none; place-items: center;
  overflow: hidden;
}
dialog.modal[open] { display: grid; }
dialog.modal::backdrop {
  background: rgba(20, 18, 16, .58);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
dialog.modal.is-open::backdrop { opacity: 1; }
dialog.modal.is-cerrando::backdrop { opacity: 0; transition-duration: .2s; }

.modal__box {
  position: relative; width: min(100%, 1040px); max-height: min(90vh, 820px);
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(20,18,16,.38), 0 0 0 1px rgba(20,18,16,.08);
  opacity: 0; transform: scale(.98) translateY(8px);
  transition: opacity .26s var(--ease), transform .3s var(--ease);
}
.modal.is-open .modal__box { opacity: 1; transform: none; }
.modal.is-cerrando .modal__box { opacity: 0; transform: scale(.98); transition-duration: .18s; }
.modal--comp .modal__box { width: min(100%, 1120px); }

.modal__x {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.modal__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal__x svg { width: 16px; height: 16px; }

.modal__head {
  padding: 1.4rem 4.5rem 1rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 2px solid var(--ink);
}
.modal__head h2 {
  font: 700 var(--fs-h3)/1.02 var(--head);
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
}
.modal__head p {
  margin: .4rem 0 0;
  font: 500 var(--fs-micro)/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.modal__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal__asa { display: none; }

@media (max-width: 720px) {
  dialog.modal { padding: 0; }
  .modal__box, .modal--comp .modal__box {
    width: 100%; height: 100%; max-height: none;
    border-radius: 0; box-shadow: none;
    opacity: 1; transform: translateY(100%);
    transition: transform .34s var(--ease);
  }
  .modal.is-open .modal__box { transform: none; }
  .modal.is-cerrando .modal__box { opacity: 1; transform: translateY(100%); transition-duration: .26s; }
  .modal.is-arrastrando .modal__box { transition: none; }
  /* asa: la franja de arriba, con una raya en el medio. Es zona de arrastre. */
  .modal__asa {
    display: block; position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 2;
    touch-action: none;
  }
  .modal__asa::before {
    content: ''; position: absolute; left: 50%; top: 11px;
    width: 42px; height: 4px; margin-left: -21px;
    background: var(--border-2); border-radius: 2px;
  }
  .modal__x { top: .55rem; right: .6rem; width: 36px; height: 36px; }
  .modal__head { padding-top: 2.2rem; touch-action: none; }
  .modal__body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* -------------------------------------------------- vista rápida
   Misma gramática que la ficha: el recorte con alfa flota grande a la
   izquierda sobre la superficie crema, con halo y sombra de contacto (sin
   blend); a la derecha marca, nombre en Barlow, descriptor con la raya
   amarilla, tres datos clave, chips, descripción y acciones. */
.vista {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}
.vista__media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--surface) radial-gradient(48% 42% at 50% 46%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 100%);
}
.vista__media::before {
  content: ''; position: absolute; left: 20%; right: 20%; bottom: 9%; 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%);
}
.vista__media > img {
  position: absolute; inset: 9%;
  width: 82%; height: 82%; object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(20,18,16,.16));
  transform: scale(.96);
  transition: transform .6s var(--ease);
}
.modal.is-open .vista__media > img { transform: none; }
.vista__tipo {
  position: absolute; top: .8rem; left: .8rem; z-index: 1;
  padding: .3rem .55rem; background: var(--ink); color: var(--bg);
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}

.vista__datos {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(1.5rem, 3.2vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.4rem, 3vw, 2rem);
}
.vista__marca {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  margin: 0 3rem .8rem 0;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.vista__marca span + span { display: inline-flex; align-items: center; gap: .75rem; }
.vista__marca span + span::before { content: ''; width: 18px; height: 1px; background: var(--border-2); }
.vista__nombre {
  margin: 0;
  font: 700 clamp(2rem, 3.6vw, 3rem)/.95 var(--head);
  letter-spacing: .01em; text-transform: uppercase; color: var(--ink);
  overflow-wrap: anywhere;
}
.vista__sim {
  margin: .8rem 0 1.2rem; padding-left: .8rem;
  border-left: 3px solid var(--accent);
  font-size: var(--fs-lead); line-height: 1.3; color: var(--ink);
}
.vista__kd {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border);
  margin-bottom: 1.1rem;
}
.vista__dato {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .8rem .8rem .7rem;
  border-left: 1px solid var(--border);
}
.vista__dato:first-child { border-left: 0; padding-left: 0; }
.vista__v {
  display: flex; align-items: last baseline; flex-wrap: wrap; gap: .25rem;
  min-height: 1em;
  font: 600 clamp(1.45rem, 2.2vw, 1.95rem)/1 var(--head);
  color: var(--ink);
}
.vista__v b { font-weight: inherit; }
.vista__v small {
  font: 500 var(--fs-micro)/1 var(--head);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.vista__v .vista__largo { font-size: clamp(.98rem, 1.3vw, 1.15rem); line-height: 1.15; }
.vista__k {
  font: 500 var(--fs-micro)/1.25 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.vista__chips { margin-bottom: 1rem; }
.vista__desc p { margin: 0; font-size: var(--fs-small); color: var(--fg); max-width: 46ch; }
.vista__acciones {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: auto; padding-top: 1.5rem;
}
.vista__acciones .btn { padding: .72rem 1.1rem; }
.vista__acciones .btn[aria-pressed="true"] { --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-bd: var(--ink); }

@media (max-width: 720px) {
  .vista { grid-template-columns: 1fr; }
  .vista__media { aspect-ratio: 4 / 3; touch-action: none; }
  .vista__media > img { inset: 7% 12%; width: 76%; height: 86%; }
  .vista__tipo { top: 2.2rem; }
  .vista__datos { padding: 1.25rem 1.15rem 1.5rem; }
  .vista__acciones { padding-top: 1.25rem; }
  .vista__acciones .btn--primary { flex: 1 1 100%; justify-content: center; }
  .vista__acciones .btn--wa, .vista__acciones .btn--ghost { flex: 1 1 0; justify-content: center; }
}

/* -------------------------------------------------- comparador
   Tabla: cabecera con cada equipo flotando sobre la superficie crema (sin
   blend), filas en mono. Las filas donde los valores no coinciden se
   resaltan (is-dif); las iguales quedan en gris. La columna de etiquetas
   se queda fija al scrollear en horizontal. */
.comp { padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); }
.comp__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.comp__tabla {
  width: 100%; min-width: calc(150px + 190px * var(--n, 2));
  border-collapse: collapse; table-layout: fixed;
}
.comp__tabla th, .comp__tabla td { text-align: left; vertical-align: top; }
.comp__tabla thead th { padding: 1.4rem .75rem 1rem 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.comp__tabla thead th:first-child, .comp__tabla tbody th { width: 150px; }
.comp__equipo { display: block; color: var(--ink); }
.comp__media {
  position: relative; display: block; aspect-ratio: 1 / 1; max-width: 220px;
  margin-bottom: .8rem;
  background: var(--surface) radial-gradient(48% 42% at 50% 46%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 100%);
}
.comp__media::before {
  content: ''; position: absolute; left: 20%; right: 20%; bottom: 9%; height: 8%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20,18,16,.18), rgba(20,18,16,0) 72%);
}
.comp__media img {
  position: absolute; inset: 10%;
  width: 80%; height: 80%; object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(20,18,16,.16));
  transition: transform .35s var(--ease);
}
.comp__marca {
  display: block; margin-bottom: .3rem;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.comp__nombre { display: block; font: 700 1.35rem/1.05 var(--head); text-transform: uppercase; letter-spacing: .01em; }
.comp__sim { display: block; margin-top: .25rem; font: 400 var(--fs-micro)/1.35 var(--body); color: var(--muted); }

.comp__tabla tbody th {
  position: sticky; left: 0; z-index: 1;
  padding: .75rem .75rem .75rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font: 500 var(--fs-micro)/1.5 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.comp__tabla tbody td {
  padding: .75rem .75rem .75rem 0;
  border-bottom: 1px solid var(--border);
  font: 400 var(--fs-small)/1.45 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.comp__tabla td.is-nulo { color: var(--border-2); }
.comp__tabla tr.is-dif th { color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); padding-left: .7rem; }
.comp__tabla tr.is-dif td { color: var(--ink); font-weight: 500; background: rgba(245, 196, 0, .07); }
.comp__tabla tr.is-dif td.is-nulo { color: var(--muted); font-weight: 400; }
.comp__pie { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.comp__pie .btn { padding: .6rem .95rem; font-size: var(--fs-micro); }

@media (max-width: 720px) {
  .comp { padding: 0 1rem 1.5rem; }
  .comp__tabla { min-width: calc(110px + 150px * var(--n, 2)); }
  .comp__tabla thead th:first-child, .comp__tabla tbody th { width: 110px; }
  .comp__tabla thead th { padding-top: 1rem; }
  .comp__nombre { font-size: 1.1rem; }
  .comp__tabla tbody th, .comp__tabla tbody td { font-size: var(--fs-micro); }
}

/* barra flotante del comparador */
.cmp-barra {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  z-index: 95;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem .7rem .7rem 1.15rem;
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius); box-shadow: 0 10px 34px rgba(20,18,16,.3);
  animation: fadeUp .3s var(--ease);
}
.cmp-barra[hidden] { display: none; }
.cmp-barra span { font: 500 var(--fs-small)/1 var(--mono); letter-spacing: .06em; }
.cmp-barra .btn { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: var(--accent); padding: .55rem 1rem; }

/* Recuadro cuando la imagen no llegó a cargar: se ve vacío y prolijo, nunca
   con el texto alternativo suelto encima del diseño. */
.sin-imagen {
  background: var(--surface);
  position: relative;
}
.sin-imagen::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 28px; height: 2px; margin: -1px 0 0 -14px;
  background: var(--border-2);
}
.appcard.sin-imagen { background: var(--ink); }
.appcard.sin-imagen::after { background: rgba(255,255,255,.25); }

/* -------------------------------------------------- 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) {
  .nav__marcas img:hover { opacity: 1; transform: scale(1.05); }
  .nav__wa:hover { background: #1da851; transform: translateY(-1px); }
  .nav__link:hover { color: var(--ink); background: rgba(20, 18, 16, .06); }
  .nav__tel a:hover { color: var(--ink); }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .pcard:hover .pcard__alto { border-bottom-color: var(--border-2); }
  .pcard:hover .pcard__media img {
    transform: translateY(-6px) scale(1.03);
    filter: drop-shadow(0 14px 12px rgba(20,18,16,.12));
  }
  .pcard:hover .pcard__media::before { transform: scaleX(1.12); opacity: .7; }
  .pcard:hover .pcard__ver i { transform: translateX(4px); }
  .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .footer a:hover { color: var(--accent); }
  .wa-float:hover { transform: scale(1.07); }
  .pcard__ver:hover i { transform: translateX(4px); }
  .pcard__cmp:hover { color: var(--ink); }
  .modal__x:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .comp__equipo:hover .comp__media img { transform: translateY(-4px); }
  .comp__equipo:hover .comp__nombre { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
}

/* ── Páginas legales ─────────────────────────────────────────────────────────
   Texto largo y sin adornos: una columna angosta, jerarquía por tamaño y no
   por color, y el mismo ritmo vertical que el resto del sitio. */
.legal { max-width: 68ch; margin-block: clamp(2.5rem, 5vw, 3.5rem) clamp(4rem, 8vw, 6rem); }
.legal__fecha { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: 1rem; }
.legal h2 { font-family: var(--head); font-size: var(--fs-h3); line-height: 1.1;
  margin-top: clamp(2.2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--border); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { font-family: var(--head); font-size: 1.1rem; margin-top: 1.6rem; }
.legal p, .legal li { color: var(--fg); line-height: 1.65; }
.legal p { margin-top: .9rem; }
.legal ul { margin-top: .9rem; padding-left: 1.1rem; list-style: none; }
.legal li { position: relative; margin-top: .55rem; padding-left: .2rem; }
.legal li::before { content: ''; position: absolute; left: -1.1rem; top: .62em;
  width: 6px; height: 1px; background: var(--accent); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--accent); }
.legal__nota { margin-top: 1.2rem; padding: 1.1rem 1.2rem; background: var(--surface);
  border-left: 2px solid var(--accent); font-size: var(--fs-small); color: var(--muted); }
.legal__nota p { color: inherit; margin-top: .6rem; }
.legal__nota p:first-child { margin-top: 0; }