/* =========================================================
   CHEF BLADIMIR GARCÍA — Landing Page
   Estilo: hero oscuro a pantalla completa + contadores,
   inspirado en la estética editorial de lujo gastronómico
========================================================= */
:root{
  --bg:          #F8EFDE;   /* crema tostado, más cálido */
  --bg-2:        #FFFFFF;
  --ink:         #2A1811;   /* espresso — marrón oscuro cálido, no negro */
  --ink-2:       #3B2419;
  --cream:       #F2E4CB;
  --wine:        #7A2331;   /* vino tinto — el color "con ganas de comer" */
  --wine-deep:   #591825;
  --saffron:     #D99A2E;   /* azafrán — cálido, especiado, lujoso */
  --saffron-deep:#B37A1D;
  --terracotta:  #B5613F;
  --line:        rgba(42,24,17,.14);
  --line-dark:   rgba(248,239,222,.14);

  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ 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; font-family: var(--font-body); color: var(--ink); background: var(--bg-2); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h2{ font-family: var(--font-display); font-weight:600; margin:0 0 .5em; line-height:1.15; color: var(--ink); }
p{ margin:0 0 1em; }
:focus-visible{ outline:2px solid var(--saffron); outline-offset:3px; }

section{ padding: clamp(3rem, 6vw, 5rem) var(--gutter); }

.eyebrow{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color: var(--wine); margin:0 0 .7rem; text-align:center; }

.section-head{ max-width: 620px; margin: 0 auto 2.6rem; text-align:center; }
.section-head h2{ font-size: clamp(2rem, 3.4vw, 2.6rem); }
.section-head h2 em{ font-style:italic; color: var(--wine); }

.placeholder-box{ position:relative; background: linear-gradient(150deg,#DEDBD3,#C9C5BA); overflow:hidden; }
.placeholder-label{ position:absolute; left:.7rem; bottom:.7rem; font-size:.62rem; color:rgba(26,26,24,.65); background:rgba(255,255,255,.75); padding:.3rem .55rem; }
.serv-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; padding:.95rem 2.1rem; border-radius:2px; border:1px solid transparent; cursor:pointer; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s; letter-spacing:.02em; }
.btn:hover{ transform: translateY(-2px); }
.btn--orange{ background: var(--wine); color:#fff; }
.btn--orange:hover{ background: var(--wine-deep); color:#fff; }
.btn--outline{ background:transparent; border-color: rgba(255,255,255,.5); color:#fff; }
.btn--outline:hover{ background: #fff; color: var(--ink); border-color:#fff; }
.btn--wide{ width:100%; justify-content:center; }
.icon-wa{ width:18px; height:18px; fill:currentColor; }

/* NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; background: transparent; transition: background .3s var(--ease), border-color .3s var(--ease); border-bottom:1px solid transparent; }
.nav.is-scrolled{ background: rgba(22,20,15,.92); backdrop-filter: blur(8px); border-bottom-color: var(--line-dark); }
.nav__inner{ max-width: var(--maxw); margin:0 auto; padding:1.2rem var(--gutter); display:flex; align-items:center; justify-content:space-between; }
.nav__mark{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:#fff; letter-spacing:.01em; }
.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{ color:#fff; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; opacity:.82; }
.nav__links a:hover{ opacity:1; }
.nav__cta{ background: var(--wine); color:#fff !important; opacity:1 !important; padding:.6rem 1.5rem; border-radius:2px; }
.nav__cta:hover{ background: var(--wine-deep); color:#fff !important; }
.nav__lang{ font-size:.78rem !important; font-weight:700 !important; border:1px solid rgba(255,255,255,.4); border-radius:2px; padding:.4rem .7rem !important; opacity:1 !important; }
.nav__lang:hover{ background:#fff; color: var(--ink) !important; border-color:#fff; }
.nav__burger{ display:none; background:none; border:0; width:44px; height:44px; padding:11px 6px; position:relative; cursor:pointer; }
.nav__burger span{ position:absolute; left:11px; right:11px; height:2px; background: #fff; }
.nav__burger span:nth-child(1){ top:14px; } .nav__burger span:nth-child(2){ top:22px; } .nav__burger span:nth-child(3){ top:30px; }
@media (max-width:860px){
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(78vw,300px); background: var(--ink); flex-direction:column; align-items:flex-start; padding:6rem 2rem 2rem; gap:1.4rem; transform:translateX(100%); transition:transform .35s var(--ease); box-shadow:-6px 0 20px rgba(0,0,0,.3); }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__burger{ display:block; }
}

/* HERO — pantalla completa, imagen de fondo con velo oscuro */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  overflow:hidden; color:#fff;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position: top center; filter:saturate(.9) contrast(1.05); }
.hero__bg::after{ content:''; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(22,20,15,.55) 0%, rgba(22,20,15,.35) 35%, rgba(22,20,15,.85) 100%),
  linear-gradient(90deg, rgba(22,20,15,.85) 0%, rgba(22,20,15,.25) 55%);
}
.hero__deco{ display:none; }
.hero__text{ position:relative; z-index:2; padding: 8rem clamp(1.5rem,5vw,5rem) 5rem var(--gutter); max-width:720px; }
.hero__kicker{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.24em; color: var(--saffron); margin-bottom:1rem; }
.hero__title{ font-family: var(--font-display); font-weight:600; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.08; color:#fff; margin: 0 0 1.1rem; }
.hero__title em{ font-style:italic; color: var(--saffron); font-weight:500; }
.hero__sub{ font-size:1.08rem; color: rgba(255,255,255,.82); max-width:42ch; margin-bottom:2.1rem; }
.hero__media{ display:none; }
@media (max-width: 900px){
  .hero{ min-height:92vh; }
  .hero__text{ padding: 7rem var(--gutter) 3.5rem; text-align:left; }
}

/* STATS — franja de contadores, firma tomada de ffe.mx */
.stats{ background: var(--ink); color:#fff; padding: clamp(2.6rem,5vw,3.6rem) var(--gutter); }
.stats__grid{ max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.stats__num{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,4.4vw,3.2rem); color: var(--saffron); line-height:1; margin-bottom:.5rem; }
.stats__label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,.72); }
@media (max-width:700px){ .stats__grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* ABOUT — biografía */
.about{ max-width: 760px; margin:0 auto; text-align:center; background: var(--bg); }
.about__bio{ font-size:1.08rem; color:#3a3833; }
.about__actions{ margin-top:1rem; }

/* SERVICES */
.services{ background: var(--bg); }
.services__grid{ max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.serv-card{ background:#fff; border-radius:4px; padding:1.5rem; border:1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.serv-card:hover{ transform: translateY(-6px); box-shadow: 0 25px 50px rgba(22,20,15,.12); }
.serv-card__img{ aspect-ratio:4/3; border-radius:2px; margin-bottom:1.2rem; }
.serv-card h3{ font-family: var(--font-display); font-weight:600; font-size:1.25rem; color: var(--ink); }
.serv-card p{ font-size:.9rem; color:#4a4842; }
.serv-card__link{ display:inline-block; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color: var(--wine-deep); margin-top:.3rem; border-bottom:1px solid transparent; }
.serv-card__link:hover{ color: var(--ink); border-color: var(--ink); }
@media (max-width:980px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .services__grid{ grid-template-columns:1fr; } }

/* PRICING */
.pricing{ background: var(--ink); color:#fff; }
.pricing h2{ color:#fff; }
.pricing .eyebrow{ color: var(--saffron); }
.pricing__table-wrap{ max-width: var(--maxw); margin:0 auto; overflow-x:auto; }
.pricing__table{ width:100%; border-collapse:collapse; min-width:580px; }
.pricing__table th,.pricing__table td{ padding:1rem 1.1rem; text-align:center; border-bottom:1px solid var(--line-dark); }
.pricing__table th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color: var(--saffron); font-weight:700; }
.pricing__table td:first-child, .pricing__table th:first-child{ text-align:left; }
.pricing__table td{ font-weight:600; font-size:1rem; }
.pricing__table td:first-child{ font-weight:400; font-size:.85rem; }
.pricing__table td span{ display:block; font-size:.64rem; font-weight:400; color:rgba(255,255,255,.55); }
.pricing__table-extra td,.pricing__table-assist td{ font-size:.85rem; font-weight:400; }
.pricing__table-assist{ background: rgba(122,35,49,.14); }
.pricing__note{ text-align:center; max-width:620px; margin:1.4rem auto 0; font-size:.78rem; color:rgba(255,255,255,.6); }
.pricing__cta{ text-align:center; margin-top:2.2rem; }

/* FAQ */
.faq{ background: var(--bg); }
.faq__list{ max-width:700px; margin:0 auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; font-weight:700; font-size:1rem; color: var(--ink); padding:1.2rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq__icon{ position:relative; width:16px; height:16px; flex:none; }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; background: var(--wine-deep); transition:transform .3s var(--ease); }
.faq__icon::before{ left:0; top:50%; width:100%; height:2px; margin-top:-1px; }
.faq__icon::after{ top:0; left:50%; height:100%; width:2px; margin-left:-1px; }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:rotate(90deg) scaleX(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq__a p{ padding-bottom:1.2rem; color:#4a4842; max-width:58ch; font-size:.92rem; }

/* CONTACT / CIERRE DE VENTA */
.contact{ background: var(--cream); text-align:center; }

.promo{ max-width:560px; margin:0 auto 2.4rem; background:#fff; border:1px solid var(--line); border-radius:4px; padding:1.8rem 2rem; position:relative; }
.promo::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--wine); }
.promo__tag{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color: var(--terracotta); margin-bottom:.5rem; }
.promo__title{ font-family: var(--font-display); font-weight:600; font-size:1.5rem; color: var(--ink); margin-bottom:.6rem; }
.promo__title span{ color: var(--saffron-deep); }
.promo__desc{ font-size:.92rem; color:#4a4842; margin-bottom:0; }

.trust{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem; max-width:720px; margin:0 auto 2.6rem; font-size:.78rem; font-weight:600; letter-spacing:.03em; color:#5c5a53; text-transform:uppercase; }
.trust__dot{ width:4px; height:4px; border-radius:50%; background: var(--wine-deep); flex:none; }

.contact__cta{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.btn--lg{ padding:1.1rem 2.6rem; font-size:1rem; }
.contact__microcopy{ font-size:.8rem; color:#6b6a63; margin:0; }


/* FOOTER */
.footer{ background: var(--ink); color: rgba(255,255,255,.75); padding: 3rem var(--gutter) 1.4rem; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2rem; border-bottom:1px solid var(--line-dark); }
.footer__mark{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:#fff; margin-bottom:.4rem; }
.footer__heading{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color: var(--saffron); margin-bottom:.9rem; font-weight:700; }
.footer__col{ display:flex; flex-direction:column; gap:.6rem; font-size:.88rem; }
.footer__col a:hover{ color:#fff; }
.footer__copy{ max-width:var(--maxw); margin:1.4rem auto 0; font-size:.72rem; text-align:center; }
@media (max-width:780px){ .footer__inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer__inner{ grid-template-columns:1fr; } }

/* FLOATING WHATSAPP */
.wa-float{ position:fixed; right:1.4rem; bottom:1.4rem; z-index:90; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.3); }
.wa-float svg{ width:27px; height:27px; fill:#fff; }

/* SCROLL REVEAL */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }