/* =========================================================
   Casa Mariposa · v2
   Paleta del logotipo: terracota, tinta café, camel/kraft.
   Tipografía: Fraunces (titulares) + Manrope (texto).
   ========================================================= */

:root {
  --paper: #F2F0ED;
  --paper-2: #E8E2DA;
  --ink: #22150E;
  --ink-soft: #4A382C;
  --terra: #A84818;
  --terra-deep: #8C3A11;
  --terra-soft: #FFE6D8;
  --kraft: #C4A47F;
  --kraft-light: #E2CFB6;
  --night: #22150E;
  --night-soft: #E3D6C9;
  --ok: #2F6B2C;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-h1: clamp(2.5rem, 1.25rem + 4.2vw, 5.25rem);
  --t-h2: clamp(1.85rem, 1.15rem + 2.3vw, 3.25rem);
  --t-h3: clamp(1.25rem, 1.05rem + 0.55vw, 1.55rem);
  --t-lead: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  --t-body: clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --t-small: 0.9rem;
  --t-label: 0.8125rem;

  --m: clamp(20px, 4vw, 48px);
  --gap: clamp(14px, 1.8vw, 24px);
  --section: clamp(44px, 5.6vw, 80px);
  --header-h: 76px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 68px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); font-weight: 450; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--terra); color: var(--paper); }
:focus-visible { outline: 2.5px solid var(--terra); outline-offset: 3px; border-radius: 3px; }
.platillos :focus-visible, .visita :focus-visible, .footer :focus-visible, .lightbox :focus-visible, .strip :focus-visible { outline-color: var(--kraft-light); }

.skip {
  position: absolute; left: var(--m); top: 8px; z-index: 100; padding: 10px 16px;
  background: var(--ink); color: var(--paper); border-radius: 999px; font-weight: 600;
  transform: translateY(-150%); transition: transform 200ms var(--ease-out);
}
.skip:focus { transform: none; }

.container { width: 100%; max-width: calc(1320px + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m); }
.section { padding-block: var(--section); }

/* ---------- Tipos ---------- */
.h1, .h2, .h3 { font-family: var(--serif); font-optical-sizing: auto; color: inherit; text-wrap: balance; }
.h1 { font-size: var(--t-h1); font-weight: 650; line-height: 1.0; letter-spacing: -0.025em; font-variation-settings: "SOFT" 30; }
.h2 { font-size: var(--t-h2); font-weight: 620; line-height: 1.06; letter-spacing: -0.02em; font-variation-settings: "SOFT" 30; }
.h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.h1 em, .h2 em { font-style: italic; font-weight: 560; color: var(--terra); }
.espacio .h2 em { color: #6B2A0B; }
.platillos .h2 em, .visita .h2 em, .espacio .ceramica .h2 em { color: var(--terra-soft); }
.label {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 700; line-height: 1.3;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 14px;
}
.label--light { color: var(--kraft-light); }
.espacio .label { color: var(--ink); }
.body-l { font-size: var(--t-body); line-height: 1.62; max-width: 52ch; text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.5; }

/* Enlaces con subrayado animado */
.link { position: relative; display: inline-block; font-weight: 600; }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover::after { transform: scaleX(1); transform-origin: left center; } }
.link:focus-visible::after { transform: scaleX(1); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--sans); font-size: 1rem; font-weight: 650; letter-spacing: 0.005em; white-space: nowrap;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 160ms var(--ease-out);
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn__arrow { display: inline-block; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__arrow { transform: translateX(4px); }
  .btn:hover .btn__arrow--down { transform: translateY(3px); }
  .btn:hover .btn__arrow--up { transform: translate(3px, -3px); }
}
.btn--accent { background: var(--terra); color: #FFF8F2; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line-light { border-color: var(--paper); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: var(--terra-deep); }
  .btn--ink:hover { background: var(--terra); }
  .btn--paper:hover { background: var(--kraft-light); }
  .btn--line:hover { background: var(--ink); color: var(--paper); }
  .btn--line-light:hover { background: var(--paper); color: var(--terra-deep); }
}
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.04rem; }

.round-btn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); color: var(--ink); font-size: 1.15rem; font-weight: 700;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.round-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .round-btn:hover { background: var(--kraft-light); } }

/* Instagram */
.ig-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.ig-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.ig-icon .ig-dot { fill: currentColor; stroke: none; }
.ig-link span { position: relative; }
.ig-link span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ig-link:hover span::after { transform: scaleX(1); transform-origin: left; } }

/* ---------- Fotografías ---------- */
.ph { position: relative; overflow: hidden; display: block; background: var(--paper-2); }
.ph__in { display: block; width: 100%; height: 100%; }
.ph picture, .ph img { width: 100%; height: 100%; }
.ph img { object-fit: cover; }
.zoom img { transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .zoom:hover img, .mosaic__btn:hover img, .guide__card:hover .guide__thumb { transform: scale(1.05); }
}

/* Mariposa */
.butterfly { width: 56px; height: auto; overflow: visible; }
.butterfly path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.butterfly__wing { transform-box: fill-box; }
.butterfly__wing--l { transform-origin: 100% 60%; }
.butterfly__wing--r { transform-origin: 0% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .butterfly__wing--l, .butterfly__wing--r { animation: flap 6s var(--ease-in-out) 2s infinite; }
}
@keyframes flap { 0%, 14%, 100% { transform: scaleX(1); } 4% { transform: scaleX(0.5); } 9% { transform: scaleX(0.85); } }

/* Estado en vivo */
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.status__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.5; flex: none; }
.status.is-open .status__dot { background: var(--ok); opacity: 1; }
.visita .status.is-open .status__dot { background: #CFE7B9; }
@media (prefers-reduced-motion: no-preference) { .status.is-open .status__dot { animation: breathe 2.6s ease-in-out infinite; } }
@keyframes breathe { 50% { opacity: 0.45; } }

/* =========================================================
   HEADER
   ========================================================= */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.site-header::before {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  opacity: 0; transition: opacity 240ms ease;
  box-shadow: 0 1px 0 rgba(34, 21, 14, 0.08);
}
.site-header.is-scrolled::before, .site-header.is-open::before { opacity: 1; }
.site-header__bar { position: relative; display: flex; align-items: center; gap: 28px; height: var(--header-h); transition: height 260ms var(--ease-out); }
.site-header.is-scrolled .site-header__bar { height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand__logo { width: 50px; height: 50px; border-radius: 50%; transition: transform 260ms var(--ease-out); transform-origin: left center; }
.site-header.is-scrolled .brand__logo { transform: scale(0.82); }
.brand__name { font-family: var(--serif); font-size: 1.3rem; font-weight: 620; letter-spacing: -0.01em; transition: transform 260ms var(--ease-out); }
.site-header.is-scrolled .brand__name { transform: translateX(-8px); }
.nav__list { display: flex; gap: 24px; }
.nav__link { position: relative; display: inline-block; padding: 6px 0; font-size: 0.95rem; font-weight: 650; color: var(--ink); transition: color 200ms ease; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--terra); transform: scaleX(0); transform-origin: right center; transition: transform 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); transform-origin: left center; } }
.nav__link.is-active { color: var(--terra); }
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left center; }
.menu-toggle, .mobile-menu { display: none; }

@media (max-width: 1080px) { .nav__list { gap: 16px; } .nav__link { font-size: 0.9rem; } }

