/* ==========================================================================
   Edificio Seiko · Sistema de diseño v1
   Tokens y componentes compartidos por todas las plantillas de la tienda.
   ========================================================================== */

@property --tono { syntax: '<color>'; inherits: true; initial-value: #1B1E21; }

:root {
  /* Fondos de sección: cada sección declara uno, nunca dos iguales seguidas */
  --papel: #F3EEE6;
  --lino: #E7DED0;
  --tinta: #16120E;
  --pizarra: #1B1E21;
  --laca: #4D1418;
  --abismo: #0A2730;

  /* Tonos de escena: el color sale de la esfera del reloj */
  --cafe: #3D2A1F;
  --oliva: #4C5536;
  --carbon: #26272A;
  --hielo: #D9E2E7;
  --rosa: #E6C7BB;

  /* Texto, hilos y acento */
  --texto: #16120E;
  --texto-2: #6F675D;
  --claro: #F3EEE6;
  --claro-2: rgba(243, 238, 230, .68);
  --laton: #A47C48;
  --laton-claro: #D4B27F;
  --hilo: rgba(22, 18, 14, .16);
  --hilo-claro: rgba(243, 238, 230, .2);
  --acento: var(--laton);

  /* Tipografía: propuesta A «Mecánico» por defecto (ver [data-tipo] abajo) */
  --serif: 'Anybody', 'Arial Narrow', sans-serif;
  --sans: 'Geologica', 'Segoe UI', sans-serif;
  --t-peso: 300; --t-ancho: 112; --t-caja: none; --t-track: -0.03em; --t-escala: 1; --t-alto: .95;
  --t-em-familia: var(--serif); --t-em-peso: 760; --t-em-ancho: 58; --t-em-estilo: normal; --t-em-caja: none;

  /* Retícula */
  --max: 1440px;
  --margen: clamp(20px, 4.4vw, 64px);
  --canal: 24px;

  /* Espacio, base 8 */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px; --e7: 168px;
  --seccion: clamp(80px, 9.4vw, 144px);

  --curva: cubic-bezier(.22, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papel); color: var(--texto);
  font: 300 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--acento); outline-offset: 4px; }
::selection { background: var(--laton); color: #fff; }

/* ---------- Retícula ---------- */
.marco {
  max-width: var(--max); margin: 0 auto;
  padding-left: max(var(--margen), env(safe-area-inset-left));
  padding-right: max(var(--margen), env(safe-area-inset-right));
}
.ret { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--canal); }
@media (max-width: 899px) {
  :root { --canal: 16px; }
  .ret { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Fondos de sección ---------- */
.seccion { padding-block: var(--seccion); position: relative; }
.f-papel { background: var(--papel); color: var(--texto); }
.f-lino { background: var(--lino); color: var(--texto); }
.f-tinta, .f-pizarra, .f-laca, .f-abismo {
  color: var(--claro); --texto-2: var(--claro-2); --hilo: var(--hilo-claro); --acento: var(--laton-claro);
}
.f-tinta { background: var(--tinta); }
.f-pizarra { background: var(--pizarra); }
.f-laca { background: var(--laca); }
.f-abismo { background: var(--abismo); }

/* ---------- Tipografía: tres propuestas ----------
   A «Mecánico»: Anybody (ancho y peso variables, se animan) + Geologica
   B «Esfera»:   Syncopate (versales anchas, como la impresión de una esfera) + Familjen Grotesk
   C «Grabado»:  Castoro Titling (versales de grabado) + Castoro cursiva + Familjen Grotesk */
[data-tipo="esfera"] {
  --serif: 'Syncopate', 'Arial Black', sans-serif; --sans: 'Familjen Grotesk', 'Segoe UI', sans-serif;
  --t-peso: 400; --t-ancho: 100; --t-caja: uppercase; --t-track: .01em; --t-escala: .6; --t-alto: 1.08;
  --t-em-familia: var(--serif); --t-em-peso: 700; --t-em-ancho: 100; --t-em-estilo: normal; --t-em-caja: uppercase;
}
[data-tipo="grabado"] {
  --serif: 'Castoro Titling', 'Trajan Pro', serif; --sans: 'Familjen Grotesk', 'Segoe UI', sans-serif;
  --t-peso: 400; --t-ancho: 100; --t-caja: uppercase; --t-track: .045em; --t-escala: .74; --t-alto: 1.1;
  --t-em-familia: 'Castoro', Georgia, serif; --t-em-peso: 400; --t-em-ancho: 100; --t-em-estilo: italic; --t-em-caja: none;
}
.t-portada, .t-1, .t-2, .t-3 {
  font-family: var(--serif); font-weight: var(--t-peso); font-variation-settings: 'wdth' var(--t-ancho);
  text-transform: var(--t-caja); letter-spacing: var(--t-track); margin: 0;
}
.t-portada { font-size: calc(clamp(52px, 7.2vw, 116px) * var(--t-escala)); line-height: var(--t-alto); }
.t-1 { font-size: calc(clamp(38px, 4.6vw, 72px) * var(--t-escala)); line-height: calc(var(--t-alto) + .04); }
.t-2 { font-size: calc(clamp(28px, 2.7vw, 42px) * var(--t-escala)); line-height: 1.1; }
.t-3 { font-size: calc(23px * max(var(--t-escala), .7)); line-height: 1.25; }
.t-portada em, .t-1 em, .t-2 em, .t-3 em {
  font-family: var(--t-em-familia); font-weight: var(--t-em-peso); font-variation-settings: 'wdth' var(--t-em-ancho);
  font-style: var(--t-em-estilo); text-transform: var(--t-em-caja); color: var(--acento);
}
[data-tipo="grabado"] :is(.t-portada, .t-1, .t-2) em { font-size: 1.12em; letter-spacing: 0; }
.antetitulo { font: 500 11px/1.5 var(--sans); letter-spacing: .28em; text-transform: uppercase; margin: 0; }
.cuerpo { font: 300 17px/1.75 var(--sans); color: var(--texto-2); max-width: 46ch; margin: 0; }
.nota { font: 400 12.5px/1.6 var(--sans); color: var(--texto-2); margin: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.indice { font: 500 13px/1 var(--sans); letter-spacing: .08em; color: var(--acento); font-variant-numeric: tabular-nums; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 16px; min-height: 54px; padding: 0 30px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  background: var(--texto); color: var(--papel); border: 1px solid var(--texto);
  transition: background-color .45s var(--curva), color .45s, border-color .45s;
}
.boton:hover { background: var(--laton); border-color: var(--laton); color: #fff; }
.boton.claro { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
.boton.claro:hover { background: var(--laton-claro); border-color: var(--laton-claro); }
.boton.linea { background: transparent; color: inherit; border-color: currentColor; }
.boton.linea:hover { background: var(--laton); border-color: var(--laton); color: #fff; }
.flecha { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .45s var(--curva); flex: none; }
.flecha::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.boton:hover .flecha, .enlace:hover .flecha { width: 30px; }
.enlace {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  padding-bottom: 8px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .55s var(--curva);
}
.enlace:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Cabecera de sección ---------- */
.cab-sec { align-items: end; padding-bottom: var(--e4); margin-bottom: var(--e5); position: relative; }
.cab-sec::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hilo);
  transform-origin: left; transform: scaleX(var(--trazo, 1));
}
.cab-sec .rotulo { grid-column: 1 / 4; display: flex; gap: 14px; align-items: baseline; align-self: start; padding-top: 14px; }
.cab-sec .rotulo .antetitulo { color: var(--texto-2); }
.cab-sec h2 { grid-column: 4 / 10; }
.cab-sec .accion { grid-column: 10 / 13; justify-self: end; }
@media (max-width: 899px) {
  .cab-sec .rotulo, .cab-sec h2, .cab-sec .accion { grid-column: 1 / -1; }
  .cab-sec h2 { margin-top: var(--e2); }
  .cab-sec .accion { justify-self: start; margin-top: var(--e3); }
}

/* ---------- Escena: el reloj sobre un material ---------- */
.escena {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(62% 58% at 66% 40%, color-mix(in oklab, var(--tono), #fff 17%) 0%, transparent 72%),
    radial-gradient(120% 90% at 50% 115%, color-mix(in oklab, var(--tono), #000 50%) 0%, transparent 62%),
    var(--tono);
  transition: --tono 1.2s var(--curva);
}
.escena::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Laca: brillo diagonal de urushi */
.escena.laca::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .07) 47%, transparent 56%),
              linear-gradient(112deg, transparent 58%, rgba(255, 255, 255, .035) 63%, transparent 68%);
}
/* Abismo: luz de agua */
.escena.agua::after {
  content: ''; position: absolute; inset: -10%; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='c'><feTurbulence type='turbulence' baseFrequency='.008 .02' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .9  0 0 0 0 1  0 0 0 2.4 -1.3'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
}

/* El fundido: el reloj se disuelve hacia la sombra */
.funde {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 81%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 81%, transparent 100%);
}
.reloj { position: relative; display: grid; place-items: center; }
.reloj img { width: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .3)); }
.reloj::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 9%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent);
}

/* ---------- Ficha de pieza ---------- */
.pieza { display: block; position: relative; }
.pieza .pozo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center;
  background: var(--lino); transition: background-color .7s var(--curva);
}
.pieza .pozo img {
  height: 84%; width: auto; max-width: 92%; object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(40, 24, 10, .1));
  transition: transform .9s var(--curva);
}
.pieza:hover .pozo { background: var(--tono, var(--lino)); }
.pieza:hover .pozo img { transform: translateY(-2.5%) scale(1.035); }
.pieza .sello {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  font: 500 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 10px; background: var(--papel); color: var(--texto);
}
.pieza .guardar { position: absolute; top: 8px; right: 8px; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; color: var(--texto); transition: color .4s; }
.pieza:hover .guardar { color: var(--claro-tarjeta, var(--texto)); }
.pieza .ver {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1;
  display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 46px;
  background: var(--papel); color: var(--texto);
  font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  transform: translateY(calc(100% + 16px)); transition: transform .6s var(--curva);
}
.pieza:hover .ver, .pieza:focus-visible .ver { transform: none; }
.pieza .datos { padding-top: 18px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; }
.pieza .serie { grid-column: 1 / -1; color: var(--texto-2); font-size: 10px; }
.pieza .modelo { font: var(--t-peso) calc(21px * max(var(--t-escala), .72))/1.2 var(--serif); }
.pieza .precio { font: 400 15px/1 var(--sans); }
.pieza .detalle { grid-column: 1 / -1; }

:is(.pieza .modelo, .ficha-tec dd, .servicio h3) { font-variation-settings: 'wdth' var(--t-ancho); text-transform: var(--t-caja); letter-spacing: var(--t-track); }

/* ---------- Ficha técnica ---------- */
.ficha-tec { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--canal); margin: 0; border-top: 1px solid var(--hilo); }
.ficha-tec > div { padding: 14px 0 15px; border-bottom: 1px solid var(--hilo); }
.ficha-tec dt { font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 5px; }
.ficha-tec dd { margin: 0; font: var(--t-peso) calc(19px * max(var(--t-escala), .72))/1.3 var(--serif); }

/* ---------- Servicio ---------- */
.servicio { padding: 8px var(--e4) 8px 0; }
.servicio svg { width: 40px; height: 40px; stroke: var(--acento); fill: none; stroke-width: 1; margin-bottom: var(--e3); }
.servicio h3 { font: var(--t-peso) calc(23px * max(var(--t-escala), .7))/1.2 var(--serif); margin: 0 0 10px; }

/* ---------- Retícula visible (tecla G) ---------- */
.ver-reticula {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none;
}
.ver-reticula.activa { display: block; }
.ver-reticula .marco, .ver-reticula .ret { height: 100%; }
.ver-reticula .ret span { background: rgba(164, 124, 72, .12); border-inline: 1px solid rgba(164, 124, 72, .35); }
@media (max-width: 899px) { .ver-reticula .ret span:nth-child(n+5) { display: none; } }

/* En pantallas táctiles el grano no usa modo de fusión: en GPUs de teléfono cada capa
   fusionada obliga a recomponer la pantalla completa en cada cuadro. */
@media (pointer: coarse) {
  .escena::before { mix-blend-mode: normal; opacity: .07; }
  .escena.agua::after { mix-blend-mode: normal; opacity: .06; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}