/* ===== Tokens ===== */
:root{
  --espresso: #1C0A02;   /* brand primary — deep espresso */
  --cafe: #4A2E20;       /* softer brown for body text */
  --oro: #C0781F;        /* brand secondary — warm gold */
  --oro-light: #E3B372;
  --rosa: #FF0080;       /* brand accent — single contrast color */
  --crema: #FAF3E9;      /* warm cream background */
  --marfil: #FFFDF9;     /* card background */
  --linea: rgba(28,10,2,.12);

  --display: "Cormorant", Georgia, serif;
  --body: "Jost", system-ui, sans-serif;

  --radius: 6px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--crema); color:var(--cafe);
  font-family:var(--body); font-weight:400; font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.wrap--narrow{ max-width:640px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; }

.eyebrow{
  display:block; font-family:var(--body); font-weight:500; font-size:.8rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oro);
  margin:0 0 14px;
}
.eyebrow--center{ text-align:center; }
.eyebrow--light{ color:var(--oro-light); }

.section-title{
  font-family:var(--display); font-weight:500; font-style:normal;
  font-size:clamp(2.1rem, 3.6vw, 3rem); line-height:1.12; color:var(--espresso);
  margin:0 0 20px; letter-spacing:.005em;
}
.section-title em{ font-style:italic; color:var(--oro); font-weight:500; }
.section-title--center{ text-align:center; }
.section-title--light{ color:var(--marfil); }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-weight:500; font-size:.92rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:15px 30px; border-radius:2px;
  transition:transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{ background:var(--rosa); color:#fff; }
.btn--primary:hover{ transform:translateY(-2px); background:#e0006e; }
.btn--ghost{ border:1px solid var(--espresso); color:var(--espresso); }
.btn--ghost:hover{ background:var(--espresso); color:var(--crema); }
.btn--small{ padding:10px 20px; font-size:.78rem; border:1px solid var(--oro); color:var(--oro); }
.btn--small:hover{ background:var(--oro); color:#fff; }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; background:rgba(250,243,233,.0);
  transition:background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.is-scrolled{ background:rgba(250,243,233,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--linea); padding:12px 32px; }
.nav__brand img{ height:34px; width:auto; animation:logo-in 1.1s cubic-bezier(.16,1,.3,1) both .15s; }
@keyframes logo-in{
  from{ opacity:0; transform:translateY(-6px) scale(.88); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .nav__brand img{ animation:none; } }
.nav__links{ display:flex; gap:36px; }
.nav__links a{ font-size:.86rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--espresso); position:relative; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--rosa); transform:scaleX(0); transition:transform .2s ease; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--espresso); color:var(--crema);
  padding:11px 20px; font-size:.8rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}
.nav__cta:hover{ background:var(--rosa); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; }
.nav__burger span{ width:22px; height:1.5px; background:var(--espresso); display:block; }

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:66px 20px auto 20px; background:var(--marfil); border-radius:8px;
    flex-direction:column; align-items:center; padding:26px; gap:20px;
    box-shadow:0 20px 44px rgba(28,10,2,.18);
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav__links.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ===== Hero ===== */
.hero{ padding:150px 0 90px; background:var(--crema); }
.hero__inner{ display:grid; grid-template-columns:1fr .82fr; gap:60px; align-items:center; }
.hero__title{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,5vw,4.1rem); line-height:1.08; color:var(--espresso); margin:0 0 22px; }
.hero__title em{ font-style:italic; color:var(--oro); }
.hero__sub{ max-width:42ch; color:var(--cafe); font-size:1.08rem; margin:0 0 34px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:34px; }
.hero__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.hero__chips span{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:7px 16px; border:1px solid var(--linea); color:var(--cafe); border-radius:999px;
}

.hero__media{ position:relative; }
.hero__frame{
  margin:0; border-radius:4px; overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 40px 60px -30px rgba(28,10,2,.4);
}
.hero__frame img{ width:100%; height:100%; object-fit:cover; }
.hero__stroke{ position:absolute; left:-46px; top:-30px; width:70px; height:calc(100% + 60px); overflow:visible; }
#heroStrokePath{ fill:none; stroke:var(--oro); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; animation:draw-stroke 2.6s ease forwards .4s; }
@keyframes draw-stroke{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ #heroStrokePath{ animation:none; stroke-dashoffset:0; } }

@media (max-width:900px){
  .hero{ padding:120px 0 60px; }
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__sub{ margin-inline:auto; }
  .hero__actions, .hero__chips{ justify-content:center; }
  .hero__stroke{ display:none; }
  .hero__frame{ max-width:380px; margin:0 auto; }
}

/* ===== About / collage ===== */
.about{ padding:100px 0; background:var(--marfil); }
.about__inner{ display:grid; grid-template-columns:.95fr 1fr; gap:70px; align-items:center; }
.about__collage{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.about__collage img{ border-radius:4px; object-fit:cover; width:100%; }
.about__collage .c1{ aspect-ratio:3/4; align-self:end; }
.about__collage .c2{ aspect-ratio:3/4; margin-top:-40px; }
.about__collage .c3{ aspect-ratio:1/1; }
.about__collage .c4{ aspect-ratio:1/1; margin-top:20px; }
.about__text{ margin:0 0 26px; font-size:1.03rem; }
.link-underline{ font-weight:500; letter-spacing:.03em; color:var(--espresso); border-bottom:1px solid var(--oro); padding-bottom:3px; }

@media (max-width:900px){
  .about{ padding:70px 0; }
  .about__inner{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .about__collage .c2, .about__collage .c4{ margin-top:0; }
}

/* ===== Servicios ===== */
.servicios{ padding:100px 0; background:var(--crema); }
.servicios__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:50px; }
.service-card{ background:var(--marfil); border-radius:4px; overflow:hidden; box-shadow:0 1px 0 var(--linea); }
.service-card__img{ aspect-ratio:4/3; overflow:hidden; }
.service-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.service-card:hover .service-card__img img{ transform:scale(1.06); }
.service-card__body{ padding:30px 28px 32px; }
.service-card__body h3{ font-family:var(--display); font-weight:500; font-size:1.5rem; color:var(--espresso); margin:0 0 10px; }
.service-card__body p{ margin:0 0 22px; font-size:.96rem; color:var(--cafe); }

@media (max-width:900px){ .servicios__grid{ grid-template-columns:1fr; } .servicios{ padding:70px 0; } }

/* ===== Productos band ===== */
.productos{ background:var(--espresso); padding:80px 0; }
.productos__inner{ display:grid; grid-template-columns:.8fr 1fr; gap:60px; align-items:center; }
.productos__img{ margin:0; border-radius:4px; overflow:hidden; aspect-ratio:5/4; }
.productos__img img{ width:100%; height:100%; object-fit:cover; }
.productos .eyebrow{ color:var(--oro-light); }
.productos .section-title{ color:var(--marfil); }
.productos__copy p:last-child{ color:rgba(250,243,233,.72); max-width:42ch; }

@media (max-width:900px){ .productos__inner{ grid-template-columns:1fr; text-align:center; gap:34px; } }

/* ===== Galeria ===== */
.galeria{ padding:100px 0; background:var(--marfil); }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
.gallery-grid img{ aspect-ratio:4/5; object-fit:cover; border-radius:4px; transition:transform .4s ease; }
.gallery-grid img:hover{ transform:scale(1.02); }
@media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } .galeria{ padding:70px 0; } }

/* ===== Contacto ===== */
.contacto{ background:var(--espresso); padding:100px 0 90px; text-align:center; }
.contacto__sub{ color:rgba(250,243,233,.68); margin:0 0 40px; }
.whatsapp-block{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--rosa); color:#fff;
  padding:19px 36px; border-radius:2px;
  font-family:var(--display); font-weight:500; font-size:1.5rem;
  transition:transform .15s ease, background-color .2s ease;
}
.whatsapp-block:hover{ transform:translateY(-2px); background:#e0006e; }
.contacto__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:640px; margin:50px auto 0; }
.contacto__card{ background:rgba(250,243,233,.06); border:1px solid rgba(250,243,233,.15); padding:24px 18px; border-radius:4px; }
.contacto__card--link:hover{ background:rgba(250,243,233,.12); }
.contacto__label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-light); margin-bottom:8px; }
.contacto__card p{ margin:0; color:var(--marfil); font-family:var(--display); font-size:1.1rem; }
@media (max-width:640px){ .contacto__grid{ grid-template-columns:1fr; } }

/* ===== Footer ===== */
.footer{ background:#120601; padding:36px 0; }
.footer__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.footer__logo{ height:28px; width:auto; }
.footer__links{ display:flex; gap:26px; flex-wrap:wrap; font-size:.82rem; color:rgba(250,243,233,.55); }
.footer__links a:hover{ color:var(--oro-light); }