/* ==========================================================================
   Autiqo — consultora de optimización, automatización e IA
   ========================================================================== */

/* Self-hosted fonts (no Google Fonts request = no visitor IP sent to Google;
   also removes a third-party network dependency entirely). Variable fonts —
   one file covers every weight declared below. */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("assets/fonts/fraunces-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("assets/fonts/inter-variable.woff2") format("woff2");
}

:root{
  /* Brand palette — every tint/shade below is the SAME hue and saturation as
     the base gold (#D79024), only lighter or darker. The two faintest washes
     are literal transparent versions of the base color (not independent
     hexes) so a "barely-there" gold background can never read as a
     different color, only a fainter one. */
  --gold-50:  rgba(215,144,36,.07);
  --gold-100: rgba(215,144,36,.16);
  --gold-300: #E1A851;
  --gold-bright: #E29B32;
  --gold:     #D79024;
  --gold-600: #B5750F;
  --gold-800: #7A4E10;

  --ink:      #1B2B52;
  --ink-2:    #24365F;
  --ink-3:    #2C4068;

  --white:    #FFFFFF;
  --paper:    #F5F7FB;
  --border-light: #DCE1EC;

  --text-body: #3D4A66;
  --text-body-strong: #1B2B52;
  --text-on-dark: #FFFFFF;
  --text-muted-dark: #A9B4CC;

  --font-display: "Fraunces", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --shadow-soft: 0 24px 70px -30px rgba(27,43,82,0.18);
  --shadow-gold: 0 16px 36px -14px rgba(215,144,36,0.55);

  --ease: cubic-bezier(.22,.68,0,1);
  --section-pad: clamp(72px, 10vw, 160px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-body-strong);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; line-height:1.12; color:var(--text-body-strong); letter-spacing:-.01em; }
p{ margin:0 0 1em; line-height:1.7; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.container-narrow{ max-width:820px; }

.icon{ width:1.3em; height:1.3em; flex-shrink:0; }
.icon-sm{ width:1em; height:1em; }
.icon-sprite{ display:none; }

.hp-field{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--text-on-dark);
  padding:12px 18px; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Focus (keyboard-only ring, brand gold, works on light + dark) ---------- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{ outline-offset:4px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible,
.phone-field select:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-100);
}

