/* ==========================================================
   GENA COFFEE — café de especialidad, Ñuñoa
   Paleta pastel: crema / verde olivo / café
   ========================================================== */

:root{
  --crema:#FAF8F2;
  --blanco:#FFFFFF;
  --oliva:#9AA588;        /* el verde del logo — superficies y acentos */
  --oliva-prof:#535E43;   /* textos y trazos sobre claro */
  --cafe:#B08968;         /* café con leche — solo decorativo */
  --tinta:#3E2F23;        /* café tinta — texto principal */
  --tinta-suave:#6E5F51;  /* texto secundario */
  --linea:#E7E1D4;
  --f-display:"Marcellus", Georgia, serif;
  --f-cuerpo:"Karla", "Segoe UI", sans-serif;
  --f-mano:"Caveat", cursive;
  --ancho:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-cuerpo);
  background:var(--crema);
  color:var(--tinta);
  font-size:1.06rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--oliva-prof);outline-offset:3px;border-radius:4px}

.saltar{
  position:absolute;left:-9999px;top:0;background:var(--oliva-prof);color:#fff;
  padding:.6rem 1.2rem;z-index:200;border-radius:0 0 12px 0;
}
.saltar:focus{left:0}

/* ---------- utilidades ---------- */
.ceja{
  font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--oliva-prof);font-weight:700;margin-bottom:1rem;
}
.ceja-clara{color:var(--crema);opacity:.85}
.titulo{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.15;
  margin-bottom:1.4rem;
}
.titulo em{font-style:italic;color:var(--oliva-prof)}
.centrado{text-align:center}
.manuscrita{
  font-family:var(--f-mano);font-size:1.7rem;color:var(--oliva-prof);
  transform:rotate(-2deg);
}
.manuscrita.chica{font-size:1.4rem}
.estrellas{color:#C99A2C;letter-spacing:.1em}

.pill{
  display:inline-block;background:var(--oliva-prof);color:var(--crema);
  text-decoration:none;font-weight:700;font-size:.95rem;
  padding:.78rem 1.7rem;border-radius:99px;
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.pill:hover{background:var(--tinta);transform:translateY(-2px);box-shadow:0 10px 24px rgba(62,47,35,.16)}
.pill-fantasma{
  background:transparent;color:var(--oliva-prof);
  box-shadow:inset 0 0 0 2px var(--oliva);
}
.pill-fantasma:hover{background:var(--oliva);color:var(--tinta);box-shadow:inset 0 0 0 2px var(--oliva)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:2rem;
  padding:.9rem clamp(1.2rem,4vw,3rem);
  background:rgba(250,248,242,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.lockup{display:block;color:var(--oliva-prof)}
.nav-marca .lockup{width:132px;height:auto}
.nav-links{display:flex;gap:2.2rem;margin-left:auto}
.nav-links a{
  text-decoration:none;font-weight:700;font-size:.95rem;
  display:flex;flex-direction:column;line-height:1.25;
  border-bottom:2px solid transparent;transition:border-color .25s;
}
.nav-links a small{font-weight:400;font-size:.75rem;color:var(--tinta-suave)}
.nav-links a:hover{border-color:var(--oliva)}
.nav-cta{white-space:nowrap}

/* ---------- hero ---------- */
.hero{
  max-width:var(--ancho);margin:0 auto;
  min-height:min(78svh,760px);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:2rem;padding:3.5rem clamp(1.2rem,4vw,3rem) 4rem;
}
.hero-texto{min-width:0}
.hero h1{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.16;
  margin-bottom:1.3rem;
}
.destacado{position:relative;color:var(--oliva-prof);font-style:italic;white-space:nowrap}
.subrayado{
  position:absolute;left:-2%;bottom:-.26em;width:104%;height:.5em;
  overflow:visible;color:var(--oliva);pointer-events:none;
}
.subrayado path{stroke:currentColor;stroke-width:7;fill:none;stroke-linecap:round;stroke-dashoffset:0}
.hero-bajada{max-width:34rem;color:var(--tinta-suave);margin-bottom:1.8rem}
.hero-bajada strong{display:block;color:var(--tinta);font-weight:700;font-size:1.1rem;margin-bottom:.3rem}
.hero-acciones{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero-nota{
  display:inline-block;text-decoration:none;font-size:.95rem;color:var(--tinta-suave);
  border-bottom:1px solid var(--linea);padding-bottom:2px;transition:border-color .25s;
}
.hero-nota:hover{border-color:var(--oliva-prof)}
.hero-nota strong{color:var(--tinta);font-size:1.05rem}

/* entrada escalonada del hero al cargar */
.hero-in{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .hero-in{opacity:0;animation:heroSube 1s cubic-bezier(.22,.61,.36,1) both}
  .hero-in:nth-child(1){animation-delay:.15s}
  .hero-in:nth-child(2){animation-delay:.32s}
  .hero-in:nth-child(3){animation-delay:.5s}
  .hero-in:nth-child(4){animation-delay:.68s}
  .hero-in:nth-child(5){animation-delay:.86s}
  .subrayado path{stroke-dasharray:1;stroke-dashoffset:1;animation:dibujar .85s ease forwards;animation-delay:1.3s}
}
@keyframes heroSube{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

.hero-arte{position:relative;min-width:0;color:var(--oliva-prof);align-self:center;padding:1rem 0 0 1rem}
.hero-arte svg{width:100%;max-width:580px;height:auto;display:block;margin:0 auto;position:relative;z-index:1}
.hero-glow{
  position:absolute;top:46%;left:50%;width:74%;padding-bottom:74%;
  transform:translate(-50%,-50%) scale(.6);border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(154,165,136,.42),rgba(154,165,136,0) 68%);
  opacity:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero-glow{animation:glowIn 1.4s ease .5s forwards, glowLatido 6s ease-in-out 2.2s infinite}
  .taza-flota{animation:flota 5.5s ease-in-out 2.9s infinite}
}
@keyframes glowIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes glowLatido{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.trazo{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:dibujar 1.5s ease forwards;
}
.t1{animation-delay:1.5s;animation-duration:.7s}
.t2{animation-delay:1.75s;animation-duration:.7s}
.t3{animation-delay:.25s}
.t4{animation-delay:0s;animation-duration:.9s}
.t5{animation-delay:1s;animation-duration:.8s}
.t6{animation-delay:.5s;animation-duration:1.8s}
@keyframes dibujar{to{stroke-dashoffset:0}}
.hero-arte .t1,.hero-arte .t2{animation-name:dibujar,vapor;animation-duration:.7s,4s;animation-delay:1.5s,2.6s;animation-iteration-count:1,infinite;animation-timing-function:ease,ease-in-out}
.hero-arte .t2{animation-delay:1.75s,3s}
@keyframes vapor{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- cinta ---------- */
.cinta{
  background:var(--oliva);color:var(--tinta);
  overflow:hidden;white-space:nowrap;
  padding:.75rem 0;border-block:1px solid rgba(62,47,35,.12);
}
.cinta-pista{display:flex;width:max-content;will-change:transform}
.cinta-pista.animar{animation:desfile linear infinite}
.cinta-unidad{
  font-family:var(--f-display);font-size:1.05rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
}
@keyframes desfile{to{transform:translateX(-50%)}}

/* ---------- nosotros / knockout ---------- */
.nosotros{max-width:var(--ancho);margin:0 auto;padding:5.5rem clamp(1.2rem,4vw,3rem) 4.5rem}
.knockout{margin-bottom:3.5rem}
.knockout svg{width:100%;height:auto;display:block}
.kletra{
  font-family:var(--f-display);font-size:340px;
}
.nosotros-cuerpo{
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;
}
.nosotros-parrafos p{margin-bottom:1.2rem;color:var(--tinta-suave)}
.nosotros-parrafos .manuscrita{color:var(--oliva-prof)}

/* ---------- hecho en gena ---------- */
.hecho{padding:0 clamp(1.2rem,4vw,3rem) 5rem}
.hecho-caja{
  max-width:var(--ancho);margin:0 auto;
  background:var(--oliva-prof);color:var(--crema);
  border-radius:28px;padding:clamp(2.2rem,5vw,4rem);
}
.hecho-caja h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:2.4rem;
}
.hecho-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-bottom:2.6rem}
.hecho-cols .icono{width:44px;height:44px;color:var(--oliva);margin-bottom:1rem}
.hecho-cols h3{font-family:var(--f-display);font-weight:400;font-size:1.25rem;margin-bottom:.5rem}
.hecho-cols p{font-size:.98rem;opacity:.88}
.hecho-video{border-radius:18px;overflow:hidden}
.hecho-video video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
/* micro-vida en los iconos (muy sutil) */
@media (prefers-reduced-motion:no-preference){
  .humo{transform-box:fill-box;transform-origin:50% 100%;animation:humo 3.4s ease-in-out infinite}
  .queque{transform-box:fill-box;transform-origin:50% 62%;animation:queque 3s ease-in-out infinite}
  .latido{transform-box:fill-box;transform-origin:50% 55%;animation:latido 2.6s ease-in-out infinite}
}
@keyframes humo{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-2.5px);opacity:1}}
@keyframes queque{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes latido{0%,32%,100%{transform:scale(1)}8%{transform:scale(1.17)}16%{transform:scale(1.03)}24%{transform:scale(1.11)}}

/* ---------- carta ---------- */
.carta{max-width:var(--ancho);margin:0 auto;padding:5.5rem clamp(1.2rem,4vw,3rem)}
.carta-cabeza{max-width:44rem;margin-bottom:2.4rem}
.carta-sub{color:var(--tinta-suave)}
.carta-sub a{color:var(--oliva-prof);font-weight:700;text-decoration-color:var(--oliva)}

.tabs{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:2.4rem}
.tab{
  font-family:var(--f-cuerpo);font-weight:700;font-size:.92rem;
  color:var(--oliva-prof);background:transparent;
  border:2px solid var(--linea);border-radius:99px;
  padding:.55rem 1.25rem;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.tab:hover{border-color:var(--oliva)}
.tab[aria-selected="true"]{background:var(--oliva-prof);border-color:var(--oliva-prof);color:var(--crema)}

.carta-cuerpo{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.8rem;align-items:start}
.carta-foto{position:sticky;top:110px}
.carta-foto img{border-radius:18px;aspect-ratio:3/4;object-fit:cover;width:100%}
.carta-foto figcaption{
  font-family:var(--f-mano);font-size:1.35rem;color:var(--oliva-prof);
  margin-top:.7rem;transform:rotate(-2deg);
}
.carta-lista{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2.4rem}
.item{
  padding:.85rem .4rem;border-bottom:1px solid var(--linea);
  transition:background .25s;border-radius:6px;
}
.item:hover{background:rgba(154,165,136,.13)}
.item-linea{display:flex;align-items:baseline;gap:.6rem}
.item-nombre{font-weight:700;font-size:1rem}
.item-puntos{flex:1;border-bottom:2px dotted var(--linea);transform:translateY(-4px)}
.item-precio{font-family:var(--f-display);font-size:1.02rem;color:var(--oliva-prof);white-space:nowrap}
.item-desc{font-size:.88rem;color:var(--tinta-suave);margin-top:.25rem;line-height:1.5}
.item-fav{
  font-family:var(--f-mano);font-size:1.12rem;color:var(--oliva-prof);
  display:inline-block;transform:rotate(-2deg);margin-top:.2rem;
}
.item-fav::before{content:"★ ";font-size:.85rem}
.carta-extras{
  margin-top:2.6rem;font-size:.92rem;color:var(--tinta-suave);
  border-top:1px solid var(--linea);padding-top:1.4rem;max-width:52rem;
}

/* ---------- galería ---------- */
.galeria{
  max-width:var(--ancho);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  padding:0 clamp(1.2rem,4vw,3rem) 5.5rem;
}
.galeria img{aspect-ratio:4/5;object-fit:cover;border-radius:14px;width:100%}
.galeria figure:nth-child(even){transform:translateY(1.6rem)}

/* ---------- reseñas ---------- */
.resenas{
  background:var(--blanco);border-block:1px solid var(--linea);
  padding:5.5rem clamp(1.2rem,4vw,3rem);
}
.resenas-nota{text-align:center;margin-bottom:.8rem}
.nota-num{
  font-family:var(--f-display);font-size:clamp(3.6rem,7vw,5.4rem);
  line-height:1;color:var(--tinta);
}
.estrellas.grandes{font-size:1.45rem;margin:.4rem 0;display:flex;gap:.18rem;justify-content:center}
.estrellas.grandes .estrella{display:inline-block;color:#C99A2C}
@media (prefers-reduced-motion:no-preference){
  .estrellas.grandes .estrella{opacity:0;transform:scale(.2) rotate(-22deg)}
  .resenas-nota.visto .estrella{animation:estrellaPop .55s cubic-bezier(.34,1.56,.64,1) forwards}
  .resenas-nota.visto .estrella:nth-child(1){animation-delay:.45s}
  .resenas-nota.visto .estrella:nth-child(2){animation-delay:.57s}
  .resenas-nota.visto .estrella:nth-child(3){animation-delay:.69s}
  .resenas-nota.visto .estrella:nth-child(4){animation-delay:.81s}
  .resenas-nota.visto .estrella:nth-child(5){animation-delay:.93s}
}
@keyframes estrellaPop{to{opacity:1;transform:scale(1) rotate(0)}}
.nota-sub{color:var(--tinta-suave);font-size:.95rem}
.nota-sub a{color:var(--oliva-prof);font-weight:700}
.resenas .titulo{margin:1.2rem auto 2.6rem}
.resenas-grid{
  max-width:var(--ancho);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;
}
.resenas-grid blockquote{
  position:relative;background:var(--crema);border:1px solid var(--linea);border-radius:18px;
  padding:2.2rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:1rem;overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.resenas-grid blockquote::before{
  content:"\201C";position:absolute;top:.1rem;left:1rem;z-index:0;
  font-family:var(--f-display);font-size:3.6rem;line-height:1;color:var(--oliva);
}
@media (prefers-reduced-motion:no-preference){
  .resenas-grid blockquote::before{opacity:0;transform:scale(.4);transition:opacity .6s ease,transform .6s ease}
  .resenas-grid blockquote.visto::before{opacity:.32;transform:scale(1)}
}
.resenas-grid blockquote.visto::before{opacity:.32}
.resenas-grid blockquote:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(62,47,35,.11);border-color:var(--oliva)}
.resenas-grid p{position:relative;z-index:1;font-size:.97rem;color:var(--tinta-suave)}
.resenas-grid footer{margin-top:auto;font-size:.9rem;color:var(--tinta-suave)}
.resenas-grid cite{font-style:normal;font-weight:700;color:var(--tinta)}
.resenas-cta{max-width:var(--ancho);margin:2.8rem auto 0;text-align:center}
.resenas-cta p{color:var(--tinta-suave);margin-bottom:1.1rem}

/* ---------- shop ---------- */
.shop{max-width:var(--ancho);margin:0 auto;padding:5.5rem clamp(1.2rem,4vw,3rem)}
.shop-cabeza{margin-bottom:2.4rem}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.shop-item{
  border:1px solid var(--linea);border-radius:18px;overflow:hidden;
  background:var(--blanco);padding-bottom:1.5rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.shop-item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(62,47,35,.09)}
.shop-item img{aspect-ratio:4/3;object-fit:cover;width:100%}
.shop-item h3{
  font-family:var(--f-display);font-weight:400;font-size:1.2rem;
  padding:1.1rem 1.4rem .2rem;
}
.shop-item p{padding:0 1.4rem;font-size:.93rem;color:var(--tinta-suave)}
.shop-item .precio{
  font-family:var(--f-display);font-size:1.15rem;color:var(--oliva-prof);
  padding-top:.5rem;
}
.shop-item-olivo,.shop-item-cafe{display:flex;flex-direction:column}
.shop-item-olivo .shop-taza,.shop-item-cafe .shop-taza{
  width:100%;aspect-ratio:4/3;padding:2.2rem 25%;
}
.shop-item-olivo .shop-taza{background:var(--oliva);color:var(--crema)}
.shop-item-cafe .shop-taza{background:var(--cafe);color:var(--crema)}
.shop-item-olivo p,.shop-item-cafe p{color:var(--tinta-suave)}

/* ---------- visítanos ---------- */
.visitanos{
  max-width:var(--ancho);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;
  padding:4.5rem clamp(1.2rem,4vw,3rem) 6rem;align-items:center;
}
.visitanos address{font-style:normal;margin-bottom:1.4rem;color:var(--tinta-suave)}
.visitanos address strong{color:var(--tinta);font-size:1.12rem}
.horarios{list-style:none;max-width:24rem;margin-bottom:1.8rem}
.horarios li{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.55rem 0;border-bottom:1px dotted var(--linea);font-size:.98rem;
}
.horarios li span:last-child{font-weight:700;color:var(--oliva-prof)}
.visitanos-acciones{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem}
.visitanos-mapa iframe{
  width:100%;height:440px;border:0;border-radius:20px;
  filter:sepia(.18) saturate(.9);display:block;
}

/* ---------- footer ---------- */
.pie{
  background:var(--oliva-prof);color:var(--crema);
  text-align:center;padding:3.5rem 1.5rem 6.5rem;
}
.pie-logo{width:220px;margin:0 auto 1.4rem;color:var(--crema)}
.pie-dato{font-size:.92rem;opacity:.85;margin-bottom:1.2rem}
.pie-links{display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem}
.pie-links a{color:var(--crema);font-weight:700;font-size:.95rem;text-decoration-color:var(--oliva)}
.pie-firma{font-size:.85rem;opacity:.65}

/* ---------- barra móvil ---------- */
.barra-movil{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:110;
  background:var(--oliva-prof);
  padding:.8rem .5rem calc(.8rem + env(safe-area-inset-bottom));
  justify-content:space-around;
}
.barra-movil a{color:var(--crema);text-decoration:none;font-weight:700;font-size:.88rem}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
[data-reveal="izq"]{transform:translateX(-34px)}
[data-reveal="der"]{transform:translateX(34px)}
[data-reveal="zoom"]{transform:scale(.96)}
[data-reveal="wipe"]{transform:none;clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.22,.61,.36,1),opacity .6s ease}
[data-reveal].visto{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-reveal="foto"]{transform:none;opacity:1}
[data-reveal="foto"] .foto-marco{overflow:hidden;border-radius:14px;clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.22,.61,.36,1)}
[data-reveal="foto"] .foto-marco img{transform:scale(1.16);transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
[data-reveal="foto"].visto .foto-marco{clip-path:inset(0 0 0 0)}
[data-reveal="foto"].visto .foto-marco img{transform:scale(1)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .nav{justify-content:center}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:2.2rem;text-align:center}
  .hero h1{max-width:none}
  .destacado{white-space:normal}
  .subrayado{display:none}
  .hero-bajada{margin-inline:auto}
  .hero-acciones{justify-content:center}
  .hero-arte{order:-1;padding:0}
  .hero-arte svg{max-width:330px}
  .nosotros-cuerpo{grid-template-columns:1fr}
  .hecho-cols{grid-template-columns:1fr;gap:1.7rem}
  .carta-cuerpo{grid-template-columns:1fr}
  .carta-foto{position:static;max-width:440px}
  .carta-lista{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr 1fr;gap:.9rem}
  .galeria figure:nth-child(even){transform:translateY(1rem)}
  .resenas-grid{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr}
  .visitanos{grid-template-columns:1fr;gap:2rem}
  .visitanos-mapa iframe{height:340px}
  .barra-movil{display:flex}
  .pie{padding-bottom:7.5rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .trazo{animation:none;stroke-dashoffset:0}
  .cinta-pista{animation:none}
  [data-reveal],[data-reveal="wipe"]{opacity:1;transform:none;clip-path:none;transition:none}
  [data-reveal="foto"] .foto-marco{clip-path:none;transition:none}
  [data-reveal="foto"] .foto-marco img{transform:none;transition:none}
  .pill,.shop-item,.resenas-grid blockquote{transition:none}
}