/* nv-landing.css — landing por categoría dentro de la ficha (T11 · v2). Depende de nv-base.
   Solo tokens --nv-; los únicos literales son los velos rgba sobre tinta, el dorado del filete de la foto del panel
   oscuro y --nv-landing-tenue. Nada de «liquid glass»: sin backdrop-filter, sin sombras; radio 0 salvo el sello
   circular de la garantía. Ningún 100vw (con él la barra de desplazamiento desborda el body). Cero JS propio.
   SE RETIRA de la v1 el selector universal .nv-landing *{border-radius:0;box-shadow:none}: pisaba también los
   componentes de T0 embebidos. Los rellenos verticales van en variables --nv-lp-* y no repetidos punto por punto. */

.nv-landing{
  --nv-landing-ancho:1100px;            /* bloques anchos (§2.2) */
  --nv-landing-lectura:860px;           /* bloques de texto */
  /* --nv-muted (#878787) sobre papel da 3,5:1: vale en 18 px o más, NO en los 13–15 px de pies y rótulos.
     #4a4a4a es la tinta al 78 % y da 8,9:1. No es un color de marca: es un neutro para cumplir AA. */
  --nv-landing-tenue:#4a4a4a;
  --nv-lp-a:72px;                       /* apertura, pasos, preguntas, cierre */
  --nv-lp-b:64px;                       /* fichas de dato, colores, detalles, opiniones */
  --nv-lp-c:80px;                       /* paneles de tinta: contraste y garantía */
  --nv-lp-d:56px;                       /* banda gris de ficha técnica */
  --nv-lp-e:34px;                       /* franja de promesas */
  --nv-lp-panel:56px;                   /* relleno interior de los paneles de tinta */
  --nv-lp-gap:56px;                     /* hueco de las dos columnas */
  margin:var(--nv-section-mb) 0;color:var(--nv-ink)
}
.nv-landing__ancho{width:min(var(--nv-landing-ancho),100% - 60px);margin-inline:auto;box-sizing:border-box}
.nv-landing__estrecho{width:min(var(--nv-landing-lectura),100% - 60px);margin-inline:auto;box-sizing:border-box}
.nv-landing__h2{margin-bottom:24px}
.nv-landing .nv-landing__ante{margin:0 0 14px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-accent-dark)}
.nv-landing__vinetas,.nv-landing__garantia-lista{margin:0;padding:0;list-style:none}
.nv-landing__vinetas li,.nv-landing__garantia-lista li{position:relative;padding-left:28px;font-size:15px;line-height:1.6}
.nv-landing__vinetas li+li,.nv-landing__garantia-lista li+li{margin-top:12px}
.nv-landing__vinetas li::before,.nv-landing__garantia-lista li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--nv-accent)}
/* Único pisado de una clase de T0, y solo dentro de la landing: destino táctil ≥44 px (en la v1 medían 40). */
.nv-landing .nv-btn--base{min-height:44px}

/* Paneles de tinta (4, 9 y 12). Blanco sobre #151515 = 17,4:1. Donde va la textura de oro (4 y 9) se le pone ENCIMA
   un velo plano y opaco, no un degradado: la luminancia detrás del texto queda acotada pase lo que pase con el brillo
   de la seda. La banda dorada de la v1, sin velo, medía 2,5–3,1:1 en escritorio y 1,24–1,89:1 en móvil.
   El velo es .90 y no .86: medido sobre el PNG con .86, el dorado del antetítulo daba 4,37:1 y AA pide 4,5 en texto
   normal. La especificación manda subir el velo, nunca bajar el tamaño de letra. */
