/*
Theme Name: Bad Luck 13
Theme URI: https://13badluck.com
Author: Room City
Description: Tema a medida para la cocteleria 13 Bad Luck Bar en Estepona.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bad-luck-13
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --black: #0b0a09;
  --charcoal: #16130f;
  --bone: #ece4d6;
  --bone-dim: #b8ac9a;
  --brass: #b6884a;
  --brass-bright: #d3a563;
  --line: rgba(236,228,214,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--bone);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  letter-spacing:0.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

.grain{
  pointer-events:none;
  position:fixed; inset:0; z-index:500;
  background-image:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode:multiply;
}

/* ---------- NAV ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  background:linear-gradient(to bottom, rgba(11,10,9,0.92), rgba(11,10,9,0));
  transition:background .4s ease;
}
.site-header.scrolled{ background:rgba(11,10,9,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:34px; height:auto;}
.brand .word{font-family:'Cormorant Garamond', serif; font-size:1.05rem; letter-spacing:0.14em; color:var(--bone);}
.brand .word b{color:var(--brass-bright); font-weight:600;}
.main-nav{display:flex; align-items:center; gap:38px;}
.main-nav a{
  font-size:0.86rem; letter-spacing:0.06em; color:var(--bone-dim);
  position:relative; padding:4px 0;
  transition:color .25s ease;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--brass-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.main-nav a:hover{color:var(--bone);}
.main-nav a:hover::after{transform:scaleX(1);}
.nav-toggle{display:none;}

/* ---------- HERO ---------- */
#inicio{
  position:relative; height:100vh; min-height:640px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(9,8,7,0.72) 0%, rgba(9,8,7,0.55) 45%, rgba(9,8,7,0.92) 100%),
    radial-gradient(ellipse 90% 70% at 50% 20%, rgba(182,136,74,0.12), transparent 60%),
    url('assets/interior-barra.jpg');
  background-size:cover;
  background-position:center 30%;
}
#inicio::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 2px);
  opacity:.4;
}
.hero-logo{
  width:min(460px, 78vw);
  margin-bottom:18px;
  animation:riseIn 1.4s ease both;
  filter:drop-shadow(0 0 40px rgba(0,0,0,0.5));
  position:relative; z-index:1;
}
.hero-logo img{width:100%; height:auto;}
#inicio .eyebrow{
  font-size:0.78rem; letter-spacing:0.32em; color:var(--brass-bright);
  animation:riseIn 1.4s ease .15s both;
  position:relative; z-index:1;
}
#inicio .tag{
  max-width:480px; margin:14px auto 40px;
  color:var(--bone-dim); font-size:1.02rem; font-style:italic;
  font-family:'Cormorant Garamond', serif;
  animation:riseIn 1.4s ease .35s both;
  position:relative; z-index:1;
}
@keyframes riseIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

.btn{
  display:inline-block; padding:14px 36px;
  border:1px solid var(--brass); color:var(--brass-bright);
  font-size:0.82rem; letter-spacing:0.12em;
  transition:all .3s ease;
  animation:riseIn 1.4s ease .45s both;
  background:none; cursor:pointer;
  position:relative; z-index:1;
}
.btn:hover{ background:var(--brass); color:var(--black); }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:1px; height:46px; background:linear-gradient(to bottom, transparent, var(--brass) 60%, transparent);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* ---------- SECTION BASICS ---------- */
.site-section{position:relative; padding:130px 0;}
.sec-head{ text-align:center; margin-bottom:64px; }
.sec-head .eyebrow{ font-size:0.75rem; letter-spacing:0.3em; color:var(--brass); }
.sec-head h2{ font-size:clamp(2.2rem, 5vw, 3.4rem); margin-top:10px; color:var(--bone); }
.divider{ width:64px; height:1px; background:var(--brass); margin:22px auto 0; }

/* ---------- CARTA ---------- */
#carta{ background:var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.menu-tabs{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:56px; }
.menu-tab{
  padding:10px 26px; font-size:0.82rem; letter-spacing:0.08em; color:var(--bone-dim);
  border:1px solid var(--line); cursor:pointer; background:transparent; font-weight:400;
  font-family:'Jost', sans-serif;
  transition:all .25s ease;
}
.menu-tab:hover{ color:var(--bone); border-color:var(--brass); }
.menu-tab.active{ background:var(--brass); border-color:var(--brass); color:var(--black); }

.menu-panel{ display:none; animation:fadeSlide .5s ease both; }
.menu-panel.active{ display:block; }
@keyframes fadeSlide{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.menu-note{
  text-align:center; color:var(--bone-dim); font-style:italic;
  font-family:'Cormorant Garamond', serif; font-size:1.05rem;
  max-width:560px; margin:0 auto 44px;
}

.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 60px; max-width:920px; margin:0 auto; }
.menu-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.menu-item .name{ color:var(--bone); font-family:'Cormorant Garamond', serif; font-size:1.18rem; }
.menu-item .origin{ display:block; font-family:'Jost',sans-serif; font-size:0.8rem; line-height:1.45; color:var(--bone-dim); letter-spacing:0.02em; margin-top:4px;}
.menu-item .price{ color:var(--brass-bright); font-size:0.95rem; white-space:nowrap; }
.menu-subhead{ grid-column:1 / -1; text-align:center; font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:1.5rem; color:var(--brass-bright); margin:44px 0 6px; padding-bottom:14px; border-bottom:1px solid var(--line); }

.cocktail-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--line); max-width:1000px; margin:0 auto; }
.cocktail-card{ background:var(--charcoal); padding:34px 28px; text-align:left; }
.cocktail-card .num{ font-family:'Cormorant Garamond', serif; font-size:0.85rem; color:var(--brass); }
.cocktail-card h3{ font-size:1.5rem; color:var(--bone); margin:8px 0 10px; }
.cocktail-card p{ font-size:0.88rem; color:var(--bone-dim); margin-bottom:14px; }
.cocktail-card .price{ color:var(--brass-bright); font-size:0.92rem; }

@media (max-width:720px){
  .menu-grid{ grid-template-columns:1fr; }
  .cocktail-grid{ grid-template-columns:1fr; }
}

/* ---------- NOSOTROS ---------- */
#nosotros{ background:var(--black); }
.nosotros-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.nosotros-visual{ position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); }
.nosotros-visual img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.nosotros-visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(11,10,9,0.05) 40%, rgba(11,10,9,0.35) 100%);
  pointer-events:none;
}
.nosotros-text .eyebrow{ font-size:0.75rem; letter-spacing:0.3em; color:var(--brass); }
.nosotros-text h2{ font-size:clamp(2rem, 4vw, 2.9rem); margin:12px 0 22px; color:var(--bone); }
.nosotros-text p{ color:var(--bone-dim); margin-bottom:18px; max-width:520px; }
.nosotros-text p:last-of-type{margin-bottom:0;}
.signature{ margin-top:28px; font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--brass-bright); }

@media (max-width:860px){
  .nosotros-layout{ grid-template-columns:1fr; }
  .nosotros-visual{ aspect-ratio:16/10; }
}

/* ---------- CONTACTO ---------- */
#contacto{ background:var(--charcoal); border-top:1px solid var(--line); }
.contacto-layout{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.info-block{ margin-bottom:34px; }
.info-block .label{ font-size:0.74rem; letter-spacing:0.2em; color:var(--brass); margin-bottom:8px; }
.info-block .value{ font-family:'Cormorant Garamond', serif; font-size:1.3rem; color:var(--bone); }
.info-block .value span{ display:block; color:var(--bone-dim); font-family:'Jost',sans-serif; font-size:0.92rem; margin-top:4px; }
.info-block .value span:first-child{ margin-top:0; }
.social-row{ display:flex; gap:16px; margin-top:34px; }
.social-row a{
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease;
}
.social-row a:hover{ border-color:var(--brass); background:rgba(182,136,74,0.08); }
.social-row svg{ width:18px; height:18px; fill:var(--bone); }

.contact-form{ display:flex; flex-direction:column; gap:20px; }
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:12px 0; color:var(--bone); font-family:'Jost',sans-serif; font-size:0.95rem;
  outline:none; resize:none;
}
.field textarea{ min-height:90px; }
.field label{
  position:absolute; left:0; top:12px; color:var(--bone-dim); font-size:0.95rem;
  pointer-events:none; transition:all .2s ease;
}
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top:-14px; font-size:0.72rem; letter-spacing:0.08em; color:var(--brass);
}
.field input:focus, .field textarea:focus{ border-color:var(--brass); }
.contact-form .btn{ align-self:flex-start; margin-top:8px; animation:none; }

@media (max-width:860px){ .contacto-layout{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--black); padding:50px 0 30px; text-align:center; border-top:1px solid var(--line); }
.site-footer .fine{ color:var(--bone-dim); font-size:0.78rem; letter-spacing:0.04em; }
.site-footer .fine a{ color:var(--brass-bright); }

::selection{ background:var(--brass); color:var(--black); }