/*
Theme Name: EK Ehsaas
Theme URI: https://ekehsaas.cl
Author: EK Ehsaas Restaurante Boutique Indio
Description: Restaurante boutique indio, terapia y meditación en Casablanca. Negro dramático, rojo carmesí. Tailwind CDN + custom CSS mínimo.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Propietario
Text Domain: ekehsaas
*/

/* ── GOOGLE FONTS + VARIABLES ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Cinzel:wght@400;600&family=Raleway:wght@300;400;500;600&display=swap');

:root {
  --ek-red:      #C8212B;
  --ek-red-deep: #9B1820;
  --ek-black:    #080808;
  --ek-dark:     #111111;
  --ek-dark2:    #181818;
  --ek-charcoal: #222222;
  --ek-white:    #F5F0EB;
  --ek-white2:   #E0D8D0;
  --ek-muted:    #7A7068;
  --ek-border:   rgba(255,255,255,0.07);
  --ek-border-r: rgba(200,33,43,0.25);
  --tr: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Raleway', sans-serif; background: #080808; color: #F5F0EB; overflow-x: hidden; line-height: 1.7; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── GRAIN TEXTURE ────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── SKIP LINK ────────────────────────────────────────── */
.skip-link { position:absolute; top:-100%; left:0; background:#C8212B; color:#fff; padding:.5em 1em; z-index:9999; font-family:'Raleway',sans-serif; }
.skip-link:focus { top:0; }

/* ── TIPOGRAFÍA BASE ──────────────────────────────────── */
.font-display { font-family: 'Cormorant Garamond', serif !important; }
.font-heading  { font-family: 'Cinzel', serif !important; }
.font-body     { font-family: 'Raleway', sans-serif !important; }

/* ── HEADER ───────────────────────────────────────────── */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  padding: 1.25rem 0;
  transition: background var(--tr), padding var(--tr), border-color var(--tr);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8,8,8,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--ek-border-r);
  padding: .7rem 0;
  box-shadow: 0 4px 32px rgba(0,0,0,.5);
}