/* ---------- Reveal + stagger (progressive enhancement) ---------- */
.reveal{ opacity:1; transform:none; }
body.js-ready .reveal{
  opacity:0; transform:translateY(30px) scale(.975); filter:blur(5px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
body.js-ready .reveal.is-visible{ opacity:1; transform:none; filter:blur(0); }

/* Lighter reveal for small, densely-repeated elements (e.g. chat bubbles) where
   the full .reveal displacement/blur would feel heavy at that size. */
.reveal-x{ opacity:1; transform:none; }
body.js-ready .reveal-x{
  opacity:0; transform:translateY(14px); filter:blur(2px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
body.js-ready .reveal-x.is-visible{ opacity:1; transform:none; filter:blur(0); }

.stagger.js-stagger > *:nth-child(1){ transition-delay:.03s; }
.stagger.js-stagger > *:nth-child(2){ transition-delay:.11s; }
.stagger.js-stagger > *:nth-child(3){ transition-delay:.19s; }
.stagger.js-stagger > *:nth-child(4){ transition-delay:.27s; }
.stagger.js-stagger > *:nth-child(5){ transition-delay:.35s; }
.stagger.js-stagger > *:nth-child(6){ transition-delay:.43s; }
.stagger.js-stagger > *:nth-child(7){ transition-delay:.51s; }
.stagger.js-stagger > *:nth-child(8){ transition-delay:.59s; }
.stagger.js-stagger > *:nth-child(9){ transition-delay:.67s; }
.stagger.js-stagger > *:nth-child(10){ transition-delay:.75s; }
.stagger.js-stagger > *:nth-child(11){ transition-delay:.83s; }
.stagger.js-stagger > *:nth-child(12){ transition-delay:.91s; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:300;
  background:linear-gradient(90deg, var(--gold-300), var(--gold-600));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:16px 28px; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.btn:hover::before{ transform:translateX(120%); }
}
.btn svg{ transition:transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine){
.btn:hover svg{ transform:translateX(3px); }
}
/* Hard offset shadow on hover: the button "lifts" off the page. Dark sections
   swap the shadow to white so it stays visible against navy. */
.btn-gold{ background:linear-gradient(135deg,var(--gold-300),var(--gold-600)); color:#1B2B52; border-color:var(--ink); }
@media (hover: hover) and (pointer: fine){
.btn-gold:hover{ box-shadow:5px 5px 0 var(--ink); transform:translate(-3px,-3px); }
}
.btn-outline{ border-color:var(--ink); color:var(--text-body-strong); }
@media (hover: hover) and (pointer: fine){
.btn-outline:hover{ background:var(--ink); color:var(--white); box-shadow:5px 5px 0 var(--gold); transform:translate(-3px,-3px); }
}
.btn-dark{ background:var(--ink); color:var(--text-on-dark); border-color:var(--ink); }
@media (hover: hover) and (pointer: fine){
.btn-dark:hover{ background:#10192E; box-shadow:5px 5px 0 var(--gold); transform:translate(-3px,-3px); }
}
@media (hover: hover) and (pointer: fine){
.hero .btn-gold:hover, .section-dark .btn-gold:hover, .mobile-nav .btn-gold:hover{ box-shadow:5px 5px 0 var(--white); }
}
.btn:active{ transform:scale(.96); transition-duration:.15s; }
.btn-lg{ padding:19px 32px; font-size:1rem; }
.btn-sm{ padding:12px 22px; font-size:.85rem; }
.btn-block{ width:100%; }

.link-ghost{ font-size:.9rem; font-weight:600; }

/* ---------- Header (floating pill — hides on scroll down, returns on scroll up) ----------
   No transform/backdrop-filter on .site-header itself (it hides by animating `top`):
   either would make it the containing block of the fixed full-screen .mobile-nav. */
.site-header{
  position:fixed; top:14px; left:12px; right:12px; z-index:100;
  transition:top .5s var(--ease);
}
.site-header.is-hidden{ top:-110px; }
.header-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:18px;
  max-width:var(--container); height:66px; margin:0 auto; padding:0 10px 0 20px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1.5px solid var(--ink); border-radius:100px;
  transition:box-shadow .35s var(--ease);
}
.site-header.is-scrolled .header-inner{ box-shadow:0 18px 40px -24px rgba(27,43,82,.45); }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{ width:34px; height:34px; display:flex; transition:transform .6s cubic-bezier(.34,1.56,.64,1); }
@media (hover: hover) and (pointer: fine){
.brand:hover .brand-mark{ transform:rotate(-12deg) scale(1.08); }
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; }
.brand-word{
  font-family:var(--font-display); font-weight:600; font-size:1.45rem; letter-spacing:-.01em;
  color:var(--text-body-strong); transition:color .35s;
}

.main-nav{ display:flex; align-items:center; gap:2px; }
.nav-link{
  position:relative; padding:9px 13px; font-size:.88rem; font-weight:600; white-space:nowrap;
  border:none; background:none; font-family:var(--font-body); cursor:pointer;
  display:flex; align-items:center; gap:6px; border-radius:100px; flex-shrink:0;
  color:var(--text-body-strong); transition:background .25s, color .25s;
}
@media (hover: hover) and (pointer: fine){
.nav-link:hover{ background:var(--ink); color:var(--white); }
}
.nav-link.is-active{ color:var(--gold-600); }
@media (hover: hover) and (pointer: fine){
.nav-link.is-active:hover{ color:var(--white); }
}
.nav-trigger .icon{ transition:transform .3s var(--ease); }
.nav-item.is-open .nav-trigger{ background:var(--ink); color:var(--white); }
.nav-item.is-open .nav-trigger .icon{ transform:rotate(180deg); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.link-ghost, .lang-switch{ color:var(--text-body-strong); transition:color .25s, border-color .25s, background .25s; white-space:nowrap; }
.header-actions .link-ghost{ padding:9px 13px; border-radius:100px; }
@media (hover: hover) and (pointer: fine){
.header-actions .link-ghost:hover{ background:var(--ink); color:var(--white); }
}
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.76rem; font-weight:700; letter-spacing:.03em;
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--ink);
}
@media (hover: hover) and (pointer: fine){
.lang-switch:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
}
.menu-toggle{
  display:none; position:relative; width:46px; height:46px; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:var(--ink); cursor:pointer;
  color:var(--white); transition:background .3s;
}
.menu-toggle .icon{
  position:absolute; width:22px; height:22px;
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.menu-toggle .icon-menu-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
.menu-toggle.is-open{ background:var(--gold); color:var(--ink); }
.menu-toggle.is-open .icon-menu-open{ opacity:0; transform:rotate(90deg) scale(.6); }
.menu-toggle.is-open .icon-menu-close{ opacity:1; transform:rotate(0) scale(1); }

/* Mega menu — drops out of the pill as a card of the same width */
.nav-item.has-menu{ position:static; }
.mega-menu{
  position:absolute; left:0; right:0; top:100%;
  margin-top:12px; background:var(--white);
  border:1.5px solid var(--ink); border-radius:var(--radius-lg);
  box-shadow:10px 10px 0 var(--ink);
  display:grid; grid-template-columns:1fr 1fr 300px; gap:8px;
  padding:28px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav-item.is-open .mega-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-600); font-weight:700; margin-bottom:16px; }
.mega-link{
  display:flex; gap:14px; padding:13px; border-radius:var(--radius-sm); align-items:flex-start;
  transition:background .2s;
}
@media (hover: hover) and (pointer: fine){
.mega-link:hover{ background:var(--gold-50); }
}
.mega-link .icon{ color:var(--gold-600); margin-top:2px; }
.mega-link span{ display:flex; flex-direction:column; gap:3px; font-size:.88rem; color:var(--text-body); }
.mega-link strong{ font-size:.94rem; color:var(--text-body-strong); font-weight:700; }
.mega-promo{
  background:var(--ink); color:var(--text-on-dark); border-radius:var(--radius-md);
  padding:24px; display:flex; flex-direction:column; gap:4px;
}
.mega-promo-eyebrow{ color:var(--gold-300); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin:0; }
.mega-promo-title{ font-family:var(--font-display); font-size:1.15rem; margin:2px 0 4px; }
.mega-promo-text{ font-size:.85rem; color:var(--text-muted-dark); margin:0 0 12px; }
.mega-promo-cta{ display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--gold-300); }

/* Mobile nav — full-screen navy sheet with oversized links */
.mobile-nav{
  display:none; position:fixed; inset:0; z-index:1;
  background:var(--ink); color:var(--white);
  flex-direction:column; justify-content:center; gap:2px;
  padding:110px 28px 36px; overflow-y:auto;
  clip-path:circle(0% at calc(100% - 44px) 46px); pointer-events:none;
  transition:clip-path .7s var(--ease);
}
.mobile-nav.is-open{ clip-path:circle(150% at calc(100% - 44px) 46px); pointer-events:auto; }
.mobile-link{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2rem, 9vw, 3.2rem); line-height:1.12; padding:4px 0;
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .2s;
}
@media (hover: hover) and (pointer: fine){
.mobile-link:hover{ color:var(--gold-300); }
}
.mobile-nav.is-open .mobile-link{ opacity:1; transform:none; }
.mobile-nav.is-open .mobile-link:nth-child(2){ transition-delay:.04s; }
.mobile-nav.is-open .mobile-link:nth-child(3){ transition-delay:.08s; }
.mobile-nav.is-open .mobile-link:nth-child(4){ transition-delay:.12s; }
.mobile-nav.is-open .mobile-link:nth-child(5){ transition-delay:.16s; }
.mobile-nav.is-open .mobile-link:nth-child(6){ transition-delay:.2s; }
.mobile-nav.is-open .mobile-link:nth-child(7){ transition-delay:.24s; }
.mobile-nav.is-open .mobile-link:nth-child(8){ transition-delay:.28s; }
.mobile-nav .btn{ margin-top:26px; align-self:stretch; white-space:normal; }

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:210px 0 0; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--ink); color:var(--text-on-dark); overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(48% 42% at 18% 18%, rgba(215,144,36,.32), transparent 70%),
    radial-gradient(55% 50% at 85% 15%, rgba(215,144,36,.14), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(215,144,36,.1), transparent 70%),
    linear-gradient(180deg,#131D33, #22315A 60%, #131D33);
  background-size:140% 140%, 140% 140%, 100% 100%, 100% 100%;
  animation:meshMove 24s ease-in-out infinite alternate;
}
@keyframes meshMove{
  0%{ background-position:0% 0%, 100% 0%, 50% 100%, 0 0; }
  100%{ background-position:15% 25%, 80% 20%, 50% 90%, 0 0; }
}
.hero-glow{
  position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(215,144,36,.16), transparent 70%);
  top:-260px; left:-260px; transition:transform .25s linear; z-index:1;
}
.hero-inner{ position:relative; z-index:2; text-align:center; }
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-300); margin-bottom:26px;
}
.eyebrow-dark{ color:var(--gold-600); }
.hero-title{
  font-size:clamp(2.5rem, 6vw, 4.8rem); line-height:1.06; letter-spacing:-.02em;
  color:var(--text-on-dark); max-width:17ch; margin:0 auto 28px;
}
.hero-title em{ font-style:italic; color:var(--gold-300); }
.hero-sub{
  max-width:640px; margin:0 auto 44px; font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--text-muted-dark); line-height:1.7;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:80px; }
