/* alexazzena.com · marca v4 NOTES (oct 2026). La misma marca que las piezas de redes: negro de fondo, vino solo en la luz
   que sube desde abajo y en las sombras de las fotos, amarillo solo en los números de sección. Archivo en dos anchos:
   expandida para el nombre y los titulares grandes, semicondensada para las etiquetas. Mucho aire y una retícula fija. */
@font-face { font-family: "Archivo"; src: url("Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root {
  --negro: #000; --tinta: #F5F5F5; --tinta-2: rgba(245,245,245,.76); --gris: #A3A3A3; --hilo: rgba(245,245,245,.16);
  --amarillo: #FFD447; --vino-hondo: #2B0710; --vino: #6E1426; --vino-claro: #B83250;
  --m: clamp(16px, 5vw, 80px); --ancho: 1280px; --curva: cubic-bezier(.2,.7,.2,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--negro); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--negro); color: var(--tinta); font-family: "Archivo", system-ui, sans-serif; font-size: 18px; line-height: 1.55;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
/* grano de papel de la marca (_sistema/texturas/alex-azzena.css), más suave en pantalla */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; opacity: .14; mix-blend-mode: soft-light; background-size: 320px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 4px; }
::selection { background: var(--vino-claro); color: var(--tinta); }
.salto { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--tinta); color: #000; padding: 10px 14px; }
.salto:focus { left: 12px; }

/* etiqueta: semicondensada, espaciada; el número en amarillo es el único acento */
.k { font-stretch: 75%; font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.k b { color: var(--amarillo); font-weight: 600; }

/* ── cabecera ─────────────────────────────────────────────────────────────── */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
       padding: 18px var(--m); border-bottom: 1px solid transparent; transition: background .5s, border-color .5s, padding .5s; }
.cab.llena { background: rgba(0,0,0,.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--hilo); padding-block: 12px; }
.cab .icono { height: 26px; width: auto; }
.cab nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.cab nav a, .idiomas a { font-stretch: 75%; font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); transition: color .2s; }
.cab nav a:hover, .idiomas a:hover { color: var(--tinta); }
.cab nav .pastilla { border: 1px solid rgba(245,245,245,.55); border-radius: 999px; padding: 8px 16px; color: var(--tinta); transition: background .2s, color .2s; }
.cab nav .pastilla:hover { background: var(--tinta); color: #000; }
.idiomas { display: flex; gap: 12px; padding-left: clamp(16px, 2.4vw, 28px); border-left: 1px solid var(--hilo); }
.idiomas a { color: var(--gris); padding: 4px 0; }
.idiomas a[aria-current] { color: var(--tinta); }
@media (max-width: 880px) { .cab nav .sec { display: none; } .idiomas { gap: 10px; } }

/* ── portada ──────────────────────────────────────────────────────────────── */
.portada { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.portada .foto { position: absolute; inset: 0; z-index: -3; }
.portada .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; }
/* en el móvil la foto manda y el texto se apoya abajo, como en las Notes: sombra arriba para la cabecera y abajo para leer */
.portada::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 38%, rgba(0,0,0,.82) 66%, #000 92%); }
/* la luz vino que sube desde abajo: la energía de la noche */
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 42% at 50% 112%, rgba(110,20,38,.62) 0%, rgba(43,7,16,.36) 46%, rgba(0,0,0,0) 78%); }
.portada-texto { width: 100%; max-width: calc(var(--ancho) + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m) clamp(40px, 8vh, 96px); }
.portada .k { margin-bottom: 22px; }
.portada h1 { margin: 0; }
.portada h1 img { width: min(600px, 100%); }
.lema { margin-top: clamp(22px, 3.4vh, 34px); font-weight: 600; font-stretch: 104%; letter-spacing: -.005em; line-height: 1.06; font-size: clamp(30px, 4.2vw, 58px); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4.6vh, 44px); }
@media (min-width: 900px) {
  /* en pantalla grande la foto va a la derecha y se funde con el negro por la izquierda (máscara: sin costura) */
  .portada .foto { left: auto; width: min(64vw, calc(100svh * .8));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 20%, #000 50%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 20%, #000 50%); }
  .portada .foto::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0) 34%), linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 14%); }
  .portada::before { display: none; }
  .portada-texto > * { max-width: 600px; }
}

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: 999px;
         background: var(--tinta); color: #000; border: 1px solid var(--tinta); font-stretch: 75%; font-weight: 600; font-size: 14px; letter-spacing: .18em;
         text-transform: uppercase; transition: background .25s, color .25s, transform .25s var(--curva); }
