/* ============================================================
   IRONCLAD · Tienda: filtros, swatches, drawer del carrito, PDP
   Se carga después de ironclad.css (y de taller.css si existe).
   ============================================================ */
/* ---------- filtros del catálogo ---------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--humo);
  position: sticky; top: 66px; z-index: 30;
  background: rgba(0, 0, 0, .94); backdrop-filter: blur(8px);
}
.filtro {
  min-height: 44px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--humo); border-radius: var(--radius-s);
  /* navegación: cambia la vista, así que va en la monoespaciada */
  font-family: var(--font-dato); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--acero); cursor: pointer;
  transition: color var(--fast) linear, border-color var(--fast) linear, background var(--fast) linear;
}
.filtro:hover { color: var(--papel); border-color: var(--acero); }
.filtro.activo { background: var(--oro); color: var(--negro); border-color: var(--oro); }
/* el filtro de acabado es la lámina sola, sin texto ni marco interior:
   la ocupa entera. El aviso de activo va por fuera, en sombra, para no
   tapar el metal. */
.filtro-metal { padding: 0; line-height: 0; min-height: 0; width: 78px; height: 44px; overflow: hidden; }
.filtro-metal i { display: block; width: 100%; height: 100%; }
.filtro-metal.activo { background: none; border-color: var(--oro); box-shadow: 0 0 0 2px var(--oro); }
.filtros .cuenta { margin-left: auto; }
/* ============================================================
   LÁMINA · muestra de acabado, estándar del sitio
   Texturas que trajo David (texturas.jpg). Dos juegos distintos a
   propósito: las de arriba de esa hoja para el RECTÁNGULO del filtro,
   las de abajo para los CÍRCULOS de tarjeta y ficha.
   OJO: la clase no puede llamarse .metal — ese nombre ya lo usa la placa
   de grabado en ironclad.css (padding 16/32) y los swatches heredaban
   ese relleno, saliendo ovalados.
   El original mide 255x155 px con las cuatro juntas, así que cada tesela
   es pequeña; van reescaladas x4 con lanczos. Dan de sobra al tamaño en
   que se usan (78px el rectángulo, 26px el círculo mayor).
   ============================================================ */
.lamina { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* rectángulo · filtro del catálogo */
.filtro-metal .lamina-oro { background-image: url("../img/lamina-rect-oro.webp"); }
.filtro-metal .lamina-plata { background-image: url("../img/lamina-rect-plata.webp"); }
.filtro-metal .lamina-acero { background-image: url("../img/lamina-rect-plata.webp"); filter: brightness(.62) saturate(.4); }
/* orden y contador, a la derecha de los filtros */
.filtros .cuenta { margin-left: auto; font-family: var(--font-dato); font-size: 11px; letter-spacing: .14em; color: var(--acero); white-space: nowrap; }
.filtros select.campo { min-height: 44px; font-family: var(--font-dato); font-size: 11px; letter-spacing: .1em; padding: 0 12px; }
@media (max-width: 767px) {
  .filtros .cuenta { margin-left: 0; }
}
/* círculo · tarjeta y ficha de producto */
.lamina-oro { background-image: url("../img/lamina-circ-oro.webp"); }
.lamina-plata { background-image: url("../img/lamina-circ-plata.webp"); }
/* el acero no tiene toma propia: sale de apagar la plata */
.lamina-acero { background-image: url("../img/lamina-circ-plata.webp"); filter: brightness(.62) saturate(.4); }
/* swatches en tarjeta */
/* min-height aunque venga vacío: mantiene alineados los precios de la fila */
.card-sw { display: flex; gap: 7px; min-height: 20px; }
/* sin marco: el borde recortaba la lámina y la hacía parecer una ficha */
.card-sw i { flex: none; display: block; width: 20px; height: 20px; border-radius: 50%; }
/* ---------- drawer del carrito ---------- */
.drawer-velo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(420px, 94vw);
  background: var(--negro);
  border-left: 0;
  display: flex; flex-direction: column;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 280ms var(--ease), visibility 0s 280ms;
}
.drawer.abierto { transform: translateX(0); visibility: visible; transition: transform 280ms var(--ease); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  /* más aire arriba: el título arrancaba pegado al borde de la pantalla */
  padding: 34px var(--sp-3) 16px; border-bottom: 1px solid var(--humo); flex: none;
}
.drawer-envio { padding: 12px var(--sp-3) 0; flex: none; }
.drawer-envio p { margin: 0 0 8px; }
.envio-barra { height: 4px; background: rgba(239, 177, 65, .22); }
/* el relleno crece con transform, no con width: sin reflow por fotograma */
.envio-barra i { display: block; width: 100%; height: 100%; background: var(--oro); transform-origin: left center; transition: transform 300ms var(--ease); }
.drawer-items { flex: 1; overflow-y: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: 1px; }
.drawer-linea {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--humo);
}
/* `height: auto` es imprescindible: el <img> trae height="894" como atributo
   y, sin altura en CSS, ese valor gana sobre el aspect-ratio — la foto salía
   de 62x894 px, una tira que reventaba la línea del carrito. */
