:root{
  --bg:#0a0a0a;
  --bg2:#111111;
  --panel:#161616;
  --line:#2a2a2a;
  --text:#f2f0ec;
  --muted:#9a9a9a;
  --red:#c8a45c;             /* acento principal — café con leche */
  --accent:#efeae2;          /* blanco hueso para precios y firma */
  --font-head:'Bebas Neue', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

/* ---------- Placeholder de imagen ("?") ---------- */
.img-placeholder{
  width:100%;height:100%;min-height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#1b1b1b;
  border:1px dashed #3a3a3a;
  color:#4a4a4a;
  font-family:var(--font-head);
  font-size:clamp(3rem,8vw,6rem);
  user-select:none;
}
.img-placeholder.tall{aspect-ratio:3/4}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 3rem;
  background:linear-gradient(to bottom, rgba(10,10,10,.92), rgba(10,10,10,0));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.logo{
  font-family:var(--font-head);
  font-size:1.5rem;letter-spacing:.12em;
}
.logo span{color:var(--red)}
.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);position:relative;transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--red);transition:width .3s;
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.burger{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}

/* ---------- HERO ---------- */
.hero{
  position:relative;height:100vh;min-height:640px;
  display:flex;align-items:flex-end;
}
.hero-slides{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.active{opacity:1}
.hero-slide .img-placeholder{border:none}
.hero-slide img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.95)}
.hero-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.55) 100%);
}
.hero-content{
  position:relative;z-index:2;width:100%;
  padding:0 3rem 4.5rem;
}
.kicker{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;
}
.hero h1{
  font-family:var(--font-head);
  font-size:clamp(3rem, 9vw, 7.5rem);
  line-height:.95;letter-spacing:.02em;
  max-width:14ch;
}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-services{
  margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
.hero-services li{list-style:none}
.hero-services li::before{content:'· ';color:var(--red)}
.hero-dots{
  position:absolute;right:3rem;bottom:4.8rem;z-index:2;
  display:flex;gap:.55rem;
}
.hero-dots button{
  width:26px;height:2px;border:none;cursor:pointer;
  background:#3a3a3a;transition:background .3s;
}
.hero-dots button.active{background:var(--text)}
.scroll-hint{
  position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);
  z-index:2;color:var(--muted);font-size:.65rem;letter-spacing:.3em;
  text-transform:uppercase;animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- SECTION SHELL ---------- */
section{padding:6.5rem 3rem}
section.alt-bg{background:var(--bg2)}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:3rem;flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--font-head);
  font-size:clamp(2.6rem, 6vw, 4.8rem);
  line-height:.95;letter-spacing:.02em;
}
.section-head h2 em{font-style:normal;color:var(--red)}
.arrow{
  display:inline-block;font-family:var(--font-head);font-size:2rem;
  color:var(--muted);letter-spacing:0;line-height:1;
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- SOBRE MI ---------- */
.about{
  display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;
}
.about-text .kicker{margin-bottom:.8rem}
.about-text h2{
  font-family:var(--font-head);
  font-size:clamp(2.8rem, 6vw, 4.6rem);
  line-height:.95;margin-bottom:1.6rem;
}
.about-text p{color:#cfcfcf;max-width:52ch;font-size:.95rem}
.about-text .firma{
  margin-top:2rem;font-size:.72rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--accent);
}
.about-photo{position:relative}
.about-photo::before{
  content:'';position:absolute;inset:0;transform:translate(16px,16px);
  border:1px solid var(--red);z-index:0;
}
.about-photo .img-placeholder{position:relative;z-index:1}
.about-photo img{
  position:relative;z-index:1;width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(20%) contrast(1.05);
}

/* ---------- GALLERY GRID ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:auto;
  grid-auto-flow:dense;
  gap:0;
  margin:0;
  padding:0;
  line-height:0;
}
.gallery figure{
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
  border:0;
  aspect-ratio:1;
  background:var(--bg2);
}
.gallery figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gallery img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s ease, filter .7s ease;
  filter:saturate(.9);
}
.gallery figure:hover img{transform:scale(1.06);filter:saturate(1.1)}

/* ---------- PRICING ---------- */
.pricing-head{
  margin-top:4.5rem;margin-bottom:2.2rem;
  display:flex;align-items:baseline;gap:1.2rem;
  scroll-margin-top:5rem;
}
.pricing-head h3{
  font-family:var(--font-head);font-size:2.2rem;letter-spacing:.03em;
}
.pricing-head span{color:var(--muted);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.2rem;
}
.card{
  background:var(--panel);border:1px solid var(--line);
  padding:2.2rem 1.9rem;position:relative;
  transition:transform .35s ease, border-color .35s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);border-color:var(--red)}
