/*
Theme Name: VintageWatchCCS
Theme URI: https://vintagewatchccs.com
Author: VintageWatchCCS
Description: Tema de relojería vintage con verde alpino, compatible con WooCommerce y Elementor. Incluye visor 3D de la pieza, ficha técnica, materiales, restauración y consultas por WhatsApp con código interno.
Version: 3.15.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vintagewatchccs
Tags: e-commerce, elementor, custom-colors, translation-ready
*/

:root {
  --vw-verde: #1E3A2B;
  --vw-verde-hondo: #14261C;
  --vw-verde-humo: #2E5340;
  --vw-papel: #F2EEE4;
  --vw-papel-alto: #FAF7EF;
  --vw-linea: #DDD4C0;
  --vw-linea-tenue: #E7E0D0;
  --vw-bronce: #A9814B;
  --vw-bronce-claro: #C9A268;
  --vw-tinta: #23301F;
  --vw-tinta-suave: #64705C;
  --vw-salvia: #949E8C;
  --vw-vendido: #9A4B34;
  --vw-sombra: 0 20px 50px rgba(20, 38, 28, 0.10);
  --vw-curva: cubic-bezier(0.22, 0.9, 0.28, 1);
  --vw-ancho: 1200px;
}

/* Modo oscuro: el mismo que traía el diseño original.
   Sigue al sistema del visitante. Para dejar el sitio siempre claro u oscuro,
   ver "Apariencia → Personalizar → VintageWatchCCS → Tema de color". */
@media (prefers-color-scheme: dark) {
  :root:not([data-vw-tema="claro"]) {
    --vw-papel: #141F18;
    --vw-papel-alto: #1A2820;
    --vw-linea: #2F4739;
    --vw-linea-tenue: #26382C;
    --vw-tinta: #E9E3D3;
    --vw-tinta-suave: #A9B6A1;
    --vw-salvia: #7E8D77;
    --vw-bronce: #C9A268;
    --vw-verde: #0F1D15;
    --vw-vendido: #C97B60;
    --vw-sombra: 0 20px 50px rgba(0, 0, 0, 0.45);
  }
}
:root[data-vw-tema="oscuro"] {
  --vw-papel: #141F18;
  --vw-papel-alto: #1A2820;
  --vw-linea: #2F4739;
  --vw-linea-tenue: #26382C;
  --vw-tinta: #E9E3D3;
  --vw-tinta-suave: #A9B6A1;
  --vw-salvia: #7E8D77;
  --vw-bronce: #C9A268;
  --vw-verde: #0F1D15;
  --vw-vendido: #C97B60;
  --vw-sombra: 0 20px 50px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-vw-tema="claro"]) .vw-estado[data-libre="si"] { color: #6FB98C; }
}
:root[data-vw-tema="oscuro"] .vw-estado[data-libre="si"] { color: #6FB98C; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vw-papel);
  color: var(--vw-tinta);
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
body.vw-sin-scroll { overflow: hidden; }

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: var(--vw-bronce); text-decoration: none; }
a:hover { color: var(--vw-tinta); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--vw-bronce); outline-offset: 3px; }

/* El atributo hidden manda sobre cualquier display del tema. */
[hidden] { display: none !important; }

.vw-contenedor { max-width: var(--vw-ancho); margin: 0 auto; }
.vw-eyebrow { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--vw-salvia); font-weight: 400; }
.vw-rule { width: 48px; height: 1px; background: var(--vw-bronce); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ============ animaciones ============ */
[data-vw-reveal] {
  opacity: 0; transform: translateY(20px); filter: blur(6px);
  transition: opacity 720ms var(--vw-curva), transform 720ms var(--vw-curva), filter 720ms var(--vw-curva);
  transition-delay: var(--d, 0ms);
}
[data-vw-reveal="lado"] { transform: translateX(-18px); }
[data-vw-reveal="escala"] { transform: translateY(16px) scale(0.985); }
[data-vw-reveal].vw-visto { opacity: 1; transform: none; filter: none; }

.vw-linea-crece { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--vw-curva) 120ms; }
.vw-linea-crece.vw-visto { transform: scaleX(1); }

.vw-mascara { display: block; overflow: hidden; }
.vw-mascara > span { display: block; transform: translateY(105%); transition: transform 900ms var(--vw-curva); transition-delay: var(--d, 0ms); }
.vw-mascara.vw-visto > span { transform: none; }

.vw-progreso {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 100000;
  background: var(--vw-bronce); transform: scaleX(0); transform-origin: left; opacity: 0.85; pointer-events: none;
}
.vw-parallax { will-change: transform; }

/* ============ cabecera ============ */
.vw-cinta {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: var(--vw-verde-hondo); color: #C6D0BE; padding: 9px 16px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
}
.vw-cinta .vw-punto { color: var(--vw-bronce); }

.vw-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 40px; border-bottom: 1px solid var(--vw-linea-tenue);
  background: color-mix(in srgb, var(--vw-papel) 88%, transparent);
  backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 999;
  transition: padding 380ms var(--vw-curva), box-shadow 380ms var(--vw-curva), border-color 380ms var(--vw-curva);
}
.vw-cabecera.vw-compacta { padding: 9px 40px; box-shadow: 0 1px 22px rgba(20,38,28,0.08); border-color: var(--vw-linea); }
.admin-bar .vw-cabecera { top: 32px; }

.vw-logo { display: flex; align-items: center; }
.vw-logo .vw-marca {
  display: block; width: 224px; height: 34px; background-color: var(--vw-tinta);
  -webkit-mask: var(--vw-logo) no-repeat left center / contain;
  mask: var(--vw-logo) no-repeat left center / contain;
  transition: width 380ms var(--vw-curva), height 380ms var(--vw-curva), opacity 300ms ease;
}
.vw-logo:hover .vw-marca { opacity: 0.72; }
.vw-cabecera.vw-compacta .vw-logo .vw-marca { width: 178px; height: 27px; }
.vw-logo .vw-nombre-texto { font-size: 19px; font-weight: 700; text-transform: uppercase; color: var(--vw-tinta); }

.vw-derecha { display: flex; align-items: center; gap: 18px; }
.vw-menu { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 0; }
.vw-menu li { position: relative; }
.vw-menu a {
  position: relative; display: block; padding: 12px 14px; min-height: 44px; line-height: 20px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vw-tinta-suave);
  transition: color 220ms ease;
}
.vw-menu a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px;
  background: var(--vw-bronce); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--vw-curva);
}
.vw-menu a:hover { color: var(--vw-tinta); }
.vw-menu a:hover::after, .vw-menu .current-menu-item > a::after { transform: scaleX(1); }
.vw-menu .current-menu-item > a { color: var(--vw-tinta); }

.vw-idiomas { display: flex; gap: 7px; align-items: center; color: var(--vw-salvia); }
.vw-idiomas .vw-barra { width: 1px; height: 18px; background: var(--vw-linea); margin: 0 4px; }
.vw-selector-idioma {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.14em; color: var(--vw-salvia);
  padding: 8px 2px; min-height: 40px;
  transition: color 200ms ease;
}
.vw-selector-idioma:hover { color: var(--vw-tinta); }
.vw-selector-idioma:focus-visible { outline: 2px solid var(--vw-bronce); outline-offset: 2px; }
/* La lista desplegable la dibuja el sistema: se le dan colores legibles. */
.vw-selector-idioma option { background: var(--vw-papel-alto); color: var(--vw-tinta); }

.vw-abrir-menu { display: none; background: none; border: 0; cursor: pointer; color: var(--vw-tinta); padding: 10px; min-height: 44px; }

/* ============ botones ============ */
.vw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: inherit;
  font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  text-align: center; transition: background 280ms var(--vw-curva), color 280ms var(--vw-curva), border-color 280ms var(--vw-curva), transform 180ms ease;
}
.vw-btn:active { transform: translateY(1px); }
.vw-btn-oro { background: var(--vw-bronce); color: #17281D; }
.vw-btn-oro:hover { background: var(--vw-bronce-claro); color: #17281D; }
.vw-btn-linea { background: transparent; border-color: rgba(201,162,104,0.6); color: #EDE8DA; }
.vw-btn-linea:hover { background: rgba(201,162,104,0.14); border-color: var(--vw-bronce-claro); color: #FBF8F0; }
.vw-btn-verde { background: var(--vw-verde); color: #F2EEE2; border-color: var(--vw-verde); }
.vw-btn-verde:hover { background: var(--vw-verde-hondo); border-color: var(--vw-verde-hondo); color: #F2EEE2; }
.vw-btn-bronce-linea { background: transparent; border-color: var(--vw-bronce); color: var(--vw-bronce); }
.vw-btn-bronce-linea:hover { background: var(--vw-bronce); color: #17281D; }
/* El verde de WhatsApp es de WhatsApp, no de la casa: al lado del papel y el
   bronce cantaba. Se queda el verde del tema y el icono dice el resto. */
.vw-btn-whatsapp { background: var(--vw-verde); color: #F1EDE1; border-color: var(--vw-verde); }
.vw-btn-whatsapp:hover { background: var(--vw-verde-hondo); border-color: var(--vw-verde-hondo); color: #F1EDE1; }

/* ============ estado ============ */
.vw-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; }
.vw-estado .vw-luz { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.vw-estado[data-libre="si"] { color: var(--vw-verde-humo); }
.vw-estado[data-libre="si"] .vw-luz { background: #2F7A52; animation: vw-latir 2.6s ease-in-out infinite; }
.vw-estado[data-libre="no"] { color: var(--vw-vendido); }
.vw-estado[data-libre="no"] .vw-luz { background: var(--vw-vendido); box-shadow: 0 0 0 3px rgba(154,75,52,0.14); }
@keyframes vw-latir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,122,82,0.36); }
  60% { box-shadow: 0 0 0 7px rgba(47,122,82,0); }
}

/* ============ portada ============ */
.vw-portada {
  position: relative; overflow: hidden; color: #F1EDE1;
  background: radial-gradient(120% 100% at 74% 20%, var(--vw-verde-humo) 0%, var(--vw-verde) 48%, var(--vw-verde-hondo) 100%);
  padding: 88px 40px 96px;
}
.vw-portada .vw-contenedor { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 48px; align-items: center; position: relative; }
.vw-avila { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; opacity: 0.16; color: #0C1A12; pointer-events: none; }
.vw-portada .vw-texto { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.vw-portada h1 { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.08; color: #F4F0E4; }
.vw-portada h1 em { font-style: normal; font-weight: 200; color: var(--vw-bronce-claro); }
.vw-portada p { font-size: 15.5px; line-height: 1.8; color: #BCC8B6; max-width: 52ch; text-wrap: pretty; }
.vw-portada .vw-eyebrow { color: var(--vw-bronce-claro); display: flex; align-items: center; gap: 14px; }
.vw-portada .vw-eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--vw-bronce-claro);
  transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--vw-curva) 300ms;
}
.vw-portada .vw-eyebrow.vw-visto::before { transform: scaleX(1); }
.vw-acciones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.vw-vitrina { display: flex; justify-content: center; }
.vw-vitrina svg { width: 100%; max-width: 340px; height: auto; }
.vw-gira { transform-origin: 160px 160px; animation: vw-girar 60s linear infinite; }
@keyframes vw-girar { to { transform: rotate(360deg); } }
.vw-traza { stroke-dasharray: 760; stroke-dashoffset: 760; animation: vw-trazar 2.6s var(--vw-curva) 260ms forwards; }
@keyframes vw-trazar { to { stroke-dashoffset: 0; } }

.vw-cuadros {
  height: 10px; width: 100%;
  background: repeating-conic-gradient(var(--vw-tinta) 0% 25%, transparent 0% 50%) 0 0 / 10px 10px;
  opacity: 0.20;
}

/* ============ sellos ============ */
.vw-sellos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--vw-linea-tenue); background: var(--vw-papel-alto); }
.vw-sello {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px;
  border-right: 1px solid var(--vw-linea-tenue); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; text-align: center; color: var(--vw-tinta-suave);
}
.vw-sello:last-child { border-right: 0; }
.vw-sello svg { color: var(--vw-tinta); transition: transform 420ms var(--vw-curva); }
.vw-sello:hover svg { transform: translateY(-3px); }

/* ============ catálogo ============ */
.vw-catalogo { padding: 60px 40px 70px; display: flex; flex-direction: column; gap: 30px; }
.vw-encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.vw-encabezado h2 { font-size: 36px; }
.vw-encabezado .vw-titulo { display: flex; flex-direction: column; gap: 10px; }
.vw-conteo { font-size: 11.5px; letter-spacing: 0.14em; color: var(--vw-tinta-suave); font-variant-numeric: tabular-nums; }
.vw-filtros { display: flex; flex-wrap: wrap; gap: 7px; }
.vw-filtro {
  background: transparent; border: 1px solid var(--vw-linea); color: var(--vw-tinta-suave); font-family: inherit;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 17px; min-height: 44px;
  cursor: pointer; transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.vw-filtro:hover { border-color: var(--vw-bronce); color: var(--vw-tinta); }
.vw-filtro[aria-pressed="true"] { background: var(--vw-verde); border-color: var(--vw-verde); color: #F1EDE1; }

.vw-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.vw-pieza {
  position: relative; display: flex; flex-direction: column; background: var(--vw-papel-alto);
  border: 1px solid var(--vw-linea-tenue); color: inherit;
  transition: border-color 320ms var(--vw-curva), transform 420ms var(--vw-curva), box-shadow 420ms var(--vw-curva);
}
.vw-pieza:hover { border-color: var(--vw-linea); transform: translateY(-5px); box-shadow: var(--vw-sombra); }
.vw-pieza::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--vw-bronce);
  transform: scaleX(0); transform-origin: left; transition: transform 460ms var(--vw-curva);
}
.vw-pieza:hover::after { transform: scaleX(1); }
.vw-pieza > a { display: flex; flex-direction: column; color: inherit; height: 100%; }
.vw-pieza .vw-lamina {
  position: relative; height: 270px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--vw-papel-alto);
}
.vw-pieza .vw-lamina, .vw-pieza .vw-lamina.vw-sin-imagen { background: linear-gradient(168deg, var(--vw-verde-humo) 0%, var(--vw-verde) 62%, var(--vw-verde-hondo) 100%); }
.vw-pieza .vw-lamina img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block;
  transition: transform 700ms var(--vw-curva);
}
.vw-pieza:hover .vw-lamina img { transform: scale(1.045); }
.vw-pieza[data-libre="no"] .vw-lamina img { filter: grayscale(0.7); opacity: 0.72; }
.vw-pieza .vw-lamina svg.vw-reloj { width: 196px; height: 196px; transition: transform 620ms var(--vw-curva); }
.vw-pieza:hover .vw-lamina svg.vw-reloj { transform: scale(1.05); }
.vw-marbete {
  position: absolute; top: 13px; left: 13px; z-index: 2; font-size: 8px; letter-spacing: 0.26em;
  text-transform: uppercase; color: #F1EDE1; background: rgba(15,29,21,0.78); padding: 6px 10px;
}
.vw-marbete[data-vendido="si"] { background: var(--vw-vendido); }
.vw-pieza .vw-ficha { display: flex; flex-direction: column; gap: 7px; padding: 20px 20px 22px; border-top: 1px solid var(--vw-linea-tenue); flex: 1; }
.vw-pieza .vw-familia { font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vw-salvia); }
.vw-pieza .vw-nombre { font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--vw-tinta); }
.vw-pieza .vw-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; margin-top: auto; }
.vw-pieza .vw-ref { font-size: 11.5px; color: var(--vw-tinta-suave); font-variant-numeric: tabular-nums; }
.vw-pieza .vw-ver { display: flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vw-bronce); }
.vw-pieza .vw-ver svg { transition: transform 360ms var(--vw-curva); }
.vw-pieza:hover .vw-ver svg { transform: translateX(5px); }

/* ============ taller ============ */
.vw-taller { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); background: var(--vw-verde); color: #E6E0D0; }
.vw-taller .vw-palabra { padding: 58px 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.vw-taller h3 { font-size: 30px; line-height: 1.32; color: #F2EEE2; text-wrap: balance; }
.vw-taller p { font-size: 15px; line-height: 1.85; color: #B4C0AD; max-width: 50ch; text-wrap: pretty; }
.vw-cifras { border-left: 1px solid #33513F; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.vw-cifra { padding: 34px 28px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid #33513F; }
.vw-cifra:nth-child(even) { border-left: 1px solid #33513F; }
.vw-cifra:nth-child(n+3) { border-bottom: 0; }
.vw-cifra .vw-n { font-size: 32px; font-weight: 500; color: var(--vw-bronce-claro); font-variant-numeric: tabular-nums; }
.vw-cifra .vw-q { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: #93A38C; }

/* ============ pie ============ */
/* Solo el <footer>: .vw-pie también es el pie de las tarjetas del catálogo y
   estas reglas se le colaban dentro. */
footer.vw-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px 40px; background: var(--vw-verde-hondo); color: #8FA087;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
footer.vw-pie a { display: inline-flex; align-items: center; gap: 8px; color: var(--vw-bronce-claro); }
footer.vw-pie .vw-marca-pie {
  display: block; width: 168px; height: 25px; background-color: #8FA087;
  -webkit-mask: var(--vw-logo) no-repeat left center / contain;
  mask: var(--vw-logo) no-repeat left center / contain;
}

/* ============ producto ============ */
.vw-producto { padding: 0 40px 80px; max-width: var(--vw-ancho); margin: 0 auto; }
.vw-migas { display: flex; align-items: center; gap: 10px; padding: 22px 0 18px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vw-salvia); flex-wrap: wrap; }
.vw-migas a { color: var(--vw-bronce); }
.vw-cabeza-producto { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }

.vw-visor { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 96px; }
.vw-modos { display: flex; border: 1px solid var(--vw-linea); }
.vw-modo {
  flex: 1; background: transparent; border: 0; border-right: 1px solid var(--vw-linea); font-family: inherit; cursor: pointer;
  padding: 12px 10px; min-height: 46px; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--vw-tinta-suave); transition: background 260ms ease, color 260ms ease;
}
.vw-modo:last-child { border-right: 0; }
.vw-modo:hover { color: var(--vw-tinta); }
.vw-modo[aria-pressed="true"] { background: var(--vw-verde); color: #F1EDE1; }

/* La foto se presenta sobre el verde de la casa, igual que la vista 3D y las
   láminas del catálogo: así una foto vertical no deja franjas claras al lado. */
.vw-galeria {
  position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden;
  background: radial-gradient(72% 62% at 50% 38%, var(--vw-verde-humo) 0%, var(--vw-verde) 56%, var(--vw-verde-hondo) 100%);
  border: 1px solid var(--vw-verde-hondo);
}
.vw-galeria img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 340ms ease; }
.vw-galeria img.vw-cambiando { opacity: 0; }

/* Flechas para pasar las fotos. Discretas sobre el verde, se afirman al
   acercar el ratón; en el teléfono también se pasa con el dedo. */
.vw-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: grid; place-items: center;
  padding: 0; cursor: pointer; z-index: 2;
  color: #F1EDE1; background: rgba(20, 33, 27, .42);
  border: 1px solid rgba(241, 237, 225, .28); border-radius: 50%;
  transition: background 240ms ease, border-color 240ms ease, opacity 240ms ease;
}
.vw-flecha:hover, .vw-flecha:focus-visible {
  background: rgba(20, 33, 27, .78); border-color: var(--vw-bronce);
}
.vw-flecha-antes { left: 14px; }
.vw-flecha-despues { right: 14px; }
.vw-contador {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  padding: 4px 10px; font-size: 12px; letter-spacing: .06em;
  color: #F1EDE1; background: rgba(20, 33, 27, .55);
  border: 1px solid rgba(241, 237, 225, .22);
}
@media (hover: hover) {
  .vw-flecha { opacity: 0; }
  .vw-galeria:hover .vw-flecha, .vw-flecha:focus-visible { opacity: 1; }
}
@media (max-width: 640px) {
  .vw-flecha { width: 36px; height: 36px; }
  .vw-flecha-antes { left: 8px; }
  .vw-flecha-despues { right: 8px; }
}

/* Girar el reloj entre los ángulos fotografiados. Mismo marco que la galería
   para que al cambiar de pestaña nada salte. */
.vw-giro {
  position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden;
  background: radial-gradient(72% 62% at 50% 38%, var(--vw-verde-humo) 0%, var(--vw-verde) 56%, var(--vw-verde-hondo) 100%);
  border: 1px solid var(--vw-verde-hondo);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.vw-giro.vw-girando { cursor: grabbing; }
.vw-giro img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; pointer-events: none; -webkit-user-drag: none;
}
.vw-giro img.vw-visible { opacity: 1; }
.vw-giro-cuenta {
  position: absolute; right: 14px; bottom: 12px;
  padding: 4px 10px; font-size: 12px; letter-spacing: .06em;
  color: #F1EDE1; background: rgba(20, 33, 27, .55);
  border: 1px solid rgba(241, 237, 225, .22); pointer-events: none;
}

/* Elegir con qué correa ver la pieza. Se distingue de los modos de arriba
   (fotos / video) por ser pastillas sueltas y no una barra partida. */
.vw-correas { display: flex; gap: 8px; flex-wrap: wrap; }
.vw-correa-op {
  background: transparent; border: 1px solid var(--vw-linea); cursor: pointer;
  font-family: inherit; padding: 10px 16px; min-height: 42px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vw-tinta-suave);
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}
.vw-correa-op:hover { color: var(--vw-tinta); border-color: var(--vw-bronce); }
.vw-correa-op[aria-pressed="true"] {
  background: var(--vw-verde); border-color: var(--vw-verde); color: #F1EDE1;
}

.vw-tiras { display: flex; gap: 8px; flex-wrap: wrap; }
.vw-tira { width: 62px; height: 62px; padding: 0; border: 1px solid var(--vw-linea); background: transparent; cursor: pointer; overflow: hidden; transition: border-color 240ms ease; }
.vw-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vw-tira[aria-pressed="true"] { border-color: var(--vw-bronce); }
.vw-vacio {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 30px; color: #93A38C;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}

.vw-caja-video { background: var(--vw-verde-hondo); }
.vw-caja-video video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--vw-verde-hondo); }
.vw-mando-video {
  position: absolute; left: 14px; bottom: 14px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(15, 29, 21, 0.72); border: 1px solid rgba(201, 162, 104, 0.45);
  color: #F1EDE1; backdrop-filter: blur(6px); transition: background 220ms ease, border-color 220ms ease;
}
.vw-mando-video:hover { background: rgba(15, 29, 21, 0.9); border-color: var(--vw-bronce-claro); }
.vw-sin-audio {
  position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 11px; background: rgba(15, 29, 21, 0.66); color: #B9C6B2;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
}

.vw-escena3d {
  position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden;
  background: radial-gradient(72% 62% at 50% 38%, var(--vw-verde-humo) 0%, var(--vw-verde) 56%, var(--vw-verde-hondo) 100%);
  display: flex; align-items: center; justify-content: center;
  perspective: 1500px; cursor: grab; touch-action: none;
}
.vw-escena3d:active { cursor: grabbing; }
.vw-escena3d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 44% at 32% 20%, rgba(255,255,255,0.09), transparent 62%);
}
.vw-soporte {
  position: relative; width: 66%; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -13deg));
  transition: transform 620ms var(--vw-curva); animation: vw-flotar 7s ease-in-out infinite;
}
.vw-soporte.vw-arrastrando { transition: none; animation: none; }
@keyframes vw-flotar { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
.vw-recorte {
  width: 100%; transform: translateZ(34px);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,0.5));
}
.vw-sombra-piso {
  position: absolute; left: 16%; right: 16%; bottom: 2%; height: 7%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
  transform: translateZ(-70px);
}
.vw-brillo3d {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 40%) var(--gy, 26%), rgba(255,255,255,0.16), rgba(255,255,255,0) 38%);
}
.vw-pista { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.08em; color: var(--vw-salvia); text-wrap: pretty; }
.vw-pista svg { flex-shrink: 0; }

.vw-datos { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.vw-titulo-producto { display: flex; flex-direction: column; gap: 12px; }
.vw-titulo-producto h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; text-wrap: balance; }
.vw-marca-linea { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--vw-salvia); }
.vw-precio { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 2px 0; }
.vw-precio .vw-valor { font-size: 22px; font-weight: 500; }
.vw-precio .vw-nota { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vw-salvia); }
.vw-precio .amount, .vw-precio .woocommerce-Price-amount { font-size: 22px; font-weight: 500; color: var(--vw-tinta); }
.vw-resumen { font-size: 15px; line-height: 1.85; color: var(--vw-tinta-suave); max-width: 56ch; text-wrap: pretty; }
.vw-resumen p + p { margin-top: 1em; }
.vw-acciones-producto { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.vw-aviso-vendido { border: 1px solid var(--vw-vendido); color: var(--vw-vendido); padding: 14px 16px; font-size: 12.5px; line-height: 1.65; text-wrap: pretty; }

.vw-bloque { display: flex; flex-direction: column; gap: 16px; padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--vw-linea-tenue); }
.vw-bloque h2 { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; color: var(--vw-salvia); }
.vw-tabla { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.vw-tabla > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--vw-linea-tenue); }
.vw-tabla .vw-k { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vw-salvia); white-space: nowrap; }
.vw-tabla .vw-v { font-size: 13.5px; color: var(--vw-tinta); text-align: right; font-variant-numeric: tabular-nums; }

.vw-materiales { display: flex; flex-direction: column; }
.vw-materiales > div { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--vw-linea-tenue); }
.vw-materiales .vw-parte { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vw-bronce); white-space: nowrap; flex-shrink: 0; }
.vw-materiales .vw-raya { flex: 1; height: 1px; background: var(--vw-linea); min-width: 18px; }
.vw-materiales .vw-material { font-size: 13.5px; color: var(--vw-tinta); text-align: right; text-wrap: pretty; }

.vw-restauro { list-style: none; margin: 0; padding: 0; counter-reset: r; display: flex; flex-direction: column; gap: 16px; }
.vw-restauro li { counter-increment: r; display: flex; flex-direction: column; gap: 5px; padding-left: 34px; position: relative; }
.vw-restauro li::before {
  content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-size: 11px; letter-spacing: 0.1em; color: var(--vw-bronce); font-variant-numeric: tabular-nums;
}
.vw-restauro .vw-t { font-size: 14.5px; font-weight: 500; color: var(--vw-tinta); }
.vw-restauro .vw-d { font-size: 13.5px; line-height: 1.75; color: var(--vw-tinta-suave); text-wrap: pretty; }

.vw-parrafo { font-size: 15px; line-height: 1.9; color: var(--vw-tinta-suave); max-width: 68ch; text-wrap: pretty; }
.vw-cita { border-left: 2px solid var(--vw-bronce); padding: 4px 0 4px 20px; display: flex; flex-direction: column; gap: 7px; }
.vw-cita .vw-quien { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--vw-bronce); }
.vw-cita p { font-size: 15px; line-height: 1.8; color: var(--vw-tinta); max-width: 62ch; text-wrap: pretty; }

/* Con retrato, la cita se abre en dos: la foto a un lado y el texto al otro.
   Una sola imagen, contenida, para que dé cara al relato sin robárselo. */
.vw-cita-con-foto { flex-direction: row; align-items: flex-start; gap: 22px; }
.vw-cita-texto { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.vw-retrato { margin: 0; flex: 0 0 168px; display: flex; flex-direction: column; gap: 8px; }
/* En blanco y negro a propósito: las fotos vienen de autores y épocas
   distintas, y en monocromo se leen como una serie en vez de como un collage.
   Sin marco ni sombra: que la única foto en color de la ficha sea el reloj. */
.vw-retrato img {
  display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.vw-retrato figcaption { font-size: 10px; line-height: 1.5; color: var(--vw-salvia); text-wrap: pretty; }
.vw-retrato figcaption a { color: var(--vw-salvia); text-decoration: underline; text-underline-offset: 2px; }
.vw-retrato figcaption a:hover { color: var(--vw-bronce); }
/* Cuatro celdas desde que la pila salió de la cobertura. Se reparten solas:
   a tres columnas la cuarta se quedaba huérfana en una fila entera. */
.vw-garantia { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--vw-linea-tenue); border: 1px solid var(--vw-linea-tenue); }
.vw-garantia > div { background: var(--vw-papel-alto); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.vw-garantia svg { color: var(--vw-bronce); }
.vw-garantia .vw-t { font-size: 13.5px; font-weight: 500; }
.vw-garantia .vw-d { font-size: 12.5px; line-height: 1.7; color: var(--vw-tinta-suave); text-wrap: pretty; }

/* ============ contacto ============ */
/* Un solo papel, dos columnas y un filete entre ellas. El bloque se para en
   la medida del sitio en vez de estirarse de borde a borde: en una pantalla
   ancha, un formulario de mil píxeles no se lee, se sufre. */
.vw-contacto { background: var(--vw-papel); }
.vw-contacto-marco {
  max-width: var(--vw-ancho); margin: 0 auto; padding: 88px 40px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: start;
}
.vw-contacto .vw-lado {
  padding-right: 56px; display: flex; flex-direction: column; gap: 22px;
  position: relative;
}
.vw-contacto .vw-lado h2 { font-size: 32px; line-height: 1.18; color: var(--vw-tinta); text-wrap: balance; max-width: 18ch; }
.vw-contacto .vw-lado p { font-size: 15px; line-height: 1.8; color: var(--vw-tinta-suave); max-width: 42ch; text-wrap: pretty; }
.vw-datos-contacto { display: flex; flex-direction: column; gap: 13px; padding-top: 6px; }
.vw-dato { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--vw-tinta-suave); }
.vw-dato svg { color: var(--vw-bronce); flex-shrink: 0; }
/* El mapa: una tira discreta, no un cuadro de 16:10 con un circuito dibujado
   dentro. Sigue sin cargar Google hasta que se toca. */
.vw-mapa {
  position: relative; margin-top: 10px; width: 100%; max-width: 420px;
  overflow: hidden;
  border: 1px solid var(--vw-linea);
}
.vw-mapa:not([data-cargado]) { border-color: var(--vw-linea-tenue); }
.vw-mapa[data-cargado] { aspect-ratio: 16 / 10; }
/* El trazado del circuito y la cuadrícula sobraban: eran un mapa de mentira
   delante de un mapa de verdad. */
.vw-mapa-trazo { display: none; }
/* El mapa arranca como tarjeta en los colores de la casa y se carga al tocarla. */
.vw-mapa-tarjeta {
  position: relative; z-index: 2; cursor: pointer; width: 100%;
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 16px 18px; text-align: left; font-family: inherit;
  border: 0; background: transparent;
  color: var(--vw-tinta-suave); overflow: hidden;
  transition: color 260ms ease, background 260ms ease;
}
.vw-mapa[data-cargado] .vw-mapa-tarjeta { position: absolute; inset: 0; }
.vw-mapa-tarjeta:hover { color: var(--vw-tinta); background: var(--vw-papel-alto); }
/* Una vuelta de circuito en vez de la cuadrícula: dice de qué va la casa sin
   cargar la tarjeta de imágenes. La cuadrícula se queda debajo, muy tenue,
   para que el trazado no flote en el vacío. */
.vw-mapa-trazo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.62;
  background-image:
    linear-gradient(rgba(201,162,104,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,104,0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  transition: opacity 400ms ease, transform 700ms var(--vw-curva);
}
.vw-circuito {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.vw-mapa-tarjeta:hover .vw-mapa-trazo { opacity: 1; transform: scale(1.04); }
.vw-mapa-pin { color: var(--vw-bronce); position: relative; flex-shrink: 0; display: inline-flex; }
.vw-mapa-pin svg { width: 18px; height: 18px; }
.vw-mapa-direccion { position: relative; font-size: 13px; line-height: 1.55; flex: 1 1 auto; }
/* La llamada ya no es un botón: es la última palabra de la línea. */
.vw-mapa-accion {
  position: relative; flex-shrink: 0;
  color: var(--vw-bronce); border-bottom: 1px solid currentColor;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 240ms ease;
}
.vw-mapa-tarjeta:hover .vw-mapa-accion { color: var(--vw-tinta); }

.vw-mapa-lienzo { position: absolute; inset: 0; }
.vw-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
/* "Cómo llegar" aparece cuando el mapa ya está cargado: antes estorbaría
   al botón de la tarjeta. */
.vw-mapa:not([data-cargado]) .vw-abrir-mapa { display: none; }
.vw-abrir-mapa {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; min-height: 40px;
  background: rgba(15, 29, 21, 0.86); color: #EDE8DA;
  border: 1px solid rgba(201, 162, 104, 0.45); backdrop-filter: blur(6px);
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.vw-abrir-mapa:hover { background: var(--vw-bronce); border-color: var(--vw-bronce); color: #17281D; }

.vw-formulario {
  padding-left: 56px; border-left: 1px solid var(--vw-linea-tenue);
  display: flex; flex-direction: column; gap: 20px;
}
.vw-campo { display: flex; flex-direction: column; gap: 8px; }
.vw-campo label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vw-salvia); }
.vw-campo input, .vw-campo textarea {
  font-family: inherit; font-size: 15px; font-weight: 300; color: var(--vw-tinta);
  background: var(--vw-papel-alto); border: 1px solid var(--vw-linea); border-radius: 0;
  padding: 14px 15px; min-height: 52px; width: 100%; transition: border-color 240ms ease, box-shadow 240ms ease;
}
.vw-campo textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.vw-campo input:focus, .vw-campo textarea:focus { outline: none; border-color: var(--vw-bronce); box-shadow: inset 0 -2px 0 -1px var(--vw-bronce); }
.vw-campo input::placeholder, .vw-campo textarea::placeholder { color: var(--vw-salvia); }
.vw-campo .vw-error { font-size: 12px; color: var(--vw-vendido); display: none; }
.vw-campo[data-error="si"] input, .vw-campo[data-error="si"] textarea { border-color: var(--vw-vendido); }
.vw-campo[data-error="si"] .vw-error { display: block; }
.vw-nota-envio { font-size: 12px; line-height: 1.7; color: var(--vw-salvia); text-wrap: pretty; }
.vw-marca-pieza {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--vw-linea); background: var(--vw-papel); font-size: 12.5px; color: var(--vw-tinta-suave);
}
.vw-marca-pieza svg { color: var(--vw-bronce); flex-shrink: 0; }

/* ============ contenido corriente ============ */
.vw-pagina { max-width: var(--vw-ancho); margin: 0 auto; padding: 56px 40px 72px; }
.vw-pagina .vw-titulo-pagina { font-size: 40px; margin-bottom: 24px; }
.vw-entrada { font-size: 16px; line-height: 1.85; color: var(--vw-tinta-suave); }
.vw-entrada h2 { font-size: 28px; margin: 32px 0 12px; color: var(--vw-tinta); }
.vw-entrada h3 { font-size: 20px; margin: 26px 0 10px; color: var(--vw-tinta); }
.vw-entrada p { margin-bottom: 1em; }
.vw-entrada ul, .vw-entrada ol { margin: 0 0 1em 1.2em; }
.vw-entrada blockquote { border-left: 2px solid var(--vw-bronce); padding-left: 20px; margin: 24px 0; }

/* ============ convivencia con Elementor ============
   Elementor mete cada widget dentro de contenedores con ancho máximo,
   relleno y tipografía propios. Estas reglas devuelven el mando al tema
   sin tocar el resto de los widgets de Elementor.                        */

/* La tipografía y los colores de la casa mandan dentro de nuestros bloques. */
[class*="elementor-widget-vw_"] {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--vw-tinta);
}
[class*="elementor-widget-vw_"] h1,
[class*="elementor-widget-vw_"] h2,
[class*="elementor-widget-vw_"] h3,
[class*="elementor-widget-vw_"] h4 {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.15;
}
[class*="elementor-widget-vw_"] p { margin: 0; }
[class*="elementor-widget-vw_"] ul,
[class*="elementor-widget-vw_"] ol { margin: 0; padding: 0; list-style: none; }
[class*="elementor-widget-vw_"] a { text-decoration: none; }
[class*="elementor-widget-vw_"] img { border-radius: 0; }

/* Nuestros bloques traen su propio relleno: fuera el del contenedor. */
[class*="elementor-widget-vw_"] > .elementor-widget-container { padding: 0; margin: 0; }

/* Ancho completo: rompe el contenedor y llega de borde a borde. */
.vw-ancho-yes {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Con el ancho completo activo, el contenido interior mantiene su medida. */
.vw-ancho-yes .vw-contenedor,
.vw-ancho-yes .vw-catalogo { margin-left: auto; margin-right: auto; }

/* El catálogo suelto dentro de Elementor no necesita el relleno lateral doble. */
.elementor .vw-catalogo { max-width: var(--vw-ancho); }

/* WooCommerce: quitar lo que no aplica a una vitrina de consulta */
.woocommerce-notices-wrapper:empty { display: none; }
.vw-producto .woocommerce-product-gallery, .vw-producto .quantity { display: none; }

/* ============ responsivo ============ */
@media (max-width: 1040px) {
  .vw-cabeza-producto { grid-template-columns: 1fr; gap: 34px; }
  .vw-visor { position: static; }
}
@media (max-width: 900px) {
  .vw-cabecera { padding: 14px 20px; }
  .vw-cabecera.vw-compacta { padding: 10px 20px; }
  .vw-abrir-menu { display: flex; }

  /* El desenfoque de la cabecera la convierte en bloque contenedor de todo
     position:fixed que lleve dentro, y el panel del menú quedaba encerrado en
     sus 73 px de alto, encaramado sobre el logo. En móvil se quita. */
  .vw-cabecera { backdrop-filter: none; background: var(--vw-papel); }

  .vw-derecha {
    position: fixed; inset: 0; z-index: 998;
    background: var(--vw-papel);
    flex-direction: column; justify-content: center; align-items: stretch; gap: 0;
    padding: 88px 28px 48px; overflow-y: auto;
    transform: translateY(-100%); transition: transform 420ms var(--vw-curva);
  }
  .vw-derecha.vw-abierto { transform: none; }
  /* wp_nav_menu envuelve la lista en su propio contenedor: si no se estira,
     los enlaces quedan en una columna angosta en medio de la pantalla. */
  .vw-derecha > * { width: 100%; }

  .vw-menu { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .vw-menu li { width: 100%; border-bottom: 1px solid var(--vw-linea-tenue); }
  .vw-menu li:first-child { border-top: 1px solid var(--vw-linea-tenue); }
  .vw-menu a { font-size: 15px; letter-spacing: 0.22em; padding: 20px 4px; text-align: left; }
  /* El subrayado animado es de la barra de escritorio; aquí sobra. */
  .vw-menu a::after { display: none; }

  .vw-idiomas { margin-top: 32px; justify-content: center; }
  .vw-idiomas .vw-barra { display: none; }
  .vw-selector-idioma { font-size: 12px; letter-spacing: 0.2em; padding: 12px 8px; }

  /* La cruz sustituye a las rayas mientras el panel está abierto. */
  .vw-abrir-menu { position: relative; z-index: 1000; }
  .vw-abrir-menu .vw-ic-cerrar { display: none; }
  .vw-abrir-menu[aria-expanded="true"] .vw-ic-menu { display: none; }
  .vw-abrir-menu[aria-expanded="true"] .vw-ic-cerrar { display: block; }
  .vw-portada { padding: 56px 20px 66px; }
  .vw-portada .vw-contenedor { grid-template-columns: 1fr; }
  .vw-sellos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vw-sello:nth-child(2) { border-right: 0; }
  .vw-sello:nth-child(-n+2) { border-bottom: 1px solid var(--vw-linea-tenue); }
  .vw-catalogo { padding: 44px 20px 52px; }
  .vw-rejilla { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vw-taller { grid-template-columns: 1fr; }
  .vw-taller .vw-palabra { padding: 44px 20px; }
  .vw-cifras { border-left: 0; border-top: 1px solid #33513F; }
  .vw-contacto-marco { grid-template-columns: 1fr; gap: 40px; padding: 56px 20px; }
  .vw-contacto .vw-lado { padding-right: 0; }
  /* En una sola columna el filete pasa de separar a estorbar: se acuesta. */
  .vw-formulario { padding-left: 0; border-left: 0; border-top: 1px solid var(--vw-linea-tenue); padding-top: 40px; }
  .vw-producto { padding: 0 20px 60px; }
  .vw-pagina { padding: 40px 20px 56px; }
  /* En una columna, etiqueta y valor no caben uno al lado del otro: los
     textos largos quedaban aplastados contra el borde. Se apilan. */
  .vw-tabla { grid-template-columns: 1fr; gap: 0; }
  .vw-tabla > div { flex-direction: column; align-items: flex-start; gap: 5px; padding: 15px 0; }
  .vw-tabla .vw-v { text-align: left; line-height: 1.5; }

  /* Los filtros del catálogo, en una sola fila que se desliza con el dedo,
     en vez de tres renglones desparejos. */
  .vw-filtros {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 -20px; padding: 2px 20px 10px;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .vw-filtros::-webkit-scrollbar { display: none; }
  .vw-filtro { flex: 0 0 auto; scroll-snap-align: start; }
  .vw-garantia { grid-template-columns: 1fr; }
  /* El retrato pasa arriba del texto y se recorta más bajo, para no comerse
     la pantalla antes de que se lea nada. */
  .vw-cita-con-foto { flex-direction: column; gap: 16px; }
  /* En el teléfono el retrato va arriba, apaisado, para no empujar el texto
     media pantalla hacia abajo. */
  .vw-retrato { flex: 0 0 auto; width: 100%; }
  .vw-retrato img { aspect-ratio: 16 / 9; }
  footer.vw-pie { padding: 24px 20px; }
}
@media (max-width: 600px) {
  .vw-rejilla { grid-template-columns: 1fr; }
  .vw-encabezado h2 { font-size: 28px; }
  .vw-logo .vw-marca { width: 170px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-vw-reveal] { opacity: 1; transform: none; filter: none; }
  .vw-linea-crece, .vw-portada .vw-eyebrow::before, .vw-pieza::after, .vw-menu a::after { transform: none; }
  .vw-mascara > span { transform: none; }
  .vw-traza { stroke-dashoffset: 0; }
}

/* Cartel de pieza de prueba. Solo aparece en borradores, que solo ve quien
   ha iniciado sesión: por eso puede permitirse ser directo y feo a propósito,
   para que no se confunda nunca con el contenido de la tienda. */
.vw-aviso-borrador {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: 22px;
	padding: 13px 18px;
	border: 1px dashed rgba(176, 141, 87, .55);
	border-radius: 8px;
	background: rgba(176, 141, 87, .07);
	font-size: 13px;
	line-height: 1.5;
}
.vw-aviso-borrador strong {
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 11px;
	color: #b08d57;
}
.vw-aviso-borrador span {
	flex: 1 1 260px;
	opacity: .85;
}
.vw-aviso-borrador a {
	color: #b08d57;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tira de época: dos o tres fotos pequeñas debajo de la cita. En blanco y
   negro como el retrato, para que el color quede reservado al reloj. */
.vw-tira-epoca {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 420px;
	margin: 22px 0 0 17px;
	padding-left: 17px;
	border-left: 1px solid rgba(176, 141, 87, .28);
}
.vw-tira-epoca figure {
	margin: 0;
}
/*
 * Las fotos de época son verticales y la cara va arriba: recortarlas por el
 * centro dejaba el casco fuera y el mono dentro. Se les da la misma
 * proporción que al retrato y se encuadra por la parte alta.
 */
.vw-tira-epoca img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 4px;
	filter: grayscale(1) contrast(1.04);
	opacity: .82;
	transition: opacity .4s ease, filter .4s ease;
}
.vw-tira-epoca figure:hover img {
	filter: grayscale(.25) contrast(1.04);
	opacity: 1;
}
.vw-tira-epoca figcaption {
	margin-top: 7px;
	font-size: 10.5px;
	line-height: 1.45;
}
.vw-tira-pie {
	display: block;
	letter-spacing: .04em;
	opacity: .78;
}
.vw-tira-credito {
	display: block;
	opacity: .45;
}
.vw-tira-credito a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 600px) {
	.vw-tira-epoca {
		max-width: none;
		margin-left: 0;
		padding-left: 14px;
	}
	.vw-tira-epoca img {
		aspect-ratio: 3 / 4;
	}
}

/* El marco: recorta el zoom lento sin tocar el pie de foto.
   No es un gif —son fotografías fijas y no hay video libre de aquellos años—
   pero al pasar por encima la imagen se acerca despacio y recupera el color,
   que es lo que da la sensación de que algo se mueve ahí dentro. */
.vw-marco {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	line-height: 0;
}
.vw-marco img {
	transition:
		opacity 1.1s cubic-bezier(.22, .61, .36, 1),
		filter 1.1s cubic-bezier(.22, .61, .36, 1),
		transform 2.4s cubic-bezier(.22, .61, .36, 1);
	transform: scale(1.005);
	will-change: transform;
}
.vw-tira-epoca figure:hover .vw-marco img,
.vw-retrato:hover .vw-marco img {
	transform: scale(1.075);
}
.vw-retrato:hover img {
	filter: grayscale(0) contrast(1.02);
	opacity: 1;
}
/* El borde del marco ya lo pone .vw-marco: el de la imagen sobraba. */
.vw-tira-epoca img,
.vw-retrato img {
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vw-marco img,
	.vw-tira-epoca figure:hover .vw-marco img,
	.vw-retrato:hover .vw-marco img {
		transition: opacity .3s ease, filter .3s ease;
		transform: none;
	}
}

/* La foto de época es el botón: sin marco de botón, sin fondo, sin borde.
   Solo el cursor avisa de que se puede ampliar. */
button.vw-marco {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	appearance: none;
	-webkit-appearance: none;
}
button.vw-marco:focus-visible {
	outline: 1px solid rgba(176, 141, 87, .8);
	outline-offset: 3px;
}

/* La lupa: fondo oscuro, la foto centrada y su crédito debajo. Nada más. */
.vw-lupa {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: rgba(8, 18, 14, .93);
	opacity: 0;
	transition: opacity .32s ease;
}
.vw-lupa.abierta {
	opacity: 1;
}
.vw-lupa figure {
	margin: 0;
	max-width: 620px;
	transform: translateY(10px) scale(.985);
	transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.vw-lupa.abierta figure {
	transform: none;
}
.vw-lupa img {
	display: block;
	width: 100%;
	max-height: 76vh;
	object-fit: contain;
	border-radius: 5px;
}
.vw-lupa figcaption {
	margin-top: 13px;
	font-size: 12px;
	line-height: 1.55;
	color: #e8e6e1;
}
.vw-lupa-pie {
	display: block;
	letter-spacing: .05em;
	opacity: .85;
}
.vw-lupa-credito {
	display: block;
	opacity: .5;
	font-size: 11px;
}
.vw-lupa-credito a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.vw-lupa-cerrar {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	color: #e8e6e1;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background .25s ease;
}
.vw-lupa-cerrar:hover {
	background: rgba(255, 255, 255, .15);
}

/* Pieza en construcción: se ve, pero no se abre. El marbete usa el mismo
   bronce de la casa en versión apagada, para que se lea como un estado y no
   como una oferta. */
.vw-marbete[data-obra="si"] {
	background: rgba(176, 141, 87, .14);
	color: #cbb083;
	border: 1px dashed rgba(176, 141, 87, .55);
}
/* Al cliente le sale la silueta, no la foto: la pieza se anuncia, no se
   enseña. Al admin sí, apagada, para que la reconozca de un vistazo. */
.vw-pieza.vw-en-obra span.vw-lamina img {
	filter: grayscale(.7) brightness(.82);
}
.vw-pieza.vw-en-obra .vw-sin-imagen svg {
	opacity: .3;
}
.vw-pieza.vw-en-obra > span {
	cursor: default;
}
.vw-pieza.vw-en-obra .vw-ver {
	opacity: .55;
}

/* Díptico: retrato de época y la pieza en la muñeca, del mismo tamaño y
   pegados, como los anuncios de entonces. Un solo hilo entre los dos para
   que se lean como una imagen partida y no como dos fotos sueltas. */
/*
 * El díptico va encima del relato, pero a media caña.
 *
 * A todo el ancho de la columna se comía el bloque entero; al lado del texto
 * lo dejaba en doscientos píxeles, cuatro palabras por línea. Encima y a 300
 * píxeles cabe entero de un vistazo y el relato conserva su ancho.
 */
.vw-cita-diptico {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.vw-diptico {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	width: 100%;
	max-width: 300px;
	margin: 2px 0 0;
}
.vw-diptico figure {
	margin: 0;
	min-width: 0;
}
.vw-diptico .vw-marco {
	border-radius: 0;
}
.vw-diptico figure:first-child .vw-marco {
	border-radius: 4px 0 0 4px;
}
.vw-diptico figure:last-child .vw-marco {
	border-radius: 0 4px 4px 0;
}
.vw-diptico img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 22%;
	filter: grayscale(1) contrast(1.05);
	opacity: .86;
}
/* La mitad de la derecha es la pieza: se encuadra centrada, que es donde
   está el reloj en las fotos de muñeca. */
.vw-diptico figure:last-child img {
	object-position: 50% 50%;
}
.vw-diptico figure:hover img {
	filter: grayscale(0) contrast(1.02);
	opacity: 1;
}
.vw-diptico figcaption {
	margin-top: 8px;
	font-size: 10.5px;
	line-height: 1.45;
}

@media (max-width: 600px) {
	.vw-diptico {
		max-width: 260px;
	}
}

/* Recordatorio para quien edita: en su pantalla la pieza en obra sí enseña la
   foto, y conviene que sepa que el cliente está viendo otra cosa. */
.vw-solo-usted {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 3px;
	background: rgba(8, 18, 14, .82);
	color: #cbb083;
	font-size: 9.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	pointer-events: none;
}

/* ============ que no se estire ============

   Las bandas —cinta, cabecera y pie— van de borde a borde, que es lo que les
   toca: el color tiene que llegar hasta el filo de la pantalla. Lo que no
   debe estirarse es su contenido. En un monitor ancho el logotipo se iba al
   extremo izquierdo y el menú al derecho, con medio metro de vacío entre
   ellos, mientras el catálogo de abajo se quedaba en sus 1200 píxeles. Se
   veían dos páginas distintas.

   El relleno lateral calculado los mete en la misma caja que el resto sin
   tener que añadir un div de envoltorio a cada uno. */
.vw-cinta,
.vw-cabecera,
.vw-cabecera.vw-compacta,
footer.vw-pie {
	padding-inline: max(var(--vw-margen, 40px), calc((100% - var(--vw-ancho)) / 2));
}
.vw-cinta {
	--vw-margen: 16px;
}

/* Y un tope de verdad para pantallas muy grandes: por encima de cierto ancho
   la línea de texto se vuelve incómoda de leer y las fotos se agrandan sin
   ganar detalle. Mejor que la página respire por los lados. */
@media (min-width: 1700px) {
	:root {
		--vw-ancho: 1320px;
	}
}

/* ============ el catálogo en el teléfono ============

   A una columna cada pieza medía 400 píxeles de alto y el catálogo entero
   pasaba de dieciséis mil: cuarenta pantallas de deslizar para ver treinta y
   seis relojes. Nadie llega al final de eso.

   Dos columnas, foto cuadrada y debajo lo justo: el nombre y la referencia.
   Se quita la línea de familia —que repite lo que ya dice el nombre— y el
   «Ver ficha», porque en un teléfono la tarjeta entera se toca. Lo que
   queda es la foto, que es lo que se mira. */
@media (max-width: 600px) {
	.vw-rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.vw-pieza .vw-lamina {
		aspect-ratio: 1 / 1;
		height: auto;
	}
	.vw-pieza .vw-lamina svg.vw-reloj {
		width: 62%;
		height: 62%;
	}
	.vw-pieza .vw-ficha {
		gap: 4px;
		padding: 10px 11px 12px;
	}
	.vw-pieza .vw-familia {
		display: none;
	}
	.vw-pieza .vw-nombre {
		font-size: 13px;
		line-height: 1.28;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.vw-pieza .vw-pie {
		padding-top: 4px;
	}
	.vw-pieza .vw-ref {
		font-size: 10px;
	}
	.vw-pieza .vw-ver {
		display: none;
	}
	.vw-marbete {
		font-size: 7.5px;
		letter-spacing: 0.16em;
		padding: 4px 7px;
	}
	.vw-solo-usted {
		font-size: 8px;
		padding: 3px 6px;
		left: 6px;
		bottom: 6px;
	}
	/* En una pantalla táctil no hay ratón que pase por encima: el
	   levantamiento y la sombra solo se disparaban al tocar y quedaban
	   pegados. */
	.vw-pieza:hover {
		transform: none;
		box-shadow: none;
	}
	.vw-pieza:hover .vw-lamina img,
	.vw-pieza:hover .vw-lamina svg.vw-reloj {
		transform: none;
	}
}

/* La escala taquimétrica de la página de contacto. Va recortada por la
   esquina superior derecha del panel: se ve el trozo de arco con sus cifras,
   como cuando se mira un reloj de lado. Muy tenue y detrás de todo: es una
   marca de agua, no una ilustración. */
.vw-taquimetro {
	position: absolute;
	top: -74px;
	right: -96px;
	width: 400px;
	height: 400px;
	opacity: 0.85;
	pointer-events: none;
	z-index: 0;
}
.vw-contacto .vw-lado > *:not(.vw-taquimetro):not(.vw-guilloche):not(.vw-avila) {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.vw-taquimetro {
		width: 300px;
		height: 300px;
		top: -60px;
		right: -84px;
		opacity: 0.6;
	}
}

/* Guilloché: enfrentado al taquímetro, en la esquina de abajo. Entre los dos
   sujetan el panel por las dos diagonales. */
.vw-guilloche {
	position: absolute;
	left: -110px;
	bottom: -60px;
	width: 320px;
	height: 320px;
	pointer-events: none;
	z-index: 0;
}

/* Filete: línea de pelo con un rombo al medio, como los grabados de esfera.
   Separa el párrafo de los datos de contacto sin meter un bloque de nada. */
.vw-filete {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	width: 168px;
	margin: 6px 0 2px;
}
.vw-filete-linea {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 104, .45), transparent);
}
.vw-filete-rombo {
	width: 5px;
	height: 5px;
	flex: 0 0 auto;
	transform: rotate(45deg);
	border: 1px solid rgba(201, 162, 104, .7);
}

@media (max-width: 900px) {
	.vw-guilloche {
		width: 240px;
		height: 240px;
		left: -96px;
		bottom: -50px;
	}
}

/* El bloque de garantía, grabado. El guilloché va detrás y recortado por el
   propio bloque: se ve el arranque de la trama en la esquina, no el círculo
   entero, que sería un adorno y no una textura. */
.vw-bloque-grabado {
	position: relative;
	overflow: hidden;
}
.vw-bloque-grabado > *:not(.vw-guilloche) {
	position: relative;
	z-index: 1;
}
.vw-bloque-grabado .vw-guilloche {
	left: auto;
	right: -120px;
	bottom: -130px;
	width: 300px;
	height: 300px;
	opacity: 0.75;
}

/* El filete del pie: centrado y a lo ancho, que ahí hace de remate. */
footer.vw-pie .vw-filete {
	width: 100%;
	max-width: 260px;
	margin: 0 auto 18px;
	flex-basis: 100%;
}