.drawer-linea img { width: 64px; height: auto; aspect-ratio: 4/5; object-fit: cover; border: 0; flex: none; }
.dl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dl-info b { font-size: 13.5px; color: var(--papel); }
.dl-info .mono { font-size: 11px; }
.dl-qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--humo); width: max-content; }
/* 44px: mínimo táctil, también dentro del carrito */
.dl-qty button {
  width: 44px; height: 40px; min-height: 44px; display: grid; place-items: center;
  color: var(--acero); cursor: pointer; font-size: 15px;
  transition: color var(--fast) linear, background var(--fast) linear;
}
.dl-qty button:hover { color: var(--negro); background: var(--oro); }
.dl-qty button:disabled { opacity: .35; cursor: not-allowed; background: none; color: var(--acero); }
.dl-qty span { min-width: 26px; text-align: center; font-family: var(--font-mono); font-size: 12px; }
.dl-tope { font-family: var(--font-dato); font-size: 11px; letter-spacing: .12em; color: var(--oro); }
.dl-tope.avisa { animation: tope-avisa 1.6s var(--ease); }
@keyframes tope-avisa { 0%, 60% { color: var(--senal); } 100% { color: var(--oro); } }
/* sin movimiento: el aviso sigue ahí (texto), solo no parpadea */
@media (prefers-reduced-motion: reduce) {
  .dl-tope.avisa { animation: none; }
  .pdp-fija { transition: none; }
}
.dl-nota { grid-column: 1 / -1; font-size: 11px; letter-spacing: .12em; color: var(--acero); margin: -4px 0 0; }
.dl-total small { font-family: var(--font-dato); font-size: 11px; letter-spacing: .1em; color: var(--acero); }
.dl-der { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.dl-x { background: none; border: 0; color: var(--acero); font-size: 9px; letter-spacing: .14em; cursor: pointer; min-height: 44px; }
.dl-x:hover { color: var(--alerta); }
.drawer-vacio { text-align: center; padding: var(--sp-6) var(--sp-3); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.drawer-pie { flex: none; border-top: 1px solid var(--humo); padding: var(--sp-3); }
.drawer-pie .totales { margin-bottom: 10px; }
.dl-total { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 14px; }
/* ---------- PDP ---------- */
.sw-acabados { display: flex; gap: 8px; }
/* el botón NO dibuja aro propio: antes el borde del botón quedaba pegado al
   metal y se leían dos bordes encimados. El único aro es el de selección,
   y va SEPARADO por fuera para que se lea como anillo, no como recorte. */
.sw {
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer; position: relative;
  display: grid; place-items: center;
  transition: transform var(--fast) var(--ease);
}
/* el botón se queda en 44px porque es el mínimo táctil, pero el metal lo
   llena: a 28px sobraban 8px de vacío por lado y parecía un hueco, no un
   anillo de selección. Con 36px, los 4px que quedan SON el anillo. */
.sw i { display: block; width: 34px; height: 34px; border-radius: 50%; }
.sw:hover i { outline: 1px solid var(--acero); outline-offset: 3px; }
.sw:active { transform: scale(.92); }
.sw.activo i { outline: 2px solid var(--oro); outline-offset: 3px; }
/* ---------- extensor · accesorio de la ficha ---------- */
.extra {
  display: flex; align-items: center; gap: 14px;
  border: 1px dashed var(--humo); padding: 14px 16px; margin-bottom: 20px;
}
.extra-foto { width: 56px; aspect-ratio: 4/5; flex: none; }
.extra-foto img { width: 100%; height: 100%; object-fit: cover; }
.extra-txt { flex: 1; min-width: 0; }
.extra-txt b { display: block; font-size: 14px; font-weight: 500; color: var(--papel); }
.extra-txt p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--acero); }
.extra-metal { display: flex; gap: 2px; margin-top: 6px; }
/* la lámina se ve de 24px pero el botón mide 44: el mínimo táctil manda */
.extra-metal .sw { width: 44px; height: 44px; }
.extra-metal .sw i { width: 24px; height: 24px; }
.extra-metal .sw.activo i { outline-width: 2px; outline-offset: 2px; }
.extra-add { flex: none; min-height: 44px; padding: 0 16px; font-size: 12px; }
@media (max-width: 520px) {
  .extra { flex-wrap: wrap; }
  .extra-add { width: 100%; }
}
.stock-nota { display: flex; align-items: center; gap: 8px; }
.stock-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.stock-punto.bajo { background: var(--oro); }
@media (max-width: 767px) {
  /* En móvil los 7 filtros envolvían en dos filas: 182px de alto que,
     sumados a la barra, dejaban el 29% de la pantalla ocupado de forma
     permanente al deslizar. Pasan a UNA fila que corre de lado.
     Va a sangre para que el deslizado empiece en el borde, con el aire
     por dentro — así el último botón no queda cortado a medias. */
  .filtros {
    top: 60px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--sp-3) * -1);
    padding-inline: var(--sp-3);
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros > * { flex: none; }
}
/* ---------- modo claro ---------- */
.claro .filtros { background: rgba(244, 242, 237, .95); border-color: rgba(14,14,17,.14); }
.claro .filtro { color: var(--humo); border-color: rgba(14,14,17,.3); }
.claro .filtro:hover { color: var(--negro); border-color: var(--negro); }
.claro .filtro.activo { background: var(--oro); color: var(--negro); border-color: var(--oro); }
.claro .drawer { background: var(--papel); }
.claro .drawer-linea { border-color: rgba(14,14,17,.14); }
.claro .dl-info b { color: var(--negro); }
.claro .drawer-head, .claro .drawer-pie { border-color: rgba(14,14,17,.14); }
/* ============================================================
   FICHA · jerarquía de color, igual que en el inicio
   El dorado marca UNA cosa: la acción. Cuando además pinta el precio,
   los dos chips elegidos, los tres sellos y la miga de pan, deja de
   señalar nada. Aquí todo eso pasa a la escala neutra y el oro se queda
   solo en AGREGAR AL CARRITO.
   ============================================================ */
/* el titular baja de cuerpo y de peso: a 38px en negra 900 pesaba más que
   la foto de al lado y arrastraba a todo lo demás a subir con él */
