/* ===========================================================
   Casa Kontal — El ritmo del sol
   Beach club · Mojácar Playa · próxima apertura Julio 2026
   Paleta tierra/arena · display CsCarsonStamp (sin acentos) + Inter
   =========================================================== */

@font-face{
  font-family:'CarsonStamp';
  src:url('fonts/CsCarsonStamp.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
  /* la fuente demo no tiene acentos ni ñ: limitamos a ASCII básico
     para que cualquier carácter acentuado caiga a Inter automáticamente */
  unicode-range:U+0020-007E;
}

:root{
  --paper:#faf5e9;      /* crema · día luminoso */
  --sand:#ebe3c9;       /* arena */
  --sage:#eaeade;       /* verde salvia suave */
  --camel:#956a3d;      /* bronce · color del logo */
  --brown:#593825;      /* marrón */
  --espresso:#2e1a09;   /* noche */
  --gold:#c89a5a;       /* brillo dorado atardecer */
  --ink:#2e1a09;        /* texto sobre claro */
  --cream:#f4eddc;      /* texto sobre oscuro */
  --line:rgba(46,26,9,.14);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--paper);
  line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.stamp{font-family:'CarsonStamp','Inter',sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.02}

/* ---------- acentos "a mano" para CarsonStamp (la demo no trae acentos) ----------
   Se escribe la letra BASE en ASCII (sí existe en la fuente) y se dibuja el
   acento con CSS imitando el trazo estampado. Usar dentro de texto .stamp:
   Pr<span class="ta">o</span>ximamente  ·  Moj<span class="ta">a</span>car  ·  a<span class="tn">n</span>o */
.ta,.tn,.td{position:relative;display:inline-block}
/* tilde de acento (´) — trazo corto e inclinado */
.ta::after{content:"";position:absolute;left:54%;bottom:100%;margin-bottom:-.17em;
  width:.19em;height:.075em;background:currentColor;border-radius:.05em;
  transform:translateX(-55%) rotate(-28deg)}
/* virgulilla de la eñe (~) — onda dibujada con máscara SVG en currentColor */
.tn::after{content:"";position:absolute;left:50%;bottom:100%;margin-bottom:-.11em;
  width:.52em;height:.22em;transform:translateX(-50%);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%208'%3E%3Cpath%20d='M2%206C6%200%209%200%2012%204%2015%208%2018%208%2022%202'%20fill='none'%20stroke='black'%20stroke-width='2.7'%20stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%208'%3E%3Cpath%20d='M2%206C6%200%209%200%2012%204%2015%208%2018%208%2022%202'%20fill='none'%20stroke='black'%20stroke-width='2.7'%20stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* diéresis (ü) — dos puntitos */
.td::after{content:"";position:absolute;left:50%;bottom:100%;margin-bottom:-.14em;
  width:.34em;height:.09em;transform:translateX(-50%);background:currentColor;
  -webkit-mask:radial-gradient(circle,#000 55%,transparent 57%) left/45% 100% no-repeat,radial-gradient(circle,#000 55%,transparent 57%) right/45% 100% no-repeat;
  mask:radial-gradient(circle,#000 55%,transparent 57%) left/45% 100% no-repeat,radial-gradient(circle,#000 55%,transparent 57%) right/45% 100% no-repeat}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;opacity:.7}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:15px 30px;border-radius:999px;border:1px solid currentColor;
  transition:.35s ease;cursor:pointer;white-space:nowrap}
.btn-solid{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.btn-solid:hover{background:transparent;color:var(--espresso)}
.btn-ghost{background:transparent;color:inherit}
.btn-ghost:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.on-dark .btn-ghost:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream)}

/* ---------- header mínimo sobre hero ---------- */
.kk-head{position:absolute;top:0;left:0;right:0;z-index:6;padding:22px 0}
.kk-head-in{display:flex;align-items:center;justify-content:space-between;gap:18px}
.kk-mark{color:var(--cream);font-size:21px;opacity:.96}
.kk-nav{display:flex;gap:clamp(16px,3vw,28px);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.kk-nav a{opacity:.85;transition:.3s;padding-bottom:2px;border-bottom:1px solid transparent}
.kk-nav a:hover{opacity:1;border-bottom-color:currentColor}
.lang{display:inline-flex;gap:1px;align-items:center}
.lang button{background:none;border:none;color:inherit;font-family:'Inter',sans-serif;font-size:12px;
  letter-spacing:.1em;cursor:pointer;opacity:.5;padding:2px 5px;transition:.25s}
.lang button.on{opacity:1;border-bottom:1px solid currentColor}
.lang button:hover{opacity:.85}
/* selector oscuro cuando el header va sobre fondo claro (no aplica al hero, pero por si acaso) */
.menu-hero .kk-head, .hero .kk-head{color:var(--cream)}

/* ===========================================================
   HERO — día luminoso, agua dorada
   =========================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;color:var(--cream)}
.hero-bg{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.03)}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(46,26,9,.28) 0%,rgba(46,26,9,.12) 38%,rgba(46,26,9,.55) 100%)}
.hero-inner{position:relative;z-index:2;padding:40px 24px;width:100%}
.hero .kontal-logo{width:min(76vw,440px);margin:0 auto 22px;filter:brightness(0) invert(1)}
.hero .tagline{font-size:clamp(26px,5.4vw,54px);color:#fff;text-shadow:0 2px 30px rgba(46,26,9,.35)}
.hero .pill{display:inline-block;margin-top:28px;border:1px solid rgba(255,255,255,.6);
  border-radius:999px;padding:11px 22px;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
.hero .place{margin-top:16px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue span{width:1px;height:36px;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ===========================================================
   SECCIONES · flujo día -> noche
   =========================================================== */
section{position:relative}
.pad{padding:clamp(74px,11vw,150px) 0}
.s-paper{background:var(--paper)}
.s-sand{background:var(--sand)}
.s-sage{background:var(--sage)}
.s-espresso{background:var(--espresso);color:var(--cream)}
.s-espresso .eyebrow{opacity:.6}

.lead-line{font-size:clamp(28px,4.6vw,58px);line-height:1.08;max-width:16ch}
.reveal{max-width:760px}
.reveal p{font-size:clamp(16px,1.5vw,19px);margin-top:22px;opacity:.9}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* frase spanglish grande */
.spanglish{font-size:clamp(28px,5vw,62px);line-height:1.05;letter-spacing:.005em}
.spanglish .em{color:var(--gold)}

/* concepto día/noche */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin-top:56px}
.flow .col h3{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.flow .col .big{font-family:'CarsonStamp','Inter',sans-serif;font-size:clamp(24px,3.4vw,40px);line-height:1.06;margin-bottom:12px}
.flow .col p{opacity:.85;font-size:15.5px}

/* ---------- galería ---------- */
.g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.g-head h2{font-size:clamp(30px,4.6vw,58px);line-height:1}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.4vw,18px)}
.gallery figure{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:3/4;background:var(--sand)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure.tall{grid-row:span 1}

/* ---------- carta teaser ---------- */
.carta{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center}
.carta .media{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--brown)}
.carta .media img{width:100%;height:100%;object-fit:cover}
.carta h2{font-size:clamp(30px,4.4vw,56px);line-height:1.02;margin-bottom:18px}
.dishlist{margin:22px 0 30px;border-top:1px solid rgba(244,237,220,.16)}
.dishlist li{list-style:none;padding:13px 0;border-bottom:1px solid rgba(244,237,220,.16);font-size:16px;opacity:.92}
.dishlist li b{font-weight:500}

/* ---------- info / apertura ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:52px}
.info-card{border-top:1px solid rgba(244,237,220,.2);padding-top:20px}
.info-card h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;margin-bottom:10px}
.info-card p{font-size:18px}
.info-card .big{font-family:'CarsonStamp','Inter',sans-serif;font-size:clamp(22px,3vw,30px)}

/* ---------- footer ---------- */
.foot{background:var(--espresso);color:var(--cream);padding:clamp(60px,9vw,110px) 0 40px;text-align:center}
.foot .brush{width:min(70vw,300px);margin:0 auto 18px;filter:brightness(0) invert(1);opacity:.95}
.foot .ftag{font-family:'CarsonStamp','Inter',sans-serif;font-size:clamp(20px,3vw,30px);opacity:.9}
.foot .fsym{width:54px;margin:26px auto;filter:brightness(0) invert(1);opacity:.5}
.foot .flinks{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:8px 0 30px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.foot .flinks a{opacity:.75;transition:.3s}.foot .flinks a:hover{opacity:1}
.foot .copy{font-size:12px;opacity:.5;letter-spacing:.04em;line-height:1.8}
.foot .copy a{text-decoration:underline;text-underline-offset:3px}

/* ---------- animación de entrada ---------- */
.fade{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.fade.in{opacity:1;transform:none}

/* ===========================================================
   CARTA (página)
   =========================================================== */
.menu-hero{background:var(--espresso);color:var(--cream);text-align:center;padding:clamp(90px,14vw,150px) 0 clamp(40px,6vw,60px)}
.menu-hero .brush{width:min(64vw,300px);margin:0 auto 8px;filter:brightness(0) invert(1)}
.menu-hero .msub{font-family:'CarsonStamp','Inter',sans-serif;font-size:clamp(26px,5vw,44px);margin-top:6px}
.menu-hero .eyebrow{opacity:.6}
.menu-body{background:var(--paper);padding:clamp(56px,8vw,96px) 0 clamp(70px,10vw,120px)}
.menu-cols{columns:2;column-gap:clamp(36px,6vw,80px)}
.menu-sec{break-inside:avoid;margin-bottom:40px}
.menu-sec h3{font-family:'CarsonStamp','Inter',sans-serif;font-size:clamp(22px,2.6vw,30px);
  color:var(--camel);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.menu-list li{list-style:none;padding:9px 0;font-size:15.5px;line-height:1.45}
.menu-note{margin-top:20px;font-size:13px;opacity:.6;max-width:60ch}
.back-link{display:inline-block;margin-top:40px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .flow{grid-template-columns:1fr;gap:34px}
  .carta{grid-template-columns:1fr;gap:32px}
  .carta .media{order:-1}
  .info-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .menu-cols{columns:1}
  .lead-line{max-width:100%}
  .hero .tagline{font-size:clamp(28px,9vw,44px)}
  .g-head{flex-direction:column;align-items:flex-start}
  .kk-head{padding:18px 0}
  .kk-mark{display:none}            /* el logo grande ya está en el hero */
  .kk-nav{width:100%;justify-content:center;gap:22px;letter-spacing:.12em}
  .spanglish{overflow-wrap:break-word}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .fade{opacity:1;transform:none}
}