/* Espresso Río Intag — concepto web
   Paleta y tipografía según el brief: crema + café tostado + verde Intag + arcilla. */

:root {
  --cream: #f5f0e7;
  --paper: #eee7da;
  --ink: #2d1a12;
  --coffee: #42261a;
  --forest: #385948;
  --moss: #77936f;
  --clay: #b35f35;
  --earth: #725d50;
  --line: rgba(45, 26, 18, 0.18);
  --gutter: 7vw;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  margin: 0;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.055em; }
h2 { font-size: clamp(40px, 5.4vw, 82px); line-height: .94; margin: 0; }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.eyebrow { font: 500 11px/1.4 "DM Mono", monospace; letter-spacing: .15em; margin: 0 0 20px; }

.button {
  align-items: center; border-radius: 99px; display: inline-flex;
  font-size: 14px; font-weight: 600; gap: 6px; padding: 15px 20px;
}
.button-light { background: var(--cream); color: var(--ink); }
.text-link { border-bottom: 1px solid currentColor; font-size: 14px; padding-bottom: 5px; }
.arrow-link {
  border-bottom: 1px solid var(--ink); display: inline-block;
  font-size: 14px; font-weight: 600; margin-top: 17px; padding-bottom: 5px;
}
.nav-cta span, .button span, .arrow-link span, .location-list a span { font-size: 17px; margin-left: 6px; }

.concept-bar {
  background: var(--clay); color: #fff9f1;
  font: 500 10px/1 "DM Mono", monospace; letter-spacing: .14em;
  padding: 11px var(--gutter) 10px; text-align: center;
}

.section-label {
  align-items: center; border-top: 1px solid var(--line);
  display: flex; gap: 11px; padding-top: 15px;
}
.section-label span { font: 12px "DM Mono", monospace; }
.section-label p { font: 500 10px "DM Mono", monospace; letter-spacing: .14em; margin: 0; }

/* ── 01 · Hero con video scrubbeado por scroll ───────────────────────────── */

.hero-scroll { height: 420vh; position: relative; }
.hero-stage {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100svh; overflow: hidden; padding: 0 var(--gutter) 6vh;
  position: sticky; top: 0;
}
.hero-media {
  background: #1b120c url('assets/scroll-hero-2-poster.jpg') center / cover no-repeat;
  inset: 0; position: absolute; z-index: 0;
}
.hero-video {
  display: block; height: 100%; object-fit: cover; object-position: center;
  pointer-events: none; width: 100%;
}
/* Velo plano y discreto: sólo lo necesario para que el texto sea legible. */
.hero-veil { background: rgba(24, 15, 10, .32); inset: 0; position: absolute; }

.hero-stage .nav, .hero-stage .hero-copy { position: relative; z-index: 2; }
.hero-stage { color: var(--cream); text-shadow: 0 1px 14px rgba(24, 15, 10, .35); }

.nav {
  align-items: center; border-bottom: 1px solid rgba(245, 240, 231, .24);
  display: flex; gap: 24px; justify-content: space-between; padding: 22px 0;
}
.wordmark {
  align-items: flex-start; display: grid; font-family: "DM Mono", monospace;
  font-size: 10px; gap: 2px 9px; grid-template-columns: 34px auto;
  grid-template-rows: auto auto; letter-spacing: .22em; line-height: 1;
}
.brand-seal { border-radius: 50%; grid-row: 1 / span 2; height: 34px; object-fit: cover; width: 34px; }
.wordmark span, .wordmark strong { grid-column: 2; }
.wordmark strong { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: .04em; }
.nav-links { align-items: center; display: flex; font-size: 14px; gap: 26px; }
.nav-links > a:not(.nav-cta) { opacity: .88; }
.nav-cta { border: 1px solid rgba(245, 240, 231, .6); border-radius: 99px; padding: 10px 15px; }

.hero-copy { max-width: 760px; padding-bottom: 2vh; }
.hero-copy h1 { font-size: clamp(46px, 7vw, 104px); line-height: .93; margin-bottom: 26px; }
.hero-copy h1 em { color: #d6e4c2; font-style: italic; }
.hero-description { color: rgba(245, 240, 231, .86); font-size: 18px; line-height: 1.5; max-width: 460px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.hero-actions .button-light { text-shadow: none; }
.mobile-break { display: none; }

/* ── 02 · Origen ─────────────────────────────────────────────────────────── */

.origin, .offering, .products, .menu, .space, .locations { padding: 110px var(--gutter); }

.origin-layout { display: grid; gap: 6vw; grid-template-columns: 1.25fr .75fr; padding: 62px 0 56px; }
.origin-copy p { color: var(--earth); font-size: 16px; line-height: 1.65; }
.origin-copy .lead { color: var(--ink); font-size: 21px; line-height: 1.35; }

.origin-quote {
  border-left: 2px solid var(--clay); margin: 0 0 56px;
  max-width: 760px; padding: 4px 0 4px 26px;
}
.origin-quote blockquote {
  font-family: "Fraunces", Georgia, serif; font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.28; margin: 0;
}
.origin-quote figcaption { color: var(--earth); font: 10px "DM Mono", monospace; letter-spacing: .12em; margin-top: 14px; text-transform: uppercase; }

.journey {
  align-items: stretch; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
  display: flex; gap: 3%; justify-content: space-between; padding: 30px 0;
}
.journey div { flex: 1; min-width: 0; }
.journey span { color: var(--clay); display: block; font: 10px "DM Mono", monospace; margin-bottom: 20px; }
.journey strong { font-family: "Fraunces", Georgia, serif; font-size: clamp(19px, 2vw, 24px); font-weight: 500; }
.journey p { color: var(--earth); font-size: 13px; margin: 5px 0 0; }
.journey i { align-self: center; border-top: 1px solid var(--line); flex: 0 0 6%; }

/* ── 03 · La carta (secciones reales) ────────────────────────────────────── */

.offering { background: var(--paper); }
.offering-heading, .products-heading, .menu-heading {
  display: grid; gap: 6vw; grid-template-columns: 1.1fr .9fr; padding: 62px 0 52px;
}
.offering-heading p, .products-heading p, .menu-heading p {
  color: var(--earth); font-size: 16px; line-height: 1.6; margin: 0; max-width: 460px; padding-top: 12px;
}
.offering-list {
  border-top: 1px solid var(--line); display: grid; gap: 0 5vw;
  grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0;
}
.offering-list li {
  align-items: baseline; border-bottom: 1px solid var(--line);
  display: flex; gap: 16px; padding: 19px 0;
}
.offering-list span { color: var(--clay); font: 10px "DM Mono", monospace; }
.offering-list strong { font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }

/* ── 04 · Productos destacados ───────────────────────────────────────────── */

.product-grid { display: grid; gap: clamp(16px, 2.2vw, 30px); grid-template-columns: repeat(3, 1fr); }
.product-card { margin: 0; }
.product-card img {
  aspect-ratio: 4 / 3; background: var(--paper); border-radius: 3px;
  display: block; height: auto; object-fit: cover; width: 100%;
}
.product-card figcaption {
  align-items: baseline; border-top: 1px solid var(--line);
  display: flex; gap: 14px; justify-content: space-between; margin-top: 14px; padding-top: 12px;
}
.product-card strong { font-family: "Fraunces", Georgia, serif; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.product-card span { color: var(--earth); font: 10px "DM Mono", monospace; letter-spacing: .1em; text-align: right; text-transform: uppercase; }

/* ── 05 · La carta completa: explorador de categorías + panel activo ─────── */

.menu { background: var(--paper); }
.menu-board { scroll-margin-top: 20px; }

/* Sin JS el explorador queda oculto, se listan las doce secciones apiladas
   y el <noscript> aporta un índice de anclas. */
.menu-explorer { display: none; }
.menu-board.is-ready .menu-explorer { display: block; }

.menu-cat-group + .menu-cat-group { margin-top: clamp(20px, 2.4vw, 30px); }
.menu-cat-group-label {
  align-items: center; border-top: 1px solid var(--line); color: var(--ink);
  display: flex; gap: 12px; margin: 0 0 12px; padding-top: 12px;
}
.menu-cat-group-label span { font: 500 10px "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.menu-cat-group-label i { background: var(--line); flex: 1; height: 1px; }
.menu-cat-group-label em { color: var(--earth); font: 10px "DM Mono", monospace; font-style: normal; letter-spacing: .1em; }

.menu-cat-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.menu-cat {
  align-content: start; background: rgba(245, 240, 231, .62); border: 1px solid var(--line);
  border-radius: 4px; color: var(--ink); cursor: pointer; display: grid; font-family: inherit;
  gap: 7px; min-height: 100px; padding: 13px 14px 12px; position: relative; text-align: left;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.menu-cat-idx { color: var(--clay); font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.menu-cat-name {
  align-self: end; font-family: "Fraunces", Georgia, serif; font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.1;
}
.menu-cat-meta { color: var(--earth); font: 10px "DM Mono", monospace; letter-spacing: .09em; }

.menu-cat:hover { background: var(--cream); border-color: rgba(45, 26, 18, .42); transform: translateY(-2px); }
.menu-cat[aria-selected="true"] {
  background: var(--coffee); border-color: var(--coffee); color: var(--cream); transform: none;
}
.menu-cat[aria-selected="true"] .menu-cat-idx { color: #e0a882; }
.menu-cat[aria-selected="true"] .menu-cat-meta { color: rgba(245, 240, 231, .68); }
/* Marca de sección en pantalla, sólo en la tarjeta activa. */
.menu-cat[aria-selected="true"]::after {
  background: var(--clay); border-radius: 99px; content: ""; height: 6px;
  position: absolute; right: 13px; top: 14px; width: 6px;
}

/* Índice de anclas para el caso sin JS. */
.menu-index { border-top: 1px solid var(--line); margin-bottom: 34px; padding-top: 14px; }
.menu-index p { color: var(--earth); font: 500 10px "DM Mono", monospace; letter-spacing: .14em; margin: 0 0 10px; text-transform: uppercase; }
.menu-index ul { display: grid; gap: 6px 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.menu-index a { border-bottom: 1px solid var(--line); display: block; font-size: 14px; padding-bottom: 5px; }

.menu-panels { min-width: 0; }
.menu-panel + .menu-panel { margin-top: 54px; }
.menu-board.is-ready .menu-panels { margin-top: clamp(30px, 3.6vw, 48px); }
.menu-board.is-ready .menu-panel + .menu-panel { margin-top: 0; }
.menu-panel { scroll-margin-top: 18px; }
.menu-board.is-ready .menu-panel:not([hidden]) { animation: menu-panel-in .28s ease both; }
@keyframes menu-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Barra de contexto del panel: posición dentro de las doce secciones + control
   de descripciones. La inserta JS, por eso no existe en el marcado base. */
.menu-panel-bar {
  align-items: center; display: flex; flex-wrap: wrap; gap: 10px 16px;
  justify-content: space-between; margin: 0 0 16px;
}
.menu-panel-pos { color: var(--earth); font: 10px "DM Mono", monospace; letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.menu-panel-pos b { color: var(--clay); font-weight: 500; }
.menu-desc-toggle {
  background: none; border: 1px solid var(--line); border-radius: 99px; color: var(--earth);
  cursor: pointer; font: 500 10px "DM Mono", monospace; letter-spacing: .1em;
  padding: 7px 13px; text-transform: uppercase; transition: border-color .16s ease, color .16s ease;
}
.menu-desc-toggle:hover { border-color: var(--ink); color: var(--ink); }
.menu-desc-toggle[aria-pressed="true"] { border-color: var(--coffee); color: var(--coffee); }

.menu-panel-title {
  align-items: baseline; border-bottom: 1px solid var(--line); display: flex;
  font-family: "Fraunces", Georgia, serif; font-size: clamp(27px, 3.1vw, 40px); font-weight: 500;
  gap: 14px; letter-spacing: -.045em; line-height: 1; margin: 0; padding-bottom: 15px;
}
.menu-panel-idx { color: var(--clay); font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.menu-panel-note { color: var(--earth); font-size: 13px; font-style: italic; margin: 14px 0 -4px; }

.menu-items { list-style: none; margin: 0; max-width: 820px; padding: 0; }
.menu-items li { border-bottom: 1px solid rgba(45, 26, 18, .09); padding: 11px 0 12px; }
.menu-items li:last-child { border-bottom: 0; }
.menu-line { align-items: baseline; display: flex; gap: 9px; margin: 0; }
.menu-name { font-family: "Fraunces", Georgia, serif; font-size: 17px; font-weight: 500; letter-spacing: -.025em; }
/* Guía punteada de carta: el precio se ordena después del pseudo-elemento. */
.menu-line::after { border-bottom: 1px dotted rgba(45, 26, 18, .3); content: ""; flex: 1 1 22px; min-width: 22px; position: relative; top: -4px; }
.menu-price { color: var(--coffee); font: 500 13px "DM Mono", monospace; order: 2; white-space: nowrap; }
.menu-desc { color: var(--earth); font-size: 12.5px; line-height: 1.5; margin: 3px 0 0; max-width: 66ch; }
.menu-opt { color: var(--clay); font: 500 9px "DM Mono", monospace; letter-spacing: .12em; margin-right: 8px; text-transform: uppercase; }

/* Jerarquía editorial: la descripción es secundaria y se recorta a una línea
   hasta que se pide el detalle completo. El texto sigue íntegro en el DOM. */
.menu-board.is-ready .menu-desc {
  -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box;
  opacity: .82; overflow: hidden;
}
.menu-board.is-ready.show-desc .menu-desc { display: block; opacity: 1; overflow: visible; }

/* Paso a la sección anterior / siguiente: deja claro que hay doce en total. */
.menu-stepper {
  border-top: 1px solid var(--line); display: flex; gap: 14px;
  justify-content: space-between; margin-top: 26px; max-width: 820px; padding-top: 14px;
}
.menu-step {
  background: none; border: 0; color: var(--earth); cursor: pointer; font-family: inherit;
  font-size: 13px; max-width: 48%; padding: 4px 0; text-align: left; transition: color .16s ease;
}
.menu-step:last-child { text-align: right; }
.menu-step:hover { color: var(--ink); }
.menu-step span { display: block; font: 10px "DM Mono", monospace; letter-spacing: .12em; margin-bottom: 4px; text-transform: uppercase; }
.menu-step b { font-family: "Fraunces", Georgia, serif; font-size: 16px; font-weight: 500; letter-spacing: -.025em; }

.menu-legal {
  border-top: 1px solid var(--line); color: var(--earth); font: 11px/1.7 "DM Mono", monospace;
  letter-spacing: .03em; margin: 58px 0 0; padding-top: 18px;
}

/* ── 06 · El espacio ─────────────────────────────────────────────────────── */

.space { background: var(--forest); color: var(--cream); }
.space .section-label { border-top-color: rgba(245, 240, 231, .28); }
.space-heading { display: grid; gap: 6vw; grid-template-columns: 1.1fr .9fr; padding: 62px 0 60px; }
.space-copy p { color: rgba(245, 240, 231, .78); font-size: 16px; line-height: 1.65; margin: 0 0 34px; max-width: 460px; }
.statement { border-top: 1px solid rgba(245, 240, 231, .25); display: flex; gap: 14px; padding-top: 20px; }
.statement span { color: #d6e4c2; }
.statement p { font-family: "Fraunces", Georgia, serif; font-size: 21px; line-height: 1.05; margin: 0; }

.arch-gallery {
  align-items: end; display: grid; gap: clamp(16px, 3vw, 44px);
  grid-template-columns: .84fr 1.18fr .84fr; margin: 0 auto; max-width: 1160px;
}
.arch { margin: 0; overflow: hidden; position: relative; }
.arch img { display: block; height: 100%; object-fit: cover; width: 100%; }
.arch:after { background: linear-gradient(0deg, rgba(20, 10, 6, .55), transparent 40%); content: ""; inset: 0; position: absolute; }
.arch figcaption {
  bottom: 22px; color: #fff9ed; font: 500 10px "DM Mono", monospace; left: 21px;
  letter-spacing: .08em; position: absolute; text-transform: uppercase; z-index: 1;
}
.arch-left, .arch-right { border-radius: 180px 180px 0 0; height: 385px; }
.arch-center { border-radius: 250px 250px 0 0; height: 530px; }

/* ── 07 · Ubicaciones y cierre ───────────────────────────────────────────── */

.locations { background: var(--paper); }
.locations-heading { display: grid; gap: 6vw; grid-template-columns: 1fr .6fr; padding: 62px 0 52px; }
.locations-heading p { color: var(--earth); font-size: 16px; line-height: 1.55; margin: 0; padding-top: 14px; }
.location-list { border-top: 1px solid var(--line); }
.location-list article {
  align-items: center; border-bottom: 1px solid var(--line); display: grid;
  gap: 22px; grid-template-columns: 60px 1.2fr 1fr .8fr; padding: 26px 0;
}
.location-list article > span { color: var(--clay); font: 11px "DM Mono", monospace; }
.location-list h3 { font-family: "Fraunces", Georgia, serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; margin: 0; }
.location-list p { color: var(--earth); font-size: 14px; margin: 0; }
.location-list a { font-size: 13px; font-weight: 600; text-align: right; }

.final-cta {
  align-items: center; background: var(--coffee); color: var(--cream); display: flex;
  flex-direction: column; justify-content: center; min-height: 540px; padding: 90px 24px; text-align: center;
}
.final-cta h2 { font-size: clamp(62px, 9vw, 140px); line-height: .82; margin: 16px 0 42px; }
.final-cta .button { font-size: 15px; }

footer {
  align-items: center; background: var(--ink); color: rgba(245, 240, 231, .72);
  display: grid; gap: 24px; grid-template-columns: auto 1fr auto;
  font-size: 12px; padding: 30px var(--gutter);
}
footer p { margin: 0; max-width: 640px; }
footer > a { text-align: right; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --gutter: 6vw; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .offering-list { grid-template-columns: repeat(2, 1fr); }
  .menu-cat-grid, .menu-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arch-left, .arch-right { height: 300px; }
  .arch-center { height: 410px; }
}

@media (max-width: 860px) {
  .origin-layout, .offering-heading, .products-heading, .menu-heading,
  .space-heading, .locations-heading { display: block; padding: 44px 0 40px; }
  .offering-heading p, .products-heading p, .menu-heading p,
  .locations-heading p { margin-top: 22px; max-width: 100%; padding-top: 0; }
  .origin-copy { padding-top: 28px; }
  .journey { flex-direction: column; gap: 20px; }
  .journey i { align-self: flex-start; border-left: 1px solid var(--line); border-top: 0; flex: 0 0 20px; margin-left: 3px; width: 1px; }
  .menu-cat-grid, .menu-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-cat { min-height: 92px; }
  .space-copy { margin-top: 26px; }
  footer { display: flex; flex-direction: column; align-items: flex-start; }
  footer > a { text-align: left; }
}

@media (max-width: 760px) {
  :root { --gutter: 24px; }
  .concept-bar { font-size: 8px; letter-spacing: .1em; }

  .hero-scroll { height: 360vh; }
  .hero-stage { padding-bottom: 5vh; }
  .nav { padding: 18px 0; }
  .nav-links > a:not(.nav-cta) { display: none; }
  .nav-cta {
    align-items: center; display: flex; font-size: 0; height: 44px;
    justify-content: center; padding: 0; width: 44px;
  }
  .nav-cta span { font-size: 19px; margin: 0; }
  .wordmark strong { font-size: 18px; }
  .mobile-break { display: inline; }
  .hero-copy h1 { font-size: clamp(40px, 12vw, 56px); line-height: .96; }
  .hero-description { font-size: 16px; max-width: 320px; }
  .hero-actions { gap: 18px; margin-top: 26px; }

  .origin, .offering, .products, .menu, .space, .locations { padding: 72px var(--gutter); }
  .origin-quote { margin-bottom: 42px; padding-left: 18px; }
  .product-grid, .offering-list, .menu-pages { grid-template-columns: 1fr; }
  .offering-list { border-top: 0; }
  .offering-list li:first-child { border-top: 1px solid var(--line); }
  .menu-pages { gap: 30px; }
  .menu-lightbox-close { right: 12px; top: 12px; }

  .menu-cat-grid { gap: 8px; }
  .menu-cat { gap: 5px; min-height: 84px; padding: 11px 12px 10px; }
  .menu-cat-name { font-size: 15px; }
  .menu-cat-meta { font-size: 9px; }
  .menu-index ul { grid-template-columns: 1fr; }
  .menu-panel-bar { margin-bottom: 14px; }
  .menu-name { font-size: 16px; }
  .menu-step b { font-size: 14px; }

  .arch-gallery { gap: 16px; grid-template-columns: 1fr 1fr; }
  .arch-left, .arch-right { border-radius: 120px 120px 0 0; height: 240px; }
  .arch-center { border-radius: 180px 180px 0 0; grid-column: 1 / -1; grid-row: 1; height: 340px; }
  .arch-left { grid-column: 1; grid-row: 2; }
  .arch-right { grid-column: 2; grid-row: 2; }
  .arch figcaption { bottom: 15px; font-size: 8px; left: 14px; }

  .location-list article { align-items: start; gap: 6px 20px; grid-template-columns: 34px 1fr; padding: 22px 0; }
  .location-list p, .location-list a { grid-column: 2; text-align: left; }
  .final-cta { min-height: 440px; }
}

/* ── Movimiento reducido: el hero queda fijo en su fotograma póster ──────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll { height: auto; }
  .hero-stage { height: 100svh; position: static; }
  .hero-video { display: none; }
  .menu-cat:hover { transform: none; }
  .menu-board.is-ready .menu-panel:not([hidden]) { animation: none; }
}

/* ── Carta independiente (menu.html) ─────────────────────────────────────── */
body.menu-page { background:var(--paper); max-width:100%; overflow-x:clip; }
.menu-topbar { align-items:center; background:var(--cream); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:20px var(--gutter); position:relative; z-index:2; }
.menu-topbar-nav { font-size:13px; font-weight:600; }.menu-home-link { align-items:center; display:inline-flex; gap:8px; }.menu-home-link span { color:var(--clay); font-size:17px; }
.menu-masthead { background:var(--cream); display:grid; min-height:46vh; padding:clamp(64px,10vw,140px) var(--gutter) clamp(60px,8vw,106px); }.menu-masthead > * { max-width:1040px; width:100%; }.menu-masthead h1 { font-size:clamp(58px,9.2vw,146px); letter-spacing:-.065em; line-height:.82; margin:24px 0 28px; }.menu-masthead h1 em { color:var(--clay); }.menu-masthead-lead { color:var(--earth); font-size:clamp(16px,1.7vw,21px); line-height:1.45; margin:0; max-width:650px; }.menu-facts { border-top:1px solid var(--line); display:flex; gap:clamp(25px,6vw,94px); margin:54px 0 0; max-width:none; padding-top:16px; }.menu-facts div { display:grid; gap:5px; }.menu-facts dt { color:var(--earth); font:10px "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }.menu-facts dd { font-family:"Fraunces",Georgia,serif; font-size:19px; margin:0; }.menu-page .menu { padding-top:84px; }.menu-page .menu-board { margin:0 auto; max-width:1240px; }.menu-page .menu-cat-grid { min-width:0; }.menu-page .menu-cat { min-width:0; }.menu-page .menu-panel { max-width:920px; }.menu-page footer { background:var(--cream); }


/* ── Home: experiencia y puntos de encuentro ─────────────────────────────── */
.experience { background:var(--forest); color:var(--cream); padding:110px var(--gutter); }.experience .section-label { border-top-color:rgba(245,240,231,.28); }.experience-layout { align-items:center; display:grid; gap:clamp(34px,8vw,130px); grid-template-columns:.9fr 1.1fr; margin:62px auto 0; max-width:1180px; }.experience-copy { max-width:470px; }.experience-copy .eyebrow { color:#d6e4c2; }.experience-copy h2 { font-size:clamp(42px,5.2vw,76px); letter-spacing:-.055em; line-height:.9; margin:20px 0 26px; }.experience-copy > p:not(.eyebrow) { color:rgba(245,240,231,.8); font-size:17px; line-height:1.6; margin:0 0 28px; }.experience .arrow-link { border-bottom-color:rgba(245,240,231,.4); color:var(--cream); }.experience-photo { margin:0; position:relative; }.experience-photo img { aspect-ratio:4 / 5; display:block; object-fit:cover; width:100%; }.experience-photo figcaption { bottom:18px; color:var(--cream); font:10px "DM Mono",monospace; left:18px; letter-spacing:.12em; position:absolute; text-transform:uppercase; }.experience-photo::after { background:linear-gradient(0deg,rgba(0,0,0,.38),transparent 30%); content:""; inset:0; pointer-events:none; position:absolute; }
.locations-heading h2 em { color:var(--clay); font-style:italic; }.location-atlas { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:58px; }.location-spot { background:var(--cream); border:1px solid var(--line); min-height:250px; overflow:hidden; padding:26px; position:relative; transition:transform .18s ease,border-color .18s ease; }.location-spot:hover { border-color:var(--coffee); transform:translateY(-3px); }.location-number { color:var(--clay); font:10px "DM Mono",monospace; letter-spacing:.15em; }.location-mark { border:1px solid var(--line); border-radius:50% 50% 50% 0; height:42px; position:absolute; right:26px; top:26px; transform:rotate(-45deg); width:42px; }.location-mark::after { background:var(--clay); border-radius:50%; content:""; height:8px; left:16px; position:absolute; top:16px; width:8px; }.location-spot h3 { font-family:"Fraunces",Georgia,serif; font-size:clamp(28px,3vw,43px); font-weight:500; letter-spacing:-.045em; line-height:.95; margin:52px 0 12px; max-width:12ch; }.location-spot p { color:var(--earth); font-size:14px; line-height:1.5; margin:0; max-width:30ch; }.location-spot a { bottom:24px; font:500 10px "DM Mono",monospace; letter-spacing:.1em; position:absolute; text-transform:uppercase; }.location-spot--cotacachi { background:#eee7da; }.location-spot--otavalo { background:#e5ecdf; }.location-spot--floresta { background:#f1e6d8; }.location-spot--metropolitano { background:#e4ece7; }

@media (max-width:860px) { .experience-layout { gap:36px; grid-template-columns:1fr; }.experience-copy { max-width:600px; }.experience-photo { max-width:680px; }.location-atlas { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .experience { padding:72px var(--gutter); }.experience-layout { margin-top:42px; }.experience-copy h2 { font-size:clamp(42px,13vw,60px); }.experience-photo img { aspect-ratio:4 / 4.6; }.location-atlas { grid-template-columns:1fr; margin-top:38px; }.location-spot { min-height:230px; padding:22px; }.location-mark { right:22px; top:22px; }.location-spot h3 { margin-top:46px; }.location-spot a { bottom:21px; } }

/* Mobile-specific composition for the separate carta page. */
@media (max-width:760px) { body.menu-page { overflow-x:clip; }.menu-topbar { gap:16px; padding:16px 24px; }.menu-topbar .wordmark { min-width:0; }.menu-topbar-nav { font-size:0; }.menu-home-link span { font-size:18px; }.menu-masthead { min-height:0; padding:62px 24px 54px; }.menu-masthead h1 { font-size:clamp(52px,15vw,70px); margin:18px 0 24px; }.menu-masthead-lead { font-size:16px; }.menu-facts { display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; margin-top:38px; }.menu-facts div:last-child { grid-column:1 / -1; }.menu-page .menu { padding:56px 24px 72px; }.menu-page .menu-cat-grid { grid-template-columns:1fr; width:100%; }.menu-page .menu-cat { min-width:0; overflow:hidden; }.menu-page .menu-cat-name { overflow-wrap:anywhere; }.menu-page .menu-panel-bar { align-items:flex-start; }.menu-page .menu-panel-pos { max-width:190px; }.menu-page .menu-stepper { gap:10px; }.menu-page .menu-step { min-width:0; }.menu-page .menu-step b { overflow-wrap:anywhere; } }


/* ── Experience photographs and location explorer ───────────────────────── */
.experience-copy h2 em { color:#d6e4c2; font-style:italic; }.experience-note { color:#b8c9aa; font:10px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.experience-frames { align-items:end; display:grid; gap:16px; grid-template-columns:1.04fr .78fr; }.experience-frame { margin:0; overflow:hidden; position:relative; }.experience-frame img { display:block; height:100%; object-fit:cover; transition:transform .45s ease; width:100%; }.experience-frame:hover img { transform:scale(1.025); }.experience-frame--tall { aspect-ratio:3 / 4.25; }.experience-frame--wide { aspect-ratio:3 / 3.35; margin-bottom:11%; }.experience-frame figcaption { bottom:13px; color:var(--cream); font:10px "DM Mono",monospace; left:14px; letter-spacing:.12em; position:absolute; text-transform:uppercase; z-index:1; }.experience-frame::after { background:linear-gradient(0deg,rgba(0,0,0,.4),transparent 30%); content:""; inset:0; position:absolute; }
.location-explorer {
  align-items:start; display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr));
  margin:54px auto 0; max-width:1120px; padding:42px 0;
}
.location-tile { display:contents; }
.location-trigger {
  background-color:rgba(245,240,231,.6);
  background-image:linear-gradient(rgba(56,89,72,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(56,89,72,.055) 1px,transparent 1px);
  background-size:18px 18px; border:1px solid var(--line); border-radius:2px;
  grid-row:1; min-height:166px; overflow:hidden;
  transition:border-color .2s ease;
}
.location-tile:nth-child(1) .location-trigger { grid-column:1; }
.location-tile:nth-child(2) .location-trigger { grid-column:2; }
.location-tile:nth-child(3) .location-trigger { grid-column:3; }
.location-tile:nth-child(4) .location-trigger { grid-column:4; }
.location-trigger:hover,.location-tile.is-active .location-trigger { border-color:rgba(56,89,72,.55); }
.location-trigger {
  color:var(--ink); cursor:pointer; display:flex; flex-direction:column;
  justify-content:space-between; padding:20px; position:relative; text-align:left; touch-action:manipulation; width:100%; z-index:2;
}
.location-trigger-top { align-items:flex-start; color:var(--clay); display:flex; font:500 9px "DM Mono",monospace; justify-content:space-between; letter-spacing:.11em; text-transform:uppercase; width:100%; }
.location-trigger-top svg { fill:none; height:22px; stroke:var(--forest); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; width:22px; }
.location-trigger-name { font-family:"Fraunces",Georgia,serif; font-size:27px; font-weight:500; letter-spacing:-.035em; line-height:.95; max-width:9em; }
.location-trigger-cue { border-bottom:1px solid var(--moss); color:var(--earth); font:9px "DM Mono",monospace; letter-spacing:.08em; padding-bottom:5px; text-transform:uppercase; width:max-content; }
.location-trigger:focus-visible,.location-close:focus-visible,.location-meta a:focus-visible { outline:2px solid var(--clay); outline-offset:-4px; }
.location-panel,.location-panel[hidden] { display:none; }
.location-tile.is-active .location-panel {
  background:var(--cream); border:1px solid rgba(56,89,72,.5); display:grid;
  grid-column:1 / -1; grid-row:2; grid-template-rows:minmax(0,1fr) auto; height:482px;
  min-width:0; opacity:0; overflow:hidden; transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease;
}
.location-tile.is-active .location-panel.is-visible { opacity:1; transform:translateY(0); }
.location-map-shell { background:var(--paper); min-height:0; position:relative; }
.location-map { border:0; display:block; height:100%; min-height:332px; width:100%; }
.location-close { align-items:center; background:var(--coffee); border:0; color:var(--cream); cursor:pointer; display:flex; font:22px/1 Arial,sans-serif; height:38px; justify-content:center; position:absolute; right:14px; top:14px; touch-action:manipulation; width:38px; z-index:3; }
.location-meta { align-items:end; background:var(--cream); border-top:1px solid var(--line); display:flex; gap:24px; justify-content:space-between; padding:18px 20px 20px; }
.location-meta span { color:var(--clay); font:500 9px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.location-meta h3 { font-size:30px; line-height:1; margin:6px 0 5px; }
.location-meta p { color:var(--earth); font-size:13px; line-height:1.35; margin:0; }
.location-meta a { border-bottom:1px solid var(--ink); flex:0 0 auto; font:500 9px "DM Mono",monospace; letter-spacing:.06em; padding-bottom:5px; text-transform:uppercase; }
.location-attribution { color:var(--earth); font:9px "DM Mono",monospace; letter-spacing:.06em; margin:4px auto 0; max-width:1120px; text-align:right; text-transform:uppercase; }
.location-attribution a { border-bottom:1px solid var(--line); }
@media (prefers-reduced-motion:reduce) { .location-panel { transition:none !important; } }
@media (max-width:860px) { .experience-frames { max-width:680px; }.location-explorer { max-width:680px; } }
@media (max-width:560px) {
  .experience-frames { gap:10px; }
  .location-explorer { gap:10px; grid-template-columns:minmax(0,1fr); margin-top:28px; padding:18px 0; }
  .location-tile { display:grid; grid-column:1; grid-template-columns:minmax(0,1fr); min-width:0; width:100%; }
  .location-explorer .location-tile .location-trigger { grid-column:1; grid-row:auto; min-height:142px; padding:14px; }
  .location-trigger-name { font-size:21px; overflow-wrap:anywhere; }
  .location-trigger-cue { font-size:7px; }
  .location-tile.is-active .location-panel { grid-column:1; grid-row:auto; height:470px; margin-top:10px; }
  .location-map { min-height:300px; }
  .location-close { right:10px; top:10px; }
  .location-meta { align-items:flex-start; flex-direction:column; gap:14px; padding:16px; }
  .location-meta h3 { font-size:27px; }
  .location-meta a { align-self:flex-start; }
  .location-attribution { line-height:1.5; margin-top:8px; text-align:left; }
}