.hero .btn-outline{ border-color:rgba(255,255,255,.4); color:var(--text-on-dark); }
@media (hover: hover) and (pointer: fine){
.hero .btn-outline:hover{ border-color:var(--white); background:var(--white); color:var(--ink); box-shadow:5px 5px 0 var(--gold); }
}

.marquee{
  position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.1);
  padding:24px 0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex; gap:16px; white-space:nowrap; width:max-content;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted-dark);
  animation:marquee 34s linear infinite;
}
@media (hover: hover) and (pointer: fine){
.marquee:hover .marquee-track{ animation-play-state:paused; }
}
.marquee-track span:nth-child(4n+2){ color:var(--gold-300); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Sections ---------- */
.section{ padding:var(--section-pad) 0; position:relative; overflow:hidden; }
.section > .container{ position:relative; z-index:1; }
.section-white{ background:var(--white); }
.section-soft{ background:var(--paper); }
.section-dark{ background:var(--ink); color:var(--text-on-dark); }
.section-dark h2, .section-dark h3{ color:var(--text-on-dark); }
.section-dark p{ color:var(--text-muted-dark); }

/* Per-section background variety: subtle gradients + soft blobs so light/dark
   sections don't all read as the same flat color. */
#que-hacemos::before{
  content:""; position:absolute; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(215,144,36,.11), transparent 70%);
  top:-220px; right:-200px; pointer-events:none;
}
#consultoria-express{ background:radial-gradient(65% 55% at 50% 0%, rgba(215,144,36,.12), transparent 70%), var(--ink); }
#faq::before{
  content:""; position:absolute; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(215,144,36,.09), transparent 70%);
  bottom:-220px; right:-190px; pointer-events:none;
}
#contacto{ background:linear-gradient(155deg, var(--ink-3) 0%, #0F1830 100%); position:relative; }
#contacto::before{
  content:""; position:absolute; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(215,144,36,.16), transparent 70%);
  top:-210px; right:-180px; pointer-events:none;
}
#contacto h2{ color:var(--text-on-dark); }
#contacto .contact-lead{ color:var(--text-muted-dark); }
#contacto .eyebrow-dark{ color:var(--gold-300); }

.grain{
  position:absolute; inset:0; opacity:.045; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.spotlight-section{ overflow:hidden; }
.spotlight-glow{
  position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(215,144,36,.14), transparent 70%);
  top:-260px; left:-260px; z-index:0; opacity:0;
  transition:opacity .4s, transform .25s linear;
}
@media (hover: hover) and (pointer: fine){
.spotlight-section:hover .spotlight-glow{ opacity:1; }
}
.spotlight-section .container{ position:relative; z-index:1; }

.section-head{ max-width:660px; margin:0 auto 84px; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom:16px; }
.section-head .eyebrow::before{
  content:""; display:inline-block; width:0; height:2px; background:currentColor;
  vertical-align:middle; margin-right:0;
  transition:width .7s var(--ease) .15s, margin-right .7s var(--ease) .15s;
}
body.js-ready .section-head.is-visible .eyebrow::before{ width:22px; margin-right:8px; }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.75rem); }
.section-head p{ font-size:1.1rem; color:var(--text-body); margin:0; }
.section-dark .section-head p{ color:var(--text-muted-dark); }

.icon-chip{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:14px; background:var(--gold-50); color:var(--gold-600); margin-bottom:22px; flex-shrink:0;
  transition:transform .4s var(--ease), background .3s, color .3s;
}
.icon-chip-dark{ background:rgba(215,144,36,.12); color:var(--gold-300); }
.icon-chip-on-dark{ background:rgba(255,255,255,.14); color:var(--gold-300); }
.icon-chip-on-gold{ background:rgba(27,43,82,.12); color:var(--ink); }
.reveal.is-visible .icon-chip{ animation:icon-pop .5s var(--ease) both; }
@keyframes icon-pop{
  0%{ transform:scale(.6) rotate(-12deg); opacity:0; }
  60%{ transform:scale(1.08) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

/* ---------- Checklist ("Qué puede hacer Autiqo") ---------- */
.checklist{ display:grid; grid-template-columns:1fr 1fr; column-gap:64px; }
.checklist-row{
  display:flex; gap:22px; align-items:flex-start; padding:32px 0;
  border-top:1px solid var(--border-light);
  transition:padding-left .35s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.checklist-row:hover{ padding-left:10px; }
}
@media (hover: hover) and (pointer: fine){
.checklist-row:hover .icon-chip{ transform:rotate(-8deg) scale(1.08); background:var(--gold-100); }
}
.checklist-row:nth-child(5), .checklist-row:nth-child(6){ border-bottom:1px solid var(--border-light); }
.checklist-row .icon-chip{ margin-bottom:0; width:46px; height:46px; }
.checklist-row h3{ font-size:1.12rem; margin-bottom:8px; }
.checklist-row p{ font-size:.95rem; color:var(--text-body); margin:0; }

/* ---------- Timeline ("Cómo trabajamos") ---------- */
.timeline{ position:relative; max-width:820px; margin:0 auto; }
.timeline-line{
  position:absolute; left:29px; top:12px; bottom:12px; width:1px;
  background:linear-gradient(180deg, var(--gold-300), var(--border-light) 90%);
}
.timeline-step{
  position:relative; display:flex; gap:32px; padding:0 0 68px 0;
}
.timeline-step:last-child{ padding-bottom:0; }
.timeline-node{
  position:relative; z-index:1; flex-shrink:0; width:60px; height:60px; border-radius:50%;
  background:var(--white); border:1.5px solid var(--gold-300); color:var(--gold-600);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px var(--white);
  transition:transform .4s var(--ease), border-color .4s;
}
.timeline-node::after{
  content:""; position:absolute; inset:-1.5px; border-radius:50%; border:1.5px solid var(--gold-300);
  opacity:0; transform:scale(1);
}
body.js-ready .reveal.is-visible .timeline-node::after{ animation:nodePulse 1s var(--ease) .3s; }
@keyframes nodePulse{
  0%{ opacity:.9; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.9); }
}
@media (hover: hover) and (pointer: fine){
.timeline-step:hover .timeline-node{ transform:scale(1.08); border-color:var(--gold-600); }
}
.timeline-ghost{
  position:absolute; right:0; top:-30px; font-family:var(--font-display); font-size:5.5rem; font-weight:600;
  color:var(--gold-50); z-index:0; line-height:1; user-select:none;
}
.timeline-content{ padding-top:10px; max-width:560px; }
.timeline-content h3{ font-size:1.3rem; margin-bottom:10px; }
.timeline-content p{ font-size:1rem; color:var(--text-body); margin:0; }

/* ---------- Bento (Beneficios) ---------- */
.bento{
  display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:auto; gap:20px;
}
.bento-tile{
  position:relative;
  background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius-lg);
  padding:38px 34px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
@media (hover: hover) and (pointer: fine){
.bento-tile:hover{ transform:translateY(-8px) scale(1.015); box-shadow:var(--shadow-soft); border-color:var(--gold-300); }
}
.bento-tile:active{ transform:translateY(-3px) scale(1); }
@media (hover: hover) and (pointer: fine){
.bento-tile:hover .icon-chip{ transform:rotate(-8deg) scale(1.1); }
}
.bento-tile h3{ font-size:1.15rem; margin-bottom:10px; }
.bento-tile p{ font-size:.94rem; color:var(--text-body); margin:0; }
.bento-feature{
  grid-column:span 1; grid-row:span 2; background:var(--ink); border-color:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
}
@media (hover: hover) and (pointer: fine){
.bento-feature:hover{ border-color:var(--gold-600); }
}
.bento-feature h3{ color:var(--text-on-dark); font-size:1.4rem; }
.bento-feature p{ color:var(--text-muted-dark); }
.bento-gold{ background:linear-gradient(160deg, var(--gold-100), var(--gold-50)); border-color:var(--gold-100); }

/* ---------- Service cards (dark, centered) ---------- */
.service-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.service-card{
  position:relative; overflow:hidden; flex:0 1 340px;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding:38px 34px; border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(215,144,36,.16), rgba(215,144,36,.02) 55%, transparent 70%), #16223F;
  border:1px solid rgba(215,144,36,.18);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.service-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(115deg, transparent 35%, rgba(215,144,36,.14) 50%, transparent 65%);
  transform:translateX(-130%); transition:transform .8s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.service-card:hover::before{ transform:translateX(130%); }
}
.service-card > *{ position:relative; z-index:1; }
@media (hover: hover) and (pointer: fine){
.service-card:hover{
  transform:translateY(-8px); border-color:var(--gold-300);
  box-shadow:0 30px 60px -28px rgba(215,144,36,.35);
}
}
.service-card:active{ transform:translateY(-3px); }
.service-card-index{
  font-family:var(--font-display); font-size:.85rem; font-weight:600; color:var(--gold-300);
  letter-spacing:.05em; margin-bottom:18px; opacity:.85;
}
.service-card .icon-chip{ transition:transform .4s var(--ease), background .3s; }
@media (hover: hover) and (pointer: fine){
.service-card:hover .icon-chip{ transform:rotate(-8deg) scale(1.08); background:rgba(215,144,36,.22); }
}
.service-card h3{ font-size:1.18rem; margin-bottom:10px; }
.service-card p{ font-size:.94rem; margin:0 0 20px; }
.service-card-cta{
  display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:700; color:var(--gold-300);
  margin-top:auto;
}
.service-arrow{
  transition:transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.service-card:hover .service-arrow{ transform:translateX(4px); }
}

/* ---------- Automatización con IA (branching workflow diagram, dark) ---------- */
.workflow-section{
  background:linear-gradient(100deg, #0A1226 0%, #1B2B52 55%, #24365F 100%);
  overflow:hidden;
}
.workflow-section .section-head p{ color:var(--text-muted-dark); }
.workflow-section .section-head h2{ color:var(--text-on-dark); }
.workflow-section .eyebrow-dark{ color:var(--gold-300); }
.workflow-section > .container{ position:relative; z-index:1; }
.workflow-mesh{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(215,144,36,.16) 1.5px, transparent 1.5px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 45%, #000 45%, transparent 88%);
  mask-image:radial-gradient(ellipse 65% 65% at 50% 45%, #000 45%, transparent 88%);
}

.workflow-scroll{ overflow-x:auto; padding:8px 4px 28px; }
.workflow-diagram{
  position:relative; width:100%; max-width:1080px; margin:0 auto;
  aspect-ratio:1080/540; min-width:640px; min-height:340px;
}

.workflow-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.wf-path{ fill:none; stroke:rgba(215,144,36,.28); stroke-width:.45; }
.wf-dot{ fill:var(--gold-300); }

.wf-col-label{
  position:absolute; transform:translate(-50%, -50%);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-300); white-space:nowrap; z-index:2;
}

.workflow-node-html{
  position:absolute; z-index:2; width:64px; height:64px; transform:translate(-50%,-50%);
}
.workflow-node-html .workflow-icon{
  width:100%; height:100%; border-radius:16px;
  background:linear-gradient(160deg, rgba(215,144,36,.16), rgba(215,144,36,.03)), #16223F;
  border:1.5px solid rgba(215,144,36,.22);
  box-shadow:0 10px 24px -12px rgba(16,24,48,.5);
  color:var(--gold-300);
  display:flex; align-items:center; justify-content:center;
  animation:workflowPulse 6s ease-in-out infinite;
  animation-delay:var(--wf-delay, 0s);
}
.workflow-node-html .workflow-icon.workflow-icon-brand{ background:none; border:none; }
.workflow-icon-brand svg{ width:100%; height:100%; }
.workflow-node-hub{ width:78px; height:78px; }
.workflow-node-hub .workflow-icon{ border-radius:20px; }
.workflow-node-final .workflow-icon{ color:var(--gold-300); }
.workflow-label{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:10px;
  font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--text-on-dark);
  text-align:center; white-space:nowrap;
}
@keyframes workflowPulse{
  0%, 8%{ border-color:rgba(215,144,36,.22); box-shadow:0 10px 24px -12px rgba(16,24,48,.5); transform:scale(1); }
  14%, 22%{ border-color:var(--gold-300); box-shadow:0 0 0 6px rgba(215,144,36,.22), 0 10px 24px -12px rgba(16,24,48,.5); transform:scale(1.07); }
  30%, 100%{ border-color:rgba(215,144,36,.22); box-shadow:0 10px 24px -12px rgba(16,24,48,.5); transform:scale(1); }
}

/* ---------- Stats (tech / animated counters) ---------- */
.stats-section{
  background:radial-gradient(120% 90% at 50% -10%, #24365F 0%, #1B2B52 45%, #0A1226 100%);
  position:relative; overflow:hidden;
}
.stats-section .section-head h2{ color:var(--text-on-dark); }
.stats-section .section-head p{ color:var(--text-muted-dark); }
.stats-mesh{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(215,144,36,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,144,36,.09) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 90%);
}
.stats-section > .container{ position:relative; z-index:1; }
.stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.stat-tile{
  text-align:center; padding:8px 16px 0; border-top:2px solid var(--gold-300);
  transition:border-color .4s;
}
@media (hover: hover) and (pointer: fine){
.stat-tile:hover{ border-color:var(--gold-bright); }
}
.stat-number{
  font-family:var(--font-display); font-size:clamp(2.3rem,5vw,3.2rem); font-weight:600;
  color:var(--gold-300); font-variant-numeric:tabular-nums; line-height:1;
  margin:22px 0 14px;
}
.stat-label{ color:var(--text-muted-dark); font-size:.9rem; margin:0; }
.stats-disclaimer{
  text-align:center; font-size:.78rem; color:var(--text-muted-dark); opacity:.7;
  margin:44px 0 0;
}


/* ---------- Portfolio (infinite auto-advancing carousel, 3-up) ---------- */
.portfolio-viewport{
  container-type:inline-size;
  overflow:hidden;
  margin-top:12px;
}
.portfolio-track{
  display:flex; gap:28px;
  transition:transform 1.44s var(--ease);
}
.portfolio-card{
  flex:0 0 auto;
  width:calc((100cqw - 56px) / 3);
  background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
@media (hover: hover) and (pointer: fine){
.portfolio-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--gold-300); }
}
.portfolio-card:active{ transform:translateY(-2px); }
.portfolio-card-image{
  aspect-ratio:460/260; background:var(--paper); overflow:hidden;
}
.portfolio-card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.portfolio-card h3{ font-size:1.15rem; margin:26px 26px 10px; }
.portfolio-card p{ font-size:.92rem; color:var(--text-body); margin:0 26px 26px; text-align:justify; text-justify:inter-word; }

@media (max-width:1080px){
  .portfolio-card{ width:calc((100cqw - 28px) / 2); }
}
@media (max-width:680px){
  .portfolio-card{ width:100cqw; }
  .portfolio-card h3{ font-size:1.2rem; }
}

/* ---------- Consultoría Express ---------- */
.express-intro{ max-width:760px; margin:0 auto 76px; text-align:center; }
.express-intro h2{ font-size:clamp(2rem,3.6vw,2.75rem); }
.express-lead{ font-size:1.05rem; line-height:1.8; }

.express-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; margin-bottom:64px;
}
.express-includes, .express-for{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:40px;
}
.express-includes h3, .express-for h3{ font-size:1.2rem; margin-bottom:22px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; font-size:.95rem; border-top:1px solid rgba(255,255,255,.08); }
.check-list li:first-child{ border-top:none; padding-top:0; }
.check-list .icon{ color:var(--gold-300); margin-top:2px; }
.express-for p{ font-size:.95rem; margin-bottom:28px; }
.mini-steps{ display:flex; flex-direction:column; gap:12px; }
.mini-steps div{ display:flex; align-items:center; gap:12px; font-size:.92rem; color:var(--text-on-dark); }
.mini-steps span{
  width:26px; height:26px; border-radius:50%; background:var(--gold-300); color:#1B2B52;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0;
}

.express-banner{
  position:relative; overflow:hidden;
  max-width:820px; margin:0 auto; text-align:center; background:linear-gradient(160deg,#24365F,#101B33);
  border:1px solid rgba(215,144,36,.25); border-radius:var(--radius-lg); padding:60px 44px;
  box-shadow:0 40px 90px -40px rgba(215,144,36,.28);
  transition:box-shadow .45s var(--ease), border-color .45s, transform .45s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.express-banner:hover{
  transform:translateY(-4px);
  border-color:var(--gold-300);
  box-shadow:0 46px 100px -36px rgba(215,144,36,.55), 0 0 0 1px rgba(215,144,36,.4);
}
}
.express-banner > *:not(.card-shine):not(.card-glare){ position:relative; z-index:1; }
/* Same hover-triggered "gold sweep" as the service/benefit cards — just bolder,
   since this is the flagship offer. Sweeps once across the card on hover. */
.card-shine{
  position:absolute; top:-70%; left:-80%; width:260%; height:260%;
  background:linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,.3) 47%,
    rgba(215,144,36,.6) 50%,
    rgba(255,255,255,.3) 53%,
    transparent 62%);
  transform:translateX(-60%); pointer-events:none; z-index:0;
  transition:transform 1.8s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.express-banner:hover .card-shine{ transform:translateX(60%); }
}
/* Mouse-tracked specular highlight — reacts like a reflection when you hover */
.card-glare{
  position:absolute; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.32), transparent 70%);
  mix-blend-mode:overlay; opacity:0; transition:opacity .3s;
  top:0; left:0; transform:translate(-210px,-210px);
}
@media (hover: hover) and (pointer: fine){
.express-banner:hover .card-glare{ opacity:1; }
}
.badge{
  display:inline-block; background:var(--gold-300); color:#1B2B52; font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.06em; padding:8px 18px; border-radius:100px; margin-bottom:22px;
}
.express-banner h3{ font-size:clamp(1.8rem,3.2vw,2.4rem); color:var(--text-on-dark); }
.express-banner h3 em{ font-style:normal; color:var(--gold-300); }
.express-banner > p{ max-width:460px; margin:0 auto 32px; }
.express-banner-checks{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; text-align:left; }
.express-banner-checks > div{ display:flex; gap:10px; max-width:260px; }
.express-banner-checks .icon{ color:var(--gold-300); margin-top:3px; flex-shrink:0; }
.express-banner-checks strong{ display:block; font-size:.92rem; color:var(--text-on-dark); }
.express-banner-checks span{ font-size:.85rem; color:var(--text-muted-dark); }
/* ---------- Hourly consulting (interactive calculator) ---------- */
.hourly-section{
  background:linear-gradient(165deg, #0F1830 0%, #1B2B52 100%);
  position:relative; overflow:hidden;
}
.hourly-layout{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.hourly-intro h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--text-on-dark); margin:14px 0 20px; }
.hourly-lead{ color:var(--text-muted-dark); font-size:1.02rem; line-height:1.6; margin:0 0 32px; }

.hourly-points{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:20px; }
.hourly-points li{ display:flex; gap:16px; align-items:flex-start; }
.hourly-point-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(215,144,36,.14); color:var(--gold-300);
}
.hourly-points strong{ display:block; color:var(--text-on-dark); font-size:.98rem; margin-bottom:2px; }
.hourly-points span{ font-size:.88rem; color:var(--text-muted-dark); }

.hourly-note{
  display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-muted-dark);
  padding-top:20px; border-top:1px solid rgba(255,255,255,.12); margin:0;
}
.hourly-note .icon{ color:var(--gold-300); width:16px; height:16px; flex-shrink:0; }
.hourly-note strong{ color:var(--text-on-dark); }

.hourly-calc{
  background:var(--white); border-radius:var(--radius-lg); padding:44px 40px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
}
.hourly-calc-label{
  text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-600); margin:0 0 26px;
}
.hourly-stepper{ display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:18px; }
.hourly-step-btn{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border-light); background:var(--paper);
  font-size:1.4rem; font-weight:600; color:var(--ink); cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
  display:flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0;
}
@media (hover: hover) and (pointer: fine){
.hourly-step-btn:hover{ background:var(--gold-100); border-color:var(--gold-300); transform:scale(1.06); }
}
.hourly-count-wrap{ text-align:center; min-width:110px; }
.hourly-count{ font-family:var(--font-display); font-size:3.2rem; font-weight:600; color:var(--ink); line-height:1; }
.hourly-count-label{
  display:block; font-size:.78rem; color:var(--text-body); text-transform:uppercase;
  letter-spacing:.06em; margin-top:4px;
}
.hourly-slider{ width:100%; margin:0 0 20px; accent-color:var(--gold); cursor:pointer; }
.hourly-hint{
  text-align:center; font-size:.85rem; color:var(--text-body); min-height:40px;
  margin:0 0 24px; padding:0 8px;
}
.hourly-receipt{ border-top:1.5px dashed var(--border-light); padding-top:20px; margin-bottom:28px; }
.hourly-receipt-row{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--text-body); margin-bottom:10px; }
.hourly-receipt-divider{ border-top:1px solid var(--border-light); margin:14px 0; }
.hourly-receipt-total{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:1.4rem; font-weight:700; color:var(--ink); font-family:var(--font-display);
}
.hourly-calc .btn{ width:100%; justify-content:center; }

