/* ===========================================================
   A MAROLA · Ferrol
   Paleta: blanco/hueso mediterráneo + azul Rías Baixas + dorado
   =========================================================== */

/* ---- Tipografías auto-alojadas -----------------------------------
   Antes se pedian a fonts.googleapis.com/fonts.gstatic.com en cada
   visita, lo que envia la IP del visitante a Google sin pedir permiso
   (motivo de varias sentencias en la UE, p.ej. Múnich 2022). Sirviendo
   los .woff2 desde el propio dominio se evita ese envio de datos a un
   tercero y de paso la web carga mas rapido (menos DNS/TLS externos).
   Solo se incluyen los pesos que realmente se usan en el sitio. -------- */
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:300;
  src:url('fonts/inter-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:500;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:700;
  src:url('fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-display:swap;font-weight:500;
  src:url('fonts/sora-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-display:swap;font-weight:600;
  src:url('fonts/sora-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-display:swap;font-weight:700;
  src:url('fonts/sora-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-display:swap;font-weight:800;
  src:url('fonts/sora-latin-800-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:700;
  src:url('fonts/playfair-display-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:800;
  src:url('fonts/playfair-display-latin-800-normal.woff2') format('woff2');
}

:root{
  --blue-deep:#0b5c82;
  --blue-deep-d:#073b54;
  --blue-l:#1786ad;
  --teal:#0f7fa3;
  --copper:#1786ad;
  --copper-l:#5fb2cf;
  --copper-d:#0b5c82;
  --foam:#f2f9fb;
  --foam-hi:#ffffff;
  --paper:#fbf9f4;
  --sea-soft:#eaf5f9;
  --ink:#12313d;
  --muted:#5c6f74;
  --radius:18px;
  --radius-lg:26px;
  --shadow:0 22px 60px rgba(11,92,130,.16);
  --shadow-sm:0 10px 30px rgba(11,92,130,.09);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Sora',system-ui,sans-serif;font-weight:800;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}
.container{width:min(1180px,92vw);margin-inline:auto}
/* Anclas del menu (#menu, #contacto...) no deben quedar tapadas por el header fijo.
   Solo se usa scroll-margin-top aqui; NO añadir tambien scroll-padding-top en html
   (se sumarian los dos desplazamientos). */
section[id]{scroll-margin-top:100px}

/* ---- Cursor personalizado: ola/marola (solo escritorio) ---- */
@media (hover:hover) and (pointer:fine){
  /* cursor:none en TODO (con !important) para que el cursor nativo no
     "reaparezca" en zonas no cubiertas por la lista anterior (fotos, texto,
     mapa, etc.), que es lo que hacía parecer que el cursor personalizado
     desaparecía en algunas partes de la web. */
  *{ cursor:none!important; }
  /* Siempre visible desde la primera pintura (nunca se oculta ni al salir
     de la ventana): así no "desaparece" al cargar o al hacer scroll. */
  #marola-cursor{position:fixed;top:0;left:0;width:72px;height:70px;pointer-events:none;z-index:100000;will-change:transform;opacity:1}
  #marola-cursor .mc-img{width:100%;height:100%;
    background:url('cursor-marola.webp') center/contain no-repeat;
    transform-origin:17px 5px;transform:rotate(0deg) scale(1);
    transition:transform .16s var(--ease),filter .22s var(--ease);
    filter:drop-shadow(0 3px 6px rgba(6,30,42,.45))}
  #marola-cursor.hot .mc-img{transform:rotate(-13deg) scale(1.08);
    filter:drop-shadow(0 0 9px rgba(15,127,163,.9)) brightness(1.12)}
  #marola-cursor.click .mc-img{transform:rotate(-23deg) scale(.95);
    filter:drop-shadow(0 0 14px rgba(23,134,173,.9)) brightness(1.25)}
}

/* ---- Estela de gotas de agua tras el cursor (solo escritorio) ---- */
.mc-drop{position:fixed;left:0;top:0;pointer-events:none;z-index:99999;
  border-radius:50% 50% 50% 0;
  background:linear-gradient(155deg,#fff 0%,var(--copper-l) 45%,var(--blue-deep) 100%);
  box-shadow:0 2px 6px rgba(11,92,130,.35);
  animation:mcDropFall .8s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes mcDropFall{
  0%{opacity:.85;transform:translate(0,0) scale(1) rotate(var(--mcr,10deg))}
  100%{opacity:0;transform:translate(0,50px) scale(.35) rotate(var(--mcr,10deg))}
}
@media (prefers-reduced-motion:reduce){.mc-drop{display:none}}

/* ---- Botones ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:14px 28px;border-radius:50px;font-weight:600;font-size:.98rem;
  border:1.5px solid transparent;letter-spacing:.2px;touch-action:manipulation;
  transition:transform .35s var(--ease),background .35s var(--ease),
             color .35s var(--ease),box-shadow .35s var(--ease);
}
.btn svg{width:18px;height:18px}
.btn-gold{background:var(--copper);color:#0d2733;box-shadow:0 12px 26px rgba(23,134,173,.28)}
.btn-ghost{border-color:rgba(242,249,251,.55);color:var(--foam)}
.btn-dark{background:var(--blue-deep);color:var(--foam)}
/* Todos los :hover de aqui en adelante van dentro de (hover:hover): en
   movil el tactil simula el hover al tocar y se queda "pegado" hasta tocar
   otra parte de la pantalla, lo que se notaba como un salto/tiron justo al
   empezar a arrastrar para hacer scroll sobre un boton, foto o tarjeta. */
@media (hover:hover){
  .btn-gold:hover{transform:translateY(-3px) rotate(-1deg);background:var(--copper-l);box-shadow:0 18px 34px rgba(23,134,173,.38)}
  .btn-ghost:hover{transform:translateY(-3px) rotate(-1deg);background:rgba(242,249,251,.12);border-color:var(--foam)}
  .btn-dark:hover{transform:translateY(-3px) rotate(-1deg);background:var(--blue-l)}
}

/* ---- Navbar (centrado: logo en medio, enlaces repartidos a los lados) ---- */
/* El fondo/sombra del header cambian al instante (sin transition) al pasar
   a .scrolled: antes tenian una transicion de .4s que, con scroll rapido
   (rueda del raton o gesto tactil), se quedaba "a medias" una fraccion de
   segundo -> el fondo crema aparecia semitransparente y se transparentaba
   el contenido de detras (parecia una franja blanca de mas con letras
   fantasma). La opacidad del header si mantiene su transicion, para el
   fundido de la intro. */
header{position:fixed;inset:0 0 auto 0;z-index:1000;transition:opacity .6s ease;opacity:1;overflow:hidden}
/* El header ya NO cambia de tamaño al hacer scroll (antes el padding pasaba
   de 20px a 10px de golpe al cruzar el umbral, y ese salto de altura se
   notaba como un "zoom" en movil). Ahora se queda con el mismo alto
   siempre; al hacer scroll solo cambia el fondo (ver header.scrolled mas
   abajo), nunca el tamaño. */
header .nav-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,3vw,40px);padding:20px 0}
/* Sin backdrop-filter aqui: en el header crea sin querer un nuevo "contenedor"
   para sus descendientes position:fixed (los paneles .nav-links del menu movil),
   haciendo que sus top/bottom en % se calculen respecto a la altura del header
   en vez de la pantalla completa -> el desplegable se veia encogido a una tira.
   El fondo va 100% opaco (antes .97): ese 3% de transparencia era casi
   invisible en estatico, pero con scroll rapido/con inercia Chrome llega a
   "destellar" el contenido de detras a traves del header un instante (se
   veia como una franja blanca de mas con letras fantasma debajo del menu).
   Opaco del todo, no hay nada que destelle. */
header.scrolled{background:rgb(251,249,244);box-shadow:0 6px 30px rgba(11,92,130,.1)}
body.intro-run header{opacity:0;pointer-events:none}
.brand{display:flex;align-items:center;justify-content:center}
.brand-logo{height:clamp(38px,4.4vw,52px);width:auto;flex:0 0 auto;filter:brightness(0) invert(1);
  transition:filter .4s var(--ease),height .3s var(--ease)}
header.scrolled .brand-logo{filter:none}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.nav-links-left{justify-content:flex-end}
.nav-links-right{justify-content:flex-start}
/* Antes tenia margin-left:auto, que lo empujaba al borde derecho del todo:
   en pantallas anchas dejaba un hueco enorme entre "Contacto" y el EN/Insta,
   mientras el menu de la izquierda se quedaba pegado al logo (asimetria).
   Ahora se queda junto al resto de enlaces, igual que al otro lado. */
.nav-extra{display:flex;align-items:center;gap:clamp(10px,1.6vw,16px);padding-left:clamp(10px,1.6vw,16px)}
.nav-links a.navlink{color:var(--foam);font-weight:500;font-size:.92rem;position:relative;padding:4px 0;white-space:nowrap}
header.scrolled .nav-links a.navlink{color:var(--ink)}
.nav-links a.navlink::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--copper);transition:width .35s var(--ease)}
.nav-ig{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid rgba(242,249,251,.4);color:var(--foam);transition:.35s var(--ease);flex:0 0 auto}
header.scrolled .nav-ig{color:var(--ink);border-color:rgba(18,49,61,.25)}
.nav-ig,.burger{-webkit-tap-highlight-color:transparent}
.nav-ig svg{width:18px;height:18px}
/* Copia del icono de Instagram para la barra compacta de movil (junto a las
   3 rayas); la original de .nav-extra sigue dentro del panel desplegable. */
.nav-ig-mobile{display:none}
/* Oculto en escritorio (display:none, no solo vacio): el nav-grid es un
   grid de 3 columnas (1fr auto 1fr), y este bloque es un 4º elemento que,
   aunque no se viera (sus hijos ya estaban en display:none), seguia
   ocupando una fila propia -> el "gap" del grid (pensado solo para
   separar columnas) se aplicaba tambien verticalmente hacia esa fila
   fantasma, dejando ~40px de hueco en blanco debajo del menu. Se muestra
   (display:flex) solo dentro del breakpoint movil, donde si hace falta. */
.nav-mobile-actions{display:none;align-items:center;gap:12px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(242,249,251,.4);border-radius:50px;padding:5px 13px;color:var(--foam);font-size:.8rem;font-weight:600;letter-spacing:.5px;transition:.3s var(--ease);flex:0 0 auto}
header.scrolled .lang-switch{color:var(--ink);border-color:rgba(18,49,61,.25)}
/* En pantallas tactiles no hay "hover" real: el movil simula el :hover al
   tocar y se queda "pegado" (p.ej. el icono de instagram se veia azul, o un
   boton se quedaba desplazado) hasta tocar otra parte de la pantalla. Con
   (hover:hover) estos efectos solo se aplican en dispositivos con raton. */
@media (hover:hover){
  .nav-links a.navlink:hover::after{width:100%}
  .nav-ig:hover{background:var(--copper);color:#0d2733;border-color:var(--copper);transform:translateY(-2px) rotate(-3deg)}
  .lang-switch:hover{background:rgba(242,249,251,.12);border-color:var(--foam)}
}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--foam);border-radius:3px;transition:.3s var(--ease)}
header.scrolled .burger span{background:var(--ink)}

/* ---- Logo de madera cayendo tipo lluvia (contenida dentro del hero:
   el hero tiene overflow:hidden y ocupa toda la pantalla, así que la
   caída recorre desde la navbar hasta abajo del todo) ---- */
.rain-drop{position:absolute;top:0;pointer-events:none;z-index:0;opacity:.8;
  animation:rainFall linear infinite backwards}
.rain-drop img{width:62px;height:auto;filter:drop-shadow(0 5px 10px rgba(11,92,130,.25))}
.rd-1{left:8%;animation-duration:11s;animation-delay:0s}
.rd-1 img{width:64px}
.rd-2{left:26%;animation-duration:14s;animation-delay:1.5s}
.rd-2 img{width:46px}
.rd-3{left:52%;animation-duration:12.5s;animation-delay:3s}
.rd-3 img{width:58px}
.rd-4{left:74%;animation-duration:15s;animation-delay:.5s}
.rd-4 img{width:50px}
.rd-5{left:91%;animation-duration:11.5s;animation-delay:2s}
.rd-5 img{width:32px}
.rd-6{left:17%;animation-duration:13s;animation-delay:4s}
.rd-6 img{width:26px}
.rd-7{left:38%;animation-duration:10s;animation-delay:6s}
.rd-7 img{width:40px}
.rd-8{left:63%;animation-duration:16s;animation-delay:2.5s}
.rd-8 img{width:34px}
.rd-9{left:83%;animation-duration:12s;animation-delay:5s}
.rd-9 img{width:36px}
.rd-10{left:96%;animation-duration:14s;animation-delay:1s}
.rd-10 img{width:38px}
@keyframes rainFall{
  0%{transform:translateY(-40px) rotate(-6deg);opacity:0}
  18%{opacity:.75}
  92%{opacity:.75}
  100%{transform:translateY(calc(100vh + 60px)) rotate(10deg);opacity:0}
}
/* En movil se manten­ía oculta (display:none); ahora se ve tambien ahí, solo
   un poco mas pequeña para que no se vea desproporcionada en pantallas estrechas. */
@media (max-width:980px){
  .rd-1 img{width:46px}
  .rd-2 img{width:34px}
  .rd-3 img{width:42px}
  .rd-4 img{width:36px}
  .rd-5 img{width:24px}
  .rd-6 img{width:18px}
  .rd-7 img{width:28px}
  .rd-8 img{width:24px}
  .rd-9 img{width:26px}
  .rd-10 img{width:27px}
}
@media (prefers-reduced-motion:reduce){.rain-drop{display:none}}

/* ---- Hero (portada centrada) ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:var(--foam);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 100% at 50% 0%, var(--blue-l), var(--blue-deep-d))}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,16,20,.58) 0%,rgba(10,16,20,.28) 42%,rgba(10,16,20,.66) 100%)}
.hero .container{padding-top:90px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-tag{display:inline-flex;align-items:center;gap:16px;font-size:.78rem;letter-spacing:5px;text-transform:uppercase;
  color:#fff;font-weight:600;margin-bottom:30px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-tag::before,.hero-tag::after{content:'';width:36px;height:1px;background:rgba(255,255,255,.55)}
.hero h1{font-size:clamp(3.2rem,9vw,6.4rem);letter-spacing:-1px;text-shadow:0 8px 40px rgba(0,0,0,.3)}
.hero h1 em{font-style:italic;color:var(--copper-l)}
.hero-logo{display:flex;justify-content:center;margin:0}
.hero-logo-img{width:clamp(260px,34vw,460px);height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 12px 44px rgba(0,0,0,.35))}
.hero p{max-width:560px;font-size:clamp(1.08rem,2.2vw,1.32rem);margin:22px auto 36px;color:#fff;font-weight:400;
  text-shadow:0 2px 16px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.btn-label-short{display:none}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(242,249,251,.7);
  font-size:.7rem;letter-spacing:3px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint i{width:1px;height:36px;background:linear-gradient(var(--copper),transparent);animation:scrollPulse 2s infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---- Secciones título ---- */
.sec{padding:clamp(70px,10vw,120px) 0;position:relative;overflow:hidden}
.sec-tag{display:inline-block;font-size:.72rem;letter-spacing:4px;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:14px}
.sec-title{font-size:clamp(2rem,5vw,3.2rem);color:var(--blue-deep);max-width:16ch}
.center{text-align:center}
.center .sec-title{margin-inline:auto}

/* ---- Fotos de fondo por sección ---- */
.sec-bg{position:absolute;inset:0;z-index:0}
.sec-bg img{width:100%;height:100%;object-fit:cover}
.sec-bg::after{content:'';position:absolute;inset:0}
.sec>.container{position:relative;z-index:1}
.about .sec-bg img{opacity:1}
.about .sec-bg::after{background:rgba(4,20,28,.32)}
.menu .sec-bg img{opacity:1;filter:saturate(1.1)}
.menu .sec-bg::after{background:none}
.contact .sec-bg img{opacity:1}
.contact .sec-bg::after{background:none}

/* ---- About ---- */
.about{background:var(--paper)}
.about .sec-tag{color:#fff;opacity:.95;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.about .sec-title{color:#fff;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"head media" "body media";column-gap:clamp(36px,6vw,80px);row-gap:0;align-items:start}
.about-head{grid-area:head}
.about-body{grid-area:body}
.about-body p{color:#fff;margin-top:18px;font-size:1.05rem;text-shadow:-1px -1px 0 rgba(0,0,0,.65),1px -1px 0 rgba(0,0,0,.65),-1px 1px 0 rgba(0,0,0,.65),1px 1px 0 rgba(0,0,0,.65),0 2px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5)}
.about-feats{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.feat{flex:1;min-width:120px;background:#fff;border:1px solid rgba(11,92,130,.08);border-radius:var(--radius);
  padding:20px 16px;text-align:center;box-shadow:var(--shadow-sm);transition:.4s var(--ease)}
@media (hover:hover){.feat:hover{transform:translateY(-6px);border-color:rgba(23,134,173,.5)}}
.feat svg{width:30px;height:30px;color:var(--copper);margin-bottom:10px}
.feat b{display:block;font-size:.95rem;color:var(--blue-deep)}
.about-media{grid-area:media;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:clamp(360px,46vw,520px)}
.about-media figure{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.about-media figure:first-child{grid-row:1/3}
.about-media img,.about-media video{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.about-media figure:hover img,.about-media figure:hover video{transform:scale(1.07)}}
.about-media-video{display:block;height:auto}
.about-media-video .about-video{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.about-media-video .about-video img,.about-media-video .about-video video{width:100%;height:100%;object-fit:cover;object-position:center}

/* ---- Menú ---- */
.menu{background:#fff;color:var(--ink)}
.menu .sec-title{color:#fff;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.menu .sec-tag{color:#fff;opacity:.95;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.menu-note{color:#fff;font-size:.95rem;margin-top:10px;text-shadow:-1px -1px 0 rgba(0,0,0,.65),1px -1px 0 rgba(0,0,0,.65),-1px 1px 0 rgba(0,0,0,.65),1px 1px 0 rgba(0,0,0,.65),0 2px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5)}
.menu-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:38px 0 44px}
.menu-tab{padding:10px 22px;border-radius:50px;border:1.5px solid rgba(11,92,130,.25);
  color:var(--blue-deep);background:#fff;font-family:inherit;font-size:.92rem;font-weight:600;transition:.3s var(--ease);
  touch-action:manipulation}
@media (hover:hover){.menu-tab:hover{border-color:var(--copper)}}
.menu-tab.active{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.menu-panel{display:none;max-width:1060px;margin-inline:auto}
.menu-panel.active{display:block;animation:fadeUp .5s var(--ease)}

/* Lista simple (bebidas: sin foto) */
.menu-list{max-width:820px;margin-inline:auto}
.menu-item{display:flex;align-items:baseline;gap:14px;padding:18px 4px;border-bottom:1px dashed rgba(11,92,130,.18)}
.menu-item:last-child{border-bottom:0}
.menu-item .mi-main{flex:1}
.menu-item h4{font-family:'Inter',sans-serif;font-size:1.08rem;font-weight:600;color:var(--ink)}
.menu-item p{font-size:.9rem;color:var(--muted);margin-top:2px}
.menu-item .dots{flex:1;border-bottom:1px dotted rgba(11,92,130,.3);transform:translateY(-4px);min-width:18px}
.menu-item .mi-price{font-family:'Sora',sans-serif;font-weight:700;color:var(--copper-d);white-space:nowrap;font-size:1.05rem}

/* Rejilla de platos con foto */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.dish-card{background:#fff;border:1px solid rgba(11,92,130,.1);border-radius:var(--radius);
  overflow:hidden;transition:.4s var(--ease);box-shadow:var(--shadow-sm)}
.dish-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sea-soft)}
.dish-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){
  .dish-card:hover{transform:translateY(-5px);border-color:rgba(23,134,173,.5);box-shadow:var(--shadow)}
  .dish-card:hover .dish-photo img{transform:scale(1.08)}
}
.dish-soon{position:absolute;left:10px;bottom:10px;background:rgba(7,59,84,.8);color:#fff;
  font-size:.66rem;letter-spacing:.5px;font-weight:600;padding:5px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(3px)}
.dish-info{padding:16px 18px 20px}
.dish-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px}
.dish-top h4{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:600;color:var(--ink);min-width:0}
.dish-price{font-family:'Sora',sans-serif;font-weight:700;color:var(--copper-d);white-space:nowrap;font-size:1rem}
.dish-info p{font-size:.88rem;color:var(--muted);margin-top:6px}

.allergen{display:flex;align-items:center;gap:12px;max-width:820px;margin:38px auto 0;
  background:rgba(23,134,173,.12);border:1px solid rgba(23,134,173,.4);border-radius:14px;padding:14px 20px;
  color:var(--ink);font-size:.92rem}
.allergen svg{width:22px;height:22px;color:var(--copper-d);flex:0 0 auto}

/* ---- Galería mosaico ---- */
.gallery{background:var(--paper)}
.gallery .sec-bg img{opacity:1}
.gallery .sec-bg::after{background:none}
.gallery .sec-tag{color:#fff;opacity:.95;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.gallery .sec-title{color:#fff;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.grid-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;grid-auto-flow:dense;gap:14px;margin-top:40px}
.grid-mosaic figure{overflow:hidden;border-radius:var(--radius);position:relative;box-shadow:var(--shadow-sm)}
.grid-mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.grid-mosaic figure::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(7,59,84,.5));opacity:0;transition:.4s var(--ease)}
@media (hover:hover){
  .grid-mosaic figure:hover img{transform:scale(1.08)}
  .grid-mosaic figure:hover::after{opacity:1}
}
.g-wide{grid-column:span 2}
.g-tall{grid-row:span 2}
.grid-mosaic img.obj-top{object-position:center top}

/* ---- Contacto + Mapa ---- */
.contact{background:#fff}
.contact .sec-tag{color:#fff;opacity:.95;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.contact .sec-title{color:#fff;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,60px);align-items:stretch}
.info-card{background:var(--paper);border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-sm);border:1px solid rgba(11,92,130,.07);min-width:0}
.info-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(11,92,130,.08)}
.info-row:last-of-type{border-bottom:0}
.info-ic{width:46px;height:46px;border-radius:12px;background:var(--blue-deep);color:var(--copper-l);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.info-ic svg{width:20px;height:20px}
.info-row h4{font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.info-row p,.info-row a{font-size:1.05rem;color:var(--ink);font-weight:500}
@media (hover:hover){.info-row a:hover{color:var(--copper)}}
.hours-list{margin-top:6px;width:100%}
/* flex-wrap:wrap SIEMPRE en la fila (no solo en ".today"): si el nombre del
   dia + el horario no caben en una linea -viernes/sabado llevan dos franjas,
   "12:30-16:00 · 20:30-00:00", o el movil tiene la letra del sistema mas
   grande de lo normal (mucha gente sube el tamaño de fuente por accesibilidad)-
   el horario pasa el solo a su propia linea debajo en vez de salirse de la
   tarjeta. Antes esto dependia de un ancho de pantalla concreto (400px) y
   fallaba con texto mas grande o con moviles normales de 412-430px. */
.hours-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:5px 0;font-size:.96rem;color:var(--ink)}
.hours-row>.h-day,.hours-row>span:first-child{flex:0 0 auto}
.hours-row>span:last-child{white-space:normal;text-align:right;flex:1 1 auto;min-width:0}
@media (max-width:480px){
  /* La fila de "hoy" lleva ademas la etiqueta HOY, que le quita mucho ancho
     al nombre del dia y deja casi sin sitio al horario: en vez de intentar
     encajarlo apretado (se solapaba con la fila de arriba), el horario de
     hoy pasa a su propia linea debajo. Umbral subido de 400 a 480px para
     cubrir los moviles mas comunes (412-430px de ancho). */
  .hours-row.today{flex-wrap:wrap}
  .hours-row.today>.h-day{flex:1 1 100%}
  .hours-row.today>span:last-child{flex:1 1 100%;text-align:left;margin-top:2px}
}
.hours-row.today{color:var(--blue-deep);font-weight:700}
.hours-row.today .h-day{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.hours-row.today .h-day::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px rgba(23,134,173,.18)}
.hours-badge{display:inline-block;flex:0 0 auto;white-space:nowrap;margin-left:8px;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;background:var(--copper);color:#0d2733;padding:2px 8px;border-radius:20px;font-weight:700}
.hours-note{font-size:.8rem;color:var(--muted);margin-top:10px;font-style:italic}
.map-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);min-height:380px}
.map-wrap #map{position:absolute;inset:0;filter:saturate(.92)}
.map-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;padding:24px;
  background:linear-gradient(transparent 60%,rgba(7,59,84,.35));transition:.5s var(--ease)}
@media (hover:hover){
  .map-wrap:hover{box-shadow:0 26px 70px rgba(7,59,84,.3)}
  .map-wrap:hover .leaflet-pane{transform:scale(1.06);transition:transform 1.1s var(--ease)}
}
.leaflet-pane{transition:transform 1.1s var(--ease)}
.map-cta{pointer-events:auto}

/* ---- Marcador del mapa: logo real de A Marola a modo de pin ---- */
.leaflet-div-icon,.marola-pin{background:none!important;border:0!important}
.marola-pin-badge{width:104px;height:44px;background:#fff;border-radius:12px;border:2px solid var(--blue-deep);
  box-shadow:0 8px 20px rgba(7,59,84,.35);display:flex;align-items:center;justify-content:center;padding:6px 10px}
.marola-pin-badge img{width:100%;height:100%;object-fit:contain}
.marola-pin-tail{width:0;height:0;margin:-1px auto 0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid var(--blue-deep)}
.osm-credit{position:absolute;right:8px;bottom:6px;z-index:6;font-size:.62rem;color:rgba(255,255,255,.85);
  background:rgba(7,59,84,.45);padding:2px 7px;border-radius:6px;letter-spacing:.2px}
.osm-credit a{text-decoration:underline}

/* ---- Footer ---- */
footer{position:relative;background:var(--blue-deep-d);color:rgba(242,249,251,.85);padding:64px 0 30px;overflow:hidden;text-shadow:0 2px 10px rgba(0,0,0,.4)}
footer>.container{position:relative;z-index:1}
footer .sec-bg img{opacity:1;mix-blend-mode:luminosity}
footer .sec-bg::after{background:rgba(7,59,84,.5)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:18px}
.foot-logo-img{width:clamp(120px,16vw,170px);height:auto;flex:0 0 auto;filter:brightness(0) invert(1)}
.foot-brand p{font-size:.9rem;color:rgba(242,249,251,.6);max-width:280px;margin-top:4px}
.foot-links{display:flex;flex-direction:column;gap:10px}
.foot-links a{font-size:.95rem;transition:.3s var(--ease)}
.foot-social a{display:inline-flex;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;border:1px solid rgba(242,249,251,.25);transition:.3s var(--ease)}
@media (hover:hover){
  .foot-links a:hover{color:var(--copper-l);padding-left:4px}
  .foot-social a:hover{background:var(--copper);color:#0d2733;transform:translateY(-3px)}
}
.foot-social svg{width:19px;height:19px}
.foot-legal{border-top:1px solid rgba(242,249,251,.12);margin-top:40px;padding-top:24px;text-align:center}
.foot-copy{font-family:'Sora',sans-serif;color:var(--foam);font-size:1rem;margin-bottom:14px}
.foot-disc{font-size:.74rem;color:rgba(242,249,251,.5);max-width:760px;margin:0 auto;line-height:1.6}
.foot-disc + .foot-disc{margin-top:8px}
.foot-credit{font-size:.78rem;color:rgba(242,249,251,.55);margin-top:14px}
.foot-credit a{color:var(--copper-l);font-weight:700;letter-spacing:.2px;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.foot-credit a:hover{color:#fff}}

/* ---- Animaciones scroll ---- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-x{opacity:0;transform:translateX(-46px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-x.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-scale.in{opacity:1;transform:none}
.reveal-blur{opacity:0;filter:blur(12px);transition:opacity 1s var(--ease),filter 1s var(--ease)}
.reveal-blur.in{opacity:1;filter:blur(0)}
[data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}[data-delay="4"]{transition-delay:.32s}[data-delay="5"]{transition-delay:.4s}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---- Reseñas (carrusel) ---- */
.reviews{background:linear-gradient(180deg,#ffffff 0%,var(--paper) 100%);overflow:hidden}
.reviews .sec-bg img{opacity:1}
.reviews .sec-bg::after{background:none}
.reviews .sec-tag{color:#fff;opacity:.95;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.reviews .sec-title{color:#fff;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.rev-rating{display:inline-flex;align-items:center;gap:10px;margin-top:16px;color:#fff;font-size:.98rem;font-weight:500;text-shadow:-1px -1px 0 rgba(0,0,0,.65),1px -1px 0 rgba(0,0,0,.65),-1px 1px 0 rgba(0,0,0,.65),1px 1px 0 rgba(0,0,0,.65),0 2px 10px rgba(0,0,0,.5)}
.rev-rating .rev-stars{color:var(--copper);letter-spacing:2px;font-size:1.1rem}
.rev-marquee{margin-top:46px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rev-track{display:flex;gap:24px;width:max-content;animation:revScroll 60s linear infinite;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
@keyframes revScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rev-card{flex:0 0 min(370px,82vw);background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(11,92,130,.1);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:28px 30px;display:flex;flex-direction:column;gap:14px}
.rev-card .rev-stars{color:var(--copper);letter-spacing:2px;font-size:1.05rem}
.rev-card blockquote{font-size:1.02rem;line-height:1.6;color:var(--ink);flex:1;font-style:italic}
.rev-card blockquote::before{content:'\201C';font-family:'Sora',sans-serif;color:var(--copper);font-size:1.4rem;margin-right:2px}
.rev-card figcaption{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(11,92,130,.08);padding-top:14px}
.rev-g{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid rgba(11,92,130,.12);
  display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-weight:700;font-size:1rem;color:#4285F4;flex:0 0 auto;
  box-shadow:0 2px 6px rgba(0,0,0,.06)}
.rev-meta{display:flex;flex-direction:column;line-height:1.2}
.rev-meta b{color:var(--muted);font-size:.86rem;font-weight:600}
@media (prefers-reduced-motion:reduce){.rev-track{animation-duration:120s}}

/* ---- Menú del día (banner) ----
   La foto del mar va sin velo de color (a petición expresa), así que el
   texto se resuelve en blanco con sombra marcada (se lee bien pase lo
   que pase detrás) más un oscurecido suave solo del lado del texto,
   que se desvanece hacia el lado de la foto del plato. */
.daymenu{background:var(--copper);color:#fff;padding:clamp(46px,7vw,70px) 0}
.daymenu .sec-bg img{opacity:1;filter:saturate(1.05)}
.daymenu .sec-bg::after{background:linear-gradient(100deg,rgba(4,20,28,.6) 0%,rgba(4,20,28,.4) 42%,rgba(4,20,28,.08) 64%,transparent 78%)}
.daymenu-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
.daymenu .sec-tag{color:#fff;opacity:.95;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.daymenu .sec-title{color:#fff;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.daymenu-txt p{font-size:1.08rem;margin-top:14px;max-width:52ch;color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,.65),1px -1px 0 rgba(0,0,0,.65),-1px 1px 0 rgba(0,0,0,.65),1px 1px 0 rgba(0,0,0,.65),0 2px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5)}
.daymenu-note{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:.86rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);
  background:rgba(4,20,28,.4);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:14px 18px;backdrop-filter:blur(2px)}
.daymenu-note svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.daymenu-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 22px 50px rgba(42,22,8,.28);
  border:6px solid #fff;transform:rotate(-1.5deg)}
.daymenu-photo img{width:100%;display:block;object-fit:cover;aspect-ratio:4/3}

/* ---- Carta de vinos (fotos de producto, estilo image-forward) ---- */
.wine{background:var(--paper);color:var(--ink)}
.wine .sec-bg img{opacity:1;object-position:top center}
.wine .sec-bg::after{background:none}
.wine .sec-title{color:#fff;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.wine .sec-tag{color:#fff;opacity:.95;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.wine-note{color:#fff;font-size:.95rem;margin-top:10px;max-width:60ch;margin-inline:auto;text-shadow:-1px -1px 0 rgba(0,0,0,.65),1px -1px 0 rgba(0,0,0,.65),-1px 1px 0 rgba(0,0,0,.65),1px 1px 0 rgba(0,0,0,.65),0 2px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5)}
.wine-list{display:flex;flex-direction:column;gap:50px;margin-top:44px;text-align:left}
.wine-block-h{font-family:'Sora',sans-serif;font-size:1.5rem;color:#fff;margin-bottom:22px;
  display:flex;align-items:center;gap:12px;text-shadow:-2px -2px 0 rgba(0,0,0,.65),2px -2px 0 rgba(0,0,0,.65),-2px 2px 0 rgba(0,0,0,.65),2px 2px 0 rgba(0,0,0,.65),0 4px 22px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.55)}
.wine-block-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.5),transparent)}
.wine-grp{margin-bottom:26px}
.wine-grp:last-child{margin-bottom:0}
.wine-grp-h{display:inline-block;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:#fff;opacity:.95;margin-bottom:12px;text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}
.wine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 20px}
.wine-item{display:flex;flex-direction:column;border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.35s var(--ease)}
.wine-thumb{width:100%;aspect-ratio:14/25;flex:none;overflow:hidden;padding:16px 14px 8px;box-sizing:border-box;
  background:linear-gradient(180deg,#f5f2ea,#e9e3d5);display:flex;align-items:center;justify-content:center}
.wine-thumb img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  transition:transform .8s var(--ease)}
@media (hover:hover){
  .wine-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .wine-item:hover .wine-thumb img{transform:scale(1.05)}
}
.wine-thumb-icon{display:flex;align-items:center;justify-content:center;color:var(--teal);background:var(--sea-soft)}
.wine-thumb-icon svg{width:48px;height:48px}
.wine-info{padding:14px 16px 0}
.wine-item b{display:block;font-family:'Inter',sans-serif;font-weight:600;color:var(--ink);font-size:1.02rem;
  white-space:normal;line-height:1.3}
.wine-price{font-family:'Sora',sans-serif;font-weight:700;color:var(--copper-d);font-size:.98rem;padding:6px 16px 16px;display:block}
@media (max-width:1000px){
  .wine-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .wine-grid{grid-template-columns:repeat(2,1fr);gap:12px 12px}
  .wine-thumb{aspect-ratio:13/20;padding:14px 10px 6px}
  .wine-thumb-icon svg{width:34px;height:34px}
  .wine-info{padding:10px 10px 0}
  .wine-item b{font-size:.86rem;line-height:1.25}
  .wine-price{font-size:.86rem;padding:4px 10px 12px}
}
@media (max-width:860px){.daymenu-grid{grid-template-columns:1fr}.daymenu-photo{order:-1}}

/* ===========================================================
   INTRO · CORTINA DE MAROLA
   Guion: sobre la foto real del mar, el nombre emerge desde abajo ->
   un destello de sol lo cruza -> se abre una onda expansiva desde el centro,
   como una gota en el mar, y aparece la fachada. Sólo se anima transform/opacity
   y una máscara radial (compuesto en GPU).
   =========================================================== */
:root{
  --i-logo:     150ms;   /* el nombre empieza a subir desde abajo */
  --i-logo-dur:1150ms;   /* lo que tarda en llegar al centro */
  --i-open:    1600ms;   /* se abre la onda */
  --i-open-dur:1900ms;   /* lo que tarda en abrirse */
  --i-out:     1600ms;   /* se va el nombre, a la vez que se abre la onda */
}
.intro{position:fixed;inset:0;z-index:120;overflow:hidden}
.intro-defs{position:absolute;width:0;height:0;overflow:hidden}

/* La cortina única: se "abre" como una onda expansiva, igual que una
   gota de agua al caer al mar. Del centro (donde está el nombre) salen
   anillos concéntricos de onda que se alejan revelando la fachada real
   por detrás, con un par de "crestas" de eco que van justo por delante
   del borde ya revelado. --iris-r se anima como porcentaje real
   (registrado con @property) para que el navegador interpole el radio
   con suavidad; animar el gradiente entero, de un tirón, no interpola
   bien entre navegadores. */
@property --iris-r{
  syntax:'<percentage>';
  inherits:false;
  initial-value:0%;
}
.intro-curtain{
  position:absolute;inset:0;
  --iris-r:0%;
  will-change:--iris-r;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    transparent 0%, transparent calc(var(--iris-r) - 11%),
    rgba(0,0,0,.42) calc(var(--iris-r) - 8.5%), transparent calc(var(--iris-r) - 6%),
    rgba(0,0,0,.6) calc(var(--iris-r) - 3%), transparent calc(var(--iris-r) - 1%),
    #000 var(--iris-r), #000 100%);
  mask-image:radial-gradient(circle at 50% 50%,
    transparent 0%, transparent calc(var(--iris-r) - 11%),
    rgba(0,0,0,.42) calc(var(--iris-r) - 8.5%), transparent calc(var(--iris-r) - 6%),
    rgba(0,0,0,.6) calc(var(--iris-r) - 3%), transparent calc(var(--iris-r) - 1%),
    #000 var(--iris-r), #000 100%);
  animation:irisOpen var(--i-open-dur) cubic-bezier(.5,.05,.35,1) var(--i-open) both;
}
@keyframes irisOpen{to{--iris-r:100%}}

/* Anillo de luz que viaja justo por delante del borde revelado: un brillo
   real (no solo transparencia en la máscara) para que la onda se note con
   claridad, como la cresta blanca de una ola / el borde de una gota al
   expandirse en el agua. */
.intro-ring{
  position:absolute;top:50%;left:50%;
  width:1px;height:1px;border-radius:50%;
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  box-shadow:
    0 0 0 .9vmax rgba(255,255,255,.85),
    0 0 2.6vmax 1vmax rgba(255,255,255,.55),
    0 0 6vmax 2.2vmax rgba(224,250,248,.28);
  opacity:0;
  will-change:width,height,opacity;
  animation:introRing var(--i-open-dur) cubic-bezier(.5,.05,.35,1) var(--i-open) both;
}
@keyframes introRing{
  0%   {width:1px;height:1px;opacity:0}
  6%   {opacity:1}
  78%  {opacity:.85}
  100% {width:180vmax;height:180vmax;opacity:0}
}
@media (prefers-reduced-motion:reduce){.intro-ring{display:none}}

/* Base: foto real del mar de fondo, sin velo. Tapa la fachada hasta que
   se abre la onda. */
.intro-base{position:absolute;inset:0;background:
  url('img/local/fondo-mar.webp') center/cover no-repeat,
  var(--blue-deep)}

/* El nombre: emerge desde abajo, como si saliera del agua, sobre un
   cartel de madera rústico (con cuerda y algas) en vez de un recuadro
   liso. La imagen ya trae su propia forma (fondo transparente), así que
   el "cuadro" es el propio PNG: sin color de fondo ni bordes. */
.intro-logo-wrap{position:absolute;inset:0;display:grid;place-items:center}
.intro-logo-box{
  position:relative;width:min(88vw,700px);aspect-ratio:1000/750;
  display:flex;align-items:center;justify-content:center;padding:0 8%;
  background:url('img/local/cartel-madera.webp') center/contain no-repeat;
  opacity:0;transform:translate3d(0,calc(50vh + 62%),0) scale(.92);
  will-change:transform,opacity;
  animation:
    introWordRise var(--i-logo-dur) cubic-bezier(.14,.86,.22,1) var(--i-logo) both,
    introWordOut  350ms cubic-bezier(.35,0,.7,1) var(--i-out) forwards;
}
.intro-word{display:flex;justify-content:center}
.intro-logo-img{width:clamp(210px,38vw,400px);height:auto;filter:brightness(0) invert(1) drop-shadow(0 4px 14px rgba(4,20,28,.55))}
@keyframes introWordRise{
  0%   {opacity:0;transform:translate3d(0,calc(50vh + 62%),0) scale(.92);filter:blur(8px)}
  14%  {opacity:1}
  46%  {filter:blur(0)}
  100% {opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes introWordOut{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(0,0,0) scale(1.015)}}
@keyframes introWordFade{from{opacity:0}to{opacity:1;transform:none}}

.intro.gone{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}

@media (prefers-reduced-motion:reduce){
  .intro-logo-box{animation:introWordFade 260ms ease both}
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr;grid-template-areas:"head" "media" "body";row-gap:22px}
  .about-media{height:auto;grid-template-rows:220px 220px;margin-top:0}
  .contact-grid{grid-template-columns:1fr}
  .map-wrap{min-height:340px}
  .grid-mosaic{grid-auto-rows:170px}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* En movil el "zoom" de reveal-scale al hacer scroll molesta mas que ayuda:
     se deja solo el fundido de opacidad, sin escalar. */
  .reveal-scale{transform:none}
  .reveal-scale.in{transform:none}
  .nav-grid{grid-template-columns:1fr auto 1fr}
  .brand{grid-column:2}
  .nav-mobile-actions{display:flex;grid-column:3;justify-self:end}
  .nav-ig-mobile{display:inline-flex;width:34px;height:34px;border:0}
  .nav-links{position:fixed;left:auto;right:0;width:min(70vw,280px);flex-direction:column;
    background:rgba(7,59,84,.98);backdrop-filter:blur(10px);
    transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.4)}
  .nav-links-left{top:0;bottom:44%;justify-content:center;gap:22px;padding:88px 28px 0}
  .nav-links-right{top:56%;bottom:0;justify-content:flex-start;gap:18px;padding:26px 28px 0;
    border-top:1px solid rgba(242,249,251,.15)}
  .nav-extra{margin-left:0;padding-left:0}
  .nav-links.open{transform:translateX(0)}
  .nav-links a.navlink{font-size:1.2rem}
  /* El panel movil siempre tiene fondo azul oscuro (con header en scroll o sin
     el), asi que el texto debe quedarse blanco siempre: la regla pensada para
     el menu de escritorio (texto oscuro cuando el header se vuelve claro al
     hacer scroll) no debe aplicar aqui. */
  header.scrolled .nav-links a.navlink{color:var(--foam)}
  .burger{display:flex;z-index:1100}
  body.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .grid-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .g-wide{grid-column:span 2}
  .g-tall{grid-row:span 1}
  .hero p{font-size:1.05rem}
  .hero-cta .btn{flex:1;justify-content:center}
  .btn-label-full{display:none}
  .btn-label-short{display:inline}
  .menu-grid{gap:14px}
  .dish-info{padding:12px 14px 16px}
  .dish-top h4{font-size:.94rem}
  .dish-price{font-size:.9rem}
  .dish-info p{font-size:.8rem}
}
@media (max-width:430px){
  .grid-mosaic{grid-auto-rows:135px}
  .menu-item p{font-size:.84rem}
  .about-feats{gap:10px}
}

/* La foto del rincón de la ventana se mantiene "alta" (2 filas) tambien en
   movil, para no tener que repetirla en pequeño en otra celda del mosaico. */
.g-window{grid-row:span 2}