/* solo se aliviana el peso; el cuerpo vuelve al que trae .d-m */
.pdp-info h1.display { font-weight: 800; font-stretch: 110%; }
.pdp-info .price {
  font-size: clamp(22px, 2.3vw, 27px);
  font-weight: 600; font-stretch: 100%;
  color: var(--papel); letter-spacing: .01em;
}
/* la variante elegida se distingue por contraste, no por un bloque de oro */
.pdp-info .opcion input:checked + span {
  background: rgba(244, 242, 237, .07);
  border-color: var(--papel);
  color: var(--papel);
  font-weight: 500;
}
/* los sellos son tranquilidad, no llamada a la acción */
/* los tres sellos entran en UNA fila: a 12px con 14px de aire se partían
   en dos. Se aprietan lo justo y sólo aquí; en móvil vuelven a envolver. */
.pdp-info .chip {
  color: var(--acero); border-color: var(--humo); font-weight: 400;
  font-size: 11px; letter-spacing: .1em; padding: 8px 10px; white-space: nowrap;
}
.pdp-info .chip:hover { background: none; color: var(--papel); border-color: var(--acero); }
/* valoración · va sobre el título. Estrellas en blanco y no en oro: el oro
   quedó reservado para la acción. */
.valoracion { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; min-height: 44px; }
.valoracion .mono { font-size: 11px; letter-spacing: .14em; }
.estrellas { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 2px; color: var(--humo); }
.estrellas::before { content: "★★★★★"; }
.estrellas i { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--papel); }
.estrellas i::before { content: "★★★★★"; }
/* ---------- reseñas ---------- */
.valoracion { text-decoration: none; transition: color var(--fast) linear; }
.valoracion:hover .mono { color: var(--papel); }
.valoracion:hover .estrellas i { color: var(--oro); }
/* lista, no rejilla de cajas: cada reseña se lee como una entrada seguida
   de la anterior, separada por una línea y no encerrada en un recuadro */
.resenas { display: flex; flex-direction: column; }
.resena { padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--humo); }
.resena:first-child { padding-top: 0; }
.resena:last-child { border-bottom: 0; padding-bottom: 0; }
.resena-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.resena-cab b { font-size: 14px; font-weight: 500; color: var(--papel); }
.resena-cab .mono { font-size: 11px; letter-spacing: .12em; }
.resena p { margin: 0; color: var(--acero); line-height: 1.75; max-width: 74ch; font-size: 15px; }
/* la guía de tallas es una explicación, no una etiqueta: va en Roboto y en
   caja baja, que es como se lee una frase */
.nota-guia {
  margin: 12px 0 0; max-width: 54ch;
  font-size: 14.5px; line-height: 1.7; color: var(--acero);
}
/* ---------- galería de la ficha ---------- */
/* sin marcos y sin aire entre tomas: las tres se leen como un solo bloque.
   Solo se pintan las fotos que existen: 1 → la grande; 2 → grande + una
   segunda a todo el ancho; 3+ → grande + dos mitades. */
.pdp-galeria { display: flex; flex-direction: column; gap: 0; }
.pdp-mitades { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pdp-foto {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: hidden; display: block; width: 100%;
}
.pdp-galeria > .pdp-foto { aspect-ratio: 4 / 5; }
.pdp-mitades .pdp-foto { aspect-ratio: 1 / 1; }
.pdp-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease); }
.pdp-foto:hover img { transform: scale(1.04); }
/* ---------- ficha · bloques nuevos ---------- */
.pdp-entrega { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.pdp-entrega .mono { font-family: var(--font-dato); font-size: 11px; letter-spacing: .12em; }
.pdp-incluye { margin: 14px 0 0; font-family: var(--font-dato); font-size: 11px; letter-spacing: .12em; color: var(--acero); }
.pdp-incluye b { color: var(--papel); font-weight: 400; }
.pdp-igv { margin: 6px 0 0; font-family: var(--font-dato); font-size: 11px; letter-spacing: .12em; color: var(--acero); }
.enlace-guia { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-family: var(--font-dato); font-size: 11px; letter-spacing: .14em; color: var(--oro); }
.enlace-guia:hover { color: var(--oro-claro); }
/* arma tu set · la cuenta del descuento con la pieza que combina */
.set-modulo {
  border: 1px solid var(--humo); padding: 16px 18px; margin: 22px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
}
.set-modulo .kicker { color: var(--acero); }
.set-modulo .set-cuenta { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.set-modulo .set-cuenta .price { font-size: 22px; font-weight: 700; font-stretch: 100%; color: var(--papel); }
.set-modulo .set-cuenta s { font-family: var(--font-dato); font-size: 12px; color: var(--acero); }
.set-modulo .set-cuenta .tag-set { font-family: var(--font-dato); font-size: 11px; letter-spacing: .14em; color: var(--ok); border: 1px solid var(--ok); padding: 3px 7px; }
.set-modulo p { margin: 4px 0 0; font-size: 13.5px; color: var(--acero); }
.set-modulo .btn { min-height: 44px; padding: 0 18px; font-size: 12px; }
/* compartir */
.compartir { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; align-items: center; }
.compartir button, .compartir a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  font-family: var(--font-dato); font-size: 11px; letter-spacing: .14em; color: var(--acero); cursor: pointer;
  transition: color var(--fast) linear;
}
.compartir button:hover, .compartir a:hover { color: var(--papel); }
.compartir svg { width: 15px; height: 15px; }
.compartir .copiado { color: var(--ok); }
/* agotado · aviso cuando vuelva */
.agotado-aviso { margin-top: 12px; border: 1px dashed var(--humo); padding: 14px 16px; }
.agotado-aviso p { margin: 0 0 10px; font-size: 14px; color: var(--acero); }
.agotado-aviso form { display: flex; gap: 8px; flex-wrap: wrap; }
.agotado-aviso .campo { flex: 1; min-width: 180px; }
.agotado-aviso .btn { min-height: 48px; padding: 0 18px; font-size: 12px; }
/* CTA fijo en móvil: aparece cuando el botón real sale de pantalla */
.pdp-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--sp-3) calc(10px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .96); border-top: 1px solid var(--humo);
  transform: translateY(110%);
  transition: transform 220ms var(--ease);
}
.pdp-fija.visible { transform: none; }
.pdp-fija .price { font-size: 20px; font-weight: 700; font-stretch: 100%; color: var(--papel); }
.pdp-fija small { display: block; font-family: var(--font-dato); font-size: 11px; letter-spacing: .12em; color: var(--acero); }
.pdp-fija .btn { min-height: 48px; padding: 0 22px; flex: none; }
@media (min-width: 861px) {
  .pdp-fija { display: none; }
}
/* reseñas con foto */
.resena img { display: block; width: 140px; aspect-ratio: 4 / 5; object-fit: cover; margin-top: 10px; }
.resena-verificada { font-family: var(--font-dato); font-size: 11px; letter-spacing: .14em; color: var(--ok); border: 1px solid var(--ok); padding: 3px 6px; }
.resenas-histo { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; max-width: 320px; margin: 0 0 22px; font-family: var(--font-dato); font-size: 11px; color: var(--acero); }
.resenas-histo i { display: block; height: 4px; background: rgba(239, 177, 65, .22); }
.resenas-histo i b { display: block; height: 100%; background: var(--oro); transform-origin: left center; }
/* ---------- visor ---------- */
.visor {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .94);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(8px, 2vw, 26px); padding: clamp(14px, 3vw, 40px);
}
.visor[hidden] { display: none; }
.visor img { max-width: 100%; max-height: 86vh; margin: 0 auto; object-fit: contain; }
.visor-nav, .visor-x {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--humo); color: var(--acero); cursor: pointer; background: rgba(0,0,0,.5);
  transition: color var(--fast) linear, border-color var(--fast) linear;
}
.visor-nav:hover, .visor-x:hover { color: var(--oro); border-color: var(--oro); }
.visor-nav svg, .visor-x svg { width: 22px; height: 22px; }
.visor-x { position: absolute; top: clamp(14px, 3vw, 32px); right: clamp(14px, 3vw, 32px); z-index: 2; }
.visor-cuenta {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(14px, 3vw, 30px); font-size: 11px; letter-spacing: .2em;
}
@media (max-width: 600px) {
  .visor { grid-template-columns: 1fr; }
  .visor-nav { position: absolute; bottom: clamp(14px, 3vw, 30px); }
  .visor-ant { left: 16px; }
  .visor-sig { right: 16px; }
}
/* ---------- carrito · jerarquía ----------
   Misma regla que en la ficha y las tarjetas: los precios en blanco y el
   oro sólo en la acción. Con cada línea, el subtotal y el total en dorado,
   el panel se leía como una lista de cifras y no como un pedido. */