/* ---------- FAQ (animated accordion) ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:0 26px; background:var(--paper);
  transition:border-color .3s, background .3s;
}
.faq-item.is-open{ border-color:var(--gold-300); background:var(--white); box-shadow:var(--shadow-soft); }
.faq-trigger{
  width:100%; cursor:pointer; border:none; background:none; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; font-family:var(--font-body); font-weight:600; font-size:1.02rem; color:var(--text-body-strong);
}
.faq-trigger .icon{ color:var(--gold-600); transition:transform .35s var(--ease); flex-shrink:0; }
.faq-item.is-open .faq-trigger .icon{ transform:rotate(180deg); }
.faq-panel{
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease);
}
.faq-item p{ padding-bottom:22px; font-size:.95rem; color:var(--text-body); margin:0; }

/* ---------- Contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start; }
.contact-lead{ font-size:1.05rem; color:var(--text-body); max-width:460px; }
.contact-methods{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.contact-method{
  display:flex; align-items:center; gap:12px; font-weight:600; font-size:.95rem;
  padding:15px 20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm);
  color:var(--text-on-dark); transition:border-color .25s, background .25s, transform .25s;
}
@media (hover: hover) and (pointer: fine){
a.contact-method:hover{ border-color:var(--gold-bright); background:rgba(255,255,255,.1); transform:translateX(4px); }
}
.contact-method .icon{ color:var(--gold-300); }

.testimonial-viewport{ overflow:hidden; margin-top:26px; }
.testimonial-track{ display:flex; transition:transform .6s var(--ease); will-change:transform; }
.testimonial-card{
  flex:0 0 100%; width:100%; box-sizing:border-box; backface-visibility:hidden;
  margin:0; padding:18px 20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm); transition:border-color .25s, background .25s;
}
@media (hover: hover) and (pointer: fine){
.testimonial-card:hover{ border-color:var(--gold-bright); background:rgba(255,255,255,.1); }
}
.testimonial-stars{ color:var(--gold-300); font-size:.95rem; letter-spacing:.1em; margin-bottom:10px; }
.testimonial-quote{
  margin:0 0 12px; font-size:.92rem; line-height:1.5; color:var(--text-on-dark); font-style:italic;
}
.testimonial-meta{ display:flex; flex-direction:column; gap:2px; font-size:.8rem; color:var(--text-muted-dark); }
.testimonial-meta strong{ color:var(--text-on-dark); font-size:.85rem; font-weight:600; }

.contact-form{
  position:relative; z-index:0;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.4); border-radius:var(--radius-lg);
  padding:40px; display:flex; flex-direction:column; gap:20px;
  box-shadow:0 24px 54px -16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-row label{ min-width:0; }
.contact-form label{ position:relative; display:flex; flex-direction:column; gap:8px; font-size:.85rem; font-weight:600; color:var(--text-on-dark); }
.contact-form input, .contact-form textarea{
  font-family:var(--font-body); font-size:.95rem; padding:14px 40px 14px 16px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border-light); background:var(--paper); color:var(--text-body-strong);
  resize:vertical; transition:border-color .2s; width:100%; min-width:0;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--gold); }
.field-check{
  position:absolute; right:12px; bottom:12px; width:22px; height:22px; border-radius:50%;
  background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4); transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none;
}
.field-check .icon{ width:12px; height:12px; }
.field-check-textarea{ bottom:auto; top:38px; }
.contact-form input:valid:not(:placeholder-shown) ~ .field-check,
.contact-form textarea:valid:not(:placeholder-shown) ~ .field-check{ opacity:1; transform:scale(1); }
.form-note{ font-size:.78rem; color:var(--text-on-dark); opacity:.75; margin:0; }

.phone-field{ display:flex; gap:8px; flex-wrap:wrap; }
.phone-field select{
  font-family:var(--font-body); font-size:.82rem; font-weight:400; padding:14px 10px 14px 12px;
  border-radius:var(--radius-sm); border:1.5px solid var(--border-light); background:var(--paper);
  color:var(--text-body); flex:1 1 150px; min-width:0; max-width:100%;
  transition:border-color .2s; cursor:pointer;
}
.phone-field select:focus{ outline:none; border-color:var(--gold); }
.phone-field input{ flex:1 1 120px; min-width:0; }

.consent-field{
  display:flex !important; flex-direction:row !important; align-items:flex-start; gap:10px;
  font-size:.82rem !important; font-weight:400 !important; color:var(--text-on-dark);
  line-height:1.5;
}
.consent-field input{ width:16px; height:16px; margin-top:2px; accent-color:var(--gold-600); flex-shrink:0; }
.consent-field a{ color:var(--gold-300); font-weight:600; text-decoration:underline; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--text-muted-dark); padding:90px 0 0; }
.footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; padding-bottom:64px; }
.footer-brand p{ font-size:.9rem; max-width:300px; margin:16px 0 22px; line-height:1.7; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s;
}
@media (hover: hover) and (pointer: fine){
.footer-social a:hover{ border-color:var(--gold-300); color:var(--gold-300); }
}
.footer-col h4{ font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-on-dark); margin-bottom:20px; }
.footer-col a{ display:block; font-size:.92rem; padding:8px 0; transition:color .2s; }
@media (hover: hover) and (pointer: fine){
.footer-col a:hover{ color:var(--gold-300); }
}
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:24px 32px; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-legal{ display:flex; gap:22px; }
.footer-legal a{ opacity:.8; transition:opacity .2s; }
@media (hover: hover) and (pointer: fine){
.footer-legal a:hover{ opacity:1; }
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:28px; bottom:28px; z-index:150;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-600)); color:#1B2B52;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-gold);
  opacity:0; transform:translateY(18px) scale(.85); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), box-shadow .3s;
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
@media (hover: hover) and (pointer: fine){
.back-to-top:hover{ transform:translateY(-4px) scale(1.07); box-shadow:0 20px 40px -14px rgba(215,144,36,.7); }
}
.back-to-top:active{ transform:translateY(-1px) scale(1.02); }
.back-to-top .icon{ width:1.35em; height:1.35em; }
@media (max-width:680px){
  .back-to-top{ right:18px; bottom:18px; width:46px; height:46px; }
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-nav{ display:flex; }
  .header-actions .btn-sm{ display:none; }
  .checklist{ grid-template-columns:1fr; column-gap:0; }
  .bento{ grid-template-columns:1fr 1fr; }
  .bento-feature{ grid-column:span 2; grid-row:span 1; }
  .service-card{ flex-basis:calc(50% - 12px); }
  .express-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:44px; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .hourly-layout{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:680px){
  .header-inner{ height:60px; padding:0 7px 0 16px; }
  .site-header{ top:10px; left:10px; right:10px; }
  .hero{ padding-top:160px; }
  .bento{ grid-template-columns:1fr; }
  .bento-feature{ grid-column:span 1; }
  .form-row{ grid-template-columns:1fr; }
  .section{ padding:88px 0; }
  .express-banner{ padding:44px 26px; }
  .service-card{ flex-basis:100%; }
  .timeline-ghost{ display:none; }
  .timeline-step{ gap:20px; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .phone-field select{ flex-basis:100%; }
  .phone-field input{ flex-basis:100%; }
  .stats-grid{ grid-template-columns:1fr; }
  .portfolio-track{ padding:0 20px; }
  .portfolio-card{ flex-basis:82vw; }
  .hourly-calc{ padding:32px 24px; }
  .hourly-count{ font-size:2.6rem; }
  .hourly-stepper{ gap:18px; }
}

/* ==========================================================================
   Blog — editorial journal design, deliberately distinct from the rest of
   the site (underline-hover links, kicker labels, row-list instead of
   cards/bento, no shine/glare/carousel effects).
   ========================================================================== */
.blog-masthead{ padding:180px 0 56px; text-align:center; background:var(--paper); }
.blog-masthead-title{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.2vw,3.1rem);
  line-height:1.18; color:var(--ink); max-width:18ch; margin:18px auto 20px;
}
.blog-masthead-sub{ color:var(--text-body); font-size:1.05rem; max-width:48ch; margin:0 auto; }