.boton:hover { background: #fff; transform: translateY(-2px); }
.boton.fantasma { background: transparent; color: var(--tinta); border-color: rgba(245,245,245,.5); }
.boton.fantasma:hover { border-color: var(--tinta); background: rgba(245,245,245,.06); }
.boton svg { width: 20px; height: 20px; flex: none; }

/* ── secciones ────────────────────────────────────────────────────────────── */
.seccion { max-width: calc(var(--ancho) + 2 * var(--m)); margin: 0 auto; padding: clamp(96px, 13vw, 176px) var(--m) 0; }
.titulo { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); }
.titulo b { margin-right: .4em; }
.titulo::after { content: ""; flex: 1; height: 1px; background: var(--hilo); }
h2 { font-weight: 600; font-stretch: 104%; letter-spacing: -.005em; line-height: 1.06; font-size: clamp(32px, 4.4vw, 60px); text-wrap: balance; }
.texto p { margin-top: 22px; color: var(--tinta-2); font-stretch: 94%; font-size: clamp(18px, 1.45vw, 20px); max-width: 33em; }

/* bio: foto y texto en la misma línea base */
.bio { display: grid; gap: 44px; }
.bio .retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) { .bio { grid-template-columns: 5fr 6fr; gap: clamp(48px, 7vw, 112px); align-items: end; } }
.filas { margin-top: 44px; border-bottom: 1px solid var(--hilo); }
.fila { display: grid; grid-template-columns: minmax(118px, 36%) 1fr; gap: 16px; align-items: baseline; padding: 17px 0; border-top: 1px solid var(--hilo); }
.fila dd { font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .fila { grid-template-columns: 1fr; gap: 6px; padding: 15px 0; } }
.nw { white-space: nowrap; }

/* trayectoria: tres hechos, grandes y en calma */
.hitos { list-style: none; margin-top: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hilo); }
.hito { display: grid; gap: 12px 48px; padding: clamp(26px, 3.2vw, 38px) 0; border-top: 1px solid var(--hilo); }
.hito strong { font-weight: 640; font-stretch: 116%; text-transform: uppercase; letter-spacing: .005em; line-height: 1.02; font-size: clamp(26px, 3.3vw, 46px); }
.hito p { color: var(--tinta-2); font-stretch: 94%; font-size: clamp(17px, 1.4vw, 19px); }
@media (min-width: 900px) { .hito { grid-template-columns: 3fr 2fr; align-items: baseline; } }

/* galería: carrusel en el móvil, retícula de 3 en pantalla grande */
.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
           scroll-padding-inline: var(--m); margin: 0 calc(-1 * var(--m)); padding: 0 var(--m) 4px; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria figure { scroll-snap-align: start; overflow: hidden; background: var(--vino-hondo); }
.galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.4s var(--curva); }
.galeria figure:hover img { transform: scale(1.035); }
@media (min-width: 760px) { .galeria { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 16px; overflow: visible; margin: 0; padding: 0; } }
.desliza { margin-top: 14px; }
@media (min-width: 760px) { .desliza { display: none; } }

