de cada vista— esa regla alcanza a los botones y a los enlaces de la nav. El resultado se veía: el botón cobre salía con el rótulo COBRE SOBRE COBRE, es decir invisible, y los enlaces de la nav en cobre en vez de tinta. Se arregla acá y no tocando `.v2 a` porque esa regla sí es la correcta para los enlaces de texto del cuerpo; lo que faltaba era que los componentes con color propio no la heredaran. -------------------------------------------------------------------------- */ /* Botón sólido: tinta oscura sobre cobre. Es el par que declara `.v2-btn--cobre` y el que da contraste de sobra (14:1 aprox). */ .v2 a.v2-btn--cobre, .v2 a.v2-btn--cobre:hover { color: #0f0f10; } /* Botón de vidrio: tinta clara sobre el velo translúcido. */ .v2 a.v2-btn--vidrio, .v2 a.v2-btn--vidrio:hover { color: var(--v2-tinta); } /* Cabecera. */ .v2 a.v2-nav-logo { color: #f2efe9; } .v2 a.v2-nav-logo:hover { color: #fff; } .v2 a.v2-nav-link { color: var(--v2-tinta-55); } .v2 a.v2-nav-link:hover { color: var(--v2-tinta); } .v2 a.v2-idioma { color: var(--v2-tinta-55); } .v2 a.v2-idioma:hover { color: var(--v2-tinta); } /* El enlace de salto (`.saltar-al-contenido`) también vive fuera del

y base.css le da SU par: fondo --sup-0 (claro) y texto --txt. Con el cobre heredado quedaba en 2,6:1 sobre ese fondo justo cuando aparece, que es al recibir el foco desde el teclado. Se le devuelve su color. */ .v2 a.saltar-al-contenido { color: var(--txt); } /* Pie: su regla es `.v2-pie-nav a` (0,1,1), o sea EMPATA con `.v2 a`, y ahí manda el orden de carga. En la portada, index-nuevo.css se carga después y volvía a ganar el cobre; con una clase más deja de depender del orden. */ .v2 .v2-pie-nav a { color: var(--v2-tinta-55); } .v2 .v2-pie-nav a:hover { color: var(--v2-tinta); } /* ══════════════════════════════════════════════════════════════════════════ GALERÍA EN PC — mockup del dueño (31-jul-2026) QUÉ ESTABA MAL: `.v2-grilla` es `repeat(auto-fill, minmax(240px,1fr))`, así que en un monitor ancho abría cuatro columnas de 240px. Con dos recorridos publicados eso deja dos tarjetas flacas arriba a la izquierda y medio ancho vacío. El mockup pide DOS columnas anchas dentro de un contenedor de 1024px. TODO va dentro de `@media (min-width:820px)` a propósito: por debajo vive el feed a pantalla completa (una tarjeta por pantalla, con scroll-snap) que el dueño pidió el 30-jul, y no se toca ni un píxel. Acotado con `:has(.v2-grilla)` porque esta hoja la comparten /precio, /entrar y el resto de páginas v2. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 820px) { /* max-w-5xl del mockup. Solo en la galería: el resto del sitio v2 sigue con sus 1120px. */ body:has(.v2-grilla) .v2-sec { max-width: 1024px; } .v2-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; } .v2-showroom { border-radius: 16px; } .v2-showroom:hover { border-color: #404040; } /* El mockup pone al AUTOR arriba y la foto debajo; el marcado los trae al revés y la empresa vive dentro del cuerpo. `display:contents` sube los hijos del cuerpo al grid de la tarjeta para poder ordenarlos sin tocar el PHP ni un solo id. */ .v2-showroom-abrir { display: grid; } .v2-showroom-cuerpo { display: contents; } .v2-showroom-empresa { order: 1; display: flex; align-items: center; gap: 12px; padding: 20px 20px 0; font: 700 15px/1.2 var(--v2-sans); color: var(--v2-tinta); } .v2-showroom-chapa { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 16px/1 var(--v2-sans); } /* Foto: deja de ir a sangre y pasa a los 16/9 con aire y esquinas del mock. */ .v2-showroom-foto { order: 2; height: auto; aspect-ratio: 16 / 9; margin: 16px 20px; border-radius: 12px; } .v2-showroom-nombre { order: 3; margin: 0 0 8px; padding: 0 20px; font: 700 20px/1.25 var(--v2-sans); color: var(--v2-cobre); } .v2-showroom-sub { order: 4; display: block; margin-bottom: 12px; padding: 0 20px; font: 400 14px/1.5 var(--v2-sans); color: var(--v2-tinta-82); } .v2-showroom-meta { order: 5; display: block; margin-bottom: 20px; padding: 0 20px; font: 700 11px/1.4 var(--v2-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-tinta-45); } .v2-showroom-ver { order: 6; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 0 20px 24px; font: 700 14px/1 var(--v2-sans); color: var(--v2-cobre); } .v2-showroom:hover .v2-showroom-ver { color: var(--v2-cobre-alto); } /* La píldora de vistas, en la esquina de la foto como en el mockup. */ .v2-vistas { top: 12px; right: 12px; } }