.drawer .price { color: var(--papel); font-weight: 600; font-stretch: 100%; }
.dl-total .price { font-size: 21px; font-weight: 700; }
.dl-total .display { color: var(--acero); font-weight: 500; }
.drawer .totales dd { color: var(--papel); }
.drawer-linea { align-items: center; }
.dl-info b { font-weight: 500; }
/* el título del panel habla como el menú móvil: Archivo ancha y en blanco,
   no el rótulo mono dorado que usa el resto de la web para etiquetas */
.drawer-head .kicker {
  font-family: var(--font-display);
  font-weight: 900; font-stretch: 125%;
  font-size: 22px; letter-spacing: .01em;
  text-transform: uppercase; color: var(--papel);
}
/* ============================================================
   CHECKOUT · una sola página, tres bloques
   Se evita el checkout por pasos a propósito: con un carrito de 1-3
   piezas, cada pantalla extra es una puerta más por donde el cliente
   se va. Todo a la vista, y el resumen fijo al costado.
   ============================================================ */
.pago-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
}
.pago-cols { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 34px); }
.bloque { border: 0; padding: 0; margin: 0; }
.bloque legend {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--papel);
}
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campos .ancho { grid-column: 1 / -1; }
.campo-wrap .opc { color: var(--acero); font-weight: 400; letter-spacing: .08em; }
select.campo { appearance: none; cursor: pointer; }
.metodos { display: flex; flex-direction: column; gap: 8px; }
.metodo.no-disp { opacity: .38; pointer-events: none; }
.aviso-pago {
  margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--acero);
  max-width: 60ch;
}
.comprobante {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--humo);
}
.tipo-doc { display: flex; gap: 8px; }
.tipo-doc .opcion span { min-width: 88px; min-height: 44px; }
/* ---------- resumen ---------- */
.res-foto { width: 58px; aspect-ratio: 1; flex: none; }
.res-foto img { width: 100%; height: 100%; object-fit: cover; }
.res-precio { font-size: 15px; font-weight: 600; font-stretch: 100%; color: var(--papel); }
.res-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.res-total .price { font-size: 26px; font-weight: 700; font-stretch: 100%; color: var(--papel); }
.res-nota { margin: 12px 0 0; font-size: 11px; line-height: 1.7; text-align: center; }
.res-garantias {
  list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--humo);
  display: flex; flex-direction: column; gap: 7px; font-size: 11px;
}
.res-garantias li::before { content: "✦ "; color: var(--oro); }
#confirmar[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) {
  .pago-grid { grid-template-columns: 1fr; }
  .resumen { position: static; order: -1; }
}
@media (max-width: 520px) {
  .campos { grid-template-columns: 1fr; }
}
/* ============================================================
   BUSCADOR · cuelga de la barra superior
   Va en absolute dentro del header (no en flujo) para que al abrirse
   NO empuje la página hacia abajo: se superpone al contenido.
   ============================================================ */
.buscador {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(0, 0, 0, .97);
  backdrop-filter: blur(10px);
  /* sin bordes arriba ni abajo: la única línea del panel es la del
     campo. El fondo casi opaco ya lo separa de la página. */
  border: 0;
  opacity: 0; transform: translateY(-7px);
  transition: opacity .17s var(--ease), transform .17s var(--ease);
}
.buscador.abierto { opacity: 1; transform: none; }
.buscador-caja { padding-block: 15px 18px; }
.buscador-campo {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--humo); padding-bottom: 9px;
}
.buscador-campo > svg { width: 19px; height: 19px; color: var(--acero); flex: none; }
.buscador-campo input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--papel);
  font-family: var(--font-body); font-size: 17px; font-weight: 400;
  padding: 5px 0;
}
.buscador-campo input::placeholder { color: var(--acero); }
/* el foco lo enseña la línea del campo, no un aro dentro del input */
.buscador-campo:focus-within { border-bottom-color: var(--oro); }
.buscador-campo input:focus-visible { outline: none; }
/* la X nativa de Chrome no se puede estilar y choca con la nuestra */
.buscador-campo input::-webkit-search-cancel-button { display: none; }
.buscador-campo .icon-btn { flex: none; }
.buscador-tit {
  font-family: var(--font-dato); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; color: var(--acero);
  margin: 15px 0 11px;
}
/* la fila: se desborda a lo ancho en vez de partirse en varias líneas */
.buscador-fila {
  display: flex; gap: 15px;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 5px;
  scrollbar-width: thin; scrollbar-color: var(--humo) transparent;
}
.buscador-fila::-webkit-scrollbar { height: 3px; }
.buscador-fila::-webkit-scrollbar-thumb { background: var(--humo); }
.res-b {
  flex: none; width: 128px;
  display: flex; flex-direction: column; gap: 7px;
  text-decoration: none;
}
.res-b img {
  width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; display: block;
}
.res-b-n {
  font-family: var(--font-body); font-size: 13px; line-height: 1.3;
  color: var(--papel);
  transition: color var(--fast) var(--ease);
}
.res-b-p { font-size: 13px; color: var(--acero); }
.res-b:hover .res-b-n { color: var(--oro); }
.buscador-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-b {
  font-family: var(--font-dato); font-size: 11px; letter-spacing: .1em;
  color: var(--acero); background: none;
  border: 1px solid var(--humo); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chip-b:hover { color: var(--papel); border-color: var(--acero); }
.buscador-nada { font-family: var(--font-body); font-size: 14px; color: var(--acero); margin: 16px 0 4px; }
.buscador-nada a { color: var(--oro); }
@media (max-width: 767px) {
  .buscador-caja { padding-block: 12px 15px; }
  .buscador-campo input { font-size: 16px; }
  /* menos de 16 y iOS hace zoom */
  /* estándar móvil: la fila llega a los bordes. El padding devuelve la
     primera ficha a la altura del texto, pero deja que el scroll use
     todo el ancho y que la última asome por el filo. */
  .buscador-fila {
    gap: 11px;
    margin-inline: calc(var(--sp-3) * -1);
    padding-inline: var(--sp-3);
  }
  .res-b { width: 108px; }
}
/* ============================================================
   FASE 4 · checkout con pasarela, gracias y cuenta
   ============================================================ */
/* --- checkout: extras --- */
.pago-sesion { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: -6px 0 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--acero); }
.pago-sesion a, .pago-sesion button { background: none; border: 0; color: var(--oro); font: inherit; letter-spacing: inherit; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.pago-sesion button:focus-visible, .cupon-fila button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.entrega-est { margin: 4px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ok); }
.entrega-est.pendiente { color: var(--senal); }
.metodo small.motivo { display: block; margin-top: 4px; color: var(--senal); }
.cupon-fila { display: flex; gap: 8px; align-items: stretch; }
.cupon-fila .campo { flex: 1; min-width: 0; text-transform: uppercase; }
.cupon-fila button { min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid var(--humo); background: transparent; color: var(--papel); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; cursor: pointer; }
.cupon-fila button:hover { border-color: var(--oro); color: var(--oro); }
.cupon-ok { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ok); }
.cupon-ok button { background: none; border: 0; color: var(--acero); font: inherit; letter-spacing: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px; }
/* casilla propia: el input real mide 44×44 (invisible, encima) y la caja dibujada 20×20 */
.casilla { position: relative; display: block; padding-left: 32px; min-height: 24px; cursor: pointer; font-size: 14px; line-height: 1.55; color: var(--papel); }
.casilla input { position: absolute; left: -12px; top: -10px; width: 44px; height: 44px; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
.casilla .caja { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 1px solid var(--acero); background: var(--negro); transition: border-color var(--fast) linear, background var(--fast) linear; }
.casilla:hover .caja { border-color: var(--papel); }
.casilla input:checked + .caja { background: var(--oro); border-color: var(--oro); }
.casilla input:checked + .caja::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--negro); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.casilla input:focus-visible + .caja { outline: 2px solid var(--oro); outline-offset: 3px; }
.casilla.invalida .caja { border-color: var(--alerta); }
.casilla a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.casilla small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--acero); margin-top: 3px; }
.casilla.invalida { color: var(--alerta); }
.campo-wrap textarea.campo { min-height: 84px; resize: vertical; line-height: 1.5; }
.campo-wrap .contador { text-align: right; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.aviso ul a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.aviso-info { border-color: var(--humo); color: var(--papel); background: rgba(244, 242, 237, .03); }
.aviso-info b { color: var(--oro); }
.aviso-ok { border-color: var(--ok); color: var(--ok); background: rgba(61, 214, 140, .06); }
.aviso-ok b { color: var(--ok); }
.aviso .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aviso .acciones .btn { min-height: 44px; padding: 10px 16px; font-size: 11px; }
.estado-pago { margin-top: 14px; }
.estado-pago[hidden] { display: none; }
.res-igv { margin: 6px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--acero); text-align: right; }
.procesando { position: relative; }
.procesando::after { content: ""; position: absolute; right: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 720ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .pago-grid { grid-template-columns: 1fr; }
  .pago-grid .resumen { position: static; order: -1; }
}
/* --- gracias --- */
.gracias-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-5); }
.estampa { width: clamp(120px, 16vw, 170px); color: var(--oro); transform: rotate(-8deg); animation: estampar 180ms var(--ease) both; }
@keyframes estampar { from { transform: rotate(-8deg) scale(1.4); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.gracias-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(24px, 3.5vw, 52px); align-items: start; }
.gracias-num { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin: 0 0 var(--sp-4); }
.gracias-num .num-serie { font-size: clamp(22px, 3vw, 30px); color: var(--papel); }
.que-sigue { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 14px; }
.que-sigue li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.6; }
.que-sigue .paso-n { margin-top: 2px; color: var(--oro); }
.gracias-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-5); }
.tarjeta { border: 1px solid var(--humo); padding: clamp(18px, 2.4vw, 28px); margin-bottom: var(--sp-4); }
.tarjeta h2 { margin: 0 0 6px; }
.tarjeta > p { margin: 0 0 14px; color: var(--acero); font-size: 14px; line-height: 1.6; }
.medidor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.medidor i { height: 4px; background: var(--humo); }
.medidor[data-nivel="1"] i:nth-child(-n+1), .medidor[data-nivel="2"] i:nth-child(-n+2), .medidor[data-nivel="3"] i:nth-child(-n+3), .medidor[data-nivel="4"] i { background: var(--oro); }
.medidor[data-nivel="1"] i:first-child { background: var(--alerta); }
.reglas { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--acero); }
.reglas li::before { content: "○ "; }
.reglas li.ok { color: var(--ok); }
.reglas li.ok::before { content: "● "; }
@media (max-width: 900px) {
  .gracias-grid { grid-template-columns: 1fr; }
  .gracias-cab { grid-template-columns: 1fr; }
  .estampa { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .estampa { animation: none; }
  .procesando::after { animation: none; border-right-color: currentColor; opacity: .5; }
}
/* --- cuenta --- */
.cuenta-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cuenta-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--sp-3); }
.cuenta-nav a, .cuenta-nav button { background: none; border: 0; text-align: left; cursor: pointer; width: 100%; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-left: 2px solid transparent; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acero); }
.cuenta-nav a:hover, .cuenta-nav button:hover { color: var(--papel); }
.cuenta-nav a[aria-current="page"], .cuenta-nav button[aria-current="page"] { color: var(--oro); border-left-color: var(--oro); }
.cuenta-nav .salir { margin-top: 12px; color: var(--senal); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--humo); margin-bottom: var(--sp-4); }
.pestanas a { display: flex; align-items: center; min-height: 48px; padding: 0 18px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acero); white-space: nowrap; }
.pestanas a[aria-current="page"] { color: var(--oro); border-bottom-color: var(--oro); }
.form-estrecho { max-width: 460px; }
.form-estrecho .campos { grid-template-columns: 1fr; }
.enlace-suave { background: none; border: 0; padding: 0; min-height: 44px; color: var(--oro); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.enlace-suave:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.lista-pedidos { display: grid; gap: 10px; }
.pedido-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--humo); color: var(--papel); transition: border-color var(--fast) linear; }
.pedido-fila:hover { border-color: var(--oro); }
.pedido-fila .num-serie { font-size: 16px; }
.pedido-fila .mono { color: var(--acero); }
.pedido-fila .price { font-stretch: 100%; }
.estado-pedido { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; padding: 5px 10px; border: 1px solid currentColor; color: var(--acero); }
.estado-pedido[data-e="pagado"], .estado-pedido[data-e="pendiente_contraentrega"], .estado-pedido[data-e="preparando"] { color: var(--oro); }
.estado-pedido[data-e="enviado"], .estado-pedido[data-e="entregado"] { color: var(--ok); }
.estado-pedido[data-e="cancelado"], .estado-pedido[data-e="reembolsado"] { color: var(--senal); }
.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--acero); }
.historial b { color: var(--papel); }
.detalle-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(20px, 3vw, 40px); align-items: start; }
.bloque-datos { border: 1px solid var(--humo); padding: 18px; margin-bottom: 14px; font-size: 14px; line-height: 1.7; }
.bloque-datos .kicker { display: block; margin-bottom: 6px; color: var(--acero); }
.direcciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: var(--sp-4); }
.direccion { border: 1px solid var(--humo); padding: 16px; font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; gap: 6px; }
.direccion.predeterminada { border-color: var(--oro); }
.direccion .acciones { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: auto; }
.direccion .acciones button { background: none; border: 0; padding: 0 2px; min-height: 44px; color: var(--oro); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; cursor: pointer; }
.direccion .acciones button.peligro { color: var(--senal); }
.direccion .acciones button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.linea-acciones { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
.linea-acciones button { background: none; border: 0; padding: 0; min-height: 44px; color: var(--oro); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; cursor: pointer; }
.linea-acciones button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
@media (max-width: 900px) {
  .cuenta-grid { grid-template-columns: 1fr; }
  .cuenta-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--humo); padding-bottom: 8px; }
  .cuenta-nav a, .cuenta-nav button { background: none; border: 0; text-align: left; cursor: pointer; width: 100%; border-left: 0; border-bottom: 2px solid transparent; padding: 0 10px; }
  .cuenta-nav a[aria-current="page"], .cuenta-nav button[aria-current="page"] { border-bottom-color: var(--oro); }
  .cuenta-nav .salir { margin-top: 0; margin-left: auto; }
  .detalle-grid { grid-template-columns: 1fr; }
  .pestanas { overflow-x: auto; }
}
/* el atributo hidden manda siempre, aunque la clase ponga display:flex/grid
   (regla al final a propósito: es la última palabra de la hoja) */
[hidden]:not([hidden="until-found"]) { display: none !important; }
/* cuenta: la ruta va en el hash y coincide con el id de la sección. El navegador
   intentaría desplazarse hasta ella (y Chrome lo reintenta al mostrarse), dejando
   el título bajo la barra fija; con este margen el destino queda "arriba del todo". */
#sin-sesion > section, #vista > section, #seguimiento, #solicitud { scroll-margin-top: 100vh; }
@media (max-width: 480px) {
  .pestanas a { padding: 0 10px; font-size: 11px; letter-spacing: .1em; }
}
/* ============================================================
   FASE 5 · legales e informativas
   ============================================================ */
/* datos de la empresa vacíos: el hueco se ve a propósito, en cualquier página */
[data-empresa]:empty::before { content: "⟦DATO⟧"; color: var(--senal); }
/* preguntas dentro de la prosa: mismo <details> que la ficha */
.prosa .faq details { border-top: 1px solid var(--humo); }
.prosa .faq details:last-child { border-bottom: 1px solid var(--humo); }
.prosa .faq summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; color: var(--papel); font-weight: 600; }
.prosa .faq summary::-webkit-details-marker { display: none; }
.prosa .faq summary::after { content: "+"; font-family: var(--font-dato); color: var(--oro); flex: none; }
.prosa .faq details[open] summary::after { content: "−"; }
.prosa .faq summary:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.prosa .faq details > div { padding: 0 0 14px; }
/* libro: formulario dentro de la prosa */
.prosa .campos { margin: 0 0 8px; }
.prosa .campos label { color: var(--acero); }
.prosa .casilla { color: var(--papel); }
.prosa .casilla a { color: var(--oro); }
/* contacto: canales */
.canales { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.canal { display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 18px; border: 1px solid var(--humo); color: var(--papel); transition: border-color var(--fast) linear; }
.canal:hover { border-color: var(--oro); }
.canal b { font-size: 18px; }
.canal .mono { color: var(--acero); font-size: 11px; }
/* hoja del libro al imprimir: solo la hoja, en negro sobre blanco */
@media print {
  body > *:not(main), main > *:not(.hoja), .no-imprimir, .ic-mock-banner { display: none !important; }
  .hoja, .hoja .bloque-datos { display: block !important; border-color: #000; color: #000; }
  .hoja .aviso { border-color: #000; background: none; color: #000; }
  .hoja .kicker, .hoja .mono { color: #000; }
}
/* prosa en móvil: las tablas anchas se desplazan dentro de su caja, nunca la página */
@media (max-width: 600px) {
  .prosa table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* rejilla de campos: un select con opciones largas no puede ensanchar la columna */
.campos > .campo-wrap { min-width: 0; }
.campo-wrap select.campo, .campo-wrap input.campo, .campo-wrap textarea.campo { min-width: 0; width: 100%; }
/* títulos de página en pantallas angostas: una palabra larga (RECLAMACIONES) se parte antes que desbordar */
h1.display { overflow-wrap: anywhere; }
/* ============================================================
   FASE 6 · inicio: franja de confianza, lo que dicen, hablemos
   ============================================================ */
.franja-confianza { margin: 0; padding: 14px 0; border-block: 1px solid var(--humo); text-align: center; font-family: var(--font-dato); font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 2; color: var(--papel); text-wrap: balance; }
.dicen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dicen-grid .resena { border: 1px solid var(--humo); padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 10px; }
.dicen-grid .resena p { flex: 1; }
.dicen-pieza { color: var(--oro); font-size: 11px; letter-spacing: .14em; min-height: 44px; display: inline-flex; align-items: center; }
.hablemos-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
/* resultados del buscador: contenedor de las filas y chips (antes sin regla propia) */
.buscador-res { margin-top: 6px; min-height: 0; }

/* ============================================================
   CAPTURA DE CORREO · popup a pantalla completa
   La foto ocupa la izquierda y se funde en negro hacia la oferta
   con una máscara degradada; en móvil va arriba y se funde hacia
   abajo. Todo con transform/opacity.
   ============================================================ */
.captura { position: fixed; inset: 0; z-index: 70; background: var(--negro); opacity: 0; transition: opacity 280ms var(--ease); }
.captura[hidden] { display: none; }
.captura.visible { opacity: 1; }
.captura-fondo { display: none; }
.captura-caja { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.captura-marca { position: absolute; top: 0; left: 0; right: 0; height: 68px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 11px; pointer-events: none; }
.captura-marca .mark { width: 27px; height: 25px; color: var(--oro); flex: none; }
.captura-marca .word { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 19px; letter-spacing: .01em; color: var(--papel); white-space: nowrap; }
.captura-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: transparent; color: var(--papel); border: 1px solid transparent; cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.captura-x:hover { color: var(--oro); border-color: var(--humo); }
.captura-x:active { transform: scale(.94); }
.captura-x:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* mitad foto, mitad anuncio; la unión se difumina apenas (unos 40 px) para que el corte no sea a cuchillo */
.captura-visual {
  position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; background: var(--placa-bg);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0, 0, 0, 0) 100%);
}
.captura-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.92) contrast(1.03);
  transform: scale(1.06); transition: transform 1800ms var(--ease);
}
.captura.visible .captura-visual img { transform: scale(1); }
.captura.sin-foto .captura-visual { background: radial-gradient(120% 90% at 30% 50%, var(--humo) 0%, var(--grafito) 60%, var(--negro) 100%); }

.captura-cuerpo {
  grid-column: 2; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: clamp(32px, 6vh, 72px) clamp(24px, 4vw, 64px);
}
.captura-paso { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 460px; }
.captura-paso.entra > * { opacity: 0; transform: translateY(12px); animation: captura-sube 480ms cubic-bezier(.16, 1, .3, 1) forwards; }
.captura-paso.entra > :nth-child(2) { animation-delay: 50ms; }
.captura-paso.entra > :nth-child(3) { animation-delay: 100ms; }
.captura-paso.entra > :nth-child(4) { animation-delay: 150ms; }
.captura-paso.entra > :nth-child(5) { animation-delay: 200ms; }
@keyframes captura-sube { to { opacity: 1; transform: none; } }
.captura-h { font-size: clamp(34px, 4.6vw, 64px); line-height: .92; margin: 0; }
.captura-obten { display: block; font-size: .42em; letter-spacing: .12em; color: var(--acero); margin-bottom: .35em; }
.captura-h { text-wrap: balance; }
.captura-pregunta { margin: 4px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--papel); }
.captura-p { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--acero); max-width: 40ch; }
.captura-p b { color: var(--oro); font-weight: 500; }

