/* ==========================================================
   PLANTILLA · TUESTE — cafetería de especialidad
   Espresso · crema · canela — secciones alternadas
   Firma: intro ZoomParallax (port vanilla de framer-motion)
   Reskin: cambia los tokens de :root y ya es de otro cliente.
   ========================================================== */

:root{
  --espresso: #241812;   /* fondo oscuro */
  --espresso-2:#2E2018;  /* tarjetas sobre oscuro */
  --crema:    #F2E7D8;   /* fondo claro */
  --tan:      #E0C3A0;   /* bloque canela (carta) */
  --ink:      #241812;   /* texto sobre claro */
  --milk:     #F6EDDF;   /* texto sobre oscuro */
  --caramel:  #B4762F;   /* acento */
  --caramel-2:#CE8F44;
  --line-d:   rgba(246,237,223,.16);
  --line-l:   rgba(36,24,18,.16);

  --serif: "DM Serif Display", Georgia, serif;
  --sans:  "DM Sans", system-ui, sans-serif;

  --pad-x: clamp(24px, 6vw, 88px);
  --ease-out:   cubic-bezier(.19, 1, .22, 1);
  --ease-swift: cubic-bezier(.77, 0, .18, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background: var(--espresso);
  color: var(--milk);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--caramel); color: var(--espresso); }
a{ color: inherit; text-decoration: none; }
img{ display: block; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

:focus-visible{
  outline: 2px solid var(--caramel);
  outline-offset: 4px;
}

.dot{ color: var(--caramel); }

/* ---------- Barra de progreso ---------- */

.progress{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--caramel);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 99;
}

/* ---------- Topbar (se enciende al salir de la intro) ---------- */

.topbar{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 16px var(--pad-x);
  background: color-mix(in srgb, var(--espresso) 88%, transparent);
  backdrop-filter: blur(10px);
  transform: translateY(-110%);
  transition: transform .55s var(--ease-swift);
}
.topbar.is-visible{ transform: translateY(0); }

.wordmark{
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .01em;
}

.topnav{
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topnav a{ transition: color .3s ease; }
.topnav a:hover{ color: var(--caramel-2); }

/* ==========================================================
   INTRO · ZOOM PARALLAX
   El contenedor mide 300vh; dentro, un viewport sticky de
   100vh. main.js convierte el scroll recorrido en progreso
   [0..1] y escala cada lámina hasta su factor (4—9).
   ========================================================== */

.zoomintro{
  position: relative;
  height: 300vh;
  background: var(--espresso);
}

.zoomintro__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Marca fantasma tras las láminas: vive en los huecos de la rejilla */
.zoomintro__ghost{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(6rem, 24vw, 22rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(246,237,223,.22);
  user-select: none;
}

/* Cada lámina ocupa todo el viewport y se escala entera:
   así los desplazamientos escalan con ella (igual que el original). */
.zi-item{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.zi-frame{
  position: relative;
  width: 25vw;
  height: 25vh;
  overflow: hidden;
}
.zi-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Posiciones portadas 1:1 del componente de referencia */
.zi-item--1 .zi-frame{ transform: translate(5vw,   -30vh);  width: 35vw; height: 30vh; }
.zi-item--2 .zi-frame{ transform: translate(-25vw, -10vh);  width: 20vw; height: 45vh; }
.zi-item--3 .zi-frame{ transform: translate(27.5vw, 0);     width: 25vw; height: 25vh; }
.zi-item--4 .zi-frame{ transform: translate(5vw,   27.5vh); width: 20vw; height: 25vh; }
.zi-item--5 .zi-frame{ transform: translate(-22.5vw,27.5vh);width: 30vw; height: 25vh; }
.zi-item--6 .zi-frame{ transform: translate(25vw,  22.5vh); width: 15vw; height: 15vh; }

/* Lockup de entrada: se desvanece con el progreso (main.js) */
.zoomintro__lockup{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: clamp(70px, 14vh, 130px) 0 clamp(28px, 6vh, 60px);
  text-align: center;
  will-change: opacity, transform;
  /* scrim: el lockup se lee aunque haya lámina debajo */
  background: linear-gradient(180deg, transparent, rgba(26,16,11,.88) 55%);
}
.zoomintro__brand{
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
}
.zoomintro__tag{
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--caramel-2);
}
.zoomintro__hint{
  margin-top: 1.3rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(246,237,223,.55);
}
.arrow-down{
  display: inline-block;
  animation: drift 2.4s ease-in-out infinite;
}
@keyframes drift{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(4px); }
}

/* ---------- Secciones base ---------- */

.sec{ padding: clamp(90px, 14vh, 150px) var(--pad-x); }

.sec--dark{ background: var(--espresso); color: var(--milk); }
.sec--crema{ background: var(--crema); color: var(--ink); }
.sec--tan{ background: var(--tan); color: var(--ink); }

.sec-head{ margin-bottom: clamp(2.4rem, 6vh, 4rem); }
.sec-head--center{ text-align: center; }

.eyebrow{
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 1.1rem;
}
.sec--dark .eyebrow{ color: var(--caramel-2); }

.sec-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: .005em;
}
.sec-title em{
  font-style: italic;
  color: var(--caramel);
}

/* ---------- Hero statement ---------- */

.hero{
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* palabra fantasma vertical, como el watermark de la referencia */
.hero__ghost{
  position: absolute;
  right: calc(var(--pad-x) * -0.4);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--serif);
  font-size: clamp(8rem, 20vw, 19rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246,237,223,.12);
  pointer-events: none;
  user-select: none;
}

.hero__inner{
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hero-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.5vw, 6.4rem);
  line-height: 1.02;
}
.hero-title .line{
  display: block;
  overflow: hidden;
  padding-bottom: .07em;
}
.line--it{ font-style: italic; color: var(--caramel-2); }

.line__inner-s{
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.1s var(--ease-out) var(--d, 0s);
  will-change: transform;
}
.line__inner-s.in-view{ transform: translateY(0); }

.hero-copy{
  max-width: 52ch;
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: rgba(246,237,223,.82);
}

.hero-actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
}

.btn-solid{
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.1em 2.1em;
  background: var(--caramel);
  color: var(--espresso);
  border-radius: 4px;
  transition: background .35s ease;
  will-change: transform;
}
.btn-solid:hover{ background: var(--caramel-2); }
.btn-solid--sm{ padding: .8em 1.5em; font-size: .74rem; }

.link-underline{
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.link-underline::before,
.link-underline::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
}
.link-underline::after{
  background: currentColor;
  transform-origin: right;
  transition: transform .45s var(--ease-swift);
}
.link-underline::before{
  background: var(--caramel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-swift) .2s;
}
.link-underline:hover::after{ transform: scaleX(0); }
.link-underline:hover::before{ transform: scaleX(1); }

/* Estadísticas con odómetro (como los 50+/20+/2k+ de la referencia) */

.hero-stats{
  display: flex;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin-top: clamp(2.4rem, 6vh, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-d);
}

.stat dt{
  display: flex;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
}
.stat dt i{
  font-style: normal;
  font-size: .55em;
  color: var(--caramel-2);
  margin-left: .1em;
}
.stat dd{
  margin-top: .45rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246,237,223,.6);
}

.odo{ display: inline-flex; }
.odo-col{
  display: inline-block;
  height: 1em;
  overflow: hidden;
}
.odo-strip{
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.2s var(--ease-swift) calc(var(--d, 0s) + .3s);
  will-change: transform;
}
.odo-digit{
  display: block;
  height: 1em;
  line-height: 1;
}
.stat.in-view .odo-strip{ transform: translateY(var(--ty, 0)); }

/* ---------- Bloques editoriales (foto girada, como la referencia) ---------- */

.split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.split--reverse .split__media{ order: 2; }
.split--reverse .split__copy{ order: 1; }

.split__media{
  position: relative;
  aspect-ratio: 4 / 4.4;
  overflow: visible;
}
.split__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 10px solid #fff;
  box-shadow: 0 24px 60px rgba(36,24,18,.28);
  transition: transform .8s var(--ease-out);
}
.split__media--tiltL img{ transform: rotate(-3.5deg); }
.split__media--tiltR img{ transform: rotate(3deg); }
.split__media:hover img{ transform: rotate(0deg) scale(1.015); }

/* esquina de acento, guiño a los triángulos de la referencia */
.split__media::after{
  content: "";
  position: absolute;
  width: 46px; height: 46px;
  border-top: 3px solid var(--caramel);
  border-left: 3px solid var(--caramel);
}
.split__media--tiltL::after{ top: -16px; left: -16px; }
.split__media--tiltR::after{ top: -16px; right: -16px; transform: rotate(90deg); }

.split__text{
  margin-top: 1.3rem;
  margin-bottom: 1.6rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: rgba(36,24,18,.8);
}

.sec--local{ padding-top: 0; }

/* ---------- La carta: pestañas + tarjetas ---------- */

.tabs{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem clamp(.6rem, 2vw, 1.4rem);
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
}

.tab{
  position: relative;
  padding: .55em 1.1em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(36,24,18,.55);
  border-radius: 999px;
  transition: color .3s ease, background .3s ease;
}
.tab:hover{ color: var(--ink); }
.tab.is-on{
  background: var(--espresso);
  color: var(--milk);
}

.menu{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  max-width: 1200px;
  margin: 0 auto;
}

.card{
  background: var(--espresso);
  color: var(--milk);
  padding: 1.1rem 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform .45s var(--ease-out), opacity .45s ease;
}
.card:hover{ transform: translateY(-5px); }

/* filtro: las que no tocan se encogen y desaparecen */
.card.is-out{
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.card__photo{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 6px solid var(--tan);
  margin-bottom: 1.1rem;
}
.card__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .8s var(--ease-out);
}
.card:hover .card__photo img{ transform: scale(1.07); }

.card__name{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
}
.card__desc{
  margin-top: .4rem;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(246,237,223,.72);
  flex-grow: 1;
}
.card__price{
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line-d);
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--caramel-2);
}

/* ---------- Testimonios ---------- */

.sec--voces{ text-align: center; }

.voice-card{
  max-width: 720px;
  margin: 0 auto;
  background: var(--espresso);
  color: var(--milk);
  padding: clamp(2.2rem, 5vh, 3.4rem) clamp(1.6rem, 5vw, 4rem);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(36,24,18,.3);
}

.voice-stars{
  color: var(--caramel-2);
  letter-spacing: .3em;
  margin-bottom: 1.2rem;
}

.voice-text{
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.4;
  transition: opacity .45s ease;
}
.voice-who{
  margin-top: 1.2rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246,237,223,.6);
  transition: opacity .45s ease;
}
.voice-card.is-fading .voice-text,
.voice-card.is-fading .voice-who{ opacity: 0; }

.voice-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.8rem;
}
.voice-btn{
  width: 42px; height: 42px;
  border: 1px solid var(--line-d);
  border-radius: 50%;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.voice-btn:hover{
  background: var(--caramel);
  border-color: var(--caramel);
  color: var(--espresso);
}
.voice-dots{
  display: flex;
  gap: .55rem;
}
.voice-dots span{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-d);
  transition: background .35s ease, transform .35s ease;
}
.voice-dots span.is-on{
  background: var(--caramel-2);
  transform: scale(1.3);
}

/* ---------- Visita / footer ---------- */

.visita-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.visita-datos div{
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line-d);
  font-size: .92rem;
}
.visita-datos dt{
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--caramel-2);
  padding-top: .2em;
  white-space: nowrap;
}
.visita-datos dd{ text-align: right; color: rgba(246,237,223,.85); }

.site-footer{
  max-width: 1200px;
  margin: clamp(4rem, 10vh, 6rem) auto 0;
  border-top: 1px solid var(--line-d);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246,237,223,.55);
}

/* ---------- Revelado al hacer scroll ---------- */

.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .9s ease var(--d, 0s),
    transform .9s var(--ease-out) var(--d, 0s);
}
.reveal.in-view{
  opacity: 1;
  transform: none;
}

/* ---------- Móvil ---------- */

@media (max-width: 900px){
  .menu{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px){
  .topnav{ display: none; }

  /* Intro más corta y con láminas laterales fuera */
  .zoomintro{ height: 220vh; }
  .zi-item--2,
  .zi-item--5,
  .zi-item--6{ display: none; }
  .zi-frame{ width: 56vw; height: 26vh; }
  .zi-item--1 .zi-frame{ transform: translate(6vw,  -30vh); width: 60vw; height: 24vh; }
  .zi-item--3 .zi-frame{ transform: translate(30vw, 0);     width: 42vw; height: 22vh; }
  .zi-item--4 .zi-frame{ transform: translate(-6vw, 28vh);  width: 52vw; height: 22vh; }

  .hero{ min-height: 0; }
  .hero__ghost{ display: none; }
  .hero-stats{ flex-wrap: wrap; gap: 1.6rem 2.2rem; }

  .sec{ padding-block: 70px; }

  .split{ grid-template-columns: 1fr; }
  .split--reverse .split__media{ order: 0; }
  .split__media{ aspect-ratio: 4 / 3.4; }
  .sec--local{ padding-top: 70px; }

  .menu{ grid-template-columns: 1fr; }

  .visita-grid{ grid-template-columns: 1fr; }
  .visita-datos dd{ text-align: left; }
  .visita-datos div{ flex-direction: column; gap: .2rem; }

  .site-footer{ flex-direction: column; gap: .5rem; }
}

/* ---------- Accesibilidad: sin movimiento ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  /* la intro deja de ser un viaje: una pantalla estática */
  .zoomintro{ height: 100vh; }
  .zi-item{ transform: none !important; }

  .reveal,
  .line__inner-s{
    transition: none;
    transform: none;
    opacity: 1;
  }
  .arrow-down{ animation: none; }
  .odo-strip{ transition: none; transform: translateY(var(--ty, 0)); }
  .split__media--tiltL img,
  .split__media--tiltR img{ transform: none; transition: none; }
  .card{ transition: none; }
}