/* Lagar de Albar · Concepto WEBO · lujo silencioso
   Paleta: piedra, hueso, grafito, gris cálido y un acento de uva apagada usado poco.
   Tipografía: Marcellus (nombre y titulares; versales espaciadas solo en el nombre) + Figtree 400 y 500.
   Forma: esquinas casi rectas (2px), filetes de 1px, mucho aire. Composición axial. */

@font-face { font-family: "Marcellus"; src: url("/assets/fonts/conceptos/marcellus-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/conceptos/figtree-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/conceptos/figtree-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --piedra: #DCD9D2;
  --hueso: #F2F0EB;
  --grafito: #222120;
  --gris: #8C877E;           /* filetes y detalles, no texto */
  --gris-texto: #5C5850;     /* texto secundario: el gris cálido oscurecido para llegar a AA */
  --uva: #5E4652;
  --uva-honda: #4B3742;
  --filete: rgb(34 33 32 / .16);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --lento: cubic-bezier(.22, 1, .36, 1);
  --ancho: 1240px;
  --margen: clamp(20px, 4.4vw, 64px);
  --hueco: clamp(16px, 1.8vw, 28px);
  --serif: "Marcellus", "Trajan Pro", Georgia, serif;
}

html { scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--piedra);
  color: var(--grafito);
  font: 400 1.0625rem/1.7 "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

::selection { background: var(--uva); color: var(--hueso); }
:focus-visible { outline: 1px solid var(--grafito); outline-offset: 4px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  padding: 10px 16px; background: var(--grafito); color: var(--hueso); text-decoration: none; font-size: .9375rem;
}
.saltar:focus-visible { top: 12px; }

.cabecera__in, .portada, .vinos, .finca__in, .visitas, .pie__in {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 32px; border-radius: 2px;
  background: var(--uva); color: var(--hueso);
  font-weight: 500; font-size: .9688rem; letter-spacing: .03em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--cabecera {
  min-height: 42px; padding: 0 20px; font-size: .875rem;
  background: transparent; color: var(--grafito); box-shadow: inset 0 0 0 1px rgb(34 33 32 / .35);
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--uva-honda); }
  .boton--cabecera:hover { background: var(--grafito); color: var(--hueso); box-shadow: inset 0 0 0 1px var(--grafito); }
  .cabecera__nav a:hover, .pie a:hover { text-decoration-color: currentColor; }
  .marca:hover { color: var(--uva); }
}

/* Cabecera axial: enlaces a un lado, signo en el centro, reserva al otro */
.cabecera__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 84px; gap: 24px; }
.cabecera__nav ul { display: flex; gap: clamp(20px, 2.6vw, 36px); }
.cabecera__nav a, .pie a {
  font-size: .9063rem; letter-spacing: .02em; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .45em; text-decoration-color: transparent; transition: text-decoration-color 300ms ease;
}
.marca { display: block; color: var(--grafito); transition: color 300ms ease; }
.marca svg { width: 34px; height: 34px; }
.boton--cabecera { justify-self: end; }

/* Portada */
.portada { display: grid; justify-items: center; text-align: center; padding-top: clamp(28px, 6vh, 64px); padding-bottom: clamp(28px, 5vh, 56px); }
.portada__nombre {
  font-size: clamp(1.55rem, 3.7vw, 3.25rem); line-height: 1.1;
  text-transform: uppercase; letter-spacing: .32em; margin-right: -.32em;
}
.portada__lema { margin-top: clamp(14px, 2.2vh, 22px); font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.3; }
.portada__sub { margin-top: 6px; font-size: .9375rem; color: var(--gris-texto); letter-spacing: .01em; }
.portada .boton { margin-top: clamp(22px, 3.6vh, 36px); }

.slot { position: relative; overflow: hidden; border-radius: 2px; background: var(--hueso); }
.slot > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot--vinedo {
  width: 100%; height: clamp(280px, calc(100svh - 448px), 640px);
  margin-top: clamp(32px, 5.4vh, 56px);
}

/* Los vinos: una fila por vino, botellas sobre el eje central */
.vinos { padding-top: clamp(96px, 10vw, 144px); padding-bottom: clamp(88px, 9vw, 128px); }
.vinos__cab { text-align: center; display: grid; justify-items: center; }
.vinos h2, .finca h2, .visitas h2 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.08; letter-spacing: .005em; }
.vinos__cab p { margin-top: 16px; color: var(--gris-texto); max-width: 46ch; }
.vinos__lista { margin-top: clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--filete); }
.vino {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 14vw, 200px) minmax(0, 1fr);
  align-items: center; column-gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 2vw, 28px) 0;
  border-top: 1px solid var(--filete);
}
.vino__nombre { text-align: right; }
.vino h3 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1; letter-spacing: .005em; }
.vino__tipo { margin-top: 10px; color: var(--gris-texto); font-size: .9375rem; letter-spacing: .02em; }
.vino__nota { color: var(--gris-texto); max-width: 34ch; }

.vino__botella { position: relative; display: grid; place-items: end center; height: 262px; }
.vino__botella::after {
  content: ""; position: absolute; bottom: -6px; left: 50%; width: 120px; height: 14px; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(34 33 32 / .28), rgb(34 33 32 / 0));
}
.botella {
  --vidrio: linear-gradient(90deg, var(--borde) 0%, var(--base) 16%, var(--brillo) 27%, var(--base) 38%, var(--base) 74%, var(--borde) 100%);
  position: relative; width: var(--w); height: var(--h);
  border-radius: var(--r);
  background: var(--vidrio);
}
.botella::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% - var(--solape)); translate: -50% 0;
  width: var(--cuello); height: calc(var(--cuello-h) + var(--solape));
  background: var(--vidrio); border-radius: 3px 3px 0 0;
}
.botella::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--cuello-h) - var(--capsula-h)); translate: -50% 0;
  width: calc(var(--cuello) + 2px); height: var(--capsula-h);
  background: linear-gradient(90deg, rgb(0 0 0 / .18), rgb(255 255 255 / .12) 30%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .2)), var(--capsula);
  border-radius: 3px 3px 1px 1px;
}
.botella__etiqueta {
  position: absolute; left: 13%; right: 13%; top: 48%; height: 31%;
  display: grid; place-items: center;
  background: var(--hueso); border-radius: 1px;
  box-shadow: inset 0 0 0 3px var(--hueso), inset 0 0 0 4px rgb(94 70 82 / .45);
}
.botella__etiqueta::before {
  content: attr(data-inicial);
  font-family: var(--serif); font-size: 17px; line-height: 1; color: var(--uva);
}
.botella--escarcha {
  --w: 50px; --h: 196px; --cuello: 17px; --cuello-h: 64px; --solape: 46px; --capsula-h: 30px;
  --r: 50% 50% 5px 5px / 34% 34% 3px 3px;
  --base: #BDB7A2; --brillo: #EDEADF; --borde: #8F8A76; --capsula: #E9E5DA;
}
.botella--ladera {
  --w: 64px; --h: 172px; --cuello: 22px; --cuello-h: 72px; --solape: 10px; --capsula-h: 34px;
  --r: 40% 40% 5px 5px / 13% 13% 3px 3px;
  --base: #2F2C2B; --brillo: #67615E; --borde: #1A1918; --capsula: var(--uva);
}
.botella--cumbre {
  --w: 74px; --h: 170px; --cuello: 24px; --cuello-h: 62px; --solape: 34px; --capsula-h: 32px;
  --r: 50% 50% 6px 6px / 30% 30% 3px 3px;
  --base: #3B2C33; --brillo: #6F5964; --borde: #231A1F; --capsula: var(--grafito);
}

/* La finca */
.finca { background: var(--hueso); }
.finca__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: start;
  padding-top: clamp(88px, 9vw, 120px); padding-bottom: clamp(80px, 7.5vw, 104px);
}
.finca__texto { grid-column: 3 / 11; text-align: center; display: grid; justify-items: center; }
.finca__texto p { margin-top: 22px; color: var(--gris-texto); max-width: 58ch; font-size: 1.125rem; }
.finca__texto p + p { margin-top: 12px; }
.slot--ladera { grid-column: 1 / 9; grid-row: 2; aspect-ratio: 16 / 11; margin-top: clamp(48px, 5vw, 72px); }
.slot--lagar { grid-column: 9 / 13; grid-row: 2; aspect-ratio: 4 / 5; margin-top: clamp(96px, 10vw, 144px); }

/* Visitas y catas */
.visitas {
  display: grid; justify-items: center; text-align: center;
  padding-top: clamp(88px, 8vw, 112px); padding-bottom: clamp(88px, 8.5vw, 120px);
}
.visitas__intro { margin-top: 20px; color: var(--gris-texto); max-width: 46ch; font-size: 1.125rem; }
.visitas__datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%; max-width: 960px; margin: clamp(48px, 6vw, 72px) 0;
  border-block: 1px solid var(--filete);
}
.visitas__datos div { padding: 28px clamp(16px, 2.6vw, 36px); }
.visitas__datos div + div { border-left: 1px solid var(--filete); }
.visitas__datos dt { font-size: .875rem; letter-spacing: .04em; color: var(--gris-texto); }
.visitas__datos dd { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.35; }
.visitas__nota { margin-top: 18px; font-size: .9375rem; color: var(--gris-texto); }

/* Pie */
.pie { border-top: 1px solid var(--filete); }
.pie__in { display: grid; justify-items: center; text-align: center; gap: 8px; padding-top: 56px; padding-bottom: 104px; }
.pie__nombre { font-family: var(--serif); text-transform: uppercase; letter-spacing: .32em; margin-right: -.32em; font-size: 1rem; }
.pie__lugar { color: var(--gris-texto); font-size: .9375rem; }
.pie ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin-top: 16px; }

/* Movimiento (20/10/2026). Lujo silencioso: lento (900 a 1400 ms), sin golpes ni brillos.
   Solo bajo html.mov (concepto.js): sin JS, en miniatura o con movimiento reducido, todo se ve quieto.
   Entrada: el nombre se asienta letra a letra desde el centro (de desenfocado a nítido, cerrándose hacia el eje)
   y el viñedo se abre desde la línea del horizonte. CSS puro para que la portada pinte a la vez que el texto. */
.portada__nombre .l { display: inline-block; }
.mov .portada__nombre .l { animation: albar-letra 1300ms var(--lento) calc(80ms + var(--d) * 70ms) backwards; }
.mov .portada__lema { animation: albar-aparecer 1100ms var(--lento) 560ms backwards; }
.mov .portada__sub { animation: albar-aparecer 1100ms var(--lento) 680ms backwards; }
.mov .portada .boton { animation: albar-aparecer 1100ms var(--lento) 800ms backwards; }
.mov .slot--vinedo { animation: albar-horizonte 1700ms cubic-bezier(.7, 0, .2, 1) 320ms backwards; }
.mov .slot--vinedo > svg { animation: albar-asentar 2400ms var(--lento) 320ms backwards; }
@keyframes albar-letra { from { opacity: 0; filter: blur(5px); transform: translateX(calc(var(--x) * .1em)); } }
@keyframes albar-aparecer { from { opacity: 0; transform: translateY(10px); } }
@keyframes albar-horizonte { from { clip-path: inset(61.5% 0 37.5% 0); } }
@keyframes albar-asentar { from { transform: scale(1.08); } }

/* Los filetes de los vinos se dibujan desde el eje (el JS mueve --filete-x de 0 a 1; sin JS valen 1) */
.vino { position: relative; border-top: 0; }
.vino::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--filete); transform: scaleX(var(--filete-x, 1));
}
.vino__botella::after { opacity: var(--sombra, 1); scale: var(--sombra-e, 1) 1; }

/* La bodega se abre como dos puertas al bajar (solo con movimiento; sin él, la foto se ve directamente) */
.bodega__puerta { display: none; }
.mov .bodega__puerta {
  display: block; position: absolute; top: 0; bottom: 0; z-index: 1; width: 50.5%;
  background: var(--hueso);
}
.mov .bodega__puerta--izq { left: 0; box-shadow: inset -1px 0 0 var(--filete); }
.mov .bodega__puerta--der { right: 0; box-shadow: inset 1px 0 0 var(--filete); }

/* Tableta */
@media (max-width: 960px) {
  .cabecera__nav { display: none; }
  .cabecera__in { grid-template-columns: 1fr auto; }
  .marca { justify-self: start; }
  .finca__texto { grid-column: 1 / 13; }
  .slot--ladera { grid-column: 1 / 13; }
  .slot--lagar { grid-column: 5 / 13; grid-row: 3; margin-top: 24px; aspect-ratio: 4 / 3; }
  .visitas__datos { grid-template-columns: 1fr; max-width: 520px; }
  .visitas__datos div + div { border-left: 0; border-top: 1px solid var(--filete); }
}

/* Móvil */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .cabecera__in { min-height: 68px; gap: 12px; }
  .marca svg { width: 30px; height: 30px; }
  .boton--cabecera { min-height: 40px; padding: 0 14px; font-size: .8125rem; letter-spacing: .02em; }
  .portada { padding-top: 40px; }
  .portada__nombre { font-size: clamp(1.25rem, 6.6vw, 1.6rem); letter-spacing: .26em; margin-right: -.26em; }
  .portada__lema { font-size: 1.375rem; }
  .boton { padding: 0 26px; }
  .slot--vinedo { height: auto; aspect-ratio: 4 / 5; margin-top: 36px; }
  .vino { grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; align-items: end; }
  .vino__botella { grid-column: 1; grid-row: 1 / 3; height: 236px; transform: scale(.86); transform-origin: bottom center; }
  .vino__nombre { grid-column: 2; grid-row: 1; text-align: left; }
  .vino__nota { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .vino h3 { font-size: 2.5rem; }
  .finca__texto p { font-size: 1.0625rem; }
  .slot--lagar { grid-column: 3 / 13; }
}

/* Foto a sangre (19/10/2026) */
.bodega { position: relative; margin: 0; height: clamp(340px, 68svh, 680px); overflow: hidden; }
.bodega img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }