/* Melelé · Cocina de territorios
   Paleta: arena, manglar, mar abierto y achiote */
:root{
  --arena:#f2e9d8;
  --arena-2:#e8dcc4;
  --mar:#0e4f5c;
  --fondo:#0a2f37;
  --tinta:#132a2f;
  --achiote:#e0603a;
  --espuma:#cfe6e2;
  --gris:#5d6b6a;
  --display:"Abril Fatface", Georgia, serif;
  --texto:"Karla", system-ui, sans-serif;
  --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--arena);color:var(--tinta);font:400 17px/1.6 var(--texto);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--achiote);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--mar);color:#fff;padding:8px 14px;z-index:99}
.saltar:focus{left:8px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;letter-spacing:-.01em;margin:0;text-wrap:balance}
em{font-style:normal;color:var(--achiote)}
p{text-wrap:pretty}

.etiqueta{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mar);margin:0 0 16px}
.etiqueta-clara{color:var(--espuma)}
.h2{font-size:clamp(2.4rem,6vw,4.6rem)}
.sec-cabeza{max-width:1180px;margin:0 auto 40px;padding:0 22px}
.sec-sub{max-width:52ch;opacity:.85;margin:14px 0 0}

/* Botones: la ola que sube al pasar */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;text-decoration:none;overflow:hidden;isolation:isolate;border:2px solid transparent;transition:color .3s}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--tinta);transform:translateY(102%);border-radius:40% 40% 0 0;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-radius .45s}
.btn:hover::before{transform:translateY(0);border-radius:0}
.btn-ola{background:var(--achiote);color:#fff}
.btn-linea{border-color:currentColor}
.btn-linea:hover{color:var(--arena)}
.btn-arena{background:var(--arena);color:var(--tinta)}
.btn-arena:hover{color:var(--arena)}
.btn-chico{min-height:42px;padding:0 18px;font-size:.92rem}

/* Barra */
.barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:12px max(18px,env(safe-area-inset-left)) 12px max(18px,env(safe-area-inset-right));background:rgba(242,233,216,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(19,42,47,.08)}
.marca{display:flex;flex-direction:column;text-decoration:none;line-height:1}
.marca-nombre{font-family:var(--display);font-size:1.7rem;color:var(--mar)}
.marca-sub{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-top:3px}
.barra-nav{display:none;gap:26px;margin-left:auto;font-weight:500}
.barra-nav a{text-decoration:none;position:relative}
.barra-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--achiote);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.barra-nav a:hover::after{transform:scaleX(1)}
.estado{margin-left:auto;font-size:.8rem;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--arena-2);white-space:nowrap}
.estado.abierto{background:#cfe9d9;color:#15553a}
.estado.cerrado{background:#f3d6cc;color:#8a2e12}
@media (min-width:900px){.barra-nav{display:flex}.estado{margin-left:0}}
@media (max-width:420px){.estado{display:none}.barra .btn-chico{margin-left:auto}}

/* Hero */
.hero{max-width:1240px;margin:0 auto;padding:34px 22px 50px;display:grid;gap:36px;align-items:center}
.titular{font-size:clamp(3rem,10.5vw,7.4rem);line-height:.95;color:var(--tinta)}
.t-linea{display:block}
.flota{display:inline-block;animation:flotar 4.5s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.06em) rotate(-1.2deg)}}
.hero-sub{font-size:1.1rem;max-width:44ch;margin:22px 0 26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.boya{display:inline-flex;align-items:center;gap:14px;margin-top:28px;text-decoration:none;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;box-shadow:0 10px 30px -18px rgba(10,47,55,.5)}
.boya-num{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--mar);color:var(--arena);font-family:var(--display);font-size:1.5rem}
.boya-txt{display:flex;flex-direction:column;font-size:.92rem}
.estrellas{position:relative;color:#d9cdb5;letter-spacing:2px;font-size:1.05rem;line-height:1}
.estrellas span{position:absolute;inset:0;width:calc(var(--nota)*100%);overflow:hidden;color:#e8a33a;white-space:nowrap}
.hero-foto{position:relative;aspect-ratio:4/5;max-height:78vh;border-radius:240px 240px var(--r) var(--r);background:radial-gradient(120% 90% at 50% 100%,#14707f,var(--fondo));overflow:hidden}
.burbujas{position:absolute;inset:0;width:100%;height:100%}
.arco{position:absolute;inset:9% 9% 12%;margin:0;border-radius:220px 220px 18px 18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.arco img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
.foto-ref{position:absolute;right:16px;bottom:10px;margin:0;font-size:.72rem;color:var(--espuma);opacity:.8}
@media (min-width:900px){.hero{grid-template-columns:1.1fr .9fr;padding-top:60px;min-height:calc(100svh - 70px)}}

/* Olas que corren */
.ola{line-height:0;overflow:hidden;background:var(--arena)}
.ola svg{width:200%;height:70px;animation:correr 14s linear infinite}
.ola path{fill:var(--mar)}
.ola-b{background:var(--arena);transform:none}
.ola-b path{fill:var(--fondo)}
@keyframes correr{to{transform:translateX(-50%)}}

/* Platos */
.platos{background:var(--mar);color:var(--arena);padding:40px 0 90px}
.platos .em,.platos em{color:#ffb08f}
.platos-grid{max-width:1180px;margin:0 auto;padding:0 22px;display:grid;gap:30px}
.lista-platos{list-style:none;margin:0;padding:0;border-top:1px solid rgba(242,233,216,.2)}
.plato{width:100%;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;text-align:left;background:none;border:0;border-bottom:1px solid rgba(242,233,216,.2);color:inherit;font:inherit;padding:18px 4px;cursor:pointer;transition:background .3s,padding .3s}
.p-num{grid-row:span 2;font-size:.8rem;font-weight:700;opacity:.6;padding-top:8px}
.p-nom{font-family:var(--display);font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.1}
.p-det{font-size:.95rem;opacity:.75}
.plato:hover,.plato.activo{background:rgba(242,233,216,.07);padding-left:14px}
.plato.activo .p-nom{color:#ffb08f}
.visor-plato{margin:0;position:sticky;top:90px;align-self:start}
.visor-marco{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--fondo)}
.vp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp-nueva{clip-path:circle(0% at 50% 100%)}
.visor-plato figcaption{font-size:.85rem;opacity:.75;margin-top:12px}
.viche{max-width:1180px;margin:60px auto 0;padding:30px 22px;display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;border-top:1px dashed rgba(242,233,216,.35)}
.viche-et{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--espuma)}
.viche-txt{margin:0;font-size:1.25rem;flex:1 1 320px}
@media (max-width:899px){
  .visor-plato{order:-1;top:70px;z-index:2;background:var(--mar);padding-bottom:6px}
  .visor-marco{aspect-ratio:16/9}
  .visor-plato figcaption{font-size:.75rem;margin-top:6px}
}
@media (min-width:900px){.platos-grid{grid-template-columns:1fr 1fr;gap:56px}}

/* Territorio */
.territorio{background:var(--fondo);color:var(--arena);padding:80px 22px 70px;display:grid;gap:30px;align-items:center}
.territorio>*{max-width:560px}
.terr-texto p{font-size:1.08rem;opacity:.9}
.mapa{margin:0 auto;width:100%;max-width:420px}
.mapa svg{width:100%;height:auto;overflow:visible}
.costa{fill:none;stroke:var(--espuma);stroke-width:3;stroke-linecap:round}
.costa-2{stroke-width:1.2;opacity:.35}
.ruta{fill:none;stroke:var(--achiote);stroke-width:3;stroke-dasharray:4 9;stroke-linecap:round}
.punto{fill:var(--achiote)}
.punto-halo{fill:none;stroke:var(--achiote);stroke-width:2;transform-origin:318px 176px;animation:halo 2.4s ease-out infinite}
@keyframes halo{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.mapa-et{fill:var(--espuma);font:500 14px var(--texto);letter-spacing:.12em;text-transform:uppercase}
.mapa-et-2{fill:#fff;font:400 22px var(--display);letter-spacing:0;text-transform:none}
@media (min-width:900px){.territorio{grid-template-columns:1fr 1fr;justify-content:center;gap:70px;padding:110px max(22px,calc((100vw - 1180px)/2))}}

/* Opiniones */
.opiniones{max-width:1180px;margin:0 auto;padding:80px 22px;display:grid;gap:34px}
.op-num{font-size:clamp(5rem,16vw,9rem);color:var(--mar)}
.op-num small{font-size:.35em;color:var(--gris)}
.op-nota p{margin:6px 0 0}
.op-lead{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.2;margin:0 0 26px}
mark{background:linear-gradient(transparent 62%,rgba(224,96,58,.35) 62%);color:inherit;padding:0 .08em}
.ventajas{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:10px}
.ventajas li{border:1.5px solid var(--mar);color:var(--mar);border-radius:999px;padding:8px 16px;font-weight:700;font-size:.92rem}
@media (min-width:900px){.opiniones{grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center}}

/* Visita */
.visita{max-width:1240px;margin:0 auto;padding:30px 22px 90px;display:grid;gap:30px}
.direccion{font-size:1.1rem;margin:10px 0 24px}
.horario{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-bottom:26px}
.horario th,.horario td{text-align:left;padding:10px 6px;border-bottom:1px solid rgba(19,42,47,.12)}
.horario th{font-weight:500}
.horario tr.hoy{background:var(--arena-2);font-weight:700}
.horario tr.hoy th::after{content:" · hoy";color:var(--achiote)}
.visita-cta{display:flex;flex-wrap:wrap;gap:10px}
.visita-mapa{min-height:340px;border-radius:var(--r);overflow:hidden;background:var(--arena-2)}
.visita-mapa iframe{width:100%;height:100%;min-height:340px;border:0}
@media (min-width:900px){.visita{grid-template-columns:1fr 1fr;gap:56px}}

/* Pie */
.pie{background:var(--fondo);color:var(--arena);text-align:center;padding:50px 22px calc(110px + env(safe-area-inset-bottom))}
.pie p{margin:6px 0}
.pie-marca{font-family:var(--display);font-size:2rem}
.pie-marca span{display:block;font:700 .72rem var(--texto);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.pie-chico{font-size:.82rem;opacity:.7}
.pie-rdw{margin-top:22px!important;font-size:.85rem;opacity:.85}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform .3s}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:32px;height:32px;fill:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}