/* Lima Limón · rediseño 2026.
   Tres vistas en cada página (home, carta, reservas) superpuestas a pantalla completa; html[data-view]
   decide cuál se ve. La palabra manuscrita que se pulsa "vuela" a su sitio (app.js, técnica FLIP).
   Móvil = maquetas; escritorio (≥1024px) = columna fija a la izquierda, al estilo Smoking Goat. */
:root{
  color-scheme:light;
  --fondo:#f2f2f1; --vino:#741e1c; --tinta:#2b1a16; --tinta-2:#6e5850; --linea:rgba(116,30,28,.18);
  --texto:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --rebote:cubic-bezier(.34,1.32,.64,1);
  --suave:cubic-bezier(.4,0,.2,1);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  /* letra manuscrita: px de la imagen (todas a la misma escala) → px de pantalla */
  --u-palabra:min(calc(100vw / 2100), .3px);
  --u-titulo:min(calc(100vw / 1950), .34px);
  --u-opcion:min(calc(100vw / 1390), .5px);
  --col:0px;
  /* home móvil: logo arriba a la derecha, la cinta de fotos le pisa la base, palabras debajo */
  --top:calc(var(--st) + 22px);
  --lw:min(61vw, 34svh, 440px);
  --band:calc(var(--top) + var(--lw) * .6);
  --ph:min(101vw, 48svh);
  --pw:calc(var(--ph) * .5625);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--tinta);font:400 15px/1.6 var(--texto);-webkit-font-smoothing:antialiased;overflow:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--fondo) url("/img/papel.webp") center/cover}
a{color:inherit}
img{display:block}
h1,h2,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--vino);outline-offset:4px}
:focus:not(:focus-visible){outline:none}
html.sin-anim *,html.sin-anim *::before{transition:none!important;animation:none!important}
.palabra img,.titulo img,.opciones img{width:calc(var(--w) * var(--u));height:auto}

/* ---------- Capas ---------- */
.v{position:fixed;inset:0;visibility:hidden;transition:visibility 0s .45s}
html[data-view=home] .v-home,html[data-view=carta] .v-carta,html[data-view=reservas] .v-reservas{visibility:visible;transition:none}
.fx{opacity:0;transform:translateY(14px);transition:opacity .3s var(--suave),transform .3s var(--suave)}
html[data-view=home] .v-home .fx,html[data-view=carta] .v-carta .fx,html[data-view=reservas] .v-reservas .fx{opacity:1;transform:none;transition:opacity .5s .2s var(--suave),transform .8s .2s var(--rebote)}
.ido{opacity:0!important;transition:none!important}
.vuela{opacity:1!important;transform:none!important;transition:none!important}
.palabra,.titulo img{transform-origin:0 0}

/* ---------- Controles (burger / volver) ---------- */
.ctrl{position:fixed;z-index:30;top:var(--top);left:calc(var(--sl) + 5.5vw)}
.burger{width:24px;height:21px;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;transition:opacity .3s,visibility 0s}
.burger::after{content:"";position:absolute;inset:-12px}
.burger span{height:4px;background:var(--vino);border-radius:1px;transition:transform .55s var(--rebote),opacity .2s}
html.menu .burger span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
html.menu .burger span:nth-child(2){opacity:0}
html.menu .burger span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
html:not([data-view=home]) .burger{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.volver{top:calc(var(--top) + 6px);opacity:0;visibility:hidden;transform:translateX(10px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.volver img{width:28px;height:auto;transition:transform .4s var(--rebote)}
.volver:hover img{transform:translateX(-4px)}
.volver::after{content:"";position:absolute;inset:-14px}
html:not([data-view=home]) .volver{opacity:1;visibility:visible;transform:none;transition:opacity .4s .3s,transform .7s .3s var(--rebote)}

/* ---------- Información (burger en móvil, columna fija en escritorio) ---------- */
.info{position:fixed;inset:0;z-index:20;overflow-y:auto;background:rgba(242,242,241,.9);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  padding:calc(var(--st) + 84px) 24px calc(var(--sb) + 40px) calc(var(--sl) + 5.5vw);
  visibility:hidden;opacity:0;transition:opacity .35s var(--suave),visibility 0s .35s}
html.menu .info{visibility:visible;opacity:1;transition:opacity .35s var(--suave)}
.info-in{display:flex;flex-direction:column;align-items:flex-start;gap:24px;font:600 11.5px/1.7 var(--texto);letter-spacing:.13em;text-transform:uppercase;color:var(--vino)}
.info-in>*{opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
html.menu .info-in>*{opacity:1;transform:none;transition:opacity .4s,transform .7s var(--rebote);transition-delay:calc(var(--i) * 50ms + 90ms)}
.info a{text-decoration:none}
.info a:hover{text-decoration:underline;text-underline-offset:3px}
.info .ig img{width:26px;height:auto;transition:transform .4s var(--rebote)}
.info .ig a:hover img{transform:scale(1.1) rotate(-4deg)}
.horas h2{font:inherit;margin-bottom:4px}
.horas dl{display:grid;grid-template-columns:auto auto;gap:4px 22px;margin:0 0 4px}
.horas dt{color:var(--tinta-2)}
.horas dd{margin:0}
.horas p{color:var(--tinta-2)}
.idioma{display:flex;gap:18px}
.idioma a,.idioma-v a{opacity:.4}
.idioma a[aria-current=true],.idioma-v a[aria-current=true]{opacity:1}
.legal{color:var(--tinta-2)}

/* ---------- Home ---------- */
.v-home{pointer-events:none}
.v-home a{pointer-events:auto}
.logo{position:absolute;z-index:1;top:var(--top);right:calc(var(--sr) + 6vw);width:var(--lw)}
.logo img{width:100%;height:auto}
.cinta{position:absolute;z-index:2;left:var(--col);right:0;top:var(--band);height:var(--ph);overflow:hidden}
.foto{position:absolute;top:0;left:0;width:var(--pw);height:100%;margin:0;will-change:transform}
.foto img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.foto img.ok{opacity:1}
.palabras{--u:var(--u-palabra);position:absolute;left:calc(var(--sl) + 9.5vw);top:calc(var(--band) + var(--ph) + clamp(18px, 5svh, 64px));display:flex;flex-direction:column;align-items:flex-start;gap:clamp(2px, 1.4svh, 14px)}
.palabra{display:block;transition-property:opacity,transform}
.palabra img{transition:transform .5s var(--rebote)}
.palabra:hover img{transform:rotate(-2deg) scale(1.04)}
html[data-view=home] .v-home .palabras .fx:nth-child(2){transition-delay:.28s}

/* ---------- Carta / Reservas ---------- */
.v-carta,.v-reservas{left:var(--col);display:flex;flex-direction:column;align-items:center;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--top) - 8px) 16px calc(var(--sb) + 40px)}
.titulo{--u:var(--u-titulo);display:flex;justify-content:center;flex:none}
.titulo:focus{outline:none}   /* recibe el foco al cambiar de vista solo para lectores de pantalla */
.idioma-v{display:flex;gap:clamp(56px,14vw,96px);margin-top:clamp(18px,3svh,32px);font:400 16px/1 var(--texto);letter-spacing:.06em}
.idioma-v a{text-decoration:none;color:var(--tinta)}
.opciones{--u:var(--u-opcion);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2svh,22px);padding-bottom:10svh}
.opciones a{display:block}
.opciones img{transition:transform .5s var(--rebote)}
.opciones a:hover img{transform:rotate(-2deg) scale(1.04)}
.rv{width:min(100%,560px);display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(20px,3svh,32px)}
.rv-marco{width:100%;border:1px solid #cfcfcf;background:#fff}
.rv-marco iframe{display:block;width:100%;height:760px;border:0}
.rv-nota{margin-top:14px;font-size:13px;color:var(--tinta-2)}
.rv-dir{margin-top:28px;font-size:15px;letter-spacing:.02em}
.rv-dir a{text-decoration:none}
.rv-priv{margin-top:8px;font-size:12.5px;color:var(--tinta-2)}
.rv-nota a,.rv-priv a{color:var(--vino)}

/* ---------- Aviso de cookies ---------- */
.aviso-ck{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 22px;
  padding:12px calc(var(--sr) + 16px) calc(var(--sb) + 12px) calc(var(--sl) + 16px);background:rgba(242,242,241,.96);border-top:1px solid var(--linea)}
.aviso-ck p{font-size:13px;color:var(--tinta);max-width:60ch}
.aviso-ck a{color:var(--vino)}
.aviso-ck button{font:600 11.5px/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:#f4ebdd;background:var(--vino);border:0;padding:11px 18px;cursor:pointer}

/* ---------- Escritorio ---------- */
@media (min-width:1024px){
  :root{
    --col:300px; --top:40px;
    --u-palabra:.3px; --u-titulo:.36px; --u-opcion:.52px;
    --lw:clamp(280px, 27vw, 480px);
    --ph:max(300px, calc(100svh - var(--band) - 56px));
  }
  .burger{display:none}
  .info{inset:0 auto 0 0;width:var(--col);overflow:visible;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:var(--top) 24px 40px 44px;visibility:visible;opacity:1;pointer-events:none}
  .info a{pointer-events:auto}
  .info-in>*{opacity:1;transform:none}
  .info .horas{position:fixed;top:var(--top);left:calc(var(--col) + 12px);transition:opacity .3s,visibility 0s}
  html:not([data-view=home]) .info .horas{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
  .info .legal{position:fixed;left:44px;bottom:40px}
  .logo{right:48px}
  /* las fotos nacen en el borde de la columna: que aparezcan con un fundido en vez de cortadas en seco */
  .cinta{-webkit-mask-image:linear-gradient(to right,transparent,#000 80px);mask-image:linear-gradient(to right,transparent,#000 80px)}
  .palabras{left:44px;top:auto;bottom:150px}
  .volver{left:calc(var(--col) + 12px);top:calc(var(--top) + 10px)}
  .v-carta,.v-reservas{padding-top:var(--top)}
  .opciones{padding-bottom:12svh}
}

/* ---------- Página legal ---------- */
body.pag-legal{overflow:auto}
.lg-top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--st) + 22px) calc(var(--sr) + 5.5vw) 0 calc(var(--sl) + 5.5vw)}
.lg-top .volver-legal img{width:28px;height:auto}
.lg-top .logo-legal img{width:120px;height:auto}
.lg{max-width:1100px;margin:0 auto;padding:clamp(32px,6vw,72px) calc(var(--sr) + 16px) 96px calc(var(--sl) + 16px);display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.lg-indice{position:sticky;top:32px;display:flex;flex-direction:column;gap:10px;font:600 11.5px/1.6 var(--texto);letter-spacing:.13em;text-transform:uppercase;color:var(--vino)}
.lg-indice a{text-decoration:none}
.lg-indice a:hover{text-decoration:underline;text-underline-offset:3px}
.lg-doc{min-width:0;max-width:68ch;scroll-margin-top:24px}
.lg-doc+.lg-doc{margin-top:64px;padding-top:48px;border-top:1px solid var(--linea)}
.lg-doc h1{font:600 14px/1.4 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--vino);margin-bottom:6px}
.lg-fecha{font-size:13px;color:var(--tinta-2);margin-bottom:24px}
.lg-doc h2{font:600 12px/1.4 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);margin:28px 0 8px}
.lg-doc p,.lg-doc li{font-size:15px}
.lg-doc p+p{margin-top:10px}
.lg-doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.lg-doc ul+p{margin-top:12px}
.lg-doc a{color:var(--vino)}
.lg-datos{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;margin:14px 0 0;font-size:15px}
.lg-datos dt{color:var(--tinta-2)}
.lg-datos dd{margin:0}
.lg-tabla{overflow-x:auto;margin:12px 0}
.lg-tabla table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.lg-tabla th,.lg-tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.lg-tabla th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);font-weight:600}
@media (max-width:860px){.lg{grid-template-columns:1fr}.lg-indice{position:static;flex-direction:row;flex-wrap:wrap;gap:18px}}
@media (max-width:520px){.lg-datos{grid-template-columns:1fr;gap:2px}.lg-datos dd{margin-bottom:8px}}

@media (prefers-reduced-motion:reduce){
  *,*::before{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}