/* Nav links */
.main-nav a {
  font-family: 'Cinzel', serif;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,240,235,.72); padding: .5rem 1rem;
  position: relative; transition: color var(--tr);
}
.main-nav a::after {
  content:''; position:absolute; bottom:1px; left:50%;
  width:0; height:1px; background:#C8212B;
  transform:translateX(-50%); transition: width var(--tr);
}
.main-nav a:hover { color: #F5F0EB; }
.main-nav a:hover::after { width: 55%; }
.nav-reserva {
  border: 1px solid #C8212B !important; border-radius: 2px;
  margin-left: .75rem; transition: background var(--tr) !important;
}
.nav-reserva::after { display:none !important; }
.nav-reserva:hover { background: #C8212B !important; color: #fff !important; }

/* Hamburger */
.nav-toggle { display:none; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; padding:6px; cursor:pointer; border:none; background:none; }
.nav-toggle span { display:block; width:24px; height:1.5px; background:#F5F0EB; transition:transform var(--tr),opacity var(--tr); }
.nav-toggle.active span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── HERO ─────────────────────────────────────────────── */
.hero { min-height:100svh; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.2) saturate(.5);
  transform:scale(1.04); transition:transform 10s ease;
}
.hero:hover .hero-bg { transform:scale(1); }
.hero-ov { position:absolute; inset:0; background:linear-gradient(155deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.28) 45%,rgba(150,20,26,.12) 70%,rgba(8,8,8,.9) 100%); }
.hero-line { position:absolute; top:0; bottom:0; left:60%; width:1px; background:linear-gradient(180deg,transparent,#C8212B 35%,#C8212B 65%,transparent); opacity:.28; }

/* Scroll indicator */
.hero-scroll { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-line { width:1px; height:50px; background:linear-gradient(#C8212B,transparent); animation:sl 2.2s ease-in-out infinite; }
@keyframes sl { 0%,100%{opacity:1;transform:scaleY(1);transform-origin:top} 50%{opacity:.3;transform:scaleY(.4);transform-origin:top} }

/* ── SECTION LABELS ───────────────────────────────────── */
.sec-label {
  font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.4em;
  text-transform:uppercase; color:#C8212B;
  display:flex; align-items:center; gap:.9rem; margin-bottom:1.25rem;
}
.sec-label::before { content:''; width:22px; height:1px; background:#C8212B; flex-shrink:0; }

/* ── BOTONES ──────────────────────────────────────────── */
.btn-ek-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Cinzel',serif; font-size:.68rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  padding:.95rem 2.2rem; border-radius:2px;
  background:#C8212B; color:#fff; border:1px solid #C8212B;
  transition: all var(--tr); white-space:nowrap; cursor:pointer;
}
.btn-ek-primary:hover { background:#9B1820; border-color:#9B1820; transform:translateY(-2px); box-shadow:0 8px 32px rgba(200,33,43,.4); }
.btn-ek-ghost {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Cinzel',serif; font-size:.68rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  padding:.95rem 2.2rem; border-radius:2px;
  background:transparent; color:#F5F0EB; border:1px solid rgba(245,240,235,.3);
  transition: all var(--tr); white-space:nowrap; cursor:pointer;
}
.btn-ek-ghost:hover { border-color:#F5F0EB; background:rgba(245,240,235,.05); }

/* ── HORARIO TABLE ────────────────────────────────────── */
.horario-grid { display:flex; flex-direction:column; gap:1px; background:var(--ek-border); border-radius:2px; overflow:hidden; }
.horario-row { display:flex; justify-content:space-between; align-items:center; background:#181818; padding:.85rem 1.25rem; gap:1rem; transition:background var(--tr); }
.horario-row:hover { background:#222222; }
.horario-row.highlight { background:rgba(200,33,43,.12); border-left:2px solid #C8212B; }
.horario-dia { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#E0D8D0; }
.horario-hora { font-family:'Cormorant Garamond',serif; font-size:1rem; color:#F5F0EB; font-weight:600; }

/* ── MENU CARTA ───────────────────────────────────────── */
.tab-btn {
  font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:#7A7068; padding:.6rem 1.4rem; border:1px solid rgba(255,255,255,.1); border-radius:2px;
  cursor:pointer; transition:all var(--tr); background:none;
}
.tab-btn:hover,.tab-btn.active { color:#F5F0EB; border-color:#C8212B; background:rgba(200,33,43,.1); }
.menu-panel { display:none; }
.menu-panel.active { display:block; }

/* ── GALLERY ──────────────────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,270px); gap:3px; }
.gallery-item { overflow:hidden; position:relative; background:#222; }
.gallery-item:first-child { grid-column:span 2; grid-row:span 2; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease,filter .6s ease; filter:brightness(.7) saturate(.75); }
.gallery-item:hover img { transform:scale(1.06); filter:brightness(.88) saturate(1); }
.gallery-ov { position:absolute; inset:0; background:linear-gradient(transparent 55%,rgba(8,8,8,.75) 100%); opacity:0; transition:opacity var(--tr); display:flex; align-items:flex-end; padding:1.5rem; }
.gallery-item:hover .gallery-ov { opacity:1; }
.gallery-ov span { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:#F5F0EB; }
.gal-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#222; color:#7A7068; font-size:2.5rem; }

/* ── NOSOTROS FRAME ───────────────────────────────────── */
.nos-frame  { position:absolute; top:-16px; right:-16px; width:48%; height:55%; border:1px solid #C8212B; border-radius:2px; opacity:.35; pointer-events:none; }
.nos-frame2 { position:absolute; bottom:-16px; left:-16px; width:38%; height:45%; border:1px solid rgba(245,240,235,.12); border-radius:2px; pointer-events:none; }

/* ── CONTACT FORM ─────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],textarea,select {
  width:100%; background:#181818; border:1px solid var(--ek-border);
  border-radius:2px; color:#F5F0EB; font-family:'Raleway',sans-serif;
  font-size:.9rem; padding:.85rem 1.1rem; transition:border-color var(--tr); outline:none;
}
input:focus,textarea:focus,select:focus { border-color:#C8212B; box-shadow:0 0 0 3px rgba(200,33,43,.1); }
input::placeholder,textarea::placeholder { color:#7A7068; }
textarea { resize:vertical; min-height:120px; }

/* ── ANIMATE ON SCROLL ────────────────────────────────── */
.anim { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.anim.al { transform:translateX(-32px); }
.anim.ar { transform:translateX(32px); }
.anim.in  { opacity:1; transform:none; }

/* ── BACK TO TOP ──────────────────────────────────────── */
.btt { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:#C8212B; border-radius:2px; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; pointer-events:none; transition:opacity var(--tr),transform var(--tr); z-index:500; }
.btt.visible { opacity:1; pointer-events:auto; }
.btt:hover { transform:translateY(-3px); }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media(max-width:768px){
  .main-nav { position:fixed; top:0; right:-100%; width:min(300px,80vw); height:100svh; background:rgba(8,8,8,.98); flex-direction:column; align-items:flex-start; padding:6rem 2rem 2rem; gap:.1rem; transition:right var(--tr); border-left:1px solid var(--ek-border); }
  .main-nav.open { right:0; }
  .main-nav a { font-size:.9rem; padding:.85rem 0; width:100%; border-bottom:1px solid var(--ek-border); }
  .nav-toggle { display:flex; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gallery-item:first-child { grid-column:span 2; grid-row:span 1; height:240px; }
  .gallery-item { height:200px; }
}
@media(max-width:640px){
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-item,.gallery-item:first-child { grid-column:1; height:220px; }
}
@media print { .site-header,.btt { display:none; } }