/* Marina Paty · Components — Trattoria Moderna
   Sober, photographic, editorial. Less decoration. */

/* ─────────────────────────────────────
   Reset · base
   ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body{
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* Subtle paper grain — fixed, pointer-events-none, not on scrolling content */
  position: relative;
}
body::before{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--c-texto); color: var(--c-fondo); }

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--c-texto); color: var(--c-fondo);
  padding: var(--s-3) var(--s-4); border-radius: 0 0 var(--r-md) 0;
  font-size: 14px; z-index: 1000;
}
.skip-link:focus{ left: 0; }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────
   Layout
   ───────────────────────────────────── */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-narrow{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ─────────────────────────────────────
   Typography helpers
   ───────────────────────────────────── */
.eyebrow{
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-texto-3);
  margin: 0;
}
.eyebrow::before{
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow.no-rule{ display: inline; }
.eyebrow.no-rule::before{ display: none; }

.lede{
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--c-texto-2);
}

.italic-em{ font-style: italic; font-weight: 400; }

/* ─────────────────────────────────────
   Buttons · restrained
   ───────────────────────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0;
  height: auto;
  background: transparent;
  border: none;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-texto);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.btn .arrow{
  width: 28px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--t-base) var(--ease-out);
}
.btn .arrow::after{
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow{ width: 44px; }
.btn:focus-visible{ outline: 2px solid var(--c-texto); outline-offset: 6px; }

/* Solid pill variant — only for primary actions */
.btn-solid{
  background: var(--c-texto);
  color: var(--c-fondo);
  height: 56px;
  padding: 0 var(--s-8);
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 15px;
  font-weight: 500;
}
.btn-solid:hover{ background: #2a221c; }
.btn-solid .arrow{ background: var(--c-fondo); }
.btn-solid .arrow::after{ border-color: var(--c-fondo); }

.btn-cream{
  background: var(--c-fondo);
  color: var(--c-texto);
}
.btn-cream:hover{ background: var(--c-fondo-3); }

.btn-ghost-light{
  background: transparent;
  color: var(--c-fondo);
  border: 1px solid rgba(245,238,222,0.4);
  height: 56px;
  padding: 0 var(--s-8);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 15px;
  font-weight: 500;
}
.btn-ghost-light:hover{ border-color: var(--c-fondo); background: rgba(245,238,222,0.08); }

/* ─────────────────────────────────────
   Header · minimalist
   ───────────────────────────────────── */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--s-5) 0;
  transition: background var(--t-base) var(--ease-out), padding var(--t-base) var(--ease-out);
}
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--c-fondo);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  z-index: -1;
}
.site-header.scrolled{
  padding: var(--s-3) 0;
}
.site-header.scrolled::before{
  opacity: 0.94;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bd-color);
}
.site-header.is-dark{ color: var(--c-fondo); }
.site-header.is-dark.scrolled{ color: var(--c-texto); }

.site-header .bar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-8);
}

.brand{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.brand .marker{ display: none; }
.brand{ gap: 0; }
.brand-name{
  font-style: italic;
  font-weight: 400;
  position: relative;
  padding-left: 0.55em;
  margin-left: 0.35em;
}
.brand-name::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: currentColor;
  opacity: 0.45;
}

.primary-nav{
  display: flex;
  justify-content: center;
  gap: var(--s-8);
}
.primary-nav a{
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"]{ opacity: 1; }

.header-aside{
  display: flex;
  align-items: center;
  gap: var(--s-6);
  justify-self: end;
}
.lang-inline{
  display: inline-flex; gap: var(--s-3);
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lang-mobile{ display: none; }
.lang-inline a{
  color: inherit;
  opacity: 0.45;
  transition: opacity var(--t-fast);
}
.lang-inline a:hover{ opacity: 0.85; }
.lang-inline a[aria-current="true"]{ opacity: 1; }
.lang-inline .sep{ opacity: 0.3; }

/* Compact language dropdown (desktop) — JS adds .lang-switcher to the same element */
.lang-switcher{
  display: inline-block;
  position: relative;
  gap: 0;
}
.lang-trigger{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid currentColor;
  border-color: rgba(245,238,222,0.28);
  border-radius: 999px;
  color: inherit;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.lang-trigger:hover{ border-color: currentColor; }
.lang-trigger:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.site-header.scrolled .lang-trigger{ border-color: var(--bd-color-2); }
.site-header.scrolled .lang-trigger:hover{ border-color: var(--c-texto); }

.lang-globe{ width: 14px; height: 14px; opacity: 0.85; flex: none; }
.lang-current{ line-height: 1; }
.lang-chev{
  width: 9px; height: 6px;
  opacity: 0.7;
  transition: transform var(--t-base) var(--ease-out);
  flex: none;
}
.lang-trigger[aria-expanded="true"] .lang-chev{ transform: rotate(180deg); }

.lang-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--c-fondo);
  color: var(--c-texto);
  border: 1px solid var(--bd-color);
  border-radius: 10px;
  box-shadow: var(--sh-md);
  z-index: 110;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.lang-menu[hidden]{
  display: none;
}
.lang-trigger[aria-expanded="true"] + .lang-menu{
  opacity: 1;
  transform: translateY(0);
}
.lang-menu li{ margin: 0; }
.lang-menu a{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--c-texto-2);
  font-family: var(--body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-menu a:hover,
.lang-menu a:focus-visible{
  background: var(--c-fondo-3);
  color: var(--c-texto);
  outline: none;
}
.lang-menu a[aria-current="true"]{
  color: var(--c-texto);
  font-weight: 500;
}
.lang-menu .lang-code{
  width: 26px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-texto-3);
}
.lang-menu .lang-name{ flex: 1; }

.header-cta{
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  position: relative;
  padding-bottom: 2px;
}
.header-cta::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--t-base) var(--ease-out);
}
.header-cta:hover::after{ transform-origin: left; transform: scaleX(1); }

.nav-toggle{
  display: none;
  width: 36px; height: 36px;
  background: transparent; border: none;
  cursor: pointer;
  align-items: center; justify-content: center;
  color: inherit;
}
.nav-toggle svg{ width: 22px; height: 22px; }
.nav-toggle .icon-close{ display: none; }
[data-mobile-nav="open"] .nav-toggle .icon-open{ display: none; }
[data-mobile-nav="open"] .nav-toggle .icon-close{ display: block; }

/* ─────────────────────────────────────
   Section base
   ───────────────────────────────────── */
.section{
  padding: clamp(80px, 11vw, 160px) 0;
  position: relative;
}
.section.section-cream{ background: var(--c-fondo); }
.section.section-paper{ background: var(--c-paper); }
.section.section-deep{
  background: var(--c-texto);
  color: var(--c-fondo);
}
.section.section-deep .lede{ color: rgba(245,238,222,0.75); }
.section.section-deep .eyebrow{ color: rgba(245,238,222,0.6); }
.section-divider{
  height: 1px;
  background: var(--bd-color);
  border: none;
  margin: 0;
}

/* ─────────────────────────────────────
   Photo · placeholder treatment
   When real <img> loads, it covers the placeholder.
   ───────────────────────────────────── */
.photo{
  position: relative;
  overflow: hidden;
  background: var(--c-fondo-2);
  isolation: isolate;
}
.photo::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 70% 80%, rgba(200,37,43,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 30%, rgba(224,160,88,0.22) 0%, transparent 60%),
    linear-gradient(135deg, #efe6d2 0%, #e8d3a8 60%, #c8a673 100%);
}
.photo::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.45;
  mix-blend-mode: multiply;
}
.photo > img{
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-emph);
}
.photo:hover > img{ transform: scale(1.025); }

/* Variants by mood */
.photo-warm::before{
  background:
    radial-gradient(ellipse at 60% 70%, rgba(200,37,43,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 20%, rgba(224,160,88,0.30) 0%, transparent 55%),
    linear-gradient(150deg, #f0d6a5 0%, #d39d6f 55%, #8b4828 100%);
}
.photo-ember::before{
  background:
    radial-gradient(circle at 50% 60%, rgba(255,180,80,0.4) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 100%, rgba(200,37,43,0.45) 0%, transparent 60%),
    linear-gradient(180deg, #2a1812 0%, #5a2a1a 60%, #b8542a 100%);
}
.photo-ember::after{ opacity: 0.35; }
.photo-stone::before{
  background:
    radial-gradient(ellipse at 30% 30%, rgba(90,98,64,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #efe6d2 0%, #c8b393 65%, #6b5e55 100%);
}
.photo-room::before{
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255,200,120,0.4) 0%, transparent 50%),
    linear-gradient(165deg, #2a1812 0%, #6b3d28 55%, #c89060 100%);
}
.photo-room::after{ opacity: 0.35; }

/* Text placeholder hint inside empty photo (only visible if no <img> loads) */
.photo-hint{
  position: absolute; inset: 0;
  z-index: 2;
  display: grid; place-items: end start;
  padding: var(--s-5);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(245,238,222,0.65);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.photo > img:not([src=""]):not([src*="data:"]) ~ .photo-hint{ display: none; }

/* ─────────────────────────────────────
   Footer
   ───────────────────────────────────── */
.site-footer{
  background: var(--c-texto);
  color: var(--c-fondo);
  padding: var(--s-20) 0 var(--s-8);
}
.site-footer a{ color: var(--c-fondo); }
.site-footer .ft-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-12) var(--s-8);
  align-items: start;
}
.site-footer .brand{ color: var(--c-fondo); margin-bottom: var(--s-4); display: inline-flex; }
.site-footer .ft-brand p{
  color: rgba(245,238,222,0.6);
  font-size: 14px; line-height: 1.7;
  max-width: 32ch;
  margin: 0 0 var(--s-6);
}
.site-footer h5{
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,238,222,0.5);
  margin: 0 0 var(--s-5);
}
.site-footer ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.site-footer ul a{
  font-size: 14px;
  color: rgba(245,238,222,0.85);
  transition: color var(--t-fast);
}
.site-footer ul a:hover{ color: var(--c-fondo); }
.site-footer .contact-line{
  font-size: 14px;
  color: rgba(245,238,222,0.85);
  line-height: 1.7;
  margin: 0 0 var(--s-3);
}
.site-footer .contact-line strong{
  display: block;
  color: rgba(245,238,222,0.5);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}

.site-footer .ft-bottom{
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(245,238,222,0.10);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-4);
  font-size: 12px;
  color: rgba(245,238,222,0.5);
  letter-spacing: 0.04em;
}
.site-footer .ft-bottom a{ color: rgba(245,238,222,0.7); }
.site-footer .ft-bottom a:hover{ color: var(--c-fondo); }
.site-footer .legal-row{ display: flex; gap: var(--s-6); flex-wrap: wrap; }

.social-row{ display: flex; gap: var(--s-4); }
.social-row a{
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(245,238,222,0.7);
  border-bottom: 1px solid rgba(245,238,222,0.2);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.social-row a:hover{ color: var(--c-fondo); border-color: var(--c-fondo); }

/* ─────────────────────────────────────
   Reveal · single soft fade
   ───────────────────────────────────── */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-photo{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-emph);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-photo.is-visible{ clip-path: inset(0 0 0 0); }

/* ─────────────────────────────────────
   Responsive · header & footer
   ───────────────────────────────────── */
@media (max-width: 960px){
  .nav-toggle{ display: inline-flex; }
  .primary-nav{
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-fondo);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--s-12) var(--gutter);
    gap: var(--s-4);
    z-index: 99;
  }
  .site-header.is-dark .primary-nav{ color: var(--c-texto); }
  [data-mobile-nav="open"] .primary-nav{ display: flex; }
  .primary-nav a{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
  }
  .header-aside .lang-inline{ display: none; }
  [data-mobile-nav="open"] body{ overflow: hidden; }

  .primary-nav .lang-mobile{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    margin-top: var(--s-6);
    font-size: 13px;
    letter-spacing: 0.16em;
    gap: 10px;
  }
  .primary-nav .lang-mobile a{ opacity: 0.55; }
  .primary-nav .lang-mobile a[aria-current="true"]{ opacity: 1; }

  .site-footer .ft-grid{
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10) var(--s-6);
  }
  .site-footer .ft-brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .site-footer .ft-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 400px){
  .primary-nav a{ font-size: 28px; }
}

/* ────────────────────────────────────
   Lightbox · carta dish images
   ──────────────────────────────────── */
.carta-row.has-img .thumb{ cursor: zoom-in; }

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: rgba(26, 20, 16, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.is-open{
  opacity: 1;
  pointer-events: auto;
}
.lightbox-figure{
  margin: 0;
  max-width: min(92vw, 1200px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  transform: scale(.98);
  transition: transform .25s ease;
}
.lightbox.is-open .lightbox-figure{ transform: scale(1); }
.lightbox-img{
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  background: var(--c-texto-4, #1a1410);
}
.lightbox-caption{
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 15px;
  color: #f5efe6;
  text-align: center;
  letter-spacing: 0.02em;
  max-width: 60ch;
}
.lightbox-close{
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 230, .35);
  background: rgba(0, 0, 0, .35);
  color: #f5efe6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible{
  background: rgba(0, 0, 0, .6);
  border-color: rgba(245, 239, 230, .7);
  outline: none;
}
.lightbox-close svg{ width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce){
  .lightbox,
  .lightbox-figure{ transition: none; }
}