/* Brasa — Parrilla & Vinoteca | Prototipo web */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --charcoal:#161311;
  --charcoal-2:#1f1b18;
  --cream:#f4ece1;
  --cream-dim:#d9cdb9;
  --ember:#c4713b;
  --ember-light:#e08a4f;
  --line:rgba(244,236,225,0.12);
  --radius:2px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--charcoal);
  color:var(--cream);
  font-family:'Jost',sans-serif;
  font-weight:300;
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family:'Playfair Display',serif;
  font-weight:700;
  letter-spacing:0.01em;
}

a{color:inherit;text-decoration:none;}

img{max-width:100%;display:block;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-size:0.72rem;
  color:var(--ember-light);
  font-weight:500;
}

/* Header */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(22,19,17,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  max-width:1180px;
  margin:0 auto;
}

.logo{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:0.04em;
}
.logo span{color:var(--ember);}

.nav-links{
  display:flex;
  gap:40px;
  list-style:none;
}

.nav-links a{
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .25s, color .25s;
}
.nav-links a:hover, .nav-links a.active{
  border-color:var(--ember);
  color:var(--ember-light);
}

.nav-cta{
  border:1px solid var(--ember);
  padding:10px 22px;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  transition:background .25s, color .25s;
}
.nav-cta:hover{background:var(--ember);color:var(--charcoal);}

.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;
    top:73px;left:0;right:0;
    background:var(--charcoal-2);
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    border-bottom:1px solid var(--line);
  }
  .nav-links.open{max-height:320px;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:16px 32px;}
  .nav-cta{display:none;}
  .nav-toggle{display:block;}
}

/* Hero */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  padding-top:90px;
  background:
    linear-gradient(180deg, rgba(22,19,17,0.55), rgba(22,19,17,0.95)),
    radial-gradient(circle at 30% 30%, #2a211a 0%, #161311 70%);
}

.hero .container{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}

.hero h1{
  font-size:clamp(2.6rem,5vw,4.4rem);
  line-height:1.05;
  margin:18px 0 24px;
}
.hero h1 em{color:var(--ember);font-style:normal;}

.hero p{
  color:var(--cream-dim);
  font-size:1.05rem;
  max-width:480px;
  margin-bottom:34px;
}

.btn{
  display:inline-block;
  padding:16px 34px;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  border:1px solid var(--ember);
  transition:all .25s;
}
.btn-solid{background:var(--ember);color:var(--charcoal);}
.btn-solid:hover{background:var(--ember-light);border-color:var(--ember-light);}
.btn-outline{color:var(--cream);margin-left:16px;}
.btn-outline:hover{background:rgba(244,236,225,0.08);}

.hero-visual{
  aspect-ratio:4/5;
  border-radius:var(--radius);
  background:
    linear-gradient(160deg, rgba(196,113,59,0.35), transparent 60%),
    repeating-linear-gradient(135deg, #2b2420 0 2px, #241f1b 2px 40px);
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
}
.hero-visual::after{
  content:"BRASA";
  position:absolute;
  bottom:24px;right:24px;
  font-family:'Playfair Display',serif;
  font-size:0.85rem;
  letter-spacing:0.3em;
  color:var(--cream-dim);
  background:rgba(22,19,17,0.6);
  padding:6px 12px;
  z-index:2;
}

.hero-visual img,
.img-block img,
.gallery-item img,
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Section generic */
section{padding:110px 0;}
.section-head{
  max-width:640px;
  margin-bottom:60px;
}
.section-head h2{
  font-size:clamp(2rem,4vw,2.8rem);
  margin-top:14px;
}
.section-head p{color:var(--cream-dim);margin-top:16px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* Highlights / features */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
@media (max-width:860px){.grid-3{grid-template-columns:1fr;}}

.feature-card{
  border:1px solid var(--line);
  padding:36px 30px;
  transition:border-color .25s, transform .25s;
}
.feature-card:hover{border-color:var(--ember);transform:translateY(-4px);}
.feature-num{
  font-family:'Playfair Display',serif;
  font-size:2.2rem;
  color:var(--ember);
  margin-bottom:16px;
}
.feature-card h3{font-size:1.2rem;margin-bottom:10px;}
.feature-card p{color:var(--cream-dim);font-size:0.92rem;}

/* Menu preview */
.section-alt{background:var(--charcoal-2);}

.dish-list{display:flex;flex-direction:column;gap:0;}
.dish-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.dish-row:first-child{border-top:1px solid var(--line);}
.dish-name{font-family:'Playfair Display',serif;font-size:1.25rem;}
.dish-desc{color:var(--cream-dim);font-size:0.88rem;margin-top:6px;max-width:520px;}
.dish-price{font-size:1.1rem;color:var(--ember-light);white-space:nowrap;}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media (max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-item{
  aspect-ratio:1/1;
  background:linear-gradient(145deg,#2b2420,#1c1815);
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.gallery-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:14px 16px;
  background:linear-gradient(0deg, rgba(22,19,17,0.85), transparent);
  color:var(--cream-dim);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  z-index:2;
}

/* Testimonial */
.testimonial{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.testimonial p{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-style:italic;
  line-height:1.5;
  color:var(--cream);
}
.testimonial cite{
  display:block;
  margin-top:24px;
  font-style:normal;
  color:var(--ember-light);
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-size:0.78rem;
}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg, #2a2019, #1c1613);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.cta-band h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:22px;}

/* Footer */
footer{
  padding:60px 0 30px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:0.14em;
  color:var(--ember-light);
  margin-bottom:18px;
  font-family:'Jost',sans-serif;
  font-weight:500;
}
.footer-grid p, .footer-grid a{color:var(--cream-dim);font-size:0.92rem;display:block;margin-bottom:8px;}
.footer-grid a:hover{color:var(--ember-light);}
.footer-bottom{
  text-align:center;
  color:var(--cream-dim);
  font-size:0.8rem;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* Page header (interior pages) */
.page-hero{
  padding:180px 0 80px;
  text-align:center;
  background:linear-gradient(180deg, rgba(196,113,59,0.08), transparent);
}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-top:14px;}

/* Forms */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.form-grid .full{grid-column:1/-1;}
label{
  display:block;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--cream-dim);
  margin-bottom:10px;
}
input, textarea, select{
  width:100%;
  background:var(--charcoal-2);
  border:1px solid var(--line);
  color:var(--cream);
  padding:14px 16px;
  font-family:'Jost',sans-serif;
  font-size:0.95rem;
}
input:focus, textarea:focus, select:focus{outline:none;border-color:var(--ember);}
textarea{resize:vertical;min-height:130px;}

/* Two column layout */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}
.img-block{
  aspect-ratio:4/3;
  background:linear-gradient(145deg,#2b2420,#1c1815);
  border:1px solid var(--line);
}

/* Map placeholder */
.map-block{
  aspect-ratio:16/7;
  background:
    linear-gradient(rgba(22,19,17,0.4),rgba(22,19,17,0.4)),
    repeating-linear-gradient(45deg,#241f1b 0 12px,#1c1815 12px 24px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--cream-dim);
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-size:0.8rem;
}

/* Info list */
.info-list{list-style:none;}
.info-list li{
  padding:18px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:var(--cream-dim);
}
.info-list li span:first-child{color:var(--cream);}

.badge-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;}
.badge{
  border:1px solid var(--line);
  padding:8px 16px;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--cream-dim);
}