/* ===================================================================
   Home v2 · dirección "editorial inmersiva"
   Se carga DESPUÉS de style.css. Mismos tokens (paleta y tipografías
   reales de la marca); cambia la composición y el ritmo.
   =================================================================== */

/* ---------- Hero: titular enorme, entra por líneas ---------- */
.hero--v2 .hero__content { padding-bottom: clamp(40px, 6vw, 88px); }
.hero--v2 h1 {
  font-size: clamp(2.7rem, 7.4vw, 8.6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: none;
  margin: 0 0 0.3em;
}
.hero--v2 h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero--v2 h1 .line > span {
  display: block;
  transform: translateY(108%);
  animation: lineUp 1100ms var(--ease) forwards;
}
.hero--v2 h1 .line:nth-child(2) > span { animation-delay: 140ms; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero--v2 .hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 40px);
}
.hero--v2 .lead { max-width: 44ch; margin: 0; }
.hero--v2 .hero__cta { margin-top: 0; align-items: center; }
.hero__link {
  color: var(--color-white);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 3px;
  transition: border-color 200ms var(--ease);
}
.hero__link:hover { border-color: var(--color-gold); }

@media (prefers-reduced-motion: reduce) {
  .hero--v2 h1 .line > span { animation: none; transform: none; }
}

/* ---------- Palmarés: tira de cristal al pie del hero ---------- */
.hero--v2 { --awards-h: 84px; }
.hero--v2 .hero__content { padding-bottom: calc(var(--awards-h) + clamp(32px, 5vw, 72px)); }
.hero__awards {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
  height: var(--awards-h);
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  align-items: center;
  gap: 0 24px;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.hero__awards li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.72);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__awards img { height: 38px; width: auto; flex-shrink: 0; }
.hero__awards span { display: flex; flex-direction: column; gap: 2px; }
.hero__awards strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-white);
}

/* ---------- Manifiesto: texto gigante, las palabras se encienden ---------- */
.manifesto { padding: clamp(96px, 16vw, 220px) var(--gutter); }
.manifesto__text {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 17em;
  margin: 0 0 0 clamp(0px, 10vw, 180px);
  color: var(--color-black);
}
.manifesto__text.is-split .w { opacity: 0.16; transition: opacity 600ms var(--ease); }
.manifesto__text.is-split.is-visible .w { opacity: 1; }
.manifesto__link {
  display: inline-block;
  margin: clamp(32px, 5vw, 64px) 0 0 clamp(0px, 10vw, 180px);
  font-size: 0.9rem;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 3px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.manifesto__link:hover { border-color: var(--color-gold); }

/* ---------- Capítulos: paneles a pantalla completa que se apilan ---------- */
.chapters { position: relative; }
.chapter {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-white);
}
.chapter:nth-child(even) { background: var(--color-offwhite); }
.chapter--reverse .chapter__media { order: 2; }
.chapter__media { position: relative; overflow: hidden; min-height: 60svh; }
.chapter__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transition: transform 1800ms var(--ease);
}
.chapter__media.is-visible img { transform: scale(1); }
.chapter__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 32px) var(--gutter) clamp(64px, 8vw, 128px);
}
/* El título es el protagonista del panel: enorme, sin numeral. */
.chapter__body h2 {
  font-size: clamp(3.2rem, 8.6vw, 10.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 8em;
  margin-bottom: clamp(16px, 2vw, 28px);
}
.chapter__body p { max-width: 36ch; color: var(--color-text-soft); }
.chapter__link {
  align-self: flex-start;
  margin-top: 0.6em;
  font-size: 0.9rem;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 3px;
  transition: border-color 200ms var(--ease);
}
.chapter__link:hover { border-color: var(--color-gold); }

/* ---------- Tira horizontal de platos ---------- */
.rail { padding: clamp(88px, 13vw, 180px) 0 clamp(72px, 10vw, 140px); overflow: hidden; }
.rail__head { padding: 0 var(--gutter); margin-bottom: clamp(32px, 5vw, 64px); }
.rail__head h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); max-width: 12ch; line-height: 1; }
.rail__track {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 var(--gutter) 28px;
  scrollbar-width: none;
  cursor: grab;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail__item { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
.rail__item img {
  height: clamp(300px, 46vw, 600px);
  width: auto;
  border-radius: var(--radius-m);
  pointer-events: none;
}
.rail__item--portrait img { aspect-ratio: 4 / 5; object-fit: cover; height: clamp(340px, 52vw, 680px); }
.rail__item--small img { height: clamp(240px, 34vw, 440px); }

/* Modo scroll: la sección se ancla y el scroll vertical empuja la tira en
   horizontal. Solo se activa (clase .rail--scroll, puesta por JS) si el
   navegador soporta animaciones ligadas al scroll y no hay "reducir
   movimiento"; si no, queda la tira normal de arrastrar. */
.rail--scroll { padding: 0; overflow: visible; view-timeline: --railtl block; }
.rail--scroll .rail__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-h);
  --rail-h: min(40vw, calc((100svh - var(--header-h) - 280px) / 1.08));
  padding-bottom: 76px;
}
.rail--scroll .rail__head { margin-bottom: clamp(18px, 2.6vw, 36px); }
.rail--scroll .rail__head h2 { font-size: clamp(2rem, 4vw, 4rem); max-width: none; }
.rail--scroll .rail__track {
  overflow: visible;
  width: max-content;
  cursor: default;
  scroll-snap-type: none;
  padding-bottom: 0;
  animation: railMove linear both;
  animation-timeline: --railtl;
  animation-range: cover 100vh cover calc(100% - 100vh);
}
.rail--scroll .rail__item img { height: var(--rail-h); }
.rail--scroll .rail__item--portrait img { height: calc(var(--rail-h) * 1.08); }
.rail--scroll .rail__item--small img { height: calc(var(--rail-h) * 0.78); }
@keyframes railMove {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% + 100vw)); }
}
.rail__progress { display: none; }
.rail--scroll .rail__progress {
  display: block;
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(20px, 4vh, 44px);
  height: 1px;
  background: var(--color-line);
}
.rail--scroll .rail__progress span {
  display: block;
  height: 100%;
  background: var(--color-black);
  transform-origin: left center;
  animation: railBar linear both;
  animation-timeline: --railtl;
  animation-range: cover 100vh cover calc(100% - 100vh);
}
@keyframes railBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Dúo de chefs: foto a sangre con tarjeta solapada ---------- */
.duo { position: relative; padding-bottom: clamp(64px, 9vw, 130px); }
.duo__img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.duo__card {
  position: relative;
  margin: clamp(-120px, -9vw, -48px) 0 0 var(--gutter);
  max-width: 600px;
  background: var(--color-white);
  padding: clamp(28px, 4vw, 56px);
}
.duo__card h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 13ch; }

/* ---------- Cita + prensa, más grandes ---------- */
.press-v2 { padding: clamp(80px, 12vw, 170px) 0; }
.press-v2 .pull-quote blockquote { font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.15; }
.press-v2 .press-strip { margin-top: clamp(36px, 5vw, 64px); }
.press-v2 .press-strip img { height: 30px; }

/* ---------- Cierre: reservar como titular ---------- */
.bigcta {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
  isolation: isolate;
}
.bigcta__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.32;
  z-index: -2;
  transform: scale(1.02);
  transition: transform 2000ms var(--ease), opacity 800ms var(--ease);
}
.bigcta::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 100%);
}
.bigcta:hover .bigcta__bg { transform: scale(1.07); opacity: 0.42; }
.bigcta__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(88px, 14vw, 200px) var(--gutter);
  color: var(--color-white);
  text-decoration: none;
}
.bigcta__link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -8px; }
.bigcta__text { display: block; }
.bigcta__kicker {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: clamp(18px, 2.4vw, 32px);
}
.bigcta__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9.4vw, 11rem);
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* Sello circular: texto que gira alrededor de la flecha */
.bigcta__seal {
  position: relative;
  flex-shrink: 0;
  width: clamp(130px, 16vw, 230px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 450ms var(--ease);
}
.bigcta__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sealSpin 26s linear infinite; }
.bigcta__ring text {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.85);
}
.bigcta__arrow {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  transition: background 450ms var(--ease), color 450ms var(--ease), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bigcta__link:hover .bigcta__arrow,
.bigcta__link:focus-visible .bigcta__arrow { background: var(--color-gold); color: var(--color-black); transform: scale(1.12); }
.bigcta__arrow svg { transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.bigcta__link:hover .bigcta__arrow svg { transform: rotate(45deg); }
.bigcta__link:hover .bigcta__ring { animation-duration: 9s; }
@keyframes sealSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bigcta__ring { animation: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero--v2 { --awards-h: 136px; }
  .hero__awards { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 14px 16px; align-content: center; padding-top: 12px; padding-bottom: 12px; }
  .hero__awards { align-items: start; }
  .hero__awards li { gap: 10px; align-items: flex-start; font-size: 0.64rem; letter-spacing: 0.05em; line-height: 1.35; }
  .hero__awards li:not(:has(img)) { padding-left: 38px; }
  .hero__awards img { width: 28px; height: 28px; object-fit: contain; }
  .hero__awards span { gap: 3px; }
  .hero__awards strong { font-size: 1.05rem; line-height: 1.12; }
  .bigcta__link { flex-direction: column; align-items: flex-start; }
  .bigcta__title { white-space: normal; font-size: clamp(3.2rem, 15vw, 6rem); line-height: .95; }
  .chapter { position: relative; grid-template-columns: 1fr; min-height: auto; box-shadow: none; }
  .chapter--reverse .chapter__media { order: 0; }
  .chapter__media { min-height: 62svh; }
  .chapter__body { padding-top: clamp(32px, 7vw, 56px); }
  .duo__img { aspect-ratio: 4 / 5; }
  .duo__card { margin: -56px var(--gutter) 0; }
  .manifesto__text, .manifesto__link { margin-left: 0; }
}

/* Con la barra "Reservar mesa" fija abajo en móvil, el botón del hero sobra: se queda solo el enlace. */
@media (max-width: 760px) {
  .hero--v2 { min-height: calc(100dvh - var(--mobile-bar-h)); }
  .hero--v2 .hero__cta .btn { display: none; }
}