/* paso 1: cuatro opciones apiladas, con entrada escalonada */
.captura-opciones { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; width: 100%; max-width: 420px; }
.captura-opc {
  min-height: 56px; padding: 0 20px; cursor: pointer; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: transparent; color: var(--papel); border: 1px solid rgba(244, 242, 237, .38);
  font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: .22em;
  opacity: 0; transform: translateY(12px);
  animation: captura-sube 500ms cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(160ms + var(--i, 0) * 50ms);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease);
}
.captura-opc:hover { background: var(--oro); color: var(--negro); border-color: var(--oro); }
.captura-opc:active { transform: scale(.985); }
.captura-opc:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.captura-opc[disabled] { opacity: .38; cursor: not-allowed; }
.captura-opc[disabled]:hover { background: transparent; color: var(--papel); border-color: rgba(244, 242, 237, .38); }
.captura-opc small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--acero); }

/* paso 2: el número se estampa (momento firma) */
.captura-cifra { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--oro); font-family: var(--font-display); font-weight: 900; line-height: .82; letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin: 0; }
.captura-num { font-size: clamp(120px, 16vw, 220px); min-width: 2ch; }
.captura-pct { font-size: clamp(44px, 5.6vw, 84px); }
.captura-paso.entra .captura-cifra { animation: captura-estampa 560ms cubic-bezier(.16, 1, .3, 1) forwards; transform-origin: center bottom; }
@keyframes captura-estampa { from { opacity: 0; transform: rotate(-3deg) scale(1.16); } to { opacity: 1; transform: none; } }
.captura-form { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; width: 100%; max-width: 420px; }
.captura-form label { font-size: 11px; text-align: left; }
.captura-form .campo { width: 100%; min-height: 56px; text-transform: none; font-size: 16px; }
.captura-form .campo[aria-invalid="true"] { border-color: var(--alerta); }
.captura-error { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--alerta); }
.captura-enviar { width: 100%; min-height: 56px; }
.captura-legal { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--acero); max-width: 420px; }
.captura-error { text-align: left; }
.captura-legal a { color: var(--acero); text-decoration: underline; text-underline-offset: 2px; }
.captura-legal a:hover { color: var(--papel); }

/* paso 3: listo */
.captura-check { display: grid; place-items: center; width: 60px; height: 60px; color: var(--negro); background: var(--oro); }
.captura-listo .btn { align-self: center; min-height: 52px; }

html.captura-abierta, html.captura-abierta body { overflow: hidden; }

@media (max-width: 767px) {
  .captura-caja { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .captura-marca { height: 60px; }
  .captura-marca .mark { width: 24px; height: 22px; }
  .captura-marca .word { font-size: 17px; }
  .captura-x { top: 6px; right: var(--sp-3); }
  .captura-visual { inset: 0 0 auto 0; width: 100%; height: 44dvh; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 52px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 52px), rgba(0, 0, 0, 0) 100%); }
  .captura-visual img { object-position: center 42%; }
  .captura-cuerpo { grid-column: 1; grid-row: 1; justify-content: center; max-width: none; padding: calc(44dvh + 14px) 20px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .captura-paso { gap: 14px; }
  .captura-h { font-size: clamp(30px, 9vw, 40px); }
  .captura-opciones { grid-template-columns: 1fr 1fr; max-width: none; }
  .captura-paso { max-width: none; }
  .captura-opc { min-height: 52px; padding: 0 14px; font-size: 12px; letter-spacing: .18em; }
  .captura-num { font-size: 84px; }
  .captura-pct { font-size: 34px; }
  .captura-form, .captura-legal { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .captura, .captura-visual img { transition-duration: 1ms; transform: none; }
  .captura-paso.entra > *, .captura-opc { animation: none; opacity: 1; transform: none; }
  .captura-paso.entra .captura-cifra { animation: none; }
}

/* ---------- pie: formulario de suscripción ---------- */
.footer-captura { padding: 26px 0 8px; border-top: 1px solid var(--humo); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 40px; align-items: center; }
.footer-captura p { margin: 6px 0 0; max-width: 46ch; line-height: 1.8; }
.footer-captura-form { display: flex; gap: 8px; }
.footer-captura-form .campo { flex: 1; min-width: 0; text-transform: none; font-size: 16px; }
.footer-captura-form .btn { flex: none; white-space: nowrap; }
.footer-captura-msg { margin: 8px 0 0; }
.footer-captura-otra { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-captura-otra:hover { color: var(--papel); }
.footer-captura-otra:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.footer-captura-legal { margin: 8px 0 0 !important; font-family: var(--font-body); font-size: 12px; letter-spacing: 0; color: var(--acero); text-transform: none; }
.footer-captura-legal a { color: var(--acero); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) {
  .footer-captura { grid-template-columns: 1fr; gap: 12px; }
  .footer-captura-form { flex-direction: column; }
  .footer-captura-form .btn { width: 100%; }
}
/* solo para lectores de pantalla (etiquetas de campos con placeholder visible) */
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }