/* ══════════════════════════════════════════════════════════════════
   Kohala Poké
   Sistema visual heredado del mockup de Celicioso (estudio-1), que es
   el listón que marcó Ruben: casi monocromo, una sola tipografía en
   peso ligero, mucho aire, esquinas de 26 px. El color de marca entra
   con cuentagotas — rellenos e iconos, nunca fondos enteros.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── paleta ─────────────────────────────────────────────────── */
  --crema:#fbfaf7;          /* blanco roto, más frío que el beige de pastelería */
  --crema-hondo:#f2f0ea;    /* banda alterna */
  --blanco:#fff;
  --tinta:#10201e;          /* casi negro con verde de mar dentro */
  --texto:#3f4f4c;          /* cuerpo */
  --atenuado:#6a7a77;       /* secundario, 4,9:1 sobre el blanco roto */
  /* los dos colores están MEDIDOS sobre el logo original (img/logo.png):
     la menta del círculo y el coral de los hibiscos. No se inventan. */
  --teal:#3fb8ac;           /* menta del logo: bandas, botones, rellenos */
  --teal-hondo:#1d7a72;     /* la misma menta, oscurecida, para TEXTO sobre claro */
  --teal-agua:#e6f5f3;      /* lavado de agua para fondos suaves */
  --coral:#ee7265;          /* coral del hibisco: segundo acento */
  --coral-texto:#c8503f;    /* el coral cuando va en TEXTO, por contraste */
  --linea:rgba(16,32,30,.10);
  --linea-suave:rgba(16,32,30,.06);

  /* ── forma ──────────────────────────────────────────────────── */
  --radio:32px;
  --radio-chico:22px;
  --sombra:0 30px 70px -38px rgba(16,32,30,.26);
  --sombra-suave:0 14px 36px -26px rgba(16,32,30,.22);

  /* ── ritmo ──────────────────────────────────────────────────── */
  --aire:clamp(4.5rem,8vw,8rem);
  --aire-corto:clamp(3rem,5vw,5rem);
  --lado:clamp(1.25rem,5vw,4.5rem);
  --ancho:1280px;

  --sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--crema);
  color:var(--texto);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul{list-style:none;padding:0}
svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.12;
  color:var(--tinta);
}

/* ─────────────────────────── esqueleto ─────────────────────────── */
.contenedor{max-width:var(--ancho);margin:0 auto;padding-inline:var(--lado)}
.seccion{padding-block:var(--aire)}
.seccion-corta{padding-block:var(--aire-corto)}
.banda-honda{background:var(--crema-hondo)}
.banda-blanca{background:var(--blanco)}
.bloque{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra)}
.bloque-liso{background:var(--blanco);border-radius:var(--radio);border:1px solid var(--linea-suave)}

/* ─────────────────────────── tipografía ────────────────────────── */
.titular-hero{font-size:clamp(2.4rem,4.6vw,3.85rem);line-height:1.08;letter-spacing:-.035em;font-weight:500}
.titular{font-size:clamp(1.9rem,3.2vw,2.9rem);letter-spacing:-.032em}
.titular-chico{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.028em}
.entradilla{font-size:1.0625rem;line-height:1.7;color:var(--atenuado);max-width:34rem}
.prosa{max-width:62ch;font-size:1rem;line-height:1.75;color:var(--texto)}
.prosa p+p{margin-top:1.05em}
.etiqueta{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--atenuado);
}
.sello{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.75);border:1px solid var(--linea-suave);
  border-radius:999px;padding:.55rem 1.1rem;
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.sello svg{width:1.05rem;height:1.05rem;color:var(--coral);stroke-width:0;fill:var(--coral)}

/* ──────────────────────── botones y enlaces ────────────────────── */
.btn-solido,.btn-linea{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  padding:1rem 1.9rem;border-radius:999px;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.btn-solido{background:var(--teal);color:var(--tinta);border:1px solid var(--teal)}
.btn-solido:hover{background:#35a79b;border-color:#35a79b;transform:translateY(-2px)}
.btn-linea{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.btn-linea:hover{border-color:var(--tinta);background:var(--blanco)}
.btn-solido svg,.btn-linea svg{width:1rem;height:1rem;transition:transform .3s ease;stroke-width:1.8}
.btn-solido:hover svg,.btn-linea:hover svg{transform:translateX(3px)}
.btn-coral{background:var(--coral);color:#fff;border-color:var(--coral)}
.btn-coral:hover{background:var(--coral-texto);border-color:var(--coral-texto)}

.enlace-filete{
  display:inline-flex;align-items:center;gap:.9rem;
  font-size:.9375rem;font-weight:500;color:var(--tinta);
  padding-bottom:.85rem;border-bottom:1px solid var(--linea);
  transition:border-color .3s ease,gap .3s ease;
}
.enlace-filete:hover{border-color:var(--tinta);gap:1.3rem}
.enlace-filete svg{width:1rem;height:1rem;stroke-width:1.6}
.enlace-flecha{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--tinta);
  font-size:.9375rem;font-weight:500;transition:gap .3s ease;
}
.enlace-flecha:hover{gap:.85rem}
.enlace-flecha svg{width:1rem;height:1rem;stroke-width:1.6}
.flecha-circulo{
  display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:999px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);color:#fff;
  transition:background .3s ease,color .3s ease;flex:none;
}
.flecha-circulo svg{width:1rem;height:1rem;stroke-width:1.6}
a:hover .flecha-circulo{background:#fff;color:var(--tinta)}

/* ───────────────────────────── fotos ───────────────────────────── */
.foto-redonda{border-radius:var(--radio);overflow:hidden;background:var(--crema-hondo)}
.foto-redonda img{width:100%;height:100%;object-fit:cover}

.ficha-cat{
  position:relative;display:block;overflow:hidden;border-radius:var(--radio-chico);
  aspect-ratio:3/4;isolation:isolate;
}
.ficha-cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.ficha-cat:hover img{transform:scale(1.05)}
.ficha-cat::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,14,12,0) 38%,rgba(18,14,12,.74) 100%);
}
.ficha-cat .rotulo{
  position:absolute;inset:auto 0 0 0;z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding:1.35rem;color:#fff;font-weight:500;font-size:1.0625rem;line-height:1.25;
  letter-spacing:-.02em;
}
.ficha-cat .rotulo small{display:block;font-size:.8125rem;font-weight:400;opacity:.78;margin-top:.3rem}

/* ─────────────────────────── cabecera ──────────────────────────── */
.cab{position:sticky;top:0;z-index:50;transition:background .3s ease,box-shadow .3s ease}
.cab.pegada{
  background:rgba(251,250,247,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--linea-suave);
}
.cab-in{
  max-width:var(--ancho);margin:0 auto;padding:1.1rem var(--lado);
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);
}
.marca img{width:clamp(96px,8.4vw,122px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,1.9rem);margin-left:auto}
.nav a{
  position:relative;padding:.35rem 0;color:var(--tinta);
  font-size:.875rem;font-weight:500;letter-spacing:-.01em;
  transition:color .25s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.nav a.on::after,.nav a:hover::after{transform:scaleX(1)}
.cab .btn-solido{padding:.7rem 1.35rem;font-size:.8125rem}
.hamb{
  display:none;width:2.5rem;height:2.5rem;padding:0;border:0;cursor:pointer;
  background:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamb span{width:17px;height:1.6px;background:var(--tinta);border-radius:2px;transition:transform .3s,opacity .2s}
.solo-movil{display:none}

/* ──────────────────────────── portada ──────────────────────────── */
.hero{padding-block:clamp(2rem,4vw,3.5rem) var(--aire-corto)}
.hero-in{
  max-width:var(--ancho);margin:0 auto;padding-inline:var(--lado);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center;
}
.hero-txt>*+*{margin-top:1.6rem}
.hero-txt .sello+.titular-hero{margin-top:1.8rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-foto{aspect-ratio:4/3}

.prueba{display:flex;flex-wrap:wrap;gap:.5rem}
.distintivo{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  line-height:1;padding:.55rem .9rem;border-radius:999px;
  color:var(--teal-hondo);background:var(--teal-agua);white-space:nowrap;
}
.distintivo svg{width:.9rem;height:.9rem;color:var(--teal-hondo);stroke-width:1.8}

/* ────────────────────────── garantías ──────────────────────────── */
.garantias{display:grid;gap:0;grid-template-columns:1fr}
.garantia{display:flex;gap:1rem;padding:1.6rem 1.9rem}
.garantia svg{width:1.55rem;height:1.55rem;flex:none;color:var(--tinta);stroke-width:1.2}
.garantia h3{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.garantia p{margin-top:.3rem;font-size:.875rem;line-height:1.55;color:var(--atenuado)}

/* ──────────────────────────── secciones ────────────────────────── */
.cab-seccion{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(2rem,3.4vw,3.2rem);
}
.cab-seccion .etiqueta{margin-bottom:.9rem}
.rejilla-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.2vw,1.1rem)}
.dos-columnas{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center;
}
.dos-columnas .foto-redonda{aspect-ratio:4/3}

.cifras{display:flex;flex-wrap:wrap;gap:clamp(1.8rem,3.4vw,3.4rem);margin-top:2.2rem}
.cifras dt{font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:500;letter-spacing:-.03em;color:var(--tinta);line-height:1}
.cifras dd{margin-top:.35rem;font-size:.8125rem;color:var(--atenuado)}

/* ───────────────── destacados de la carta (líneas) ─────────────── */
.carta-linea{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1rem;
  padding-block:1.1rem;border-bottom:1px solid var(--linea-suave);
}
.carta-linea:last-child{border-bottom:0}
.carta-linea .nombre{font-size:1.0625rem;font-weight:500;color:var(--tinta);letter-spacing:-.02em}
.carta-linea .detalle{grid-column:1/-1;font-size:.875rem;color:var(--atenuado);margin-top:.25rem;max-width:54ch}
.carta-linea .en{grid-column:1/-1;font-size:.8125rem;color:var(--atenuado);opacity:.72;font-style:italic;margin-top:.2rem}
.carta-linea .precio{font-size:1rem;font-weight:500;color:var(--tinta);white-space:nowrap}
.carta-linea .precio em{font-style:normal;color:var(--atenuado);font-size:.8125rem;font-weight:400}

/* ─────────────────────── bloque de cierre ──────────────────────── */
.cierre{
  position:relative;isolation:isolate;display:grid;border-radius:var(--radio);overflow:hidden;
  min-height:clamp(22rem,46vh,28rem);
}
.cierre>img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.cierre-velo{
  grid-area:1/1;
  background:linear-gradient(100deg,rgba(18,14,12,.9) 0%,rgba(18,14,12,.72) 42%,
             rgba(18,14,12,.2) 78%,rgba(18,14,12,.05) 100%);
}
.cierre-texto{
  grid-area:1/1;display:flex;align-items:center;padding:clamp(2rem,5vw,4.5rem);
  color:rgba(255,255,255,.88);
}
.cierre-texto .titular{color:#fff}
.cierre-texto>div>*+*{margin-top:1.4rem}
.cierre-texto .entradilla{color:rgba(255,255,255,.8)}
.cierre-texto .etiqueta{color:rgba(255,255,255,.65)}
.cierre-texto .btn-solido{background:#fff;color:var(--tinta);border-color:#fff}
.cierre-texto .btn-solido:hover{background:rgba(255,255,255,.85)}
.cierre-texto .btn-linea{color:#fff;border-color:rgba(255,255,255,.45)}
.cierre-texto .btn-linea:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ──────────────────────── dónde estamos ────────────────────────── */
.datos{display:grid;gap:1px;background:var(--linea-suave);border-radius:var(--radio-chico);overflow:hidden}
.datos li{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.4rem;background:var(--blanco)}
.datos svg{width:1.25rem;height:1.25rem;flex:none;color:var(--teal-hondo);margin-top:.15rem;stroke-width:1.5}
.datos strong{display:block;font-size:.9375rem;font-weight:500;color:var(--tinta);letter-spacing:-.01em}
.datos span{display:block;font-size:.8125rem;color:var(--atenuado);margin-top:.15rem}
.datos a:hover strong{color:var(--coral-texto)}
.mapa{border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea-suave)}
.mapa iframe{display:block;width:100%;height:clamp(18rem,30vw,27rem);border:0;filter:saturate(.9)}

/* ──────────────────────────── pie ──────────────────────────────── */
.pie{background:var(--tinta);color:rgba(255,255,255,.72);padding-block:var(--aire-corto) 2rem}
.pie-in{
  max-width:var(--ancho);margin:0 auto;padding-inline:var(--lado);
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
}
.pie .marca img{width:118px;filter:invert(1) brightness(2.4)}
.pie h4{color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.pie p,.pie li{font-size:.875rem;line-height:1.75}
.pie li+li{margin-top:.45rem}
.pie a:hover{color:#fff}
.pie-soc{display:flex;gap:.85rem;margin-top:1.4rem}
.pie-soc a{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .25s,border-color .25s;
}
.pie-soc a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.pie-soc svg{width:1.05rem;height:1.05rem;stroke-width:1.5}
.pie-fondo{max-width:var(--ancho);margin:clamp(2.5rem,4vw,3.5rem) auto 0;padding-inline:var(--lado)}
.pie-fondo>div{
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between;
  font-size:.8125rem;
}
.pie-fondo nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}

/* ═════════════════════ la carta (página propia) ════════════════ */
.carta-hero{padding-block:clamp(2.5rem,5vw,4.5rem) var(--aire-corto)}
.chips{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.93);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea-suave)}
.chips-in{
  max-width:var(--ancho);margin:0 auto;padding:.9rem var(--lado);
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
}
.chips-in::-webkit-scrollbar{display:none}
.chips a{
  flex:none;padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--linea);
  font-size:.8125rem;font-weight:500;color:var(--tinta);
  transition:background .25s,color .25s,border-color .25s;
}
.chips a:hover,.chips a.on{background:var(--tinta);border-color:var(--tinta);color:#fff}

.bloque-carta{padding:clamp(1.5rem,3vw,2.8rem)}
.lista-carta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,4vw,4rem)}
.marca-veg,.marca-rec{
  display:inline-flex;align-items:center;border-radius:999px;padding:.25rem .55rem;
  font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  margin-left:.5rem;vertical-align:middle;
}
.marca-veg{background:var(--teal-agua);color:var(--teal-hondo)}
.marca-rec{background:var(--tinta);color:#fff}
.marca-pic{font-size:.75rem;margin-left:.35rem}
.nota{
  margin-top:clamp(2rem,3vw,3rem);padding-left:1.1rem;border-left:2px solid var(--teal);
  font-size:.875rem;line-height:1.7;color:var(--atenuado);max-width:70ch;
}
.leyenda{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}

/* ═══════════════════════ página legal ══════════════════════════ */
.legal{max-width:52rem;margin:0 auto;padding:clamp(2.5rem,5vw,4.5rem) var(--lado) var(--aire)}
.legal section{margin-top:clamp(2.2rem,3.4vw,3.2rem);scroll-margin-top:6rem}
.legal h2{font-size:clamp(1.2rem,1.8vw,1.55rem);padding-bottom:.8rem;border-bottom:1px solid var(--linea);margin-bottom:1.1rem}
.legal p,.legal li{font-size:.9375rem;line-height:1.8;color:var(--texto)}
.legal p+p,.legal ul{margin-top:.9rem}
.legal ul{padding-left:1.2rem;list-style:disc}
.legal li+li{margin-top:.5rem}
.legal-datos{list-style:none;padding:0}
.legal-datos li{padding:.55rem 0;border-bottom:1px solid var(--linea-suave)}
.legal strong{color:var(--tinta);font-weight:600}
.legal a{color:var(--coral-texto);font-weight:500}
.legal a:hover{text-decoration:underline}
.aviso-borrador{
  margin-top:2rem;padding:1.1rem 1.3rem;border-radius:var(--radio-chico);
  background:rgba(228,113,95,.09);border:1px solid rgba(228,113,95,.3);
  font-size:.875rem;line-height:1.7;color:var(--texto);
}
.cierre-botones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

/* ══════════════════════ rejillas responsivas ═══════════════════ */
@media (min-width:768px){
  .garantias{grid-template-columns:repeat(2,1fr)}
  .garantia:nth-child(n+3){border-top:1px solid var(--linea-suave)}
  .garantia:nth-child(even){border-left:1px solid var(--linea-suave)}
}
@media (min-width:1100px){
  .garantias{grid-template-columns:repeat(4,1fr)}
  .garantia:nth-child(n+3){border-top:0}
  .garantia+.garantia{border-left:1px solid var(--linea-suave)}
}

/* ══════════════════════════ móvil ══════════════════════════════ */
.tabs,.velo-menu{display:none}

@media (max-width:900px){
  :root{--tabs:64px}
  body{padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}

  /* OJO: nada de backdrop-filter en .cab — un elemento con filtro pasa a ser el bloque
     contenedor de sus hijos position:fixed, y la hoja del menú vive dentro del header:
     se colocaba respecto a la cabecera en vez de respecto a la pantalla. */
  .cab{background:var(--crema);box-shadow:0 1px 0 var(--linea-suave)}
  .cab.pegada{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--crema)}
  .cab-in{padding:.8rem var(--lado)}
  .cab .btn-solido{display:none}
  .hamb{display:flex;margin-left:auto}

  .nav{
    position:fixed;inset:auto 0 0 0;width:auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.9rem 1.5rem calc(1.8rem + var(--tabs) + env(safe-area-inset-bottom));
    background:var(--blanco);border-radius:22px 22px 0 0;
    transform:translateY(102%);transition:transform .34s cubic-bezier(.2,.85,.25,1);
    box-shadow:0 -24px 60px -34px rgba(25,22,20,.5);z-index:70;
  }
  .nav::before{content:"";display:block;width:42px;height:4px;border-radius:99px;background:var(--linea);margin:0 auto 1rem}
  .nav.abierto{transform:none}
  .nav a{font-size:1rem;padding:.95rem .15rem;border-bottom:1px solid var(--linea-suave)}
  .nav a::after{display:none}
  .solo-movil{display:inline-flex;margin-top:1.1rem;justify-content:center}
  .abierto-menu{overflow:hidden}
  .abierto-menu .hamb span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .abierto-menu .hamb span:nth-child(2){opacity:0}
  .abierto-menu .hamb span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

  .velo-menu{
    display:block;position:fixed;inset:0;z-index:65;background:rgba(25,22,20,.42);
    opacity:0;transition:opacity .3s;pointer-events:none;
  }
  .velo-menu.visible{opacity:1;pointer-events:auto}

  .tabs{
    display:flex;position:fixed;inset:auto 0 0 0;z-index:80;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom);
  }
  .tab{
    flex:1;height:var(--tabs);display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:.3rem;color:var(--atenuado);
  }
  .tab svg{width:1.3rem;height:1.3rem;stroke-width:1.5}
  .tab span{font-size:.625rem;font-weight:600;letter-spacing:.04em}
  .tab.on{color:var(--tinta)}
  .tab.on svg{color:var(--teal-hondo)}
  .tab:active{background:rgba(25,22,20,.04)}
  .tab-burbuja{
    display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:999px;
    background:var(--teal);color:var(--tinta);box-shadow:0 8px 18px -8px rgba(31,143,136,.9);
  }
  .tab-burbuja svg{width:1rem;height:1rem;stroke-width:1.8}
  .tab-cta{color:var(--tinta)}

  .hero-in,.dos-columnas{grid-template-columns:1fr}
  .dos-columnas .foto-redonda{order:-1}
  .hero-foto{aspect-ratio:16/11}
  .rejilla-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lista-carta{grid-template-columns:1fr}
  .pie-in{grid-template-columns:1fr;gap:2.2rem}
  .btn-solido,.btn-linea{padding:.9rem 1.5rem}
  .hero-btns .btn-solido,.hero-btns .btn-linea{flex:1 1 auto}
  .cierre{min-height:0}
  .cierre-texto{padding:2rem 1.5rem}
}

@media (max-width:560px){
  .rejilla-4{grid-template-columns:1fr;gap:.9rem}
  .ficha-cat{aspect-ratio:16/10}
  .cifras{gap:1.4rem 2.2rem}
}

/* ───────────────── entrada suave, sin librerías ────────────────── */
.sube{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.8,.3,1),transform .65s cubic-bezier(.2,.8,.3,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sube{opacity:1;transform:none}
}

/* los apartados del legal usan la misma tira de chips que la carta */
.legal .chips-in{overflow:visible;flex-wrap:wrap;padding-inline:0}
.legal .chips-in a{
  flex:none;padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--linea);
  font-size:.8125rem;font-weight:500;color:var(--tinta);
  transition:background .25s,color .25s,border-color .25s;
}
.legal .chips-in a:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* ══════════════════════════════════════════════════════════════════
   COSTA — lo que hace que esto sea Kohala y no la web de otro
   Portada centrada, tira de fotos altas que se mete en la sección
   siguiente, banda de agua turquesa y trío de fotos con el rótulo
   FUERA de la foto. Nada de hero partido ni de tarjetas con filetes.
   ══════════════════════════════════════════════════════════════════ */

/* ── portada centrada ────────────────────────────────────────────── */
.portada{position:relative;text-align:center;padding-block:clamp(3rem,7vw,6.5rem) 0;overflow:hidden}
.portada::before{
  content:"";position:absolute;inset:-20% 0 auto 0;height:70%;z-index:-1;
  background:radial-gradient(60% 70% at 50% 0%,var(--teal-agua) 0%,rgba(228,242,240,0) 72%);
}
.portada .etiqueta{color:var(--teal-hondo)}
.portada h1{
  margin-top:1.3rem;
  font-size:clamp(2.6rem,6.4vw,5.3rem);line-height:1.02;letter-spacing:-.045em;font-weight:500;
}
.portada h1 em{font-style:normal;color:var(--teal-hondo)}
.portada .entradilla{margin:1.6rem auto 0;max-width:33rem}
.portada .hero-btns{justify-content:center;margin-top:2.2rem}
.portada .prueba{justify-content:center;margin-top:1.8rem}

/* ── tira de fotos altas que invade la sección siguiente ─────────── */
.tira-altas{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.5rem);
  max-width:var(--ancho);margin:clamp(3rem,5vw,4.5rem) auto calc(var(--mordida) * -1);
  padding-inline:var(--lado);position:relative;z-index:2;
  --mordida:clamp(3rem,7vw,7rem);
}
.alta{border-radius:var(--radio);overflow:hidden;aspect-ratio:3/4;background:var(--crema-hondo)}
.alta img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.alta:hover img{transform:scale(1.05)}
.tira-altas .alta:nth-child(2){transform:translateY(clamp(1rem,2.6vw,2.6rem))}
.tira-altas .alta:nth-child(3){transform:translateY(clamp(-.6rem,-1.4vw,-.4rem))}

/* ── banda de agua ───────────────────────────────────────────────── */
.banda-agua{
  position:relative;overflow:hidden;
  background:var(--teal);color:var(--tinta);
  padding-block:calc(var(--aire) + var(--mordida,0px)) var(--aire);
}
.banda-agua .etiqueta{color:rgba(16,32,30,.6)}
.banda-agua .titular,.banda-agua h2,.banda-agua h3{color:var(--tinta)}
.banda-agua .entradilla,.banda-agua p{color:rgba(16,32,30,.78)}
.banda-agua .valor svg{color:var(--tinta);opacity:.85}
.trio-valores{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3.4vw,3.4rem);margin-top:clamp(2.4rem,4vw,3.6rem);
}
.valor h3{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;margin-top:1rem}
.valor p{margin-top:.5rem;font-size:.9375rem;line-height:1.65}
.valor svg{width:1.9rem;height:1.9rem;stroke-width:1.2}

/* ── trío de categorías, con el rótulo FUERA de la foto ──────────── */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.2rem)}
.plato-cat img{border-radius:var(--radio);aspect-ratio:4/5;width:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.plato-cat{display:block}
.plato-cat:hover img{transform:scale(1.03)}
.plato-cat .pie-cat{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--linea);
  transition:border-color .3s ease;
}
.plato-cat:hover .pie-cat{border-color:var(--teal-hondo)}
.plato-cat h3{font-size:1.1875rem;font-weight:500;letter-spacing:-.025em}
.plato-cat .desde{font-size:.8125rem;color:var(--atenuado);white-space:nowrap}
.plato-cat p{margin-top:.7rem;font-size:.9375rem;line-height:1.6;color:var(--atenuado)}

/* ── la cita: la definición de poké, en grande y centrada ───────── */
.cita{text-align:center;max-width:46rem;margin:0 auto}
.cita blockquote{
  font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.32;letter-spacing:-.03em;
  font-weight:400;color:var(--tinta);
}
.cita blockquote em{font-style:normal;color:var(--teal-hondo);font-weight:500}
.cita figcaption{margin-top:1.6rem;font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--atenuado)}

/* dos fotos desalineadas a los lados de la cita */
.cita-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.8rem);margin-top:clamp(2.6rem,4.5vw,4rem)}
.cita-fotos figure{border-radius:var(--radio);overflow:hidden;aspect-ratio:16/11}
.cita-fotos figure:first-child{transform:translateY(clamp(-1.6rem,-3vw,-1rem))}
.cita-fotos img{width:100%;height:100%;object-fit:cover}

/* ── franja de pedido, en coral ─────────────────────────────────── */
.franja-pedido{
  background:var(--coral);color:#fff;border-radius:var(--radio);
  padding:clamp(2.2rem,4.5vw,4rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;
}
.franja-pedido .titular{color:#fff;max-width:20ch}
.franja-pedido p{color:rgba(255,255,255,.85);margin-top:.9rem;font-size:1.0625rem}
.franja-pedido .btn-solido{background:#fff;color:var(--coral-texto);border-color:#fff}
.franja-pedido .btn-solido:hover{background:rgba(255,255,255,.88);color:var(--coral-texto)}
.franja-pedido .btn-linea{color:#fff;border-color:rgba(255,255,255,.5)}
.franja-pedido .btn-linea:hover{background:rgba(255,255,255,.15);border-color:#fff}

@media (max-width:900px){
  .tira-altas{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;--mordida:2.5rem}
  .tira-altas .alta:nth-child(2),.tira-altas .alta:nth-child(3){transform:none}
  .trio-valores,.trio{grid-template-columns:1fr;gap:2rem}
  .cita-fotos figure:first-child{transform:none}
  .franja-pedido{flex-direction:column;align-items:flex-start;text-align:left}
  .portada h1{font-size:clamp(2.4rem,10vw,3.2rem)}
}
@media (max-width:560px){
  .cita-fotos{grid-template-columns:1fr}
  .tira-altas .alta:nth-child(3){display:none}
  .tira-altas{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── el toque hawaiano: hibiscos del logo como marca de agua ─────── */
.hibisco{position:absolute;z-index:0;pointer-events:none;fill:currentColor;stroke:none}
.portada .hibisco{color:var(--coral);opacity:.16}
.portada .hib-1{left:2%;top:14%;width:clamp(70px,9vw,140px);transform:rotate(-18deg)}
.portada .hib-2{right:3%;top:34%;width:clamp(50px,6.5vw,104px);transform:rotate(22deg)}
.banda-agua .hibisco{color:#fff;opacity:.17}
.banda-agua .hib-1{left:-3%;bottom:-14%;width:clamp(150px,18vw,300px);transform:rotate(14deg)}
.banda-agua .hib-2{right:2%;top:-10%;width:clamp(110px,13vw,220px);transform:rotate(-24deg)}
.franja-pedido{position:relative;overflow:hidden}
.franja-pedido .hibisco{color:#fff;opacity:.16;right:-2%;bottom:-32%;width:clamp(150px,17vw,280px);transform:rotate(-16deg)}
.franja-pedido>*{position:relative;z-index:1}

/* el bowl que flota en la portada */
.bowl-portada{
  position:relative;z-index:1;max-width:var(--ancho);margin:clamp(1rem,2.5vw,2.5rem) auto 0;
  padding-inline:var(--lado);
}
.bowl-portada img{width:min(58vw,640px);margin:0 auto;filter:drop-shadow(0 40px 45px rgba(16,32,30,.22))}

/* los bowls de la carta, flotando sobre un panel de agua */
.panel-bowl{
  display:grid;place-items:center;border-radius:var(--radio);
  background:var(--teal-agua);aspect-ratio:1/1;overflow:hidden;
  transition:background .35s ease;
}
.plato-cat:hover .panel-bowl{background:#d8efec}
.panel-bowl img{
  width:88%;height:auto;object-fit:contain;aspect-ratio:auto;border-radius:0;
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
  filter:drop-shadow(0 22px 26px rgba(16,32,30,.18));
}
.plato-cat:hover .panel-bowl img{transform:scale(1.05) translateY(-4px)}

/* remates: el bowl de la portada no debe empujar el pliegue tan abajo,
   y los hibiscos funcionan mejor grandes y medio fuera del lienzo que
   pequeños y enteros (enteros y chicos se leen como un trébol) */
.bowl-portada img{width:min(44vw,500px)}
.portada .hib-1{left:-6%;top:8%;width:clamp(130px,17vw,270px);opacity:.13}
.portada .hib-2{right:-5%;top:30%;width:clamp(110px,14vw,220px);opacity:.13}
.banda-agua .hib-1{left:-7%;bottom:-26%;width:clamp(220px,26vw,420px);opacity:.15}
.banda-agua .hib-2{right:-4%;top:-22%;width:clamp(170px,20vw,320px);opacity:.15}
.valor svg{width:2.1rem;height:2.1rem;stroke-width:1.35}