.card.featured{border-color:var(--red)}
.card.featured::before{
  content:'POPULAR';position:absolute;top:-1px;right:1.4rem;
  background:var(--red);color:#fff;font-size:.58rem;letter-spacing:.25em;
  padding:.3rem .7rem;
}
.card h4{
  font-family:var(--font-head);font-size:1.9rem;letter-spacing:.05em;
  margin-bottom:.2rem;
}
.card .price{
  font-family:var(--font-head);font-size:2.6rem;color:var(--accent);
  line-height:1;margin:1rem 0 1.4rem;
}
.card .price small{font-size:.85rem;letter-spacing:.1em;color:var(--muted);font-family:var(--font-body)}
.card ul{list-style:none;flex:1}
.card li{
  font-size:.82rem;color:#cfcfcf;padding:.55rem 0;
  border-bottom:1px solid #202020;display:flex;gap:.6rem;align-items:baseline;
}
.card li::before{content:'—';color:var(--red);flex-shrink:0}
.card .delivery{
  margin-top:1.2rem;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.card .cta{
  margin-top:1.4rem;display:inline-block;text-align:center;
  border:1px solid var(--text);padding:.75rem 1rem;
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  transition:background .3s, color .3s;
}
.card .cta:hover{background:var(--text);color:var(--bg)}

/* ---------- EVENTOS QUOTE BAND ---------- */
.quote-band{
  margin-top:4.5rem;border:1px solid var(--line);
  background:linear-gradient(120deg, #141414, #1a1510);
  padding:3rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
}
.quote-band h3{font-family:var(--font-head);font-size:2.4rem;line-height:1}
.quote-band p{color:var(--muted);font-size:.85rem;max-width:46ch;margin-top:.6rem}
.btn-red{
  background:var(--red);color:#fff;padding:1rem 2.2rem;
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  transition:opacity .3s;white-space:nowrap;
}
.btn-red:hover{opacity:.85}

/* ---------- CONTACTO / FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding:5rem 3rem 3rem;text-align:center;
}
footer h2{
  font-family:var(--font-head);font-size:clamp(2.6rem,7vw,5rem);
  line-height:.95;margin-bottom:2.2rem;
}
footer h2 em{font-style:normal;color:var(--red)}
.contact-row{
  display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;margin-bottom:3rem;
}
.contact-item{font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.contact-item a{color:var(--text);display:block;margin-top:.3rem;font-size:1rem;letter-spacing:.05em;text-transform:none;transition:color .3s}
.contact-item a:hover{color:var(--red)}
.foot-note{color:#555;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  nav{padding:1rem 1.4rem}
  .nav-links{
    display:none;position:fixed;inset:0;background:rgba(10,10,10,.97);
    flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:1rem}
  .burger{display:block;z-index:101}
  section{padding:4.5rem 1.4rem}
  .hero-content{padding:0 1.4rem 4rem}
  .hero-dots{right:1.4rem;bottom:4.2rem}
  .about{grid-template-columns:1fr;gap:2.5rem}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .quote-band{padding:2rem 1.4rem}
}