.nv-landing .is-tinta{color:#fff;background-color:var(--nv-ink)}
.nv-landing .is-tinta :focus-visible{outline:2px solid #fff;outline-offset:2px}
.nv-landing__hl--contraste .is-tinta,.nv-landing__garantia .is-tinta{
  background-image:linear-gradient(rgba(21,21,21,.9),rgba(21,21,21,.9)),var(--nv-textura-oro);
  background-size:auto,cover;background-position:center;background-repeat:no-repeat}

/* 1 · Promesas. Sin filetes verticales a toda altura (en la v1 la franja parecía una tabla) y con la caja del
   rótulo a min-height:2.6em para que los cuatro párrafos arranquen a la misma altura. */
.nv-landing__promesas{padding:var(--nv-lp-e) 0;border-block:1px solid var(--nv-border)}
.nv-landing__promesas-lista{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none}
.nv-landing__promesa{display:flex;margin:0}
.nv-landing__promesa>a,.nv-landing__promesa-caja{display:block;box-sizing:border-box;width:100%;padding:22px;text-decoration:none;color:inherit;background:var(--nv-soft-bg);border:1px solid var(--nv-border)}
.nv-landing__icono{display:block;width:28px;height:28px;margin:0 0 12px;color:var(--nv-accent-dark)}
.nv-landing__promesa-t{display:block;min-height:2.6em;font-size:14px;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;color:var(--nv-ink);transition:color var(--nv-t-link)}
.nv-landing__promesa>a:hover .nv-landing__promesa-t{color:var(--nv-accent-dark)}
.nv-landing__promesa-p{display:block;margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--nv-landing-tenue)}

/* 2 y 4 · Apertura y panel de contraste. align-items:start, NO center: el aire muerto medido en la v1 era de 352 px,
   el 67 % de la columna. object-position:center bottom porque 311 de 537 fotos son verticales de proporción irregular
   y el zapato está en la mitad inferior: el recorte centrado le corta el producto. */
.nv-landing__hl{padding:var(--nv-lp-a) 0}
.nv-landing__hl--contraste{padding:var(--nv-lp-c) 0}
.nv-landing__hl-caja{display:grid;grid-template-columns:1fr 1fr;gap:var(--nv-lp-gap);align-items:start}
.nv-landing__hl--contraste .nv-landing__hl-caja{padding:var(--nv-lp-panel)}
.nv-landing__hl--sin-foto .nv-landing__hl-caja{grid-template-columns:1fr}
.nv-landing__hl--contraste .nv-landing__hl-foto{order:-1}
.nv-landing__hl-texto p{margin:0 0 24px;font-size:16px;line-height:1.7}
.nv-landing__hl-foto,.nv-landing__cierre-foto{margin:0;line-height:0}
.nv-landing__hl-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center bottom}
/* 0 de 537 fotos tienen fondo oscuro: a sangre sobre tinta serían un agujero claro. El filete es una decisión. */
.nv-landing__hl--contraste .nv-landing__hl-img{border:1px solid rgba(161,146,61,.55)}
.nv-landing__hl-pie,.nv-landing__detalle-pie{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--nv-landing-tenue)}
.nv-landing__hl--contraste .nv-landing__hl-texto .nv-landing__ante{color:var(--nv-accent)}
.nv-landing__hl--contraste .nv-landing__hl-texto p{color:rgba(255,255,255,.88)}
.nv-landing__hl--contraste .nv-landing__vinetas li{color:#fff}
.nv-landing__hl--contraste .nv-landing__hl-pie{color:rgba(255,255,255,.82)}

/* 3 · Fichas de dato. auto-fit hace que con tres tarjetas queden tres columnas sin hueco fantasma: el caso normal de
   Mocasines y Accesorios, donde el cuarto dato no existe y su tarjeta desaparece sola. */
.nv-landing__atributos{padding:var(--nv-lp-b) 0;background:var(--nv-soft-bg)}
.nv-landing__atributos-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.nv-landing__atributo{box-sizing:border-box;padding:26px;background:var(--nv-light);border:1px solid var(--nv-border)}
.nv-landing__atributo-i{display:block;margin-bottom:14px}
.nv-landing__atributo-i .nv-landing__icono{width:32px;height:32px;margin:0}
.nv-landing__atributo-t,.nv-landing__dato dt{margin:0 0 6px;font-size:13px;font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.04em;color:var(--nv-landing-tenue)}
.nv-landing__atributo-v{margin:0;font-size:16px;line-height:1.5;color:var(--nv-ink)}

/* 5 · Muestra por color. El activo se marca con filete dorado Y con aria-current; el agotado, con opacidad Y con el
   rótulo «Agotado»: ninguna de las dos diferencias se anuncia solo con color. */
.nv-landing__colores{padding:var(--nv-lp-b) 0}
.nv-landing__colores-p{margin:-10px 0 26px;font-size:15px;line-height:1.6;text-align:center;color:var(--nv-landing-tenue)}
.nv-landing__colores-tira{--nv-car-flecha-top:calc(50% - 22px)}
.nv-landing__color{display:block;padding-bottom:6px;text-decoration:none;color:inherit;border-bottom:2px solid transparent}
.nv-landing__color-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center bottom;border:1px solid var(--nv-border)}
.nv-landing__color-n{display:block;min-height:36px;padding-top:8px;font-size:13px;line-height:1.3;color:var(--nv-landing-tenue)}
.nv-landing__color:hover .nv-landing__color-n{color:var(--nv-accent-dark)}
.nv-landing__color.is-activa{border-bottom-color:var(--nv-accent)}
.nv-landing__color.is-activa .nv-landing__color-n{font-weight:600;color:var(--nv-ink)}
.nv-landing__color.is-agotada .nv-landing__color-img{opacity:.45}
.nv-landing__color-n em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.nv-landing__color--mas{display:flex;align-items:center;justify-content:center;min-height:166px;padding:12px;text-align:center;border:1px solid var(--nv-border)}
.nv-landing__color--mas .nv-landing__color-n{min-height:0;padding-top:0;color:var(--nv-ink)}

/* 6 · Tira de detalles. Flex con base 300 y tope 346: con tres fotos ocupan los 1100 px y con dos quedan centradas
   SIN crecer (una rejilla de dos columnas las habría estirado a 535 px y la sección medía 901 px, medido). El cuarto
   hueco de foto se llena en 63 de 91 productos y el quinto en 50, así que hay que saber pintar con dos. */
.nv-landing__detalles{padding:var(--nv-lp-b) 0}
.nv-landing__detalles-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin:0;padding:0;list-style:none}
.nv-landing__detalle{flex:1 1 300px;max-width:346px}
.nv-landing__detalle,.nv-landing__detalle figure{margin:0}
.nv-landing__detalle-img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center bottom}

/* 7 · Ficha técnica, tallas y cuidados: una sola banda gris para los tres. */
.nv-landing__ficha{padding:var(--nv-lp-d) 0;background:var(--nv-soft-bg)}
.nv-landing__datos{margin:0}
.nv-landing__dato{display:grid;grid-template-columns:240px 1fr;gap:0 20px;padding:14px 0;border-bottom:1px solid var(--nv-border)}
.nv-landing__dato dt{margin:0;line-height:1.6}
.nv-landing__dato dd{margin:0;font-size:15px;line-height:1.6}
.nv-landing__tallas{overflow-x:auto;margin-top:26px}   /* el body nunca se desplaza en horizontal */
.nv-landing__tallas table{width:100%;max-width:520px;margin:0 auto;border-collapse:collapse}
.nv-landing__tallas th,.nv-landing__tallas td{padding:10px;border:1px solid var(--nv-border);text-align:left;font-size:15px}
.nv-landing__tallas th{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.nv-landing__cuidados{margin-top:26px;font-size:15px;line-height:1.7}
.nv-landing__cuidados p{margin:0 0 14px}

/* 8 · Cómo llega tu pedido. El <ol> ya numera para el lector de pantalla, así que la medalla va con aria-hidden. */
.nv-landing__pasos{padding:var(--nv-lp-a) 0}
.nv-landing__pasos-p{margin:-10px 0 30px;font-size:16px;line-height:1.7}
.nv-landing__pasos ol{margin:0;padding:0;list-style:none}
.nv-landing__paso{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--nv-border)}
.nv-landing__paso:last-child{border-bottom:1px solid var(--nv-border)}
.nv-landing__paso-n{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--nv-ink);color:#fff;font-size:14px;font-weight:600;line-height:1}
.nv-landing__paso-k{margin:0 0 4px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--nv-accent-dark)}
.nv-landing__paso-t{margin:0 0 6px;font-size:17px;font-weight:500;line-height:1.3}
.nv-landing__paso-p{margin:0;font-size:15px;line-height:1.7;color:var(--nv-landing-tenue)}

/* 9 · Garantía y tienda. El sello se DIBUJA con el icono «escudo» en un círculo: ninguna imagen, 0 peticiones. El de
   lemonshoes es un PNG de 517×517 servido desde su dominio y con la falta «SATISIFACATION» impresa en la cinta. */
.nv-landing__garantia{padding:var(--nv-lp-c) 0}
.nv-landing__garantia .is-tinta{padding:var(--nv-lp-panel)}
.nv-landing__garantia-caja{display:grid;grid-template-columns:96px 1fr;gap:32px;align-items:start}
.nv-landing__garantia-sello{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border:2px solid var(--nv-accent);border-radius:50%}
.nv-landing__garantia-sello .nv-landing__icono{width:52px;height:52px;margin:0;color:var(--nv-accent)}
.nv-landing__garantia-p,.nv-landing__tienda-p{margin:0 0 18px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.88)}
.nv-landing__garantia-lista li{color:#fff}
.nv-landing__tienda{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:36px;padding-top:32px;border-top:1px solid rgba(255,255,255,.18)}
.nv-landing__tienda-t{margin:0 0 10px;font-size:var(--nv-fs-h4);font-weight:500;line-height:1.3;color:#fff}
.nv-landing__tienda-p{margin-bottom:0}

/* 10 · Opiniones. Apagada de fábrica: hoy no hay ninguna reseña en el sitio. Sin estrellas, sin avatar, sin fecha. */
.nv-landing__resenas{padding:var(--nv-lp-b) 0}
.nv-landing__resenas-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:0;padding:0;list-style:none}
.nv-landing__resena{box-sizing:border-box;padding:24px;background:var(--nv-testimonial-bg);border:1px solid var(--nv-testimonial-border)}
.nv-landing__resena blockquote{margin:0 0 14px;font-size:15px;line-height:1.7}
.nv-landing__resena-n{margin:0;font-size:14px;font-weight:600}
.nv-landing__resena-c{margin:2px 0 0;font-size:13px;color:var(--nv-landing-tenue)}

/* 11 · Preguntas. Tarjetas con borde y zona pulsable de 64 px (≥44 ✔). El +/− son dos rayas de 12×2 px con nombre
   propio, para que la landing no dependa de nv-ficha.css (que solo actúa por debajo de 1024 px). */
.nv-landing__faq{padding:var(--nv-lp-a) 0}
.nv-landing__faq-item{background:var(--nv-light);border:1px solid var(--nv-border)}
.nv-landing__faq-item+.nv-landing__faq-item{margin-top:10px}
.nv-landing__faq-item[open]{border-color:var(--nv-accent)}
.nv-landing__faq-item>summary{position:relative;display:block;box-sizing:border-box;min-height:64px;padding:20px 52px 20px 20px;font-size:16px;font-weight:500;line-height:1.5;cursor:pointer;list-style:none;transition:color var(--nv-t-link)}
.nv-landing__faq-item>summary::-webkit-details-marker{display:none}
.nv-landing__faq-item>summary::marker{content:""}
.nv-landing__faq-item>summary:hover{color:var(--nv-accent-dark)}
.nv-landing__faq-icono{position:absolute;right:20px;top:50%;width:12px;height:12px;margin-top:-6px}
.nv-landing__faq-icono::before,.nv-landing__faq-icono::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:var(--nv-ink);transition:transform var(--nv-t-link)}
.nv-landing__faq-icono::after{transform:rotate(90deg)}
.nv-landing__faq-item[open]>summary .nv-landing__faq-icono::after{transform:rotate(0)}
.nv-landing__faq-cuerpo{padding:0 20px 20px}
.nv-landing__faq-cuerpo p{margin:0;font-size:15px;line-height:1.7}
.nv-landing__faq a,.nv-landing__cuidados a,.nv-landing__tienda-p a,.nv-landing__garantia-lista a{color:inherit;text-decoration:underline}
.nv-landing__faq a:hover,.nv-landing__cuidados a:hover{color:var(--nv-accent-dark)}

/* 12 · Cierre. 560 px CSS sobre un archivo de 768 px = factor 1,37: la foto más grande que el catálogo sirve bien
   hoy. Tinta PLANA, sin textura: aquí no hay título sobre una zona de brillo que medir. */
.nv-landing__cierre{padding:var(--nv-lp-a) 0}
.nv-landing__cierre-caja{display:grid;grid-template-columns:560px 1fr;gap:40px;align-items:center;padding:var(--nv-lp-panel)}
.nv-landing__cierre--sin-foto .nv-landing__cierre-caja{grid-template-columns:1fr}
.nv-landing__cierre-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center bottom}
.nv-landing__cierre-p{margin:0 0 26px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.88)}
.nv-landing__cierre-botones{display:flex;flex-wrap:wrap;gap:12px}
.nv-landing__cierre .nv-btn--contorno{color:#fff}
.nv-landing__cierre .nv-btn--contorno:hover{background:#fff;border-color:#fff;color:var(--nv-ink)}

@media (max-width:1024px){
  .nv-landing{--nv-lp-a:56px;--nv-lp-b:56px;--nv-lp-c:64px;--nv-lp-d:48px;--nv-lp-e:30px;--nv-lp-panel:40px;--nv-lp-gap:40px}
  /* Los paneles de tinta van de borde a borde también en tableta: a 768 dejaban 30 px de blanco a
     cada lado de un bloque negro. En escritorio se quedan como panel de 1100 centrado. */
  .nv-landing__ancho.is-tinta{width:100%}
  .nv-landing__promesas-lista{grid-template-columns:repeat(2,1fr);gap:16px}
  .nv-landing__promesa>a,.nv-landing__promesa-caja{padding:20px}
  .nv-landing__atributos-lista{grid-template-columns:repeat(2,1fr);gap:20px}
  .nv-landing__atributo{padding:22px}
  .nv-landing__detalles-lista{gap:20px}
  .nv-landing__resenas-lista{grid-template-columns:repeat(2,1fr);gap:20px}
  .nv-landing__cierre-caja{grid-template-columns:480px 1fr}
}

/* Móvil. La textura de oro NO se pinta por debajo de 768: el brillo de la seda caía detrás del título y el contraste
   bajaba a 1,24:1. Las dos tiras horizontales llevan tabindex="0", role="group" y aria-label en el HTML: se desplazan
   con el teclado y sin JavaScript. */
@media (max-width:767px){
  .nv-landing{--nv-lp-a:44px;--nv-lp-b:44px;--nv-lp-c:48px;--nv-lp-d:40px;--nv-lp-e:26px;--nv-lp-panel:24px;--nv-lp-gap:0px}
  .nv-landing__hl--contraste .is-tinta,.nv-landing__garantia .is-tinta{background-image:none}
  .nv-landing__ancho{width:min(var(--nv-landing-ancho),100% - 30px)}
  /* …salvo los paneles de tinta, que son BANDAS y no tarjetas: con 15 px de canalón quedaban dos
     franjas blancas pegadas a un bloque negro, justo lo que el dueño señaló en la portada. En
     escritorio sí se quedan como panel de 1100 centrado (170 px a cada lado a 1440), donde el
     hueco se lee como diseño y no como un borde mal puesto. El relleno interior no cambia. */
  .nv-landing__ancho.is-tinta{width:100%}
  .nv-landing__estrecho{width:min(var(--nv-landing-lectura),100% - 30px)}
  .nv-landing__h2{margin-bottom:20px}
  /* nowrap y justify-content:flex-start explícitos: la tira de detalles hereda flex-wrap:wrap y justify-content:center
     de su regla de escritorio, y con ellos las tarjetas se apilaban en vez de desplazarse (medido: scrollWidth 360 =
     clientWidth 360, es decir, ninguna tira). */
  .nv-landing__promesas-lista,.nv-landing__detalles-lista{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .nv-landing__promesa{flex:0 0 78%;scroll-snap-align:start}
  .nv-landing__promesa>a,.nv-landing__promesa-caja{padding:18px}
  .nv-landing__promesa-t{min-height:0}
  .nv-landing__hl-caja{grid-template-columns:1fr}
  .nv-landing__hl-foto,.nv-landing__cierre-foto{order:-1;margin-bottom:26px}
  .nv-landing__hl-texto p{margin-bottom:20px;font-size:15px}
  .nv-landing__atributos-lista{gap:12px}
  .nv-landing__atributo{padding:16px}
  .nv-landing__atributo-i .nv-landing__icono{width:28px;height:28px}
  .nv-landing__atributo-v{font-size:15px}
  .nv-landing__colores-p{font-size:14.5px}
  .nv-landing__color--mas{min-height:112px}
  .nv-landing__detalle{flex:0 0 240px;max-width:none;scroll-snap-align:start}
  .nv-landing__dato{grid-template-columns:1fr;padding:12px 0}
  .nv-landing__dato dt{margin-bottom:4px;font-size:12.5px}
  .nv-landing__pasos-p{font-size:15px}
  .nv-landing__paso{grid-template-columns:36px 1fr;gap:16px;padding:18px 0}
  .nv-landing__paso-n{width:36px;height:36px;font-size:13px}
  .nv-landing__paso-t{font-size:16px}
  .nv-landing__paso-p,.nv-landing__faq-cuerpo p{font-size:14.5px}
  .nv-landing__garantia .is-tinta{padding:28px}
  .nv-landing__garantia-caja{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}
  .nv-landing__vinetas li,.nv-landing__garantia-lista li{text-align:left}
  .nv-landing__tienda{grid-template-columns:1fr;gap:20px;margin-top:28px;padding-top:24px;text-align:center}
  .nv-landing__tienda .nv-btn,.nv-landing__cierre-botones .nv-btn{width:100%}
  .nv-landing__resenas-lista{grid-template-columns:1fr;gap:16px}
  .nv-landing__faq-item>summary{min-height:60px;padding:18px 46px 18px 16px;font-size:15px}
  .nv-landing__faq-icono{right:16px}
  .nv-landing__faq-cuerpo{padding:0 16px 18px}
  .nv-landing__cierre-caja{grid-template-columns:1fr;gap:26px}
  .nv-landing__cierre-p{font-size:15px}
  .nv-landing__cierre-botones{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  .nv-landing__faq-icono::before,.nv-landing__faq-icono::after{transition:none}
}