/* escuchar: cuatro enlaces; al pasar, la luz vino sube por debajo */
.enlaces { display: grid; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hilo); }
.enlace { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--hilo); overflow: hidden; }
.enlace::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(90% 140% at 50% 150%, rgba(110,20,38,.7) 0%, rgba(43,7,16,.4) 50%, rgba(0,0,0,0) 80%); }
.enlace:hover::before { opacity: 1; }
.enlace strong { display: block; font-weight: 640; font-stretch: 118%; text-transform: uppercase; line-height: 1; font-size: clamp(26px, 2.8vw, 38px); }
.enlace span { display: block; margin-top: 12px; color: var(--tinta-2); font-stretch: 94%; font-size: 17px; }
.enlace .flecha { flex: none; width: 26px; height: 26px; transition: transform .35s var(--curva); }
.enlace:hover .flecha { transform: translate(4px, -4px); }
.enlaces { isolation: isolate; }
@media (min-width: 760px) {
  .enlaces { grid-template-columns: 1fr 1fr; }
  .enlace:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--hilo); }
  .enlace:nth-child(even) { padding-left: 32px; }
}

/* bookings: la luz vino de las Notes, a lo ancho */
.reservas { margin-top: clamp(40px, 6vw, 80px); padding: clamp(96px, 12vw, 168px) var(--m) clamp(88px, 11vw, 150px);
            background: radial-gradient(120% 74% at 50% 118%, var(--vino) 0%, var(--vino-hondo) 44%, #000 78%); }
.reservas-in { max-width: var(--ancho); margin: 0 auto; }
.reservas h2 { font-weight: 640; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; line-height: .9; font-size: clamp(46px, 11.2vw, 168px); }
.reservas .sub { margin-top: 24px; color: var(--tinta-2); font-stretch: 94%; font-size: clamp(19px, 1.7vw, 23px); max-width: 30em; }
.reservas .acciones { margin-top: 40px; }
.reservas .filas { margin-top: 56px; max-width: 760px; }

/* ── pie ──────────────────────────────────────────────────────────────────── */
.pie { padding: 64px var(--m) 40px; border-top: 1px solid var(--hilo); }
.pie-in { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 36px; }
.pie .marca { width: 100%; max-width: 260px; opacity: .95; }
.redes { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.redes a, .legal a, .legal span { font-stretch: 75%; font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); transition: color .2s; }
.redes a:hover, .legal a:hover { color: var(--tinta); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--hilo); }
.legal span { color: var(--gris); }
@media (min-width: 900px) { .pie-in { grid-template-columns: 260px 1fr; align-items: center; } .redes { justify-content: flex-end; } .legal { grid-column: 1 / -1; } }

/* ── aviso legal ──────────────────────────────────────────────────────────── */
.doc { max-width: 760px; margin: 0 auto; padding: 150px var(--m) 110px; }
.doc h1 { font-weight: 600; font-stretch: 104%; line-height: 1.06; font-size: clamp(34px, 5vw, 56px); margin-bottom: 40px; }
.doc h2 { font-size: 24px; margin: 48px 0 12px; }
.doc p, .doc li { color: var(--tinta-2); font-stretch: 94%; margin-top: 12px; }
.doc ul { padding-left: 1.2em; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.pendiente { color: #000; background: var(--amarillo); padding: 0 .3em; }

/* ── movimiento: entradas suaves; nada si el sistema pide menos movimiento ─ */
@media (prefers-reduced-motion: no-preference) {
  .portada .foto img { animation: acercar 2.8s var(--curva) both; }
  .portada-texto > * { animation: subir 1.1s var(--curva) both; }
  .portada-texto > :nth-child(2) { animation-delay: .12s; }
  .portada-texto > :nth-child(3) { animation-delay: .24s; }
  .portada-texto > :nth-child(4) { animation-delay: .36s; }
  .oculto { opacity: 0; transform: translateY(28px); }
  .oculto.visto { opacity: 1; transform: none; transition: opacity 1s ease, transform 1.1s var(--curva); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@keyframes acercar { from { transform: scale(1.07); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes subir { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }