/* =============================================================================================
   RESTWARE · LAS PÁGINAS DE EQUIPOS (Fase 24). Hoja PROPIA que se carga DESPUÉS de landing.css y sólo
   en /equipos y sus fichas (la pide la cabeza común cuando la sección es «equipos»). Usa los tokens de
   landing.css —colores, tipografías, radios, anchos— y sus componentes —botones, listas, preguntas, la
   tabla con sus marcas, la prosa— sin redefinirlos. Aquí va sólo lo nuevo: la foto del catálogo, las
   fichas, el precio, la galería, el panel de compra y la barra del teléfono.

   SOBRIO A PROPÓSITO. Lo memorable es la FOTO DEL PRODUCTO, y por eso va sobre blanco: el mismo blanco
   del fondo de la foto, sin marco. Lo demás, papel y tinta: ni sombras genéricas, ni degradados
   decorativos, ni animaciones de entrada por sección. El gesto de la marca —la regla turquesa corta— va
   encima de cada título de sección, sin etiqueta en mayúsculas.

   MÓVIL PRIMERO: escrito para 390 px. Lo que se toca mide 44 px o más, el foco se ve siempre, el texto
   cumple AA y, con menos movimiento pedido, nada se desliza.
   ============================================================================================= */

.equipos main { display: block; }

/* El título de sección: la regla turquesa de la marca ENCIMA, sin etiqueta. */
.eq-titulo {
  font-size: clamp(1.6rem, 1.28rem + 1.5vw, 2.4rem);
  line-height: 1.12;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.eq-titulo::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: .9rem;
  border-radius: 2px;
  background: var(--turquesa);
}
.eq-titulo--chico { font-size: clamp(1.3rem, 1.18rem + .5vw, 1.6rem); margin-bottom: 1rem; }
.eq-titulo--chico::before { width: 32px; height: 3px; margin-bottom: .7rem; }

.eq-enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.eq-varios { margin: clamp(1.5rem, 3vw, 2rem) 0 0; font-size: .9375rem; color: var(--n600); }
.eq-varios a { font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────── 1 · la cabecera y su foto */

.eq-cabecera { background: var(--blanco); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem); }
.eq-cabecera h1 { font-size: clamp(2.05rem, 1.45rem + 2.7vw, 3.5rem); max-width: 18ch; }
.eq-cabecera__sub {
  margin: 1.1rem 0 0;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  line-height: 1.55;
  color: var(--n600);
}
.eq-hechos {
  list-style: none; margin: 1.75rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--n300);
  display: grid; gap: .6rem;
  font-size: .9375rem; color: var(--n600);
}
.eq-hechos strong { color: var(--tinta); font-weight: 600; }
@media (min-width: 760px) { .eq-hechos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* LA FOTO: sobre el mismo blanco que su fondo, sin marco. La proporción la reservan width y height. */
.eq-cabecera__foto { margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 0; }
.eq-cabecera__foto img { display: block; width: 100%; }

/* ──────────────────────────────────────────────────────────────────────────────── 2 · las fichas */

.eq-fichas { padding-block: var(--seccion); }
.eq-fichas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }

/* UNA FICHA: plana, con canto y sin sombra. Lo que la distingue de las otras es su foto. */
.eq-ficha {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--n300);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding-bottom: 1.35rem;
  transition: border-color .15s;
}
.eq-ficha:hover { border-color: var(--n500); }
.eq-ficha > :not(.eq-ficha__foto) { margin-inline: 1.35rem; }
.eq-ficha__foto { display: block; background: var(--blanco); border-bottom: 1px solid var(--n200); }
.eq-ficha__foto img { display: block; width: 100%; }
.eq-ficha__nombre { margin-top: 1.1rem; font-size: 1.25rem; line-height: 1.25; }
.eq-ficha__nombre a { color: var(--tinta); text-decoration: none; }
.eq-ficha__nombre a:hover { text-decoration: underline; }
.eq-ficha__piezas {
  list-style: none; padding: 0; margin-top: .75rem; margin-bottom: 1.25rem;
  font-size: .9375rem; color: var(--n600);
}
.eq-ficha__piezas li { position: relative; padding-left: 1rem; margin-bottom: .3rem; }
.eq-ficha__piezas li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--n500);
}
/* El precio y los botones se apoyan abajo: en la rejilla de tres, las cifras quedan a la misma altura. */
.eq-ficha .eq-precio, .eq-ficha__sin-precio { margin-top: auto; }
.eq-ficha__acciones { display: grid; gap: .6rem; margin-top: 1rem; }
.eq-ficha__sin-precio { margin-bottom: 0; color: var(--n600); font-size: .9375rem; }

/* Entre 720 y 1039 px una ficha a lo ancho: foto a la izquierda, datos a la derecha. */
@media (min-width: 720px) and (max-width: 1039px) {
  .eq-ficha {
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto auto auto;
    column-gap: 1.5rem; padding-bottom: 1.35rem;
  }
  .eq-ficha__foto { grid-column: 1; grid-row: 1 / -1; border-bottom: 0; border-right: 1px solid var(--n200); align-self: stretch; display: grid; place-items: center; }
  .eq-ficha > :not(.eq-ficha__foto) { grid-column: 2; margin-inline: 0 1.5rem; }
}
@media (min-width: 1040px) {
  .eq-fichas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ────────────────────────────────────────────────────────────────────────────────── el precio */

.eq-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-bottom: 0; max-width: none; }
.eq-precio__cifra { font: 700 2rem/1.05 var(--titulos); letter-spacing: -.02em; color: var(--tinta); }
.eq-precio__nota { font-size: .875rem; color: var(--n600); }
.eq-precio--grande .eq-precio__cifra { font-size: clamp(2.3rem, 1.9rem + 1.6vw, 3rem); }

/* LAS TIENDAS, con su logo oficial (parte 3): botones secundarios sobre fondo blanco liso —lo piden las dos
   marcas—, con el logo a su tamaño de archivo reducido, nunca agrandado. No compiten con «Comprar este kit». */
.eq-tiendas { margin: 1.1rem 0 0; }
.eq-tiendas__titulo { margin: 0 0 .45rem; font-size: .8125rem; font-weight: 600; color: var(--n600); }
.eq-tiendas-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.eq-tienda { flex: 1 1 9.5rem; min-height: 64px; padding: .3rem .75rem; background: var(--blanco); }
.eq-tienda:hover { background: var(--blanco); }
.eq-tienda img { display: block; max-width: 100%; height: auto; }
.eq-tienda[data-tienda="mercado-libre"] img { width: 128px; }
.eq-tienda[data-tienda="amazon"] img { width: 116px; }

/* ───────────────────────────────────────────────────────────────────────────── 3 · la comparativa */
/* La tabla es la de la landing (tarjeta por fila en el teléfono, tabla en pantalla ancha); aquí sólo la
   columna de la cifra, más marcada. */

.eq-compara { padding-block: var(--seccion); background: var(--n200); }
.eq-compara__tabla { max-width: 1100px; }
@media (min-width: 800px) {
  .eq-compara__tabla { background: var(--blanco); border: 1px solid var(--n300); border-radius: var(--r-lg); overflow: hidden; }
}
.eq-tabla__precio { font-weight: 700; color: var(--tinta); }

/* ─────────────────────────────────────────────────────────────── 4 · qué obtienes comprando aquí */

.eq-aqui { background: var(--tinta); color: var(--papel); padding-block: var(--seccion); }
.eq-aqui__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
.eq-aqui__lista h3 { font-size: 1.125rem; margin-top: .9rem; }
.eq-aqui__lista p { margin: .45rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--n400); max-width: 42ch; }
.eq-icono {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: var(--turquesa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 620px) { .eq-aqui__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .eq-aqui__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ───────────────────────────────────────────────────────────────────────── 5 · la compra en pasos */

.eq-pasos { padding-block: var(--seccion); }
.eq-pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: paso; }
.eq-pasos__lista li { counter-increment: paso; position: relative; padding-left: 3.25rem; }
/* El número, en el único uso del turquesa con un signo encima: bloque sólido con tinta (9.67:1). */
.eq-pasos__lista li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -.1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--turquesa); color: var(--tinta);
  font: 700 1.05rem/1 var(--titulos);
}
.eq-pasos__lista h3 { font-size: 1.125rem; }
.eq-pasos__lista p { margin: .35rem 0 0; font-size: .9375rem; color: var(--n600); }
@media (min-width: 620px) { .eq-pasos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
@media (min-width: 1040px) { .eq-pasos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ──────────────────────────────────────────────────────────── 6 · envío, garantía y devoluciones */

.eq-condiciones { padding-block: var(--seccion); background: var(--blanco); border-block: 1px solid var(--n300); }
.eq-condiciones__rejilla { display: grid; gap: 1.5rem; }
.eq-condiciones__rejilla h3 { font-size: 1.125rem; }
.eq-condiciones__rejilla p { margin: .45rem 0 0; font-size: .9375rem; color: var(--n600); }
.eq-condiciones__mas { margin: 1.5rem 0 0; }
.eq-condiciones__mas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 860px) { .eq-condiciones__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

.eq-preguntas { padding-block: var(--seccion); }

/* ═════════════════════════════════════════════════════════════════════════════ LA FICHA DE UN KIT */

.eq-migas { padding-top: 1.25rem; font-size: .875rem; }
.eq-migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: var(--n600); }
.eq-migas li + li::before { content: "/"; margin-right: .5rem; color: var(--n500); }
.eq-migas a { display: inline-flex; align-items: center; min-height: 44px; }
.eq-migas [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }

.eq-producto { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-block: .5rem clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 1040px) {
  .eq-producto { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  /* El panel de compra acompaña a las fotos mientras se bajan. */
  .eq-compra { position: sticky; top: calc(var(--barra-h) + 1.5rem); }
}

/* ─────────────────────────────────────────────────────────────────────────────────── la galería */
/* SIN JavaScript ya funciona: una tira que se desplaza y se detiene en cada foto, y miniaturas que son
   enlaces a cada una. equipos.js añade las flechas, las teclas y el aviso de cuál foto se ve. */

.galeria { min-width: 0; }
.galeria__visor {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--blanco);
  border: 1px solid var(--n300);
  border-radius: var(--r-lg);
}
.galeria__visor::-webkit-scrollbar { display: none; }
.galeria__visor:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.galeria__fotos { list-style: none; margin: 0; padding: 0; display: flex; }
.galeria__foto { flex: 0 0 100%; scroll-snap-align: start; }
.galeria__foto img { display: block; width: 100%; }

.galeria__controles { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.galeria__miniaturas { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.galeria__miniatura {
  display: block; width: 76px; flex: 0 0 auto;
  border: 2px solid var(--n300); border-radius: 10px; overflow: hidden; background: var(--blanco);
}
.galeria__miniatura img { display: block; width: 100%; height: auto; }
.galeria__miniatura:hover { border-color: var(--n500); }
.galeria__miniatura[aria-current="true"] { border-color: var(--tinta); }
@media (min-width: 560px) { .galeria__miniatura { width: 96px; } }

.galeria__flecha {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--n300); cursor: pointer;
}
.galeria__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.galeria__flecha:hover { border-color: var(--tinta); }
.galeria__flecha:disabled { opacity: .4; cursor: default; }
/* Sin guion las flechas no sirven y no se ven; pero su hueco se RESERVA, para que la fila de miniaturas no
   brinque cuando equipos.js las enciende (eso contaba como salto de maquetación). */
.galeria__flecha[hidden] { display: grid; visibility: hidden; }

/* ───────────────────────────────────────────────────────────────────────────── el panel de compra */

.eq-compra h1 { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.6rem); line-height: 1.1; }
.eq-compra__resumen { margin: .9rem 0 1.4rem; color: var(--n600); }
.eq-compra .eq-precio { margin-bottom: 1rem; }
.eq-compra__tiendas { display: grid; gap: .6rem; margin-top: 1rem; }
.eq-compra__datos { margin-top: 1.5rem; }
.eq-compra__datos li { font-size: .9375rem; color: var(--n600); }
.eq-compra__datos strong { color: var(--tinta); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────── lo que trae la caja, y lo que no */

.eq-detalle { display: grid; gap: clamp(2rem, 5vw, 3rem); padding-bottom: var(--seccion); }
@media (min-width: 900px) { .eq-detalle { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4.5rem); } }
.eq-detalle__nota { margin: 0; color: var(--n600); font-size: .9375rem; }
.eq-piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.eq-piezas li { padding-bottom: 1rem; border-bottom: 1px solid var(--n300); }
.eq-piezas li:last-child { border-bottom: 0; padding-bottom: 0; }
.eq-piezas h3 { font-size: 1.0625rem; }
.eq-piezas p { margin: .35rem 0 0; font-size: .9375rem; color: var(--n600); }
.eq-specs { margin: 0; border-top: 1px solid var(--n300); }
.eq-specs div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--n300); }
.eq-specs dt { font-size: .875rem; font-weight: 600; color: var(--n600); }
.eq-specs dd { margin: 0; font-size: .9375rem; }

/* ─────────────────────────────────────────────────────────────────────────────── los otros kits */

.eq-otros { padding-block: var(--seccion); }
.eq-otros__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 620px) { .eq-otros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eq-otro {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding: .75rem; min-height: 44px;
  background: var(--blanco); border: 1px solid var(--n300); border-radius: var(--r-md);
  color: var(--tinta); text-decoration: none;
}
.eq-otro:hover { border-color: var(--n500); }
.eq-otro img { grid-row: 1 / span 2; display: block; width: 100%; border-radius: 8px; }
.eq-otro__nombre { font-weight: 600; line-height: 1.3; }
.eq-otro__precio { font-size: .875rem; color: var(--n600); }

/* ──────────────────────────────────────────────────────────── la barra de compra del teléfono */
/* Fija abajo, con el precio y el botón. El PIE reserva su alto —y no el cuerpo—: así lo último que se lee
   no queda debajo de la barra y el hueco es del mismo tinta del pie, no una franja clara al final. En
   pantalla ancha no se pinta: el panel de compra ya acompaña a las fotos. */

.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem max(1rem, env(safe-area-inset-left)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
  background: var(--blanco);
  border-top: 1px solid var(--n300);
  transition: transform .2s ease, visibility 0s linear 0s;
}
.barra-compra__precio { margin: 0; font: 700 1.35rem/1.1 var(--titulos); color: var(--tinta); }
.barra-compra__precio span:last-child { display: block; font: 400 .8125rem/1.3 var(--cuerpo); color: var(--n600); }
.barra-compra .btn { flex: 0 0 auto; }
/* Mientras el botón principal está a la vista, sobra (lo decide equipos.js). Oculta de verdad: fuera
   del foco y del lector de pantalla, no sólo fuera de la vista. */
.barra-compra[data-oculta] { transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.con-barra-compra .pie { padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + 5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 1040px) {
  .barra-compra { display: none; }
  .con-barra-compra .pie { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
}

/* ──────────────────────────────────────────────────── la compra y el pedido (Fase 24, parte 2) */
/* Una columna de tarjetas, del ancho de lectura: entrar para comprar, la confirmación y el pedido se leen
   de arriba abajo en el teléfono y en la computadora. Todo control mide al menos 44 px. */

.eq-paso { padding-block: .5rem clamp(2.5rem, 6vw, 4.5rem); }
.eq-paso__titulo { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); line-height: 1.12; margin: .25rem 0 1.25rem; }
.eq-paso__kit { margin-top: 1rem; }
.eq-paso__acciones { display: grid; gap: .75rem; margin-top: 1.25rem; }
.eq-tarjeta {
  background: var(--blanco); border: 1px solid var(--n300); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 4vw, 2rem); margin-bottom: 1rem;
}
.eq-tarjeta h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 .75rem; }
.eq-tarjeta > :last-child { margin-bottom: 0; }
.eq-tarjeta--aviso { border-color: var(--tinta); border-width: 2px; }
.eq-nota { font-size: .9375rem; color: var(--n600); margin-top: .75rem; }
.eq-fecha { font-size: 1.0625rem; margin-top: .75rem; }
.eq-codigo { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.eq-subtitulo { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; }
.eq-direccion { margin-bottom: .5rem; }
.eq-google img { margin-right: .6rem; }

.eq-aviso {
  border: 1px solid var(--n300); border-left: 6px solid var(--secundario); border-radius: var(--r-md);
  background: var(--blanco); padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.eq-aviso p { margin: 0; }
.eq-aviso--error { border-left-color: #A3211B; }
.eq-aviso--exito { border-left-color: var(--turquesa-honda); }
/* El aviso de los errores de la dirección (parte 3b): un título chico y la lista de enlaces a cada campo. */
.eq-aviso__titulo { font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; margin: 0 0 .4rem; }
.eq-aviso__lista { margin: 0; padding-left: 1.25rem; }
.eq-aviso__lista li + li { margin-top: .35rem; }

.eq-resumen__cabeza { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.eq-resumen__cabeza img { width: 5.5rem; height: auto; border-radius: 10px; border: 1px solid var(--n200); }
.eq-resumen__cabeza h2 { margin: 0; }
.eq-cuentas { margin: 0; }
.eq-cuentas > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--n200); }
.eq-cuentas dt { color: var(--n600); }
.eq-cuentas dd { margin: 0; font-weight: 600; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eq-cuentas__total { border-bottom: 0 !important; }
.eq-cuentas__total dt { color: var(--tinta); font-weight: 600; }
.eq-cuentas__total dd { font: 700 1.5rem/1.1 var(--titulos); }

.eq-opcion { margin-top: 1.25rem; }
.eq-opcion__pregunta { font-weight: 600; margin-bottom: .6rem; }
.eq-opcion__pregunta span { display: block; font-weight: 400; font-size: .9375rem; color: var(--n600); }
.eq-opcion__botones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.eq-opcion__botones button {
  min-height: 48px; padding: .5rem .75rem; border-radius: 12px; cursor: pointer;
  font: 600 .9375rem/1.2 var(--cuerpo); color: var(--tinta);
  background: var(--blanco); border: 1px solid rgba(13, 46, 61, .28);
}
.eq-opcion__botones button:hover { border-color: var(--tinta); }
.eq-opcion__botones button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.eq-pagar { margin-top: 1rem; }
/* La casilla se toca por su etiqueta: la fila entera mide al menos 44 px aunque el texto quepa en una línea. */
.eq-casilla { display: flex; align-items: center; gap: .75rem; min-height: 44px; margin-bottom: 1rem; }
.eq-casilla input { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--tinta); }
.eq-casilla label { line-height: 1.45; padding-block: .35rem; }

.eq-escala { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.eq-escala__paso { position: relative; padding-top: .9rem; font-size: .875rem; color: var(--n600); }
.eq-escala__paso::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: var(--n200); }
.eq-escala__paso--hecho { color: var(--tinta); font-weight: 600; }
.eq-escala__paso--hecho::before { background: var(--turquesa-honda); }

.eq-formulario { margin-top: 1rem; }
.eq-campo { margin-bottom: 1rem; }
.eq-campo label { display: block; font-weight: 600; margin-bottom: .35rem; }
.eq-entrada {
  display: block; width: 100%; min-height: 48px; padding: .6rem .8rem;
  font: 400 1rem/1.3 var(--cuerpo); color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--n500); border-radius: 10px;
}
.eq-entrada--corta { max-width: 9rem; }
.eq-entrada[aria-invalid="true"] { border-color: #A3211B; border-width: 2px; }
.eq-campo__ayuda { margin: .35rem 0 0; font-size: .875rem; color: var(--n600); }
.eq-campo__error { margin: .35rem 0 0; font-size: .875rem; font-weight: 600; color: #A3211B; }
.eq-entrada--media { max-width: 16rem; }
textarea.eq-entrada { min-height: 4.5rem; resize: vertical; }
.eq-opcional { font-weight: 400; color: var(--n600); }

/* LA DIRECCIÓN DE ENVÍO (parte 3): una columna en el teléfono; número exterior e interior, y código postal y
   municipio, lado a lado donde caben. */
.eq-direccion-form { border: 0; margin: 1rem 0 0; padding: 0; min-width: 0; }
.eq-fila { display: grid; gap: 0 1rem; }
@media (min-width: 520px) { .eq-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* EL MAPA: ayuda, no requisito. Se ve sólo con llave; si Google no carga, el guion lo marca «sin-mapa» y se
   quedan el aviso y los campos. */
.eq-mapa { margin: 1rem 0 1.25rem; }
.eq-mapa__titulo { margin: 0 0 .45rem; font-weight: 600; }
.eq-mapa__buscador { margin-bottom: .6rem; }
.eq-mapa__buscador gmp-place-autocomplete { display: block; width: 100%; }
.eq-mapa__lienzo { height: 18rem; border: 1px solid var(--n300); border-radius: 10px; background: var(--n100); overflow: hidden; }
@media (min-width: 760px) { .eq-mapa__lienzo { height: 22rem; } }
.eq-mapa[data-mapa-estado="sin-mapa"] .eq-mapa__titulo,
.eq-mapa[data-mapa-estado="sin-mapa"] .eq-mapa__buscador,
.eq-mapa[data-mapa-estado="sin-mapa"] .eq-mapa__lienzo,
.eq-mapa[data-mapa-estado="sin-mapa"] #mapa-ayuda { display: none; }

@media (min-width: 640px) {
  .eq-paso__acciones { grid-template-columns: 1fr 1fr; }
  .eq-paso__acciones .eq-google { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-compra, .barra-compra[data-oculta] { transition: none; }
  .galeria__visor { scroll-behavior: auto; }
}