/* =============================================================
   KATAKANA — hoja de estilos compartida por todas las páginas
   Paleta y tipografía -> variables :root
   ============================================================= */
:root{
  --bg: #0a0a0a;
  --bg-soft: #141313;
  --line: #2b2725;
  --cream: #f3efe8;
  --muted: #a89f93;
  --red: #b81f18;
  --red-glow: #e2372a;
  --gold: #c9a074;

  --f-display: 'Archivo Black', sans-serif;
  --f-body: 'Work Sans', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--f-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
section{position:relative; padding:6rem 6vw;}
h1,h2,h3{font-family:var(--f-display); font-weight:400;}
.eyebrow{color:var(--gold); font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;}
.wrap{max-width:1180px; margin:0 auto;}
:focus-visible{outline:2px solid var(--red-glow); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}

/* ===== ARAÑAZOS (marca de la esquina, en cada página) ===== */
.claw-marks{
  position:absolute; top:0; left:0; width:130px; height:145px;
  pointer-events:none; z-index:2;
}
.claw-marks svg{width:100%; height:100%; display:block;}

/* ===== NAV (igual en todas las páginas) ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 6vw;
  background:linear-gradient(to bottom, rgba(10,10,10,.92), transparent);
}
.logo{font-family:var(--f-display); font-size:1.25rem; letter-spacing:.02em; display:flex; align-items:center; gap:.55rem;}
.logo svg{width:28px; height:24px; flex-shrink:0;}
.nav-links{display:flex; gap:2.1rem; font-size:.92rem;}
.nav-links a{position:relative; padding-bottom:.2rem;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--red); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--cream);}
.nav-cta{
  border:1px solid var(--red); color:var(--cream); padding:.55rem 1.3rem;
  font-size:.85rem; transition:background .2s ease; white-space:nowrap;
}
.nav-cta:hover{background:var(--red);}
.nav-toggle{display:none; background:none; border:0; color:var(--cream); font-size:1.6rem; cursor:pointer;}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 30%; background:var(--bg-soft);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.6rem; padding:2rem; transform:translateX(100%);
    transition:transform .3s ease; border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-cta{display:none;}
  .nav-toggle{display:block;}
}

/* ===== CABECERA DE PÁGINA (carta, nosotros, galería, reservas, contacto) ===== */
.page-header{
  padding:9.5rem 6vw 3rem; border-bottom:1px solid var(--line);
}
.page-header h1{font-size:clamp(2.2rem,5vw,3.4rem); margin-top:.6rem;}
.page-header p{color:var(--muted); max-width:52ch; margin-top:1rem;}

/* ===== HERO (solo portada) ===== */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:8rem; overflow:hidden;
}
.hero-slash{
  position:absolute; top:0; right:-5%; height:100%; width:55%;
  background:linear-gradient(100deg, transparent 48%, var(--red) 48%, var(--red) 50%, transparent 50%);
  opacity:.4; pointer-events:none;
}
.hero-logo-mark{width:72px; height:62px; margin-bottom:1.4rem; animation:rise .8s ease both;}
.hero-mark{
  font-family:var(--f-display);
  font-size:clamp(3.2rem, 11vw, 7rem);
  line-height:.95; letter-spacing:.01em;
  animation:rise .8s .1s ease both;
}
.hero-sub{
  font-family:var(--f-body); font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-size:clamp(.7rem,1.4vw,.9rem); margin-top:.6rem;
  animation:rise .8s .2s ease both;
}
.hero-tag{max-width:36ch; font-size:1.1rem; color:var(--muted); margin-top:1.6rem; animation:rise .8s .3s ease both;}
.hero-actions{display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; animation:rise .8s .4s ease both;}

.btn{padding:.9rem 1.8rem; font-size:.92rem; border:1px solid var(--cream); transition:all .2s ease; display:inline-block;}
.btn:hover{background:var(--cream); color:var(--bg);}
.btn.primary{background:var(--red); border-color:var(--red);}
.btn.primary:hover{background:var(--red-glow); border-color:var(--red-glow); color:var(--bg);}
.btn.whatsapp{border-color:#3fa14a; display:inline-flex; align-items:center; gap:.5rem;}
.btn.whatsapp:hover{background:#3fa14a; color:var(--cream);}
.btn.glovo{border-color:#ffc244; display:inline-flex; align-items:center; gap:.5rem;}
.btn.glovo:hover{background:#ffc244; color:var(--bg);}

/* ===== PORTADA: accesos rápidos a las demás páginas ===== */
.hub{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.hub-card{
  background:var(--bg); padding:2.6rem 1.8rem; display:flex; flex-direction:column; gap:.6rem;
  transition:background .2s ease;
}
.hub-card:hover{background:var(--bg-soft);}
.hub-card h3{font-size:1.2rem;}
.hub-card p{color:var(--muted); font-size:.9rem; flex:1;}
.hub-card span{color:var(--gold); font-size:.85rem; letter-spacing:.05em;}
@media (max-width:1000px){.hub{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.hub{grid-template-columns:1fr 1fr;}}
@media (max-width:440px){.hub{grid-template-columns:1fr;}}

/* ===== CONCEPTO / NOSOTROS ===== */
.concept{display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center;}
.concept h2{font-size:clamp(2rem,4vw,3rem); margin:.6rem 0 1.2rem; line-height:1.1;}
.concept p{color:var(--muted); max-width:52ch;}
.concept-figure{aspect-ratio:4/5; overflow:hidden; position:relative; background:#000;}
.concept-figure video, .concept-figure img{width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(1.05);}
.concept-figure::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(184,31,24,.35), rgba(10,10,10,.15));
  mix-blend-mode:multiply; pointer-events:none;
}
@media (max-width:860px){.concept{grid-template-columns:1fr;}}

/* ===== CARTA ===== */
.menu-tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2.6rem;}
.menu-tab{
  background:none; border:1px solid var(--line); color:var(--muted);
  padding:.5rem 1.1rem; font-family:var(--f-body); font-size:.88rem; cursor:pointer;
  transition:all .2s ease;
}
.menu-tab.active, .menu-tab:hover{border-color:var(--red); color:var(--cream);}
.menu-panel{display:none;}
.menu-panel.active{display:block; animation:rise .4s ease both;}
.menu-item{padding:1.15rem 0; border-bottom:1px solid var(--line);}
.menu-item-top{display:flex; align-items:baseline; gap:.6rem;}
.menu-item .name{font-size:1.08rem;}
.menu-item .desc{display:block; color:var(--muted); font-size:.87rem; margin-top:.3rem; max-width:52ch;}
.menu-item .extra{display:block; color:var(--gold); font-size:.82rem; margin-top:.35rem;}
.menu-item .dots{flex:1; border-bottom:1px dotted var(--line); transform:translateY(-.4em);}
.menu-item .price{font-family:var(--f-display); font-size:1.05rem; color:var(--red); white-space:nowrap;}

/* ===== GALERÍA ===== */
.gallery-grid{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:14vw; gap:.6rem;}
.gallery-grid img{width:100%; height:100%; object-fit:cover;}
.g1{grid-column:span 3; grid-row:span 2;}
.g2{grid-column:span 3; grid-row:span 1;}
.g3{grid-column:span 2; grid-row:span 1;}
.g4{grid-column:span 2; grid-row:span 2;}
.g5{grid-column:span 2; grid-row:span 1;}
@media (max-width:860px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:42vw;}
  .g1,.g2,.g3,.g4,.g5{grid-column:span 1; grid-row:span 1;}
}

/* ===== RESERVAS / CONTACTO ===== */
.info{display:grid; grid-template-columns:1fr 1fr; gap:4rem;}
.info-block + .info-block{margin-top:2rem;}
.info-block h3{font-family:var(--f-body); font-weight:600; font-size:1rem; margin-bottom:.4rem;}
.info-block p{color:var(--muted);}
.info-block a{color:var(--gold); border-bottom:1px solid transparent;}
.info-block a:hover{border-color:var(--gold);}
form{display:flex; flex-direction:column; gap:1rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
label{font-size:.85rem; color:var(--muted); display:block; margin-bottom:.35rem;}
input, select, textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--cream); font-family:var(--f-body); font-size:1rem; padding:.6rem 0; resize:vertical;
}
input:focus, select:focus, textarea:focus{border-color:var(--red);}
form .btn{align-self:flex-start; margin-top:.8rem; background:none; cursor:pointer;}
@media (max-width:860px){.info{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;}}

.contact-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.contact-tile{background:var(--bg); padding:2.4rem 2rem;}
.contact-tile h3{font-family:var(--f-body); font-weight:600; font-size:1rem; margin-bottom:.6rem; color:var(--gold);}
.contact-tile p{color:var(--muted);}
.contact-tile a{color:var(--cream); border-bottom:1px solid var(--line);}
.contact-tile a:hover{border-color:var(--red);}
@media (max-width:860px){.contact-tiles{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.contact-tiles{grid-template-columns:1fr;}}

/* ===== FOOTER (igual en todas las páginas) ===== */
footer{padding:4rem 6vw 2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; color:var(--muted); font-size:.85rem; align-items:center; border-top:1px solid var(--line);}
footer .logo{font-size:1.1rem;}
.social{display:flex; gap:1rem;}

/* ===== INTRO / VÍDEO DE MARCA (solo portada) ===== */
body.intro-active{overflow:hidden; height:100vh;}
.intro{
  position:fixed; inset:0; z-index:200; background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease;
}
.intro.hidden{opacity:0; pointer-events:none;}
.intro video{max-width:100%; max-height:100%; width:auto; height:100%; object-fit:contain;}
.intro-skip{
  position:absolute; top:1.5rem; right:1.5rem; z-index:2;
  background:rgba(0,0,0,.45); border:1px solid var(--line); color:var(--cream);
  padding:.55rem 1.1rem; font-family:var(--f-body); font-size:.85rem; cursor:pointer;
}
.intro-skip:hover{border-color:var(--red);}
.intro-play{
  position:absolute; z-index:2; display:flex; align-items:center; gap:.7rem;
  background:var(--red); color:var(--cream); border:0; padding:1rem 1.9rem;
  font-family:var(--f-display); font-size:1.05rem; letter-spacing:.02em; cursor:pointer;
  animation:pulse 1.6s ease infinite;
}
.intro-play[hidden]{display:none;}
@keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}