.blog-featured{ padding:0 0 64px; background:var(--paper); }
.blog-featured-card{
  display:grid; grid-template-columns:1fr 1.1fr; align-items:stretch;
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-light); text-decoration:none;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.blog-featured-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
}
.blog-featured-media{
  background:linear-gradient(155deg, var(--ink-2) 0%, var(--ink) 100%);
  display:flex; align-items:center; justify-content:center; min-height:260px; position:relative;
}
.blog-featured-icon{
  width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(215,144,36,.14); border:1px solid rgba(215,144,36,.35);
}
.blog-featured-icon .icon{ width:36px; height:36px; color:var(--gold-300); }
.blog-featured-body{ padding:48px; display:flex; flex-direction:column; justify-content:center; }
.blog-kicker{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-600); margin-bottom:14px;
}
.blog-featured-body h2{ font-size:clamp(1.4rem,2.3vw,1.85rem); margin:0 0 14px; color:var(--ink); }
.blog-featured-body > p{ color:var(--text-body); margin:0 0 20px; line-height:1.6; }
.blog-meta{ display:flex; gap:8px; font-size:.82rem; color:var(--text-body); opacity:.65; }

.blog-list-section{ padding:64px 0 110px; background:var(--white); }
.blog-row{ padding:34px 0; border-bottom:1px solid var(--border-light); }
.blog-row:first-child{ border-top:1px solid var(--border-light); }
.blog-row h3{ font-size:1.3rem; margin:0 0 10px; }
.blog-row h3 a{
  color:var(--ink); text-decoration:none; background-repeat:no-repeat;
  background-position:0 100%; background-size:0 2px;
  background-image:linear-gradient(var(--gold), var(--gold));
  transition:background-size .3s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.blog-row h3 a:hover{ background-size:100% 2px; }
}
.blog-row > p{ color:var(--text-body); margin:0 0 12px; max-width:60ch; line-height:1.6; }

/* ---- Individual post page ---- */
.post-back{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600;
  color:var(--gold-600); margin-bottom:36px;
}
.post-back .icon{ width:15px; height:15px; transform:rotate(180deg); }
.post-header{ margin-bottom:44px; }
.post-title{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.2; color:var(--ink); margin:16px 0 20px;
}
.post-meta{ display:flex; gap:8px; font-size:.85rem; color:var(--text-body); opacity:.7; }
.post-body{ font-size:1.05rem; line-height:1.75; color:var(--text-body-strong); }
.post-body p{ margin:0 0 24px; }
.post-body h2{ font-family:var(--font-display); font-size:1.5rem; margin:44px 0 18px; color:var(--ink); }
.post-body ul{ margin:0 0 24px; padding-left:1.3em; }
.post-body li{ margin-bottom:10px; }
.post-cta{
  margin-top:56px; padding:36px; background:var(--paper); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); text-align:center;
}
.post-cta h3{ margin:0 0 10px; font-size:1.25rem; }
.post-cta p{ color:var(--text-body); margin:0 0 22px; }

/* ---- Homepage blog preview (distinct from the Portfolio carousel: static, asymmetric 1+2 layout) ---- */
.blog-preview-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; }
.blog-preview-featured{
  display:block; padding:44px; background:var(--paper); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.blog-preview-featured:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
}
.blog-preview-featured h3{ font-size:1.5rem; margin:0 0 12px; color:var(--ink); }
.blog-preview-featured > p{ color:var(--text-body); margin:0 0 18px; line-height:1.6; }
.blog-preview-side{ display:flex; flex-direction:column; gap:20px; }
.blog-preview-row{
  display:block; padding:26px; background:var(--white); border:1px solid var(--border-light);
  border-radius:var(--radius-md); text-decoration:none; flex:1;
  transition:border-color .3s, transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.blog-preview-row:hover{ border-color:var(--gold-300); transform:translateX(4px); }
}
.blog-preview-row h4{ font-size:1.05rem; margin:8px 0 8px; color:var(--ink); line-height:1.4; }
.blog-preview-viewall{
  display:inline-flex; align-items:center; gap:8px; margin-top:32px; font-weight:600;
  color:var(--gold-600); text-decoration:none;
}
.blog-preview-viewall .icon{ width:16px; height:16px; transition:transform .25s; }
@media (hover: hover) and (pointer: fine){
.blog-preview-viewall:hover .icon{ transform:translateX(4px); }
}

@media (max-width:1080px){
  .blog-featured-card{ grid-template-columns:1fr; }
  .blog-featured-media{ min-height:180px; }
  .blog-preview-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .blog-masthead{ padding:150px 0 40px; }
  .blog-featured-body{ padding:32px 24px; }
  .post-cta{ padding:28px 22px; }
  .blog-preview-featured{ padding:30px 24px; }
}

/* ---------- Reduced motion ----------
   Windows turns "reduce motion" on by default on many machines, so a blanket
   kill-switch here left the site looking frozen for a large share of visitors.
   Only the one genuinely intrusive effect is toned down: smooth-scroll jumps. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* Without JS the FAQ answers stay readable (CSP blocks the old inline <noscript> style). */
html:not(.js) .faq-panel{ max-height:none; }
/* Safety net: split-text reveals must never stay invisible. */
.reveal[data-split]{ opacity:1; transform:none; }

/* Subtle paper grain over everything (pointer-events off, purely visual) */
body::after{
  content:""; position:fixed; inset:0; z-index:400; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header fit on mid-width desktops */
@media (max-width:1320px){
  .header-actions .link-ghost{ display:none; }
}
@media (max-width:1180px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-nav{ display:flex; }
  .header-actions .btn-sm{ display:none; }
}
.site-footer .brand-word{ color:var(--text-on-dark); }

/* Long-form pages (blog posts and the Massachusetts landing page) */
.post-body h3{ font-family:var(--font-display); font-size:1.2rem; margin:32px 0 10px; color:var(--ink); }
.post-body ol{ margin:0 0 24px; padding-left:1.4em; }
.post-body a:not(.btn){ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px; }
.post-body a:not(.btn):hover{ text-decoration-color:var(--ink); }