/* ============================================================
   LUCERO PLAYA — Restaurante frente al Mediterráneo
   Paleta: blanco + azul mediterráneo + plata. Tema día/noche.
   ============================================================ */

/* ---------- TOKENS: TEMA DÍA (por defecto) ---------- */
:root{
  --espuma:#f6fafc;      /* fondo general, blanco roto */
  --blanco:#ffffff;
  --nube:#e9f2f7;        /* bandas suaves */
  --nube-2:#dceaf2;
  --plata:#c2d6e1;
  --plata-cl:#e6f0f5;
  --plata-os:#8ea9b9;
  --mar:#1b6f9c;         /* azul del local */
  --mar-cl:#3aa4d3;
  --mar-xcl:#7fd0e8;
  --mar-os:#0b3d5c;
  --mar-xos:#062634;
  --turquesa:#43c2d9;
  --arena:#e9dcc6;
  --sol:#e79a55;
  --tinta:#0e2733;
  --tinta-2:#24485a;
  --tinta-sec:#526f7f;
  --tinta-ter:#7d95a2;
  --linea:rgba(14,39,51,.12);
  --linea-2:rgba(14,39,51,.07);
  --card:#ffffff;
  --card-2:#f1f7fa;
  --sombra:0 30px 70px -34px rgba(11,61,92,.45);
  --sombra-s:0 14px 34px -18px rgba(11,61,92,.35);
  --sombra-xs:0 6px 18px -10px rgba(11,61,92,.3);
  --glow:0 0 0 1px rgba(58,164,211,.25), 0 10px 40px -12px rgba(58,164,211,.45);
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(14,39,51,.1);
  --grad-mar:linear-gradient(135deg,var(--mar-cl),var(--mar) 55%,var(--mar-os));
  --grad-plata:linear-gradient(120deg,#ffffff,#dceaf2 40%,#9fc2d6 70%,#ffffff);
  --hero-veil:linear-gradient(180deg,rgba(4,26,38,.44),rgba(4,26,38,.2) 38%,rgba(4,26,38,.55) 68%,rgba(4,26,38,.86));
  --serif:'Fraunces','Georgia',serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1200px;
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --ease:cubic-bezier(.22,.85,.28,1);
}

/* ---------- TOKENS: TEMA NOCHE ---------- */
:root[data-tema="noche"]{
  --espuma:#061c28;
  --blanco:#0b2634;
  --nube:#0c2735;
  --nube-2:#103243;
  --plata:#3d6377;
  --plata-cl:#1a3d51;
  --plata-os:#a8c8d9;
  --mar:#3aa4d3;
  --mar-cl:#66c9ea;
  --mar-xcl:#a9e5f7;
  --mar-os:#0a3a54;
  --tinta:#e9f4f9;
  --tinta-2:#c5dceb;
  --tinta-sec:#9bbccf;
  --tinta-ter:#7194a8;
  --linea:rgba(168,200,217,.18);
  --linea-2:rgba(168,200,217,.1);
  --card:#0d2b3a;
  --card-2:#11364a;
  --sombra:0 30px 70px -30px rgba(0,0,0,.75);
  --sombra-s:0 14px 34px -16px rgba(0,0,0,.6);
  --sombra-xs:0 6px 18px -8px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(102,201,234,.3), 0 12px 46px -12px rgba(102,201,234,.4);
  --glass:rgba(9,32,45,.72);
  --glass-line:rgba(168,200,217,.16);
  --grad-plata:linear-gradient(120deg,#ffffff,#bfe0ef 40%,#6ea9c4 70%,#ffffff);
  --hero-veil:linear-gradient(180deg,rgba(2,14,21,.5),rgba(2,14,21,.28) 38%,rgba(2,14,21,.62) 68%,rgba(2,14,21,.92));
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px}
body{font-family:var(--sans);background:var(--espuma);color:var(--tinta);line-height:1.62;overflow-x:clip;-webkit-font-smoothing:antialiased;transition:background .5s var(--ease),color .5s var(--ease)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--mar-cl);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--nube)}
::-webkit-scrollbar-thumb{background:var(--plata-os);border-radius:10px;border:2px solid var(--nube)}
::-webkit-scrollbar-thumb:hover{background:var(--mar)}
:focus-visible{outline:2.5px solid var(--mar-cl);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.wrap-w{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
section{position:relative}
.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}

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.012em;font-variation-settings:"SOFT" 30,"WONK" 1;font-optical-sizing:auto}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mar);margin-bottom:16px}
.eyebrow::before{content:'';width:26px;height:1.5px;background:linear-gradient(90deg,transparent,var(--mar-cl));border-radius:2px}
.eyebrow.c::after{content:'';width:26px;height:1.5px;background:linear-gradient(270deg,transparent,var(--mar-cl));border-radius:2px}
.h-sec{font-size:clamp(2rem,4.6vw,3.35rem);margin-bottom:16px}
.h-sec em{font-style:italic;color:var(--mar)}
.lead{font-size:clamp(1rem,1.6vw,1.1rem);color:var(--tinta-sec);max-width:62ch}
.sec{padding:clamp(64px,8vw,110px) 0}
.sec-head{margin-bottom:clamp(34px,5vw,56px)}
.sec-head.c{text-align:center}
.sec-head.sec-apretada{margin-bottom:clamp(20px,2.6vw,30px)}
.sec-apretada .eyebrow{margin-bottom:10px}
.sec-apretada .h-sec{font-size:clamp(1.7rem,3.3vw,2.5rem);margin-bottom:8px}
.sec-apretada .lead{font-size:clamp(.88rem,1.25vw,.98rem)}
.sec-head.c .lead{margin-inline:auto}

/* texto con degradado plateado */
.plata-txt{background:var(--grad-plata);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:brillo 7s linear infinite}
@keyframes brillo{to{background-position:200% 0}}

/* ---------- BOTONES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:.94rem;padding:14px 26px;border-radius:100px;cursor:pointer;border:0;transition:.35s var(--ease);letter-spacing:.01em;white-space:nowrap;background-clip:padding-box;-webkit-appearance:none;text-decoration:none;line-height:1.2}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-mar{background:var(--grad-mar);color:#fff;box-shadow:0 14px 30px -12px rgba(27,111,156,.7)}
.btn-mar:hover{transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(27,111,156,.85)}
.btn-wa{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;box-shadow:0 14px 30px -12px rgba(18,140,126,.65)}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(18,140,126,.8)}
.btn-linea{background:transparent;color:var(--tinta);border:1.6px solid var(--linea);padding:12.4px 24.4px}
.btn-linea:hover{background:var(--tinta);color:var(--espuma);border-color:var(--tinta)}
.btn-vidrio{background:rgba(255,255,255,.12);color:#fff;border:1.6px solid rgba(255,255,255,.32);padding:12.4px 24.4px;backdrop-filter:blur(10px)}
.btn-vidrio:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.85);transform:translateY(-3px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-s{padding:10px 19px;font-size:.85rem}

/* ---------- REVEAL ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rev.on{opacity:1;transform:none}
.rev-l{opacity:0;transform:translateX(-34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev-r{opacity:0;transform:translateX(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev-l.on,.rev-r.on{opacity:1;transform:none}
.rev-sc{opacity:0;transform:scale(.94);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev-sc.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev,.rev-l,.rev-r,.rev-sc{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============ NAVEGACIÓN ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:.4s var(--ease);background:transparent}
.nav.scrolled{background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 8px 34px -20px rgba(11,61,92,.5);border-bottom:1px solid var(--glass-line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1400px;margin:0 auto;padding:16px 24px;transition:padding .35s var(--ease)}
.nav.scrolled .nav-in{padding:10px 24px}
.marca{display:flex;align-items:center;gap:12px;flex-shrink:0}
.marca-sim{width:42px;height:42px;flex-shrink:0;transition:.4s var(--ease)}
.nav.scrolled .marca-sim{width:36px;height:36px}
.marca-txt{line-height:1.05}
.marca-txt b{display:block;font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:.04em;color:#fff;transition:color .4s var(--ease)}
.marca-txt span{display:block;font-size:.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:color .4s var(--ease)}
.nav.scrolled .marca-txt b{color:var(--tinta)}
.nav.scrolled .marca-txt span{color:var(--mar)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a:not(.btn){font-size:.9rem;font-weight:600;color:rgba(255,255,255,.88);position:relative;transition:color .3s var(--ease);padding:4px 0}
.nav.scrolled .nav-links a:not(.btn){color:var(--tinta-sec)}
.nav-links a:not(.btn)::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--mar-xcl);border-radius:2px;transition:width .3s var(--ease)}
.nav.scrolled .nav-links a:not(.btn)::after{background:var(--mar)}
.nav-links a:not(.btn):hover::after,.nav-links a.act::after{width:100%}
.nav-links a:not(.btn):hover{color:#fff}
.nav.scrolled .nav-links a:not(.btn):hover,.nav.scrolled .nav-links a.act{color:var(--mar)}
.nav-acc{display:flex;align-items:center;gap:12px}
.temabtn{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;transition:.35s var(--ease);flex-shrink:0}
.nav.scrolled .temabtn{border-color:var(--linea);background:var(--card-2)}
.temabtn:hover{transform:rotate(-18deg) scale(1.08);border-color:var(--mar-xcl)}
.temabtn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.3s}
.nav.scrolled .temabtn svg{stroke:var(--mar)}
.temabtn .i-luna{display:none}
:root[data-tema="noche"] .temabtn .i-sol{display:none}
:root[data-tema="noche"] .temabtn .i-luna{display:block}
.burger{display:none;flex-direction:column;justify-content:center;gap:5.5px;width:42px;height:42px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);cursor:pointer;padding:0 10px;transition:.35s var(--ease)}
.nav.scrolled .burger{border-color:var(--linea);background:var(--card-2)}
.burger i{display:block;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
.nav.scrolled .burger i{background:var(--tinta)}
.burger.abierto i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.abierto i:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger.abierto i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- BOTÓN DE MENÚ ---------- */
.menubtn{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 8px 0 16px;border-radius:100px;border:1.5px solid rgba(255,255,255,.32);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);cursor:pointer;transition:.32s var(--ease)}
.nav.scrolled .menubtn{border-color:var(--linea);background:var(--card-2)}
.menubtn:hover{border-color:var(--mar-xcl)}
.nav.scrolled .menubtn:hover{border-color:var(--mar)}
.menubtn-txt{font-size:.86rem;font-weight:700;color:#fff;letter-spacing:.02em;transition:color .32s var(--ease)}
.nav.scrolled .menubtn-txt{color:var(--tinta)}
.menubtn .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;padding:0 3px}
.menubtn .burger i{display:block;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease);transform-origin:center}
.nav.scrolled .menubtn .burger i{background:var(--tinta)}
.menubtn[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menubtn[aria-expanded="true"] .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menubtn[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- PANEL DESPLEGABLE ---------- */
.menumovil{position:fixed;inset:0;z-index:190;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;background:rgba(4,22,33,.42);backdrop-filter:blur(3px)}
.menumovil.abierto{opacity:1;visibility:visible}
.mm-panel{position:absolute;top:74px;right:24px;width:min(330px,calc(100vw - 32px));background:var(--card);border:1px solid var(--linea-2);border-radius:var(--r-l);box-shadow:0 34px 70px -24px rgba(4,26,38,.55);padding:14px;transform:translateY(-14px) scale(.97);opacity:0;transition:transform .38s var(--ease),opacity .38s var(--ease);transform-origin:top right;max-height:calc(100vh - 100px);overflow-y:auto}
.menumovil.abierto .mm-panel{transform:none;opacity:1}
.mm-panel a{position:relative;display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:14px;font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--tinta);transition:.26s var(--ease)}
.mm-panel a:hover,.mm-panel a:focus-visible{background:var(--card-2);color:var(--mar);transform:translateX(4px)}
.mm-panel a.act{color:var(--mar)}
.mm-panel a.act::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--mar);margin-left:auto}
.mm-n{font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.14em;color:var(--tinta-ter);min-width:20px}
.mm-panel a:hover .mm-n{color:var(--mar-cl)}
.mm-cta{margin-top:10px;padding-top:12px;border-top:1px solid var(--linea-2)}
.mm-cta .btn{width:100%}

