/* ============================================
   ESENCIA PRODUCTIVA BY RG — Design tokens
   ============================================ */
:root{
  --cream:        #FAF8F5;
  --cream-deep:   #F1ECE4;
  --verde:        #4F5F5A;
  --verde-deep:   #3C4A46;
  --verde-tint:   #E7ECEA;
  --gold:         #B59173;
  --gold-tint:    #F1E5DA;
  --carbon:       #3A3A38;
  --carbon-soft:  #6B6862;

  --vision:       #B59173;
  --control:      #B6F1D8;
  --operacion:    #CFD76F;
  --liderazgo:    #F19263;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-script:  'Allura', cursive;

  --container: 1140px;
  --radius: 18px;
  --radius-sm: 10px;
}

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

body{
  margin:0;
  background:var(--cream);
  color:var(--carbon);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--verde);
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.12;
}
h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); text-transform:uppercase; }
h3{ font-size:1.35rem; text-transform:uppercase; }
p{ margin:0 0 1em; color:var(--carbon); }
a{ color:inherit; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }

.c-verde{ color:var(--verde); }
.c-gold{ color:var(--gold); }

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .8em;
}
.eyebrow--onlight{ color:var(--control); }

/* ============================================
   Ambient decorative orbs — signature motif
   carried over from the IG carousel system
   ============================================ */
.ambient{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  opacity:.35;
  will-change:transform;
}
.orb--gold{ width:34vw; height:34vw; top:-10vw; right:-8vw; background:var(--gold); opacity:.18; }
.orb--mint{ width:22vw; height:22vw; top:120vh; left:-8vw; background:var(--control); opacity:.4; }
.orb--lime{ width:26vw; height:26vw; top:230vh; right:-10vw; background:var(--operacion); opacity:.28; }
.orb--orange{ width:20vw; height:20vw; top:340vh; left:-6vw; background:var(--liderazgo); opacity:.22; }

main, header, footer{ position:relative; z-index:1; }

/* ============================================
   Utility
   ============================================ */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--verde); color:var(--cream);
  padding:.8em 1.2em; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--liderazgo);
  outline-offset:2px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:.92rem;
  letter-spacing:.03em; text-decoration:none; cursor:pointer;
  padding:.95em 1.7em; border-radius:100px; border:2px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--verde); color:var(--cream); }
.btn--primary:hover{ background:var(--verde-deep); }
.btn--ghost{ background:transparent; color:var(--verde); border-color:var(--verde); }
.btn--ghost:hover{ background:var(--verde); color:var(--cream); }
.btn--outline{ background:transparent; color:var(--verde); border-color:var(--cream-deep); }
.btn--outline:hover{ border-color:var(--verde); }
.btn--block{ width:100%; }

/* ============================================
   Reveal-on-scroll
   ============================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================
   Nav
   ============================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,245,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(79,95,90,.08);
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:1.1em 1.5em;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__brand{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--verde); text-decoration:none; text-transform:uppercase; letter-spacing:.03em;
}
.nav__brand span{ color:var(--gold); font-weight:400; }
.nav__links{ display:flex; align-items:center; gap:2.1em; }
.nav__links a{
  text-decoration:none; color:var(--carbon); font-size:.9rem; font-weight:700;
  letter-spacing:.02em;
}
.nav__links a:hover{ color:var(--verde); }
.nav__cta{
  background:var(--verde); color:var(--cream) !important; padding:.6em 1.3em; border-radius:100px;
}
.nav__cta:hover{ background:var(--verde-deep); }
.nav__toggle{ display:none; background:none; border:none; cursor:pointer; padding:.4em; }
.nav__toggle span{ display:block; width:24px; height:2px; background:var(--verde); margin:5px 0; transition:transform .2s, opacity .2s; }

/* ============================================
   Hero
   ============================================ */
.hero{ padding:7em 1.5em 5em; }
.hero__inner{ max-width:var(--container); margin:0 auto; }
.eyebrow--hero{ text-align:left; }
.hero__headline{ font-size:clamp(2.1rem, 5.2vw, 3.4rem); max-width:20ch; }
.hero__sub{ max-width:46ch; font-size:1.08rem; color:var(--carbon-soft); margin-top:1.1em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1em; margin-top:2em; }
.hero__pillars{ display:flex; flex-wrap:wrap; gap:.6em; margin-top:3.2em; }