@media (max-width: 959px) {
  :root { --header-h: 64px; }
  .nav, .header-cta { display: none; }
  .brand__logo { width: 42px; height: 42px; }
  .brand__name { font-size: 1.15rem; }
  .site-header.is-scrolled .site-header__bar { height: 58px; }
  .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
    border: 2px solid var(--ink); font-weight: 650;
    transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
  }
  .menu-toggle:active { transform: scale(0.96); }
  .menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
  .mobile-menu {
    display: block; position: relative; background: var(--paper);
    padding: 8px var(--m) 28px; height: calc(100svh - 58px); overflow-y: auto;
    clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ease-out), opacity 220ms ease;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.is-closing, .mobile-menu.is-entering { clip-path: inset(0 0 100% 0); opacity: 0; }
  .mobile-menu__list a { display: block; padding: 8px 0; font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
  .mobile-menu__foot { display: grid; gap: 16px; margin-top: 24px; justify-items: start; color: var(--ink-soft); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: calc(var(--header-h) + clamp(16px, 3vw, 40px)); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-bottom: clamp(36px, 4.5vw, 64px); }
.hero__text { grid-column: 1 / span 6; position: relative; z-index: 2; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__title .line__in { display: block; }
.hero__lead { margin-top: 24px; font-size: var(--t-lead); line-height: 1.55; font-weight: 500; max-width: 40ch; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; font-size: var(--t-small); }

.hero__collage { grid-column: 7 / -1; position: relative; aspect-ratio: 1 / 0.98; }
.hero__main { position: absolute; right: 0; top: 0; width: 66%; aspect-ratio: 4 / 5; }
.hero__space { position: absolute; left: 0; top: 4%; width: 35%; aspect-ratio: 6 / 5; z-index: 1; }
.hero__drink { position: absolute; left: 10%; bottom: 0; width: 34%; aspect-ratio: 4 / 5; z-index: 2; outline: 8px solid var(--paper); }
.hero__butterfly { position: absolute; left: 22%; top: 40%; width: 54px; z-index: 3; }

/* Franja de datos */
.strip { background: var(--terra); color: #FFF8F2; }
.strip__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-block: 22px; }
.strip__item { display: grid; gap: 2px; }
.strip__k { font-family: var(--serif); font-size: 1.2rem; font-weight: 620; line-height: 1.25; }
.strip__v { font-size: var(--t-small); font-weight: 600; color: #FFF1E8; }

/* =========================================================
   A. LA CASA
   ========================================================= */
.casa__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.casa__text { grid-column: 1 / span 5; display: grid; gap: 20px; }

.casa__quote { font-family: var(--serif); font-size: var(--t-h3); font-weight: 500; font-style: italic; line-height: 1.35; color: var(--terra-deep); max-width: 32ch; }
.casa__photos { grid-column: 7 / -1; position: relative; display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: end; }
.casa__main { aspect-ratio: 640 / 756; }
.casa__second { aspect-ratio: 3 / 4; margin-bottom: 12%; }

.guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(32px, 4vw, 48px); }
.guide__card {
  display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 16px;
  padding: 14px 20px 14px 14px; height: 100%; overflow: hidden;
  transition: background-color 220ms ease, transform 160ms var(--ease-out);
}
.guide__card:active { transform: scale(0.985); }
.guide__card--terra { background: var(--terra); color: #FFF8F2; }
.guide__card--kraft { background: var(--kraft); color: var(--ink); }
.guide__card--ink { background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .guide__card--terra:hover { background: var(--terra-deep); }
  .guide__card--kraft:hover { background: #B8956C; }
  .guide__card--ink:hover { background: #3A271C; }
  .guide__card:hover .guide__arrow { transform: translateX(4px); }
}
.guide__thumb { width: 84px; height: 84px; object-fit: cover; transition: transform 600ms var(--ease-out); }
.guide__body { display: grid; gap: 4px; }
.guide__title { font-family: var(--serif); font-size: 1.25rem; font-weight: 620; line-height: 1.2; }
.guide__text { font-size: var(--t-small); line-height: 1.45; font-weight: 500; }
.guide__arrow { font-size: 1.25rem; font-weight: 700; transition: transform 240ms var(--ease-out); }

/* =========================================================
   Cabecera de sección compartida
   ========================================================= */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 48px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.section-head > div:first-child { max-width: 760px; }
.section-head__text { max-width: 44ch; }

/* =========================================================
   B. PLATILLOS (campo oscuro)
   ========================================================= */
.platillos { background: var(--night); color: var(--paper); }
.platillos .body-l { color: var(--night-soft); }
.dishes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--gap); }
.dish { display: grid; grid-template-rows: 1fr auto; gap: 12px; min-width: 0; }
.dish .ph { height: 100%; min-height: 0; }
.dish--hero { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.dish--tall:nth-of-type(2) { grid-column: 7 / span 3; }
.dish--tall:nth-of-type(3) { grid-column: 10 / span 3; }
.dish--tall .ph { aspect-ratio: 3 / 4; height: auto; }
.dish--wide { grid-column: 7 / -1; }
.dish--wide .ph { aspect-ratio: 16 / 9; height: auto; }
.dish__cap { display: grid; gap: 2px; }
.dish__name { font-family: var(--serif); font-size: 1.35rem; font-weight: 620; line-height: 1.2; color: var(--paper); }
.dish__note { font-size: var(--t-small); line-height: 1.45; color: var(--night-soft); font-weight: 500; }

/* =========================================================
   C. EL ESPACIO (campo kraft)
   ========================================================= */
.espacio { background: var(--kraft); color: var(--ink); }
.espacio__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.espacio__arco { grid-column: 1 / span 6; aspect-ratio: 640 / 700; }
.espacio__arco img { object-position: 50% 0%; }
.mosaic__item--g img { object-position: 50% 30%; }
.mosaic__item--d img { object-position: 50% 0%; }
.espacio__notes { grid-column: 7 / -1; display: grid; gap: var(--gap); align-content: stretch; }
.note { background: var(--kraft-light); padding: 22px 24px; display: grid; gap: 8px; align-content: center; }
.note p { line-height: 1.55; font-weight: 500; }
.note--photo { grid-template-columns: 140px 1fr; gap: 20px; align-items: center; background: var(--paper); }
.note__photo { aspect-ratio: 3 / 4; }
.note--photo > div { display: grid; gap: 8px; }

.ceramica {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center;
  margin-top: var(--gap); background: var(--terra); color: #FFF8F2;
}
.ceramica__photo { grid-column: 1 / span 6; aspect-ratio: 4 / 3; height: 100%; }
.ceramica__text { grid-column: 7 / -1; padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0; display: grid; gap: 16px; justify-items: start; }
.ceramica__tag { font-weight: 700; color: #FFF1E8; font-size: var(--t-small); }
.ceramica__text .body-l { color: #FFEDE2; }

/* =========================================================
   D. GALERÍA (mosaico)
   ========================================================= */
.mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 14vw, 200px); gap: 12px;
  grid-template-areas: "a a b c" "a a b c" "d e e f" "d g g f";
}
.mosaic__item--a { grid-area: a; } .mosaic__item--b { grid-area: b; } .mosaic__item--c { grid-area: c; }
.mosaic__item--d { grid-area: d; } .mosaic__item--e { grid-area: e; } .mosaic__item--f { grid-area: f; } .mosaic__item--g { grid-area: g; }
.mosaic__item { min-width: 0; min-height: 0; }
.mosaic__btn { display: block; width: 100%; height: 100%; cursor: zoom-in; position: relative; }
.mosaic__btn .ph { width: 100%; height: 100%; }
.mosaic__btn::after {
  content: "Ampliar"; position: absolute; right: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px;
  background: rgba(242, 240, 237, 0.94); color: var(--ink); font-size: 0.8rem; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .mosaic__btn:hover::after { opacity: 1; transform: none; } }
.mosaic__btn:focus-visible::after { opacity: 1; transform: none; }

/* =========================================================
   E. PLANEA TU VISITA (campo terracota)
   ========================================================= */
.visita { background: var(--terra); color: #FFF8F2; }
.visita__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.visita__info { grid-column: 1 / span 6; display: grid; gap: 22px; align-content: center; }

.visit-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.visit-block { background: var(--terra-deep); padding: 18px 20px; display: grid; gap: 4px; align-content: start; }
.visit-block dt { font-size: var(--t-small); font-weight: 700; color: #FFF1E8; margin-bottom: 2px; }
.visit-block dd { font-family: var(--serif); font-size: 1.25rem; font-weight: 580; line-height: 1.32; }
.visit-block dd .link { font-weight: inherit; }
.visit-block dd.visit-block__note { font-family: var(--sans); font-size: var(--t-small); font-weight: 600; margin-top: 6px; color: #FFEDE2; }
.visita__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.visita__media { grid-column: 7 / -1; position: relative; min-height: 420px; background: var(--terra-deep); }
.visita__photo { position: absolute; inset: 0; }
.visita__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--night); color: var(--night-soft); padding-top: clamp(40px, 5vw, 64px); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px var(--gap); }
.footer__brand { display: flex; gap: 16px; align-items: center; }
.footer__logo { width: 76px; height: 76px; border-radius: 50%; flex: none; }
.footer__name { font-family: var(--serif); font-size: 1.6rem; font-weight: 620; color: var(--paper); line-height: 1.2; }
.footer__tag { font-size: var(--t-small); margin-top: 4px; }
.footer__k { font-family: var(--serif); font-size: 1.15rem; font-weight: 620; color: var(--paper); margin-bottom: 8px; }
.footer__col p:last-child { line-height: 1.8; }
.footer__col .link { color: var(--paper); }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 36px; padding-block: 20px calc(20px + env(safe-area-inset-bottom)); font-size: var(--t-small); }


/* =========================================================
   VISOR
   ========================================================= */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(20, 12, 8, 0.95); color: var(--paper);
  opacity: 0; transition: opacity 240ms var(--ease-out);
}
.lightbox::backdrop { background: transparent; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 72px clamp(16px, 8vw, 128px) 32px; }
.lightbox__figure { display: grid; justify-items: center; gap: 14px; max-height: 100%; transform: scale(0.96) translateY(8px); transition: transform 320ms var(--ease-out); }
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__img { max-width: min(100%, 1400px); max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; }
.lightbox__cap { color: var(--night-soft); text-align: center; font-weight: 600; }
.lightbox__count { margin-left: 10px; font-variant-numeric: tabular-nums; color: var(--kraft); }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox__prev { left: clamp(12px, 2.4vw, 40px); }
.lightbox__next { right: clamp(12px, 2.4vw, 40px); }
.lightbox__close { position: absolute; top: 16px; right: clamp(12px, 2.4vw, 40px); }

/* =========================================================
   MÓVIL Y TABLETA VERTICAL
   ========================================================= */
@media (max-width: 959px) {
  .hero__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .hero__text, .hero__collage { grid-column: 1; }
  .hero__lead { margin-top: 18px; }
  .hero__actions { margin-top: 24px; }
  .hero__meta { margin-top: 22px; }
  .hero__collage { aspect-ratio: auto; padding-bottom: 22%; }
  .hero__main { position: relative; width: 82%; margin-left: auto; }
  .hero__space { display: none; }
  .hero__drink { width: 42%; left: 0; bottom: 0; outline-width: 6px; }
  .hero__butterfly { left: 4%; top: 8%; width: 44px; }

  .strip__inner { grid-template-columns: 1fr 1fr; row-gap: 16px; padding-block: 20px; }

  .casa__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .casa__text, .casa__photos { grid-column: 1; }
  .guide { grid-template-columns: 1fr; gap: 10px; }

  .dishes { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 20px 12px; }
  .dish--hero, .dish--wide { grid-column: 1 / -1; grid-row: auto; }
  .dish--tall:nth-of-type(2), .dish--tall:nth-of-type(3) { grid-column: auto; }
  .dish--hero .ph { aspect-ratio: 4 / 5; height: auto; }
  .dish--wide .ph { aspect-ratio: 4 / 3; }

  .espacio__grid { grid-template-columns: 1fr; }
  .espacio__arco, .espacio__notes { grid-column: 1; }
  .espacio__arco { aspect-ratio: 4 / 5; }
  .ceramica { grid-template-columns: 1fr; gap: 0; }
  .ceramica__photo, .ceramica__text { grid-column: 1; }
  .ceramica__text { padding: 24px 22px 28px; }

  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; gap: 10px; grid-template-areas: "a a" "b c" "d f" "e g"; }

  .visita__grid { grid-template-columns: 1fr; }
  .visita__info, .visita__media { grid-column: 1; }
  .visita__media { min-height: 0; aspect-ratio: 1080 / 930; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

}

@media (max-width: 599px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .visit-blocks { grid-template-columns: 1fr; }
  .visita__actions .btn { flex: 1 1 100%; }
  .note--photo { grid-template-columns: 110px 1fr; gap: 16px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; translate: none; }
  .lightbox__stage { padding-bottom: 92px; }
}

/* =========================================================
   Estados iniciales de la entrada (solo con JS y movimiento)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-hero-line] { transform: translateY(105%); }
  .js [data-hero-item] { opacity: 0; }
  .js [data-hero-photo] { clip-path: inset(100% 0 0 0); }
}