/* En un movil no caben a la vez la marca, el boton de tema, el de reservar y
   el menu: el de reservar se salia por la derecha. Se quita, que reservar
   esta en el desplegable y en el boton flotante. */
@media (max-width:760px){
  .nav-in{padding:12px 14px;gap:10px}
  .nav.scrolled .nav-in{padding:9px 14px}
  .nav-cta{display:none}
  .marca{gap:9px}
  .marca-sim{width:34px;height:34px}
  .nav.scrolled .marca-sim{width:31px;height:31px}
  .marca-txt b{font-size:1.1rem}
  .marca-txt span{font-size:.53rem;letter-spacing:.24em}
}
@media (max-width:640px){
  .menubtn{padding:0 6px 0 13px;height:40px}
  .menubtn-txt{font-size:.8rem}
  .mm-panel{top:66px;right:13px;left:13px;width:auto;padding:11px;border-radius:var(--r-m)}
  .mm-panel a{font-size:1.05rem;padding:12px 13px}
}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--mar-xos);padding:120px 0 90px;isolation:isolate}
.hero-capas{position:absolute;inset:-6%;z-index:0;transform-style:preserve-3d;will-change:transform}
.hcapa{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:saturate(1.14) contrast(1.04);will-change:transform,opacity;transition:opacity 2.2s var(--ease);transform:scale(1.04)}
.hcapa.on{opacity:.95;animation:kenburns 13s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.15)}}
.hero-velo{position:absolute;inset:-6%;z-index:1;background:var(--hero-veil);pointer-events:none}
.hero-velo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 62% 46% at 50% 40%,rgba(3,22,33,.5),transparent 72%),radial-gradient(ellipse 80% 60% at 50% 42%,rgba(58,164,211,.2),transparent 72%)}
.hero-grano{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.42;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E")}
.hero-in{position:relative;z-index:5;width:100%;color:#fff;text-align:center}
/* La estrella nueva es de trazo fino, asi que necesita mas tamano que la
   anterior para tener el mismo peso visual. */
.hero-estrella{display:block;width:clamp(74px,9.5vw,108px);height:clamp(74px,9.5vw,108px);margin:0 auto 26px;filter:drop-shadow(0 0 22px rgba(127,208,232,.75));animation:latir 5s ease-in-out infinite}
@keyframes latir{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.09);opacity:1}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.7rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,246,251,.82);margin-bottom:20px;padding:8px 18px;border:1px solid rgba(255,255,255,.22);border-radius:100px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.hero h1{font-size:clamp(2.5rem,8.2vw,5.4rem);font-weight:500;line-height:.98;letter-spacing:-.02em;margin-bottom:18px;text-shadow:0 12px 44px rgba(0,0,0,.42)}
.hero h1 em{font-style:italic;display:block;background:var(--grad-plata);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:brillo 8s linear infinite;filter:drop-shadow(0 2px 10px rgba(3,20,30,.85)) drop-shadow(0 8px 30px rgba(3,20,30,.6))}
.hero-sub{font-size:clamp(1rem,2.1vw,1.22rem);color:rgba(234,246,251,.9);max-width:56ch;margin:0 auto 30px;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.hero-prueba{display:inline-flex;align-items:center;gap:clamp(14px,3vw,30px);flex-wrap:wrap;justify-content:center;padding:15px clamp(18px,3vw,30px);border-radius:var(--r-l);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -26px rgba(0,0,0,.6)}
.hp{display:flex;align-items:center;gap:10px;text-align:left}
.hp-n{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:600;line-height:1;color:#fff}
.hp-l{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(234,246,251,.68);line-height:1.35}
.hp-sep{width:1px;height:30px;background:rgba(255,255,255,.24)}
.hp-est{display:flex;gap:2px}
.hp-est svg{width:14px;height:14px;fill:#f7c948}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(234,246,251,.6);font-size:.64rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.hero-scroll i{display:block;width:1.5px;height:34px;background:linear-gradient(180deg,var(--mar-xcl),transparent);border-radius:2px;animation:bajar 2.1s ease-in-out infinite}
@keyframes bajar{0%{transform:scaleY(.25);transform-origin:top;opacity:0}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.25);transform-origin:bottom;opacity:0}}

/* olas SVG del pie del hero */
.hero-olas{position:absolute;left:0;right:0;bottom:-1px;z-index:4;pointer-events:none;line-height:0}
.hero-olas svg{width:200%;height:clamp(60px,9vw,120px);display:block}
.hero-olas .ola1{animation:desliz 22s linear infinite;opacity:.5}
.hero-olas .ola2{animation:desliz 15s linear infinite reverse;opacity:.75}
.hero-olas .ola3{animation:desliz 28s linear infinite}
@keyframes desliz{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ CINTA / MARQUESINA ============ */
.cinta{background:var(--mar-xos);color:#eaf6fb;padding:13px 0;overflow:hidden;white-space:nowrap;position:relative;border-top:1px solid rgba(127,208,232,.28);border-bottom:1px solid rgba(127,208,232,.28)}
.cinta::before,.cinta::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.cinta::before{left:0;background:linear-gradient(90deg,var(--mar-xos),transparent)}
.cinta::after{right:0;background:linear-gradient(270deg,var(--mar-xos),transparent)}
.cinta-track{display:inline-flex;animation:desliz 38s linear infinite;will-change:transform}
.cinta:hover .cinta-track{animation-play-state:paused}
.cinta-track b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1rem,2vw,1.32rem);padding:0 22px;display:inline-flex;align-items:center;gap:22px;letter-spacing:.01em}
.cinta-track b::after{content:'✦';font-style:normal;font-size:.66rem;color:var(--mar-xcl)}

/* ============ CANVAS DEL MAR ============ */
.marlienzo{position:relative;height:clamp(260px,34vw,420px);overflow:hidden;background:var(--espuma)}
.marlienzo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.marlienzo-txt{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;pointer-events:none}
.marlienzo-txt p{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,3vw,2rem);color:#fff;max-width:22ch;line-height:1.3;text-shadow:0 2px 12px rgba(4,26,38,.55),0 8px 34px rgba(4,26,38,.45)}
.marlienzo-txt small{margin-top:9px;font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mar)}

/* ============ HISTORIA ============ */
.historia{background:var(--espuma)}
.hist-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,64px);align-items:center}
.hist-fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.hist-fotos img{width:100%;border-radius:var(--r-m);object-fit:cover;box-shadow:var(--sombra-s)}
.hist-fotos .hf1{aspect-ratio:3/4;grid-row:span 2}
.hist-fotos .hf2,.hist-fotos .hf3{aspect-ratio:4/3}
.hist-sello{position:absolute;right:-16px;bottom:-16px;width:clamp(86px,11vw,116px);height:clamp(86px,11vw,116px);z-index:3;filter:drop-shadow(0 12px 26px rgba(11,61,92,.4))}
.hist-sello .selloaro{animation:girar 34s linear infinite;transform-origin:50% 50%}
@keyframes girar{to{transform:rotate(360deg)}}
.hist-txt p{color:var(--tinta-sec);margin-bottom:16px;font-size:1.03rem}
.hist-txt p strong{color:var(--tinta);font-weight:700}
.hist-firma{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--linea)}
.hist-firma img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:var(--sombra-xs)}
.hist-firma .hfn{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:var(--tinta);line-height:1.2}
.hist-firma .hfr{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mar)}
.hist-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.cifra{background:var(--card);border:1px solid var(--linea-2);border-radius:var(--r-m);padding:18px 16px;text-align:center;transition:.35s var(--ease)}
.cifra:hover{transform:translateY(-4px);box-shadow:var(--sombra-s);border-color:var(--mar-cl)}
.cifra b{display:block;font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.15rem);font-weight:600;color:var(--mar);line-height:1}
.cifra span{display:block;margin-top:6px;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-ter);line-height:1.35}

/* ============ PASEO (carrusel, sin secuestrar el scroll) ============ */
.paseo{position:relative;height:clamp(420px,62vh,620px);background:var(--mar-xos);overflow:hidden;isolation:isolate}
.paseo-escena{position:absolute;inset:0}
.pslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 1s}
.pslide.on{opacity:1;visibility:visible}
.pslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.pslide.on img{animation:panlento 9s ease-out forwards}
@keyframes panlento{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.pslide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,22,33,.45),rgba(4,22,33,.55) 45%,rgba(4,22,33,.86))}
.pcap{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,86%);text-align:center;color:#eaf6fb}
.pslide.on .pcap{animation:subir .9s .15s var(--ease) both}
@keyframes subir{from{opacity:0;transform:translate(-50%,calc(-50% + 22px))}to{opacity:1;transform:translate(-50%,-50%)}}
.pcap .pk{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--mar-xcl);margin-bottom:12px}
.pcap h3{font-size:clamp(1.7rem,4.6vw,3rem);font-weight:500;line-height:1.04;margin-bottom:12px;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.pcap h3 em{font-style:italic;color:var(--mar-xcl)}
.pcap p{color:rgba(234,246,251,.9);font-size:clamp(.92rem,1.7vw,1.05rem);max-width:52ch;margin:0 auto;text-shadow:0 3px 16px rgba(0,0,0,.5)}
.pnav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;transition:.32s var(--ease)}
.pnav:hover{background:rgba(255,255,255,.26);transform:translateY(-50%) scale(1.08)}
.pnav svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pnav.prev{left:18px}.pnav.next{right:18px}
.paseo-prog{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:8px}
.pdot{width:9px;height:9px;border-radius:50%;background:rgba(234,246,251,.32);border:none;padding:0;cursor:pointer;transition:.35s var(--ease)}
.pdot.on{background:var(--mar-xcl);width:30px;border-radius:5px;box-shadow:0 0 14px rgba(127,208,232,.7)}

/* ============ CARTA ============ */
.carta{background:var(--nube);position:relative;overflow:hidden}
.carta::before{content:'';position:absolute;top:-14%;right:-8%;width:44vw;height:44vw;max-width:620px;max-height:620px;background:radial-gradient(circle,rgba(58,164,211,.14),transparent 68%);pointer-events:none}
.carta-tabs{display:flex;gap:9px;overflow-x:auto;padding:5px 2px 14px;margin-bottom:26px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.carta-tabs::-webkit-scrollbar{height:5px}
.carta-tabs::-webkit-scrollbar-thumb{background:var(--plata);border-radius:4px}
.ctab{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;border:1.5px solid var(--linea);background:var(--card);color:var(--tinta-sec);font-size:.87rem;font-weight:700;cursor:pointer;transition:.32s var(--ease);white-space:nowrap}
.ctab:hover{border-color:var(--mar-cl);color:var(--mar);transform:translateY(-2px)}
.ctab.on{background:var(--grad-mar);color:#fff;border-color:transparent;box-shadow:0 12px 26px -12px rgba(27,111,156,.65)}
.ctab .cn{font-size:.72rem;opacity:.65;font-weight:600}
.carta-panel{display:none}
.carta-panel.on{display:block;animation:entrar .5s var(--ease)}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.carta-cols{columns:2;column-gap:clamp(20px,3.4vw,44px)}
.carta-cols .plato{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:820px){.carta-cols{columns:1}}
.plato{display:flex;align-items:baseline;gap:12px;padding:13px 4px;border-bottom:1px dashed var(--linea);position:relative;cursor:default;transition:.28s var(--ease);min-width:0}
.plato:hover{background:linear-gradient(90deg,rgba(58,164,211,.09),transparent);border-radius:8px;padding-left:12px}
.plato-i{flex:1;min-width:0}
.plato-n{font-weight:700;font-size:1rem;color:var(--tinta);line-height:1.3;overflow-wrap:anywhere}
.plato-d{font-size:.83rem;color:var(--tinta-ter);line-height:1.45;margin-top:2px}
.plato-p{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--mar);white-space:nowrap;flex-shrink:0}
.plato-p.pend{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-ter);background:var(--card-2);padding:4px 10px;border-radius:100px;border:1px dashed var(--plata)}
.plato-lin{flex:1;border-bottom:1px dotted var(--plata);transform:translateY(-4px);min-width:14px}
.eti{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;font-size:.6rem;font-weight:800;margin-left:7px;vertical-align:middle;flex-shrink:0}
.eti-v{background:#e2f3e4;color:#2c7a3e}
.eti-p{background:#e2eefa;color:#1b6f9c}
.eti-e{background:#fbe6e2;color:#b8412c}
:root[data-tema="noche"] .eti-v{background:#17402350;color:#7fd694}
:root[data-tema="noche"] .eti-p{background:#12384f;color:#7fd0e8}
:root[data-tema="noche"] .eti-e{background:#4a221b;color:#f0a08c}
/* previsualización flotante del plato */
.platopeek{position:fixed;z-index:150;width:190px;border-radius:var(--r-m);overflow:hidden;box-shadow:0 26px 60px -20px rgba(11,61,92,.65);border:2px solid var(--blanco);pointer-events:none;opacity:0;transform:scale(.9) translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.platopeek.on{opacity:1;transform:none}
.platopeek img{width:100%;aspect-ratio:4/3;object-fit:cover}
.platopeek b{display:block;padding:8px 11px;background:var(--card);font-size:.78rem;color:var(--tinta)}
.carta-pie{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:20px 24px;background:var(--card);border:1px solid var(--linea-2);border-radius:var(--r-l);box-shadow:var(--sombra-xs)}
.carta-pie p{font-size:.87rem;color:var(--tinta-sec);max-width:56ch}
.alerg{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:.78rem;color:var(--tinta-ter)}
.alerg span{display:inline-flex;align-items:center;gap:7px}

/* ============ DESTACADOS (platos con foto) ============ */
/* Los destacados van en carrusel de cuatro en cuatro: caben más platos sin
   estirar la página y sin pegarse al libro. */
.dest-carru{margin-bottom:clamp(34px,4.5vw,60px)}
.dest-carru .carru-track{gap:18px;padding:6px 4px}
.dest-carru .dcard{flex:0 0 auto;width:calc((100% - 54px)/4)}
.dest-carru .dcard-img{aspect-ratio:16/11}
.dest-carru .carru-nav{margin-top:16px}
@media (max-width:1100px){ .dest-carru .dcard{width:calc((100% - 18px)/2)} }
@media (max-width:820px){ .dest-carru .carru-track{gap:12px;padding:4px 2px} .dest-carru .dcard{width:calc(100% - 34px)} }
.dcard{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--card);box-shadow:var(--sombra-xs);transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease);min-width:0}
.dcard:hover{box-shadow:var(--sombra)}
.dcard-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.dcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.dcard:hover .dcard-img img{transform:scale(1.07)}
.dcard-b{padding:16px 18px 18px;transform:translateZ(28px)}
.dcard-b h4{font-size:1.12rem;font-weight:600;margin-bottom:5px}
.dcard-b p{font-size:.84rem;color:var(--tinta-ter);line-height:1.5}
.dcard-tag{position:absolute;top:12px;left:12px;z-index:3;padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mar-os)}

/* ============ GALERÍA ============ */
.gal{background:var(--espuma)}
.carru{position:relative}
.carru-vp{overflow:hidden;border-radius:var(--r-l)}
.carru-track{display:flex;gap:16px;transition:transform .68s var(--ease);will-change:transform}
.gitem{flex:0 0 auto;width:calc((100% - 32px)/3);border-radius:var(--r-m);overflow:hidden;position:relative;cursor:zoom-in;box-shadow:var(--sombra-xs);transition:.4s var(--ease)}
.gitem img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.gitem:hover{box-shadow:var(--sombra)}
.gitem:hover img{transform:scale(1.06)}
.gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(180deg,transparent,rgba(6,26,38,.86));color:#fff;font-size:.82rem;font-weight:600;opacity:0;transform:translateY(8px);transition:.35s var(--ease)}
.gitem:hover figcaption{opacity:1;transform:none}
.carru-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.cbtn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--linea);background:var(--card);display:grid;place-items:center;cursor:pointer;transition:.32s var(--ease);flex-shrink:0}
.cbtn svg{width:19px;height:19px;stroke:var(--tinta);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.cbtn:hover:not(:disabled){background:var(--grad-mar);border-color:transparent;transform:scale(1.08)}
.cbtn:hover:not(:disabled) svg{stroke:#fff}
.cbtn:disabled{opacity:.3;cursor:not-allowed}
.carru-pts{display:flex;gap:7px}
.cpt{width:7px;height:7px;border-radius:50%;background:var(--plata);border:none;padding:0;cursor:pointer;transition:.3s var(--ease)}
.cpt.on{background:var(--mar);width:24px;border-radius:4px}

/* ============ RESEÑAS ============ */
.rese{background:var(--mar-xos);color:#eaf6fb;position:relative;overflow:hidden}
.rese::before{content:'';position:absolute;top:-20%;left:-10%;width:52vw;height:52vw;max-width:700px;max-height:700px;background:radial-gradient(circle,rgba(58,164,211,.22),transparent 68%);pointer-events:none}
.rese .h-sec{color:#fff}
.rese .h-sec em{color:var(--mar-xcl)}
.rese .lead{color:rgba(234,246,251,.78)}
.rese .eyebrow{color:var(--mar-xcl)}
.rese-nota{display:inline-flex;align-items:center;gap:16px;padding:14px 22px;border-radius:var(--r-l);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);margin-bottom:8px;flex-wrap:wrap}
.rese-nota .rn{font-family:var(--serif);font-size:2.4rem;font-weight:600;line-height:1;color:#fff}
.rese-nota .rl{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,246,251,.68)}
.rese-nota .rg{display:flex;align-items:center;gap:8px;padding-left:16px;border-left:1px solid rgba(255,255,255,.2);font-size:.82rem;color:rgba(234,246,251,.82)}
.rcard{flex:0 0 auto;width:calc((100% - 36px)/3);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);padding:22px;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:13px;transition:.4s var(--ease);min-width:0}
.rcard:hover{background:rgba(255,255,255,.12);border-color:rgba(127,208,232,.45);transform:translateY(-5px)}
.rcard-top{display:flex;align-items:center;gap:12px}
.rav{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;font-size:1rem;color:#fff;background:var(--grad-mar);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.rmeta{min-width:0}
.rmeta b{display:block;font-size:.95rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta span{display:block;font-size:.72rem;color:rgba(234,246,251,.55)}
.restrellas{display:flex;gap:2px}
.restrellas svg{width:15px;height:15px;fill:#f7c948}
.rtexto{font-size:.92rem;color:rgba(234,246,251,.88);line-height:1.62;flex:1;overflow-wrap:anywhere}
.rtexto.corto{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rmas{align-self:flex-start;background:none;border:none;padding:0;color:var(--mar-xcl);font-size:.8rem;font-weight:700;cursor:pointer;border-bottom:1px solid transparent;transition:.25s}
.rmas:hover{border-bottom-color:var(--mar-xcl)}
.rfotos{display:flex;gap:7px;flex-wrap:wrap}
.rfotos img{width:56px;height:56px;border-radius:10px;object-fit:cover;cursor:zoom-in;border:1.5px solid rgba(255,255,255,.2);transition:.3s var(--ease)}
.rfotos img:hover{transform:scale(1.1);border-color:var(--mar-xcl)}
.rfuente{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,246,251,.42)}
.rese .cbtn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.rese .cbtn svg{stroke:#fff}
.rese .cpt{background:rgba(255,255,255,.28)}
.rese .cpt.on{background:var(--mar-xcl)}
.rese-vermas{text-align:center;margin-top:26px}

/* mosaico de fotos de reseñas */
.rfoto-mos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:34px}
.rfoto-mos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-s);cursor:zoom-in;border:1px solid rgba(255,255,255,.14);transition:.35s var(--ease)}
.rfoto-mos img:hover{transform:scale(1.05);border-color:var(--mar-xcl);box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
/* plegado = una sola fila. Al desplegar salen todas. */
.rfoto-mos.plegado > *:nth-child(n+9){display:none}
@media (max-width:860px){.rfoto-mos{grid-template-columns:repeat(4,minmax(0,1fr))}.rfoto-mos.plegado > *:nth-child(n+5){display:none}}
@media (max-width:640px){
  /* collage 2x2 en móvil */
  .rfoto-mos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:330px;margin-inline:auto}
  .rfoto-mos.plegado > *:nth-child(n+5){display:none}
}

/* ============ RESERVA ============ */
.reserva{background:var(--espuma);position:relative;overflow:hidden}
/* Grabados sueltos en los márgenes de la sección, en tinta al 7%: dan cuerpo
   a los lados sin robar atención al formulario. Desaparecen si no hay hueco
   de sobra, que es cuando estorbarían. */
.reserva{position:relative;overflow:hidden}
.res-deco{position:absolute;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;
  width:min(220px,calc((100vw - 1060px) / 2));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(28px,6vh,80px)}
.res-deco.izq{left:clamp(10px,2vw,40px)}
.res-deco.der{right:clamp(10px,2vw,40px)}
.res-deco span:nth-child(2){height:clamp(80px,12vh,150px)}
.res-deco span{display:block;width:100%;height:clamp(96px,15vh,180px);
  background:rgba(42,74,92,.115);
  -webkit-mask-image:var(--g);mask-image:var(--g);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center}
@media (max-width:1339px){ .res-deco{display:none} }
@supports not ((-webkit-mask-image:url(a)) or (mask-image:url(a))){ .res-deco{display:none} }

.res-caja{max-width:1010px;margin:0 auto;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sombra);border:1px solid var(--linea-2);overflow:hidden}
.res-top{background:var(--grad-mar);color:#fff;padding:15px 26px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.res-top b{font-family:var(--serif);font-size:1.28rem;font-weight:600;display:flex;align-items:center;gap:10px}
.res-top span{font-size:.8rem;color:rgba(255,255,255,.82)}
/* A dos columnas para que la reserva entera quepa en pantalla sin bajar:
   a la izquierda cuándo, a qué hora, cuántos y quién; a la derecha lo
   opcional, la vista previa del mensaje y el botón. */
.res-body{padding:clamp(18px,2.8vw,28px);display:grid;grid-template-columns:1fr .84fr;
  gap:clamp(18px,2.6vw,32px);align-items:start}
.res-form,.res-lado{min-width:0}
.res-alt{grid-column:1 / -1}
.paso{margin-bottom:clamp(13px,1.7vw,19px)}
.res-form .paso:last-child,.res-lado .paso:last-child{margin-bottom:clamp(13px,1.7vw,19px)}
.paso-t{display:flex;align-items:center;gap:10px;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-ter);margin-bottom:13px}
.paso-t i{width:22px;height:22px;border-radius:50%;background:var(--card-2);border:1px solid var(--linea);display:grid;place-items:center;font-size:.7rem;font-style:normal;font-weight:800;color:var(--mar);flex-shrink:0}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chips.scr{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.chips.scr::-webkit-scrollbar{height:5px}
.chips.scr::-webkit-scrollbar-thumb{background:var(--plata);border-radius:4px}
.chip{flex-shrink:0;border:1.5px solid var(--linea);background:var(--card);border-radius:14px;padding:10px 16px;font-size:.88rem;font-weight:700;color:var(--tinta-sec);cursor:pointer;transition:.28s var(--ease);text-align:center;line-height:1.25}
.chip:hover:not(:disabled){border-color:var(--mar-cl);color:var(--mar);transform:translateY(-2px)}
.chip.sel{background:var(--grad-mar);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(27,111,156,.6)}
.chip:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.chip-dia{min-width:76px;display:flex;flex-direction:column;gap:1px;padding:9px 13px}
.chip-dia .cd-s{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.chip-dia .cd-n{font-family:var(--serif);font-size:1.24rem;font-weight:600;line-height:1.1}
.chip-dia .cd-m{font-size:.63rem;font-weight:700;text-transform:uppercase;opacity:.7}
.campo{width:100%;border:1.5px solid var(--linea);background:var(--card);border-radius:14px;padding:13px 16px;font-size:.95rem;transition:.28s var(--ease);font-family:var(--sans)}
.campo::placeholder{color:var(--tinta-ter)}
.campo:focus{outline:none;border-color:var(--mar-cl);box-shadow:0 0 0 3.5px rgba(58,164,211,.16)}
textarea.campo{resize:vertical;min-height:72px}
.previa{background:var(--card-2);border:1.5px dashed var(--plata);border-radius:var(--r-m);padding:14px 16px;margin-bottom:14px}
.previa-t{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-ter);margin-bottom:11px}
.previa-msg{font-size:.88rem;color:var(--tinta);line-height:1.56;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--sans)}
.previa-msg .ph{color:var(--tinta-ter);font-style:italic}
.res-envio{display:flex;flex-direction:column;gap:11px}
.res-envio .btn{width:100%;padding:14px 24px;font-size:.96rem}
.res-aviso{font-size:.81rem;color:var(--tinta-ter);text-align:center;line-height:1.5}
.res-alt{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:6px;padding-top:14px;border-top:1px solid var(--linea-2);font-size:.87rem;color:var(--tinta-sec)}
.res-alt a{color:var(--mar);font-weight:700;border-bottom:1px solid transparent;transition:.25s}
.res-alt a:hover{border-bottom-color:var(--mar)}

/* ============ CONTACTO ============ */
.cont{background:var(--nube);position:relative}
.cont-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,50px);align-items:start}
.cont-datos{display:flex;flex-direction:column;gap:14px}
.cdato{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--linea-2);border-radius:var(--r-m);padding:17px 19px;transition:.35s var(--ease);min-width:0}
.cdato:hover{transform:translateX(5px);box-shadow:var(--sombra-xs);border-color:var(--mar-cl)}
.cdato-ico{width:42px;height:42px;border-radius:13px;background:var(--card-2);display:grid;place-items:center;flex-shrink:0}
.cdato-ico svg{width:20px;height:20px;stroke:var(--mar);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cdato-b{min-width:0;flex:1}
.cdato-b b{display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-ter);margin-bottom:3px}
.cdato-b p,.cdato-b a{font-size:.97rem;color:var(--tinta);line-height:1.5;overflow-wrap:anywhere}
.cdato-b a:hover{color:var(--mar)}
.horario{display:flex;flex-direction:column;gap:0;margin-top:6px}
.hlin{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--linea-2);font-size:.9rem}
.hlin:last-child{border-bottom:none}
.hlin .hd{font-weight:700;color:var(--tinta-sec)}
.hlin .hh{color:var(--tinta-ter);text-align:right;font-variant-numeric:tabular-nums}
.hlin.hoy{background:linear-gradient(90deg,rgba(58,164,211,.12),transparent);border-radius:8px;padding-inline:10px;margin-inline:-10px}
.hlin.hoy .hd{color:var(--mar)}
.hlin.hoy .hd::after{content:'HOY';margin-left:8px;font-size:.6rem;font-weight:800;letter-spacing:.1em;background:var(--mar);color:#fff;padding:2px 7px;border-radius:100px;vertical-align:middle}
.hlin.cerrado .hh{color:#c0524a}
.mapa{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sombra-s);border:1px solid var(--linea-2);background:var(--card)}
.mapa iframe{width:100%;height:clamp(300px,44vw,470px);border:0;display:block;filter:saturate(1.05)}
:root[data-tema="noche"] .mapa iframe{filter:invert(.9) hue-rotate(180deg) saturate(.75) brightness(.95)}

/* ============ CTA FINAL ============ */
.ctafin{position:relative;padding:clamp(70px,9vw,120px) 0;text-align:center;color:#fff;overflow:hidden;background:var(--mar-xos)}
.ctafin-bg{position:absolute;inset:0;z-index:0}
.ctafin-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.ctafin-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,38,.78),rgba(6,26,38,.9))}
.ctafin .wrap{z-index:3}
.ctafin h2{font-size:clamp(2rem,5.4vw,3.5rem);font-weight:500;margin-bottom:14px}
.ctafin h2 em{font-style:italic;color:var(--mar-xcl)}
.ctafin p{color:rgba(234,246,251,.85);max-width:54ch;margin:0 auto 30px;font-size:1.04rem}
.ctafin-b{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ============ FOOTER ============ */
.pie{background:var(--mar-xos);color:rgba(234,246,251,.72);padding:clamp(48px,6vw,72px) 0 26px;border-top:1px solid rgba(127,208,232,.2)}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,44px);margin-bottom:38px}
.pie h5{font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mar-xcl);margin-bottom:15px}
.pie ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pie a{font-size:.9rem;transition:color .25s;overflow-wrap:anywhere}
.pie a:hover{color:var(--mar-xcl)}
.pie-marca{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.pie-marca svg{width:44px;height:44px;flex-shrink:0}
.pie-marca b{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:#fff;letter-spacing:.04em;line-height:1.1;display:block}
.pie-marca span{font-size:.6rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--mar-xcl)}
.pie-desc{font-size:.89rem;line-height:1.66;max-width:38ch}
.pie-redes{display:flex;gap:10px;margin-top:16px}
.pie-redes a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;transition:.32s var(--ease)}
.pie-redes a:hover{background:var(--mar);border-color:var(--mar);transform:translateY(-3px)}
.pie-redes svg{width:17px;height:17px;fill:currentColor}
.pie-bajo{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.8rem;color:rgba(234,246,251,.5);text-wrap:balance}
.pie-bajo a:hover{color:var(--mar-xcl)}
/* Firma del estudio: dentro del mismo bloque que el copyright, más pequeña y
   del mismo tono, para que no cante. */
.pie-firma{width:100%;text-align:center;font-size:.68rem;letter-spacing:.04em;
  color:rgba(234,246,251,.3);margin-top:2px}
.pie-firma a{color:inherit;font-weight:inherit;border-bottom:1px solid transparent;transition:.25s var(--ease)}
.pie-firma a:hover{color:rgba(234,246,251,.72);border-bottom-color:currentColor}

/* ============ BOTÓN FLOTANTE DESPLEGABLE ============ */
.fab{position:fixed;right:20px;bottom:20px;z-index:170;display:flex;flex-direction:column;align-items:flex-end;gap:11px;opacity:0;transform:translateY(18px);pointer-events:none;transition:.42s var(--ease)}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab-opts{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.fab-opt{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:100px;background:var(--card);border:1px solid var(--linea-2);box-shadow:0 16px 36px -14px rgba(4,26,38,.45);opacity:0;visibility:hidden;transform:translateY(12px) scale(.94);transform-origin:bottom right;transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s,box-shadow .3s}
.fab.abierto .fab-opt{opacity:1;visibility:visible;transform:none}
.fab.abierto .fab-opt:nth-child(1){transition-delay:.12s}
.fab.abierto .fab-opt:nth-child(2){transition-delay:.07s}
.fab.abierto .fab-opt:nth-child(3){transition-delay:.02s}
.fab-opt:hover{transform:translateX(-4px);box-shadow:0 22px 44px -16px rgba(4,26,38,.55)}
.fab-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.fab-ico svg{width:19px;height:19px}
.fab-opt.wa .fab-ico{background:linear-gradient(135deg,#25d366,#0f9b78);color:#fff}
.fab-opt.tel .fab-ico{background:var(--grad-mar);color:#fff}
.fab-opt.mapa .fab-ico{background:var(--card-2);color:var(--mar);border:1px solid var(--linea-2)}
.fab-txt{line-height:1.25;text-align:left}
.fab-txt b{display:block;font-size:.88rem;font-weight:700;color:var(--tinta);white-space:nowrap}
.fab-txt small{display:block;font-size:.72rem;color:var(--tinta-ter);white-space:nowrap}

.fab-btn{display:flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 17px;border-radius:100px;border:none;cursor:pointer;background:linear-gradient(135deg,#25d366,#0f9b78);color:#fff;box-shadow:0 16px 38px -12px rgba(18,140,126,.75);transition:.38s var(--ease);position:relative}
.fab-btn:hover{transform:translateY(-3px);box-shadow:0 24px 52px -14px rgba(18,140,126,.9)}
.fab-btn svg{width:25px;height:25px;flex-shrink:0;transition:.35s var(--ease)}
.fab-btn .i-cerrar{display:none}
.fab.abierto .fab-btn{background:var(--grad-mar);box-shadow:0 16px 38px -12px rgba(27,111,156,.75)}
.fab.abierto .fab-btn .i-abrir{display:none}
.fab.abierto .fab-btn .i-cerrar{display:block}
.fab-etq{font-size:.92rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.fab.abierto .fab-etq{display:none}
.fab-btn::before{content:'';position:absolute;left:17px;top:50%;transform:translate(-50%,-50%);width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.5);animation:pulso 2.8s ease-out infinite;z-index:-1}
.fab.abierto .fab-btn::before{display:none}
@keyframes pulso{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}70%,100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}

@media (max-width:640px){
  .fab{right:14px;bottom:14px;gap:9px}
  .fab-btn{height:52px;padding:0 18px 0 15px}
  .fab-btn svg{width:23px;height:23px}
  .fab-etq{font-size:.86rem}
  .fab-opt{padding:9px 15px 9px 10px;gap:10px}
  .fab-ico{width:34px;height:34px}
  .fab-txt b{font-size:.83rem}
  .fab-txt small{font-size:.68rem}
}

/* ============ LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:300;background:rgba(4,18,26,.94);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:56px 18px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:100%;border-radius:var(--r-m);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);object-fit:contain}
.lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:rgba(234,246,251,.82);font-size:.87rem;padding:0 20px}
.lb-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease)}
.lb-x:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
.lb-f{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease)}
.lb-f:hover{background:rgba(255,255,255,.22)}
.lb-f svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-f.prev{left:12px}.lb-f.next{right:12px}

/* ============ BARRA DE PROGRESO ============ */
.progreso{position:fixed;top:0;left:0;height:2.5px;background:linear-gradient(90deg,var(--mar-cl),var(--mar-xcl));z-index:210;width:0;transition:width .08s linear;box-shadow:0 0 12px rgba(127,208,232,.8)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .gitem{width:calc((100% - 16px)/2)}
  .rcard{width:calc((100% - 18px)/2)}
  .pie-grid{grid-template-columns:1fr 1fr;gap:30px}
}

@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .hist-grid{grid-template-columns:1fr;gap:32px}
  .hist-fotos{max-width:520px}
  .cont-grid{grid-template-columns:1fr;gap:26px}
  .carta-cols{columns:1}
}

@media (max-width:640px){
  /* --- compresión general para que el móvil no sea un scroll eterno --- */
  html{scroll-padding-top:70px}
  .wrap,.wrap-w{padding:0 17px}
  .sec{padding:52px 0}
  .sec-head{margin-bottom:26px}
  .h-sec{font-size:1.72rem;margin-bottom:10px}
  .lead{font-size:.93rem;line-height:1.55}
  .eyebrow{font-size:.64rem;margin-bottom:11px;letter-spacing:.2em}
  .btn{padding:12px 21px;font-size:.87rem}
  .btn svg{width:16px;height:16px}

  /* hero */
  .hero{min-height:auto;padding:96px 0 74px}
  .hero h1{font-size:2.35rem}
  .hero-sub{font-size:.95rem;margin-bottom:22px}
  .hero-eyebrow{font-size:.6rem;padding:6px 13px;letter-spacing:.2em;margin-bottom:14px}
  .hero-estrella{margin-bottom:18px}
  .hero-ctas{margin-bottom:26px;gap:10px;flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hero-prueba{gap:12px;padding:12px 14px;width:100%;justify-content:space-around}
  .hp-sep{display:none}
  .hp-n{font-size:1.16rem}
  .hp-l{font-size:.58rem;letter-spacing:.09em}
  .hp-est svg{width:11px;height:11px}
  .hero-scroll{display:none}

  /* cinta */
  .cinta{padding:10px 0}
  .cinta-track b{padding:0 15px;gap:15px}

  /* canvas mar */
  .marlienzo{height:210px}

  /* historia */
  .hist-fotos{gap:9px}
  .hist-txt p{font-size:.94rem;margin-bottom:12px}
  .hist-cifras{gap:8px;margin-top:20px}
  .cifra{padding:13px 8px}
  .cifra span{font-size:.58rem;letter-spacing:.07em}
  .hist-firma{margin-top:20px;padding-top:16px}
  .hist-firma img{width:46px;height:46px}
  .hist-sello{width:clamp(66px,9vw,88px);height:clamp(66px,9vw,88px);right:-6px;bottom:-8px}

  /* paseo */
  .paseo{height:clamp(340px,52vh,420px)}
  .pcap{width:88%}
  .pcap h3{font-size:1.6rem;margin-bottom:9px}
  .pcap p{font-size:.87rem}
  .pcap .pk{font-size:.6rem;letter-spacing:.2em;margin-bottom:7px}
  .pnav{width:40px;height:40px}
  .pnav.prev{left:10px}.pnav.next{right:10px}
  .paseo-prog{bottom:16px}

  /* carta */
  .carta-tabs{gap:7px;margin-bottom:18px;padding-bottom:10px}
  .ctab{padding:9px 15px;font-size:.8rem}
  .plato{padding:10px 2px;gap:9px}
  .plato-n{font-size:.92rem}
  .plato-d{font-size:.77rem}
  .plato-p{font-size:.97rem}
  .plato-p.pend{font-size:.64rem;padding:3px 8px}
  .plato-lin{display:none}
  .carta-cols.plegado > .plato:nth-of-type(n+8){display:none}
  .carta-pie{padding:16px 17px;border-radius:var(--r-m)}
  .carta-pie p{font-size:.82rem}
  .alerg{gap:11px;font-size:.73rem;margin-top:15px}

  /* destacados y galería */
  .dest-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dcard-b{padding:13px 14px 15px}
  .dcard-b h4{font-size:1rem}
  .dcard-b p{font-size:.79rem}
  .gitem{width:calc(100% - 46px)}
  .gitem img{aspect-ratio:4/3}
  .carru-track{gap:12px}
  .carru-nav{margin-top:16px;gap:9px}
  .cbtn{width:40px;height:40px}

  /* reseñas */
  .rcard{width:calc(100% - 46px);padding:17px}
  .rtexto{font-size:.88rem}
  .rtexto.corto{-webkit-line-clamp:5;line-clamp:5}
  .rese-nota{gap:12px;padding:12px 16px;width:100%}
  .rese-nota .rn{font-size:1.9rem}
  .rese-nota .rg{padding-left:12px;font-size:.76rem}
  .rav{width:38px;height:38px;font-size:.88rem}
  .rfotos img{width:48px;height:48px}
  .rfoto-mos{gap:8px;margin-top:22px}

  /* reserva */
  .res-caja{border-radius:var(--r-l)}
  .res-top{padding:15px 18px}
  .res-top b{font-size:1.08rem}
  .res-top span{font-size:.73rem}
  .paso{margin-bottom:19px}
  .paso-t{font-size:.69rem;margin-bottom:10px;letter-spacing:.1em}
  .chip{padding:9px 13px;font-size:.83rem}
  .chip-dia{min-width:66px;padding:8px 10px}
  .chip-dia .cd-n{font-size:1.08rem}
  .campo{padding:11px 14px;font-size:.92rem}
  .previa{padding:14px 15px;margin-bottom:16px}
  .previa-msg{font-size:.86rem;line-height:1.62}
  .res-envio .btn{padding:15px 20px;font-size:.94rem}
  .res-aviso{font-size:.76rem}
  .res-alt{gap:12px;font-size:.83rem;margin-top:14px;padding-top:14px}

  /* contacto */
  .cdato{padding:14px 15px;gap:11px}
  .cdato-ico{width:37px;height:37px;border-radius:11px}
  .cdato-ico svg{width:17px;height:17px}
  .cdato-b b{font-size:.65rem}
  .cdato-b p,.cdato-b a{font-size:.9rem}
  .hlin{font-size:.84rem;padding:7px 0}
  .mapa iframe{height:270px}

  /* cta final + pie */
  .ctafin{padding:58px 0}
  .ctafin h2{font-size:1.85rem}
  .ctafin p{font-size:.94rem;margin-bottom:22px}
  .ctafin-b{flex-direction:column;align-items:stretch}
  .ctafin-b .btn{width:100%}
  .pie{padding:40px 0 20px}
  .pie-grid{grid-template-columns:1fr 1fr;gap:22px 18px;margin-bottom:24px}
  .pie-grid > *:first-child{grid-column:1 / -1}
  .pie a,.pie li{font-size:.84rem}
  .pie-bajo{flex-direction:column;text-align:center;gap:9px;font-size:.75rem}
  .pie-desc{font-size:.85rem;max-width:none}


  .lb{padding:60px 12px}
  .lb-f{width:40px;height:40px}
  .lb-f.prev{left:6px}.lb-f.next{right:6px}
}

@media (max-width:380px){
  .hero h1{font-size:2.05rem}
  .h-sec{font-size:1.55rem}
  .hp-n{font-size:1.04rem}
  .chip-dia{min-width:60px}
}

/* pantallas anchas */
@media (min-width:1500px){
  :root{--maxw:1300px}
}

/* impresión de la carta */
@media print{
  .nav,.menumovil,.fab,.progreso,.hero,.paseo,.carru-nav,.res-caja,.ctafin,.marlienzo,.cinta{display:none!important}
  body{background:#fff;color:#000}
  .carta-panel{display:block!important;break-inside:avoid}
  .carta-tabs{display:none}
  .sec{padding:12px 0}
}

/* botón "ver todos los platos" — solo tiene sentido en móvil */
.vertodos{display:none;margin-top:16px;width:100%}
@media (max-width:640px){.vertodos{display:inline-flex}}

/* pista visual de que la fila de días se desliza */
.paso{position:relative}
.chips.scr{scroll-padding-right:26px}
.chips-borde{position:absolute;right:0;bottom:8px;width:56px;height:56px;pointer-events:none;background:linear-gradient(270deg,var(--card) 15%,transparent);border-radius:0 14px 14px 0}

/* pistas que solo tienen sentido con ratón */
@media (hover:none),(pointer:coarse){.solo-raton{display:none!important}}

/* ============ EL ENTORNO ============ */
.entorno{background:var(--espuma)}
.ent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.ent{position:relative;background:var(--card);border:1px solid var(--linea-2);border-radius:var(--r-l);padding:24px 22px;transition:.4s var(--ease);overflow:hidden;min-width:0}
.ent::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-mar);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.ent:hover{transform:translateY(-6px);box-shadow:var(--sombra-s);border-color:var(--mar-cl)}
.ent:hover::before{transform:scaleY(1)}
.ent-d{display:inline-block;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--mar);line-height:1;margin-bottom:11px}
.ent h4{font-size:1.05rem;font-weight:600;margin-bottom:7px;line-height:1.25}
.ent p{font-size:.87rem;color:var(--tinta-ter);line-height:1.55}
@media (max-width:640px){
  .ent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ent{padding:16px 14px;border-radius:var(--r-m)}
  .ent-d{font-size:1.2rem;margin-bottom:7px}
  .ent h4{font-size:.92rem;margin-bottom:5px}
  .ent p{font-size:.78rem;line-height:1.45}
}

/* ============ RESEÑAS FLOTANTES (banda breve sobre Opiniones) ============ */
.flota{position:relative;height:clamp(132px,15vw,168px);margin:6px 0 26px;overflow:hidden;pointer-events:none}

.fq{position:absolute;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:100px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.5);box-shadow:0 16px 36px -16px rgba(0,0,0,.55);max-width:min(320px,40vw);opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fq.on{opacity:1}
.fq:nth-child(1){left:5%;top:16%;animation:flotar 7s ease-in-out infinite}
.fq:nth-child(2){left:50%;top:52%;transform:translateX(-50%);animation:flotar 8.5s ease-in-out infinite .9s}
.fq:nth-child(3){right:5%;top:22%;animation:flotar 7.8s ease-in-out infinite .4s}
@keyframes flotar{0%,100%{margin-top:0}50%{margin-top:-11px}}
.fq-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:var(--grad-mar)}
.fq-b{min-width:0}
.fq-t{font-size:.78rem;color:#12303f;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.fq-a{display:flex;align-items:center;gap:5px;font-size:.65rem;font-weight:700;color:#5d7683;margin-top:2px}
.fq-a i{color:#f7c948;font-style:normal;letter-spacing:-1px}
@media (prefers-reduced-motion:reduce){.fq{animation:none!important}}
@media (max-width:860px){
  .flota{height:180px}
  .fq{max-width:min(280px,64vw);padding:8px 13px 8px 8px}
  .fq:nth-child(1){left:3%;top:4%}
  .fq:nth-child(2){left:auto;right:3%;top:37%;transform:none}
  .fq:nth-child(3){left:3%;top:69%;right:auto}
  .fq-t{font-size:.75rem}
}

/* botón de ver todas las opiniones */
.rese-todas{display:flex;justify-content:center;margin-top:26px}
.rese-todas .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.rese-todas .btn:hover{background:rgba(255,255,255,.22)}

/* ============================================================================
   LA CARTA EN MODO LIBRO
   Reproduce su carta física: tapa marrón cuero, papel crema y las dos tintas
   con las que está impresa (sepia y azul tinta).
   ============================================================================ */
:root{
  --cuero:#4b382d; --cuero-cl:#664d3e; --cuero-os:#31231b;
  --papel-c:#f8f5ef; --papel-c2:#f2ede4;
  --tinta-c:#2b2622;
  --sepia:#7a5335; --sepia-cl:#a67c53;
  --azultinta:#2a4a5c; --azultinta-cl:#3f6b83;
}
:root[data-tema="noche"]{
  --papel-c:#efe9df; --papel-c2:#e6dfd2;   /* el papel no se apaga: es papel */
}

/* El libro tiene que caber entero en pantalla junto con sus pestañas: si no,
   al bajar a leer la carta se pierden de vista las secciones y hay que subir
   otra vez. En vez de recalcular lo que entra en cada hoja —que hacía desbordar
   los platos— se dibuja siempre a tamaño natural y se escala el conjunto, como
   una carta de verdad vista más pequeña. El factor lo pone el JS, que es quien
   puede medir. */
.libro-escala{display:flex;justify-content:center}
.libro-caja{width:1200px;max-width:100%;margin:0 auto;transform-origin:top center}
.sec-head.sec-libro{margin:clamp(30px,3.6vw,44px) 0 clamp(13px,1.7vw,19px)}
.sec-libro .eyebrow{margin-bottom:9px}
.sec-libro .h-sec{font-size:clamp(1.5rem,2.9vw,2.05rem);margin-bottom:6px}
.sec-libro .lead{font-size:clamp(.86rem,1.2vw,.95rem)}

/* ---------- PESTAÑAS DE SECCIÓN, sobre el canto del libro ---------- */
.libro-tabs{display:flex;gap:2px;padding:0 clamp(8px,1.6vw,20px);position:relative;z-index:3;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* por si aun asi no cabe: se difumina en vez de cortarse en seco */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.libro-tabs.completo{-webkit-mask-image:none;mask-image:none}
.libro-tabs::-webkit-scrollbar{display:none}
.libro-cap{flex-shrink:0;position:relative;top:2px;padding:9px clamp(8px,1.05vw,13px) 13px;border:none;cursor:pointer;
  border-radius:8px 8px 0 0;background:var(--cuero-cl);color:rgba(248,245,239,.74);
  font-family:var(--sans);font-size:clamp(.64rem,.86vw,.72rem);font-weight:700;letter-spacing:0;white-space:nowrap;
  transition:.28s var(--ease);box-shadow:inset 0 -6px 12px -8px rgba(0,0,0,.6)}
.libro-cap:hover{background:#6b503f;color:#fff;top:0}
.libro-cap.on{background:var(--papel-c);color:var(--sepia);top:0;padding-bottom:15px;
  box-shadow:0 -3px 10px -4px rgba(0,0,0,.25)}

/* ---------- EL LIBRO ---------- */
.libro{position:relative;perspective:2600px}
.libro-marco{position:relative;aspect-ratio:16/9.8;border-radius:5px 12px 12px 5px;
  background:linear-gradient(150deg,var(--cuero-cl),var(--cuero) 45%,var(--cuero-os));
  padding:15px;box-shadow:0 46px 92px -38px rgba(28,18,13,.75),0 0 0 1px rgba(0,0,0,.25),
  inset 0 1px 0 rgba(255,255,255,.08);transform-style:preserve-3d}
/* textura sutil de piel */
.libro-marco::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

.hoja{position:absolute;top:15px;bottom:15px;width:calc(50% - 15px);background:var(--papel-c);overflow:hidden}
.hoja.izq{left:15px;border-radius:8px 2px 2px 8px;box-shadow:inset -16px 0 28px -20px rgba(63,45,35,.5)}
.hoja.der{right:15px;border-radius:2px 8px 8px 2px;box-shadow:inset 16px 0 28px -20px rgba(63,45,35,.5)}
.libro-lomo{position:absolute;top:15px;bottom:15px;left:50%;width:30px;transform:translateX(-50%);z-index:6;
  pointer-events:none;background:linear-gradient(90deg,rgba(63,45,35,0),rgba(63,45,35,.16) 44%,
  rgba(63,45,35,.24) 50%,rgba(63,45,35,.16) 56%,rgba(63,45,35,0))}

/* hoja que gira */
.hoja.giro{left:50%;width:calc(50% - 15px);z-index:8;transform-style:preserve-3d;transform-origin:left center;
  transform:rotateY(0deg);background:none;overflow:visible;pointer-events:none;opacity:0}
.hoja.giro.girando{opacity:1;transition:transform .78s cubic-bezier(.55,.05,.3,1)}
.hoja.giro.girando.pasada{transform:rotateY(-180deg)}
.hoja.giro .cara{position:absolute;inset:0;background:var(--papel-c);backface-visibility:hidden;overflow:hidden;
  border-radius:2px 8px 8px 2px;box-shadow:0 0 38px -8px rgba(28,18,13,.5)}
.hoja.giro .dorso{transform:rotateY(180deg);border-radius:8px 2px 2px 8px}

/* ---------- FLECHAS, dentro del libro ---------- */
.libro-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:12;width:42px;height:42px;
  border-radius:50%;border:1px solid rgba(122,83,53,.28);background:rgba(248,245,239,.92);
  backdrop-filter:blur(4px);display:grid;place-items:center;cursor:pointer;transition:.3s var(--ease);
  box-shadow:0 8px 20px -8px rgba(28,18,13,.45)}
.libro-flecha svg{width:19px;height:19px;stroke:var(--sepia);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.libro-flecha:hover:not(:disabled){background:var(--sepia);border-color:var(--sepia);transform:translateY(-50%) scale(1.09)}
.libro-flecha:hover:not(:disabled) svg{stroke:#fff}
.libro-flecha:disabled{opacity:0;pointer-events:none}
.libro-flecha.prev{left:26px}
.libro-flecha.next{right:26px}

/* ---------- CONTENIDO DE UNA PÁGINA ---------- */
.pag{height:100%;padding:clamp(16px,2.6vw,30px) clamp(18px,3vw,34px);display:flex;flex-direction:column;
  overflow:hidden;color:var(--tinta-c);font-family:var(--sans)}
/* El grabado va al lado del titulo, del tamano suficiente para que se lea el
   dibujo. multiply hace que el blanco de la lamina desaparezca en el papel.
   Tinta sepia en la hoja par y azul en la impar, como en su carta. */
.pag-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;flex-shrink:0}
.pag-tit{min-width:0}
.pag-tit .pag-tr{margin-bottom:0}
.pag-grabado{display:block;flex:0 0 34%;height:clamp(50px,7.8vw,88px);
  -webkit-mask-image:var(--g);mask-image:var(--g);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:top right;mask-position:top right;
  -webkit-mask-size:contain;mask-size:contain;
  mix-blend-mode:multiply;opacity:.92}
.pag-grabado.tinta-a{background:var(--sepia)}
.pag-grabado.tinta-b{background:var(--azultinta)}
/* Sin mascara el grabado seria un rectangulo de color a pelo: mejor nada */
@supports not ((-webkit-mask-image:url(a)) or (mask-image:url(a))){
  .pag-grabado{display:none}
}
.pag h4{font-family:var(--sans);font-size:clamp(1.1rem,2.1vw,1.5rem);font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-c);margin-bottom:1px;line-height:1.1}
.pag-tr{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sepia-cl);margin-bottom:9px}
.pag-nota{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sepia);
  margin-bottom:10px;line-height:1.35}
.pag-lista{flex:1;overflow:hidden;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly}
/* Los alérgenos ya no van en una fila suelta debajo del libro: van al pie de
   cada hoja, en pequeño, para tenerlos siempre a la vista sin robar sitio. */
.pag-pie{margin-top:auto;padding-top:9px;display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-shrink:0;border-top:1px solid rgba(122,83,53,.14)}
.pag-leyenda{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.53rem;letter-spacing:.03em;
  color:var(--sepia-cl);opacity:.85;min-width:0}
.pag-leyenda .eti{width:12px;height:12px;font-size:.5rem;margin-left:6px;flex-shrink:0}
.pag-leyenda .eti:first-child{margin-left:0}
.pag-num{font-size:.6rem;font-weight:700;letter-spacing:.16em;color:var(--sepia-cl);flex-shrink:0}
.hoja.izq .pag-pie,.hoja.giro .dorso .pag-pie{flex-direction:row-reverse}
.pag.indice .pag-num{margin-top:auto;padding-top:8px;text-align:right}

/* Las flechas van dentro del libro, asi que el texto no puede pasar por
   debajo: se reserva el canto de fuera de cada hoja. Si no, la flecha se
   come el precio de la ultima linea o el numero del indice. */
.hoja.izq .pag:not(.portada):not(.blanca),.hoja.giro .dorso .pag:not(.portada):not(.blanca){padding-left:calc(clamp(18px,3vw,34px) + 44px)}
.hoja.der .pag:not(.portada):not(.blanca),.hoja.giro .frente .pag:not(.portada):not(.blanca){padding-right:calc(clamp(18px,3vw,34px) + 44px)}

/* un plato */
.itm{display:flex;align-items:baseline;gap:10px;padding:5px 0}
.itm-i{flex:1;min-width:0}
.itm-n{font-size:.88rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.25;color:var(--tinta-c);overflow-wrap:anywhere}
.itm-d{font-size:.74rem;color:#6e6259;line-height:1.3;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.itm-p{font-size:.86rem;font-weight:700;color:var(--tinta-c);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.itm-p small{font-weight:600;color:var(--sepia-cl);font-size:.86em}
.itm-p.dos{display:flex;gap:12px}
.itm-p.dos b{font-weight:700;min-width:46px;text-align:right}
.itm-cons{font-size:.76rem;font-weight:700;color:var(--sepia-cl);font-style:italic}
.itm-grupo{font-size:.88rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--azultinta);
  margin:12px 0 4px;padding-bottom:3px;border-bottom:1.5px solid rgba(42,74,92,.28)}
.itm-grupo:first-child{margin-top:0}
.itm-sub{font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sepia);
  margin:9px 0 2px;text-decoration:underline;text-underline-offset:3px}
.itm-cab{display:flex;justify-content:flex-end;gap:12px;font-size:.58rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sepia-cl);padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid rgba(122,83,53,.2)}
.itm-cab span{min-width:46px;text-align:right}

/* alérgenos en el papel */
/* Los platos que tienen foto de verdad se marcan con un subrayado de puntos:
   si no, nadie descubre que pasando el ratón se abre la foto. */
.itm.con-foto,.plato.con-foto{cursor:zoom-in}
.itm.con-foto .itm-n,.plato.con-foto .plato-n{text-decoration:underline;text-decoration-style:dotted;
  text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(122,83,53,.5)}
.plato.con-foto .plato-n{text-decoration-color:var(--plata)}

.pag .eti{background:rgba(122,83,53,.14);color:var(--sepia)}
.pag .eti-p{background:rgba(42,74,92,.14);color:var(--azultinta)}

/* ---------- TAPA ---------- */
/* Calcada de su carpeta: piel chocolate con el brillo de arriba a la
   izquierda, la marca en versalitas y "menu" en trazo fino con la raya que
   sale de la u y se va hasta el canto. Ni marco ni pastilla de precio. */
.pag.portada{align-items:center;justify-content:center;text-align:center;padding:0;position:relative;
  background:
    radial-gradient(130% 95% at 24% 14%,rgba(255,238,218,.15),rgba(255,238,218,0) 60%),
    linear-gradient(148deg,var(--cuero-cl) 0%,var(--cuero) 44%,var(--cuero-os) 100%)}
.pag.portada .marca-p{margin-bottom:22px;font-size:.6rem;font-weight:600;letter-spacing:.4em;
  text-transform:uppercase;color:rgba(226,219,209,.58);padding-left:.4em}
.pag.portada .menu-rotulo{position:relative;font-family:'Jost',var(--sans);font-weight:200;font-size:clamp(2.2rem,5.4vw,3.5rem);
  letter-spacing:.12em;color:#e2dbd1;line-height:1;padding:0}
/* La raya de su carpeta baja en VERTICAL desde la "n" hasta casi el canto de
   abajo. Va sobre la tapa y no sobre la palabra porque tiene que llegar al
   final de la hoja; el 52,5% cae justo bajo la n con la palabra centrada. */
/* La raya que baja de la "n" hasta el canto, como en su carpeta de piel.
   Sale del palito IZQUIERDO de la n, no del derecho.
   Los tres numeros estan MEDIDOS, no estimados:
    - 57,93%: centro del palo. Se saco dibujando "menu" en un canvas a 200px y
      buscando las columnas de tinta; el palo cae al 57,98% del avance y se
      corrige el ultimo pixel comparando el render real.
    - 0,155em desde el fondo de la caja: ahi esta la linea base de la Jost
      (a 0,852em del alto). Si se arranca en el 100% queda un hueco.
    - 0,048em de grosor: el trazo geometrico mide menos, pero a 1px la raya
      renderiza a media intensidad y se ve mas apagada que la letra. Con este
      ancho el antialiasing le da el mismo peso; comprobado columna a columna.
   Color: el mismo #e2dbd1 de la letra, sin opacidad. */
.pag.portada:not(.contratapa) .menu-rotulo::after{content:'';position:absolute;
  left:57.93%;margin-left:-.024em;top:calc(100% - .155em);
  width:.048em;height:100vh;background:#e2dbd1;pointer-events:none}
.pag.portada .precio-p{margin-top:16px;padding:7px 17px;border-radius:100px;border:1px solid rgba(222,214,204,.3);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;color:#ded6cc}
.pag.blanca{background:var(--papel-c)}

/* ---------- INDICE, en la hoja de al lado de la tapa ---------- */
.pag.indice{justify-content:flex-start}
.ind-lista{list-style:none;margin:14px 0 0;padding:0;flex:1;min-height:0;display:flex;
  flex-direction:column;justify-content:space-evenly}
.ind-lista li{display:flex;align-items:baseline;gap:8px;font-size:clamp(.8rem,1.15vw,.96rem)}
.ind-lista span{font-weight:600;color:var(--tinta-c);white-space:nowrap}
.ind-lista i{flex:1;height:0;border-bottom:1px dotted rgba(122,83,53,.42);transform:translateY(-3px)}
.ind-lista b{font-weight:700;color:var(--sepia-cl);font-variant-numeric:tabular-nums}
.ind-lista li.ind-nota{margin-top:-2px}
.ind-lista li.ind-nota span{font-weight:500;font-size:.86em;color:var(--sepia-cl);white-space:normal;
  line-height:1.35;font-style:italic}

/* ---------- PIE ---------- */
.libro-pie{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:9px;
  font-size:.78rem;color:var(--tinta-ter);flex-wrap:wrap}
.libro-pie a{color:var(--mar);font-weight:700;border-bottom:1px solid transparent;transition:.25s}
.libro-pie a:hover{border-bottom-color:var(--mar)}

@media (max-width:820px){
  /* en móvil, una sola hoja */
  .libro-marco{aspect-ratio:3/4.45;padding:10px;border-radius:4px 10px 10px 4px}
  .hoja{top:10px;bottom:10px;width:calc(100% - 20px)}
  .hoja.izq{left:10px;border-radius:8px;box-shadow:none}
  .hoja.der{display:none}
  .libro-lomo{display:none}
  .hoja.giro{left:10px;width:calc(100% - 20px);transform-origin:center left}
  .hoja.giro .cara{border-radius:8px}
  .libro-flecha{width:36px;height:36px}
  .libro-flecha.prev{left:16px}
  .libro-flecha.next{right:16px}
  /* En movil no sobra ancho: las flechas bajan al pie, a los lados del numero
     de pagina, y la hoja recupera los 112px que le comian a los lados. */
  .pag,.hoja.izq .pag,.hoja.der .pag,.hoja.giro .dorso .pag,.hoja.giro .frente .pag{padding:14px 15px 6px}
  .libro-flecha{top:auto;bottom:11px;transform:none;width:34px;height:34px}
  .libro-flecha:hover:not(:disabled){transform:scale(1.08)}
  .libro-flecha svg{width:17px;height:17px}
  .libro-flecha.prev{left:14px}
  .libro-flecha.next{right:14px}
  .pag-num,.hoja.der .pag-num,.hoja.giro .frente .pag-num{text-align:center;padding-top:15px}
  .pag-cab{margin-bottom:8px}
  .pag-grabado{height:50px;flex-basis:30%}
  .itm{padding:4.5px 0}
  .itm-n{font-size:.73rem}
  .itm-d{display:none}
  .libro-caja{width:auto;max-width:100%;transform:none!important}
  .libro-escala{height:auto!important;display:block}
  /* en movil, la reserva vuelve a una sola columna */
  .res-body{grid-template-columns:1fr}
  .libro-tabs{padding:0 8px;gap:2px}
  .libro-cap{padding:8px 12px 12px;font-size:.68rem}
  .libro-pie{font-size:.73rem;gap:12px;margin-top:11px}
}

/* ============ HORARIO POR TEMPORADAS ============ */
.hor-temp{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--linea-2)}
.hor-temp b{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mar);
  background:var(--card-2);border:1px solid var(--linea-2);border-radius:100px;padding:4px 11px}
.hor-temp span{font-size:.76rem;color:var(--tinta-ter)}
.hor-cierre{margin-top:9px;padding:9px 13px;border-radius:10px;background:rgba(192,82,74,.09);
  border:1px solid rgba(192,82,74,.24);color:#b04a42;font-size:.8rem;font-weight:600}
.hor-nota{margin-top:9px;font-size:.77rem;color:var(--tinta-ter);line-height:1.45}

.hor-mas{margin-top:11px;border-top:1px solid var(--linea-2);padding-top:9px}
.hor-mas summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-size:.79rem;font-weight:700;color:var(--mar);padding:3px 0;transition:.25s var(--ease)}
.hor-mas summary::-webkit-details-marker{display:none}
.hor-mas summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.hor-mas[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.hor-mas summary:hover{color:var(--mar-os)}
.hor-mas-body{padding-top:10px;display:flex;flex-direction:column;gap:8px;animation:entrar .35s var(--ease)}
.hor-fila{padding:10px 13px;border-radius:11px;background:var(--card-2);border:1px solid var(--linea-2)}
.hor-fila.act{border-color:var(--mar-cl);background:linear-gradient(90deg,rgba(58,164,211,.1),transparent)}
.hor-fila b{display:block;font-size:.83rem;font-weight:700;color:var(--tinta)}
.hor-fila span{display:block;font-size:.73rem;color:var(--mar);font-weight:600;margin-top:1px}
.hor-fila small{display:block;font-size:.73rem;color:var(--tinta-ter);margin-top:4px;line-height:1.4}
.hor-fila.cerrada{background:rgba(192,82,74,.07);border-color:rgba(192,82,74,.2)}
.hor-fila.cerrada b{color:#b04a42}
.hor-fila.cerrada span{color:var(--tinta-ter)}

@media (max-width:640px){
  .hor-temp{margin-bottom:8px;padding-bottom:7px;gap:7px}
  .hor-temp b{font-size:.64rem;padding:3px 9px}
  .hor-temp span{font-size:.7rem}
  .hor-mas summary{font-size:.75rem}
  .hor-fila{padding:8px 11px;border-radius:9px}
  .hor-fila b{font-size:.78rem}
  .hor-fila span,.hor-fila small{font-size:.69rem}
  .hor-cierre{font-size:.75rem;padding:8px 11px}
  .hor-nota{font-size:.72rem}
}


/* ============================================================
   AJUSTES DE LA VISITA (25/08/2026)
   ============================================================ */

/* --- burbujas flotantes, dentro de la banda azul de opiniones --- */
.rese .flota{margin-top:0}
.rese .fq:nth-child(1){left:2%;top:8%}
.rese .fq:nth-child(2){left:50%;top:48%;transform:translateX(-50%)}
.rese .fq:nth-child(3){right:2%;top:14%;left:auto}

/* --- tarjetas de opinión compactas --- */
.rcard{width:calc((100% - 36px)/3);padding:17px;gap:10px}
.rcard-top{gap:10px}
.rav{width:38px;height:38px;font-size:.86rem}
.rmeta b{font-size:.88rem}
.rmeta span{font-size:.68rem}
.restrellas svg{width:13px;height:13px}
.rtexto{font-size:.86rem;line-height:1.55}
.rtexto.corto{-webkit-line-clamp:4;line-clamp:4}
.rfotos img{width:46px;height:46px;border-radius:9px}
.rfuente{font-size:.62rem}
.rmas{font-size:.76rem}

/* --- mapa y datos a la misma altura --- */
.cont-grid{align-items:stretch}
.cont-datos{gap:11px}
.mapa{position:relative;display:flex;align-self:stretch}
.mapa iframe{height:100%;min-height:340px;flex:1}

/* --- marcador propio del mapa --- */
.mapa-pin{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-100%);display:flex;
  flex-direction:column;align-items:center;text-decoration:none;filter:drop-shadow(0 10px 20px rgba(4,26,38,.4));
  animation:pinsube .7s var(--ease) both}
@keyframes pinsube{from{opacity:0;transform:translate(-50%,-130%)}to{opacity:1;transform:translate(-50%,-100%)}}
.mapa-pin-eti{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:100px;
  background:var(--grad-mar);color:#fff;white-space:nowrap;line-height:1.15;transition:.3s var(--ease)}
.mapa-pin-eti svg{width:17px;height:17px;flex-shrink:0;color:#fff;animation:latir 3.4s ease-in-out infinite}
.mapa-pin-eti b{font-family:var(--serif);font-size:.98rem;font-weight:600}
.mapa-pin-eti small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.mapa-pin-gota{width:14px;height:14px;margin-top:-3px;background:var(--mar-os);transform:rotate(45deg);border-radius:0 0 3px 0}
.mapa-pin:hover .mapa-pin-eti{transform:translateY(-3px)}
.mapa-pin::after{content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:18px;height:18px;
  border-radius:50%;background:var(--mar-cl);animation:pinpulso 2.4s ease-out infinite}
@keyframes pinpulso{0%{box-shadow:0 0 0 4px rgba(58,164,211,.45)}70%,100%{box-shadow:0 0 0 20px rgba(58,164,211,0)}}

/* --- botón flotante: azul, sin texto, con aviso --- */
.fab-btn{width:60px;height:60px;padding:0;justify-content:center;border-radius:50%;
  background:linear-gradient(140deg,var(--mar-cl),var(--mar) 55%,var(--mar-os));
  box-shadow:0 16px 38px -12px rgba(27,111,156,.8)}
.fab-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 24px 52px -14px rgba(27,111,156,.95)}
.fab-btn svg{width:27px;height:27px}
.fab-btn::before{left:50%;width:60px;height:60px;background:rgba(58,164,211,.55)}
.fab.abierto .fab-btn{background:var(--tinta);box-shadow:0 16px 38px -12px rgba(14,39,51,.7)}
.fab-aviso{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:100px;
  background:#e8552f;color:#fff;font-size:.72rem;font-weight:800;line-height:22px;text-align:center;
  border:2.5px solid var(--espuma);box-shadow:0 4px 12px -3px rgba(232,85,47,.7);animation:avisa 2.6s ease-in-out infinite}
@keyframes avisa{0%,84%,100%{transform:scale(1)}88%{transform:scale(1.22)}92%{transform:scale(.94)}96%{transform:scale(1.1)}}
.fab.abierto .fab-aviso{display:none}

@media (max-width:1080px){ .rcard{width:calc((100% - 18px)/2)} }
@media (max-width:900px){ .cont-grid{align-items:start} .mapa iframe{min-height:280px} }
@media (max-width:860px){
  .flota{height:190px}
  .rese .fq:nth-child(1){left:1%;top:2%}
  .rese .fq:nth-child(2){left:auto;right:1%;top:36%;transform:none}
  .rese .fq:nth-child(3){left:1%;top:70%;right:auto}
  .mapa-pin-eti{padding:7px 13px 7px 10px}
  .mapa-pin-eti b{font-size:.88rem}
  .mapa-pin-eti small{font-size:.58rem}
}

/* ============================================================
   COMPRESIÓN EN MÓVIL — van las últimas a propósito, porque las
   reglas de arriba son globales y si no las pisarían.
   ============================================================ */
@media (max-width:640px){
  .sec{padding:42px 0}
  .sec-head{margin-bottom:20px}
  .h-sec{font-size:1.58rem;margin-bottom:8px}
  .lead{font-size:.88rem}

  .hist-grid{gap:22px}
  .hist-fotos{gap:7px;max-width:330px;margin:0 auto}
  .hist-txt p{font-size:.89rem;margin-bottom:10px;line-height:1.58}
  .hist-cifras{margin-top:16px;gap:6px}
  .cifra{padding:11px 6px;border-radius:12px}
  .cifra b{font-size:1.35rem}
  .cifra span{font-size:.53rem;margin-top:4px}
  .hist-firma{margin-top:16px;padding-top:13px;gap:11px}
  .hist-firma img{width:40px;height:40px}
  .hist-firma .hfn{font-size:1rem}
  .hist-firma .hfr{font-size:.66rem}
  /* el sello se comia media foto en pantalla estrecha */
  .hist-sello{width:56px;height:56px;right:-2px;bottom:-4px}

  .carta .sec-head[style]{margin:26px 0 16px!important}
  .dest-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dcard-img{aspect-ratio:1}
  .dcard-b{padding:10px 11px 12px}
  .dcard-b h4{font-size:.9rem;margin-bottom:3px}
  .dcard-b p{font-size:.72rem;line-height:1.4}
  .dcard-tag{font-size:.56rem;padding:4px 9px;top:8px;left:8px}

  .gitem img{aspect-ratio:4/3}
  .rcard{width:calc(100% - 46px);padding:15px}
  .rtexto{font-size:.83rem}
  .rese-nota{padding:10px 14px}
  .rese-nota .rn{font-size:1.65rem}
  .flota{height:158px;margin:2px 0 16px}
  .fq{max-width:70vw;padding:7px 12px 7px 7px;gap:8px}
  .fq-av{width:28px;height:28px;font-size:.66rem}
  .fq-t{font-size:.72rem;-webkit-line-clamp:2;line-clamp:2}
  .fq-a{font-size:.6rem}
  .rese .fq:nth-child(1){top:0}
  .rese .fq:nth-child(2){top:38%}
  .rese .fq:nth-child(3){top:74%}
  .rfoto-mos{margin-top:18px}
  .rese-todas{margin-top:18px}

  .res-body{padding:16px}
  .paso{margin-bottom:13px}
  .paso-t{margin-bottom:8px}
  .chips{gap:7px}
  .chip{padding:8px 12px;font-size:.8rem}
  .chip-dia{min-width:60px;padding:7px 9px}
  .chip-dia .cd-n{font-size:1rem}
  .chip-dia .cd-s,.chip-dia .cd-m{font-size:.57rem}
  .campo{padding:10px 13px;font-size:.9rem}
  textarea.campo{min-height:58px}
  .previa{padding:11px 12px;margin-bottom:12px}
  .previa-msg{font-size:.82rem;line-height:1.55}
  .res-envio .btn{padding:14px 18px}
  .res-alt{margin-top:12px;padding-top:12px;font-size:.8rem}

  .hlin{padding:5px 0;font-size:.79rem}
  .hlin .hh{font-size:.76rem}
  .cont-grid{align-items:start}
  .mapa iframe{min-height:0;height:215px}
  .cont-datos{gap:9px}
  .cdato{padding:11px 12px;gap:10px}
  .cdato-ico{width:34px;height:34px}
  .cdato-b p,.cdato-b a{font-size:.86rem}
  .mapa-pin-eti{padding:6px 11px 6px 8px;gap:7px}
  .mapa-pin-eti svg{width:14px;height:14px}
  .mapa-pin-eti b{font-size:.8rem}
  .mapa-pin-eti small{font-size:.54rem}
  .mapa-pin::after{width:14px;height:14px;bottom:-13px}
  .ent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ent{padding:13px 11px}
  .ent-d{font-size:1.08rem;margin-bottom:5px}
  .ent h4{font-size:.86rem}
  .ent p{font-size:.73rem;line-height:1.4}

  .ctafin{padding:46px 0}
  .ctafin h2{font-size:1.65rem}
  .ctafin p{font-size:.88rem;margin-bottom:18px}
  .pie{padding:28px 0 14px}
  .pie-grid{grid-template-columns:1fr 1fr;gap:16px 12px;margin-bottom:16px}
  .pie-grid > *:first-child{grid-column:1 / -1}
  .pie h5{font-size:.66rem;margin-bottom:10px}
  .pie ul{gap:7px}
  .pie a,.pie li{font-size:.78rem}
  .pie-desc{font-size:.8rem;line-height:1.55}
  .pie-marca svg{width:38px;height:38px}
  .pie-marca b{font-size:1.2rem}
  .pie-bajo{flex-direction:column;text-align:center;gap:9px;font-size:.73rem}

  .fab-btn{width:54px;height:54px}
  .fab-btn svg{width:24px;height:24px}
  .fab-btn::before{width:54px;height:54px}
}

/* --- la página de carta en texto: grupos, notas y doble precio --- */
.cb-tr{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-ter)}
.cb-nota{font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--mar);margin-bottom:12px}
.cb-cab{display:flex;justify-content:flex-end;gap:16px;font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-ter);padding-bottom:5px;margin-bottom:4px;border-bottom:1px solid var(--linea-2)}
.cb-cab span{min-width:58px;text-align:right}
.cb-grupo{font-family:var(--sans);font-size:.92rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mar);margin:22px 0 8px;padding-bottom:5px;border-bottom:1.5px solid rgba(58,164,211,.3);break-inside:avoid}
.cb-grupo:first-child{margin-top:0}
.cb-sub{font-family:var(--sans);font-size:.75rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-sec);margin:14px 0 3px;break-inside:avoid}
.plato-p.dos{display:flex;gap:16px}
.plato-p.dos b{font-weight:600;min-width:58px;text-align:right}
.plato-p small{font-weight:600;color:var(--tinta-ter);font-size:.82em}
@media (max-width:640px){
  .cb-grupo{font-size:.84rem;margin:16px 0 6px}
  .cb-sub{font-size:.7rem;margin:11px 0 2px}
  .cb-cab span,.plato-p.dos b{min-width:46px}
  .plato-p.dos{gap:10px}
  .cb-nota{font-size:.72rem;margin-bottom:9px}
}

/* ============================================================================
   AJUSTES DE MÓVIL — tanda del 26/08
   Todo lo de aquí abajo es solo para pantallas de teléfono.
   ============================================================================ */
@media (max-width:760px){

  /* 1. Nuestra historia: la misma información, más apretada. No se quita texto,
        se recortan aires, fotos y tamaños. */
  .hist{padding:clamp(40px,7vw,64px) 0}
  .hist-fotos{gap:6px;max-width:300px}
  .hist-fotos .hf1{aspect-ratio:4/5}
  .hist-txt p{font-size:.86rem;line-height:1.52;margin-bottom:9px}
  .hist-firma{margin-top:13px;padding-top:11px;gap:10px}
  .hist-firma img{width:38px;height:38px}
  .hist-firma .hfn{font-size:1rem}
  .hist-cifras{gap:8px}

  /* 2. Las flechas del paseo tapaban el titular: se quedan en el icono, sin
        pastilla ni cristal, con sombra para que se vean sobre la foto. */
  .pnav{width:30px;height:30px;border:none;background:none;backdrop-filter:none}
  .pnav:hover{background:none;transform:translateY(-50%)}
  .pnav svg{width:26px;height:26px;stroke-width:2.4;filter:drop-shadow(0 1px 5px rgba(0,0,0,.65))}
  .pnav.prev{left:2px}.pnav.next{right:2px}

  /* 3. La tarjeta del carrusel de platos, centrada de verdad: ocupaba 318 de
        356 y dejaba todo el hueco a un lado. */
  .dest-carru .carru-track{gap:14px;padding:4px 0}
  .dest-carru .dcard{width:100%}

  /* 4. Las reseñas flotantes se amontonan en una pantalla estrecha y no se leen:
        fuera. Las opiniones completas siguen justo debajo. */
  .flota{display:none}

  /* 5. El pie, en bloques: La web y Legal en paralelo, Contacto entero debajo. */
  .pie-grid > *:last-child{grid-column:1 / -1}
  .pie-grid > *:not(:first-child){background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
    border-radius:var(--r-m);padding:14px 15px}
}

/* ---------- Puntos de hoja del capítulo (todas las pantallas) ---------- */
.libro-puntos{display:flex;justify-content:center;gap:7px;margin-top:11px;min-height:8px}
.libro-puntos .lpt{width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(122,83,53,.28);transition:.28s var(--ease)}
.libro-puntos .lpt.on{background:var(--sepia);width:20px;border-radius:100px}
.libro-pie b{color:var(--sepia);font-weight:800;letter-spacing:.04em}
/* el enlace a la carta en texto, en la tinta del libro y no en azul */
.libro-pie a{color:var(--sepia);font-weight:700;border-bottom-color:transparent}
.libro-pie a:hover{border-bottom-color:var(--sepia)}

@media (max-width:760px){
  /* La tarjeta de datos del hero: tres columnas iguales con hairlines en vez
     de tres filas apelotonadas, y bastante más transparente para que se vea
     el mar de detrás. */
  .hero-prueba{display:flex;align-items:stretch;justify-content:space-between;gap:0;padding:11px 4px;
    background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:none}
  .hero-prueba .hp{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;gap:4px;padding:0 5px}
  .hp-sep{display:block;flex:0 0 1px;align-self:stretch;background:rgba(255,255,255,.15)}
  .hp-n{font-size:1rem}
  .hp-l{font-size:.5rem;letter-spacing:.06em;line-height:1.32;color:rgba(234,246,251,.72)}
  .hp-est svg{width:9px;height:9px}

  /* Las trece secciones no caben en una fila: se reparten en dos, más
     apretadas, y así se ven todas de un vistazo sin tener que arrastrar. */
  .libro-tabs{flex-wrap:wrap;overflow:visible;row-gap:3px;justify-content:center;
    -webkit-mask-image:none;mask-image:none;padding:0 6px}
  .libro-cap{top:0;font-size:.58rem;padding:6px 6px 8px;border-radius:7px 7px 0 0;letter-spacing:0}
  .libro-cap.on{padding-bottom:9px}

  /* Las flechas, solo el icono en marrón: la pastilla tapaba media línea. */
  .libro-flecha{top:50%;bottom:auto;transform:translateY(-50%);width:26px;height:26px;
    border:none;background:none;box-shadow:none;backdrop-filter:none}
  .libro-flecha:hover:not(:disabled){background:none;transform:translateY(-50%)}
  .libro-flecha svg{width:23px;height:23px;stroke:var(--sepia);stroke-width:2.3}
  .libro-flecha:hover:not(:disabled) svg{stroke:var(--sepia)}
  .libro-flecha.prev{left:1px}
  .libro-flecha.next{right:1px}

  /* Se recupera el ancho que ocupaban las pastillas: solo hace falta dejar
     libre el canto donde va el icono. */
  .pag,.hoja.izq .pag,.hoja.der .pag,.hoja.giro .dorso .pag,.hoja.giro .frente .pag{padding:14px 27px 6px}
  .pag-num,.hoja.der .pag-num,.hoja.giro .frente .pag-num{text-align:right;padding-top:0}
  .pag-pie{padding-top:8px}
  .libro-puntos{margin-top:9px}
}

/* ============================================================================
   SELECTOR DE IDIOMA
   Letras y no banderas: una bandera es un país, no una lengua, y a 16px es un
   borrón. ES / FR / EN se lee de golpe.
   ============================================================================ */
.idioma{position:relative;flex-shrink:0}
.idioma-btn{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 10px 0 12px;
  border-radius:100px;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:.3s var(--ease)}
.idioma-btn:hover{background:rgba(255,255,255,.2)}
.idioma-act{font-size:.78rem;font-weight:800;letter-spacing:.08em;color:#fff;transition:color .35s var(--ease)}
.idioma-btn svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .3s var(--ease),stroke .35s var(--ease)}
.idioma.abierto .idioma-btn svg{transform:rotate(180deg)}
.nav.scrolled .idioma-btn{border-color:var(--linea);background:var(--card-2)}
.nav.scrolled .idioma-act{color:var(--tinta)}
.nav.scrolled .idioma-btn svg{stroke:var(--tinta-ter)}

.idioma-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:158px;padding:6px;
  background:var(--card);border:1px solid var(--linea-2);border-radius:var(--r-m);
  box-shadow:var(--sombra);display:flex;flex-direction:column;gap:2px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.26s var(--ease)}
.idioma.abierto .idioma-menu{opacity:1;visibility:visible;transform:none}
.idioma-op{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;
  background:none;border-radius:9px;cursor:pointer;text-align:left;font-family:var(--sans);
  font-size:.88rem;font-weight:600;color:var(--tinta-sec);transition:.22s var(--ease)}
.idioma-op b{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--tinta-ter);
  min-width:22px;transition:color .22s}
.idioma-op:hover{background:var(--card-2);color:var(--mar)}
.idioma-op:hover b{color:var(--mar)}
.idioma-op.on{background:var(--card-2);color:var(--mar)}
.idioma-op.on b{color:var(--mar)}

@media (max-width:760px){
  .idioma-btn{height:36px;padding:0 8px 0 10px;gap:3px}
  .idioma-act{font-size:.7rem}
  .idioma-btn svg{width:12px;height:12px}
  .idioma-menu{min-width:146px}
}

/* ---------- LOGOTIPO REAL EN LA CABECERA ----------
   Sustituye al icono suelto con el nombre escrito al lado: ahora va la marca
   tal cual la tienen, con su tipografía y la estrella dentro de la C.
   Dos ficheros con el fondo recortado: el blanco mientras la barra está sobre
   la foto y el azul cuando baja y la barra se vuelve blanca. */
/* El logotipo va entero: nombre, filete y RESTAURANTE, tal como se lo pasaron.
   Un pelín más grande que al principio para que se lea mejor en el móvil. */
.marca{display:flex;align-items:center;flex-shrink:0;line-height:0}
.marca-logo{height:clamp(32px,2.9vw,44px);width:auto;display:block}
.marca-logo.oscuro{display:none}
.nav.scrolled .marca-logo.claro{display:none}
.nav.scrolled .marca-logo.oscuro{display:block}
/* En tema noche la barra al bajar se vuelve OSCURA, así que ahí el logo tiene
   que seguir siendo el blanco: el azul sobre fondo oscuro no se ve. */
:root[data-tema="noche"] .nav.scrolled .marca-logo.claro{display:block}
:root[data-tema="noche"] .nav.scrolled .marca-logo.oscuro{display:none}