.pill-tag{
  font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.55em 1.1em; border-radius:100px; color:var(--verde-deep);
}
.pill-tag--vision{ background:var(--gold-tint); }
.pill-tag--control{ background:var(--control); }
.pill-tag--operacion{ background:var(--operacion); }
.pill-tag--liderazgo{ background:var(--liderazgo); color:#fff; }

/* ============================================
   Es para ti
   ============================================ */
.fit{ padding:4em 1.5em 6em; }
.fit__inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:.9fr 1.5fr; gap:3em; }
.fit__heading h2{ max-width:8ch; }
.fit__list{ display:grid; gap:1.5em; }
.fit__list li{ display:flex; gap:1.2em; align-items:flex-start; padding-bottom:1.5em; border-bottom:1px solid var(--cream-deep); }
.fit__list li:last-child{ border-bottom:none; }
.fit__list p{ margin:0; font-size:1.08rem; }
.fit__mark{ font-family:var(--font-display); font-weight:700; color:var(--gold); font-size:1.1rem; flex-shrink:0; }

/* ============================================
   Por qué es diferente (dark)
   ============================================ */
.different{ background:var(--verde); padding:6em 1.5em; color:var(--cream); }
.different__inner{ max-width:var(--container); margin:0 auto; }
.different__heading{ max-width:56ch; margin-bottom:3em; }
.different h2{ color:var(--cream); }
.different__sub{ color:#D9E0DD; font-size:1.05rem; }

.pillars-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4em; counter-reset:pillar; }
.pillar-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); padding:2em 1.6em;
  border-top:4px solid var(--accent);
}
.pillar-card__num{
  display:block; font-family:var(--font-display); font-size:.85rem; font-weight:700;
  color:var(--accent); letter-spacing:.1em; margin-bottom:1.2em;
}
.pillar-card__icon{ width:38px; height:38px; color:var(--accent); margin-bottom:1em; }
.pillar-card h3{ color:var(--cream); font-size:1.15rem; margin-bottom:.4em; }
.pillar-card p{ color:#CBD3D0; font-size:.94rem; margin:0; }

/* ============================================
   Servicios
   ============================================ */
.services{ padding:6em 1.5em; }
.services__inner{ max-width:var(--container); margin:0 auto; }
.services__heading{ max-width:60ch; margin-bottom:3em; }
.services__sub{ font-size:1.05rem; color:var(--carbon-soft); }

.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6em; align-items:stretch; }
.service-card{
  position:relative;
  background:#fff; border-radius:var(--radius); padding:2.2em 1.9em;
  border-top:6px solid var(--accent);
  box-shadow:0 18px 40px -28px rgba(58,58,56,.35);
  display:flex; flex-direction:column;
}
.service-card--featured{ background:var(--verde); box-shadow:0 22px 48px -24px rgba(58,58,56,.5); transform:translateY(-8px); }
.service-card--featured .service-card h3,
.service-card--featured h3{ color:var(--cream); }
.service-card--featured p, .service-card--featured .service-card__tag{ color:#D9E0DD; }
.service-card--featured .service-card__eyebrow{ color:var(--operacion); }
.service-card--featured .service-card__list li::before{ color:var(--operacion); }
.service-card--featured .service-card__price{ color:var(--cream); }
.service-card--featured .service-card__foot{ border-top-color:rgba(255,255,255,.18); }
.service-card--featured .btn--primary{ background:var(--cream); color:var(--verde-deep); }
.service-card--featured .btn--primary:hover{ background:var(--operacion); }

.service-card__badge{
  position:absolute; top:-.9em; right:1.6em; background:var(--operacion); color:var(--verde-deep);
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.5em 1em; border-radius:100px;
}
.service-card__eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.service-card h3{ margin:.3em 0 .2em; font-size:1.5rem; }
.service-card__tag{ font-style:italic; color:var(--carbon-soft); font-size:.95rem; margin-bottom:1em; }
.service-card__desc{ font-size:.96rem; }
.service-card__list{ display:grid; gap:.7em; margin:1.2em 0 1.6em; }
.service-card__list li{ position:relative; padding-left:1.3em; font-size:.92rem; }
.service-card__list li::before{ content:"—"; position:absolute; left:0; color:var(--gold); font-weight:700; }
.service-card__foot{ margin-top:auto; padding-top:1.4em; border-top:1px solid var(--cream-deep); display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap; }
.service-card__price{ font-family:var(--font-display); font-weight:600; color:var(--verde); font-size:1rem; }

/* ============================================
   Sobre mí
   ============================================ */
.about{ padding:6em 1.5em; background:var(--cream-deep); }
.about__inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:4em; align-items:start; }
.about__portrait{ position:sticky; top:6.5em; }
.about__portrait-frame{
  aspect-ratio:4/5; border-radius:var(--radius); background:linear-gradient(155deg, var(--gold-tint), var(--control) 130%);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.about__portrait-frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.about__portrait-mark{ font-family:var(--font-display); font-size:5rem; color:rgba(79,95,90,.35); font-weight:700; }
.about__lede{ font-size:1.2rem; color:var(--verde-deep); font-weight:600; }
.about__closing{
  font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--verde);
  text-transform:uppercase; letter-spacing:.02em; border-top:1px solid var(--cream-deep);
  padding-top:1.2em; margin-top:.4em;
}
.about__signature{ font-family:var(--font-script); font-size:2.2rem; color:var(--gold); margin-top:.6em; }

/* ============================================
   Contacto (dark)
   ============================================ */
.contact{ background:var(--verde); padding:6em 1.5em; color:var(--cream); }
.contact__inner{ max-width:var(--container); margin:0 auto; }
.contact h2{ color:var(--cream); max-width:16ch; }
.contact__heading{ max-width:60ch; margin-bottom:3em; }
.contact__sub{ color:#D9E0DD; font-size:1.05rem; }
.contact__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:3em; }

.contact__form{ background:var(--cream); border-radius:var(--radius); padding:2.4em; display:grid; gap:1.3em; }
.field{ display:grid; gap:.5em; }
.field span{ font-size:.82rem; font-weight:700; letter-spacing:.03em; color:var(--verde-deep); text-transform:uppercase; }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:.98rem; padding:.85em 1em; border-radius:var(--radius-sm);
  border:1.5px solid var(--cream-deep); background:#fff; color:var(--carbon); resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
.hidden-field{ position:absolute; left:-9999px; }

.contact__aside{ display:grid; gap:2em; align-content:start; }
.contact__aside-block{ border-top:1px solid rgba(255,255,255,.2); padding-top:1.4em; }
.contact__aside-label{ font-weight:700; letter-spacing:.03em; color:var(--operacion); font-size:.85rem; text-transform:uppercase; margin-bottom:.6em; }
.contact__aside-link{ display:block; text-decoration:none; color:var(--cream); font-weight:700; font-size:1.05rem; margin-bottom:.4em; }
.contact__aside-link:hover{ color:var(--operacion); }
.contact__aside-block p{ color:#D9E0DD; margin:0; }

/* ============================================
   Footer
   ============================================ */
.site-footer{ background:var(--carbon); color:#CFCBC3; padding:4em 1.5em 2em; }
.site-footer p{ color:#CFCBC3; }
.site-footer__inner{
  max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2em;
  padding-bottom:2.5em; border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer__logo{ font-family:var(--font-display); color:var(--cream); font-size:1.1rem; text-transform:uppercase; margin-bottom:.6em; }
.site-footer__logo span{ color:var(--gold); font-weight:400; }
.site-footer__links{ display:grid; gap:.7em; align-content:start; }
.site-footer__links a{ text-decoration:none; color:#CFCBC3; font-size:.92rem; }
.site-footer__links a:hover{ color:var(--cream); }
.site-footer__meta{ font-size:.92rem; }
.site-footer__copy{ max-width:var(--container); margin:1.6em auto 0; text-align:center; font-size:.78rem; color:#8A8781; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width:960px){
  .fit__inner{ grid-template-columns:1fr; gap:2em; }
  .pillars-grid{ grid-template-columns:repeat(2,1fr); }
  .services__grid{ grid-template-columns:1fr; }
  .service-card--featured{ transform:none; order:-1; }
  .about__inner{ grid-template-columns:1fr; }
  .about__portrait{ position:static; }
  .about__portrait-frame{ max-width:280px; margin:0 auto; }
  .contact__grid{ grid-template-columns:1fr; }
  .site-footer__inner{ grid-template-columns:1fr; gap:2em; }
}

@media (max-width:720px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--cream); flex-direction:column; align-items:flex-start;
    padding:6.5em 2em 2em; gap:1.6em; transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.08);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__toggle{ display:block; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .pillars-grid{ grid-template-columns:1fr; }
  .hero{ padding:5.5em 1.2em 3.5em; }
  .services, .about, .contact, .different, .fit{ padding-left:1.2em; padding-right:1.2em; }
}