/* ===== Full Access — Estático (HTML5 + CSS + JS) ===== */

:root {
  --bg: #ffffff;
  --fg: hsl(240 10% 12%);
  --card: hsl(210 20% 98%);
  --primary: hsl(142 71% 38%);
  --primary-fg: #ffffff;
  --accent: hsl(142 60% 32%);
  --muted: hsl(215 16% 40%);
  --border: hsl(210 16% 88%);
  --wa: #25D366;
  --wa-hover: #1DA851;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-head: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

.fa-site {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.fa-site *::-webkit-scrollbar { width: 8px; height: 8px; }
.fa-site ::selection { background: var(--primary); color: #fff; }

.fa-primary, .fa-primary { color: var(--primary); }
.fa-accent { color: var(--accent); }

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.fa-container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }

/* ===== Eyebrow / flags ===== */
.fa-eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--primary); text-transform: uppercase; letter-spacing: 0.2em; }
.fa-mono-sm { font-family: var(--font-mono); font-size: 12px; }
.fa-flag { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
@media (min-width: 64rem) { .fa-flag { display: block; } }

/* ===== Navbar ===== */
.fa-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.fa-navbar.is-scrolled {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(0,0,0,0.12);
}
.fa-navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem;
}
.fa-navbar__brand { display: inline-flex; align-items: center; gap: .5rem; }
.fa-navbar__brand img { height: 36px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.fa-navbar__links { display: none; align-items: center; gap: 2rem; }
.fa-navbar__links a {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--muted); transition: color .3s var(--ease);
}
.fa-navbar__links a:hover { color: var(--fg); }
.fa-navbar__actions { display: flex; align-items: center; gap: .75rem; }
.fa-btn-wa {
  display: none; align-items: center; gap: .5rem;
  background: var(--wa); color: #fff; padding: .5rem 1rem;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.fa-btn-wa:hover { background: var(--wa-hover); box-shadow: 0 0 24px rgba(37,211,102,.5); }
@media (min-width: 40rem) { .fa-btn-wa { display: inline-flex; } }
@media (min-width: 48rem) { .fa-navbar__links { display: flex; } }

.fa-nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--fg); padding: 4px; }
.fa-nav-toggle .fa-ic-close { display: none; }
.fa-navbar.is-open-mobile .fa-ic-open { display: none; }
.fa-navbar.is-open-mobile .fa-ic-close { display: block; }
@media (min-width: 48rem) { .fa-nav-toggle { display: none; } }

.fa-navbar__mobile {
  max-height: 0; overflow: hidden; transition: max-height .4s var(--ease);
  border-top: 1px solid transparent; background: transparent;
}
.fa-navbar.is-open-mobile .fa-navbar__mobile {
  max-height: 400px; border-top-color: var(--border);
  background: rgba(255,255,255,0.96); backdrop-filter: blur(16px);
}
.fa-navbar__mobile a {
  display: block; padding: .75rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted);
}
@media (min-width: 48rem) { .fa-navbar__mobile { display: none; } }

/* ===== Hero ===== */
.fa-hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 4rem;
}
.fa-hero__bg { position: absolute; inset: 0; z-index: 0; }
.fa-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.fa-hero__overlay-h { position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.3) 100%); }
.fa-hero__overlay-v { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, transparent 50%, rgba(255,255,255,.4) 100%); }
.fa-hero__content { position: relative; z-index: 1; max-width: 48rem; }
.fa-hero h1 {
  font-family: var(--font-head); font-weight: 800; line-height: 0.95; letter-spacing: -0.05em;
  font-size: clamp(3rem, 8vw, 6rem); margin: 0;
}
.fa-hero__content p {
  margin-top: 2rem; max-width: 36rem; font-family: var(--font-mono);
  font-size: clamp(14px, 1.6vw, 16px); line-height: 1.7; color: var(--muted);
}
.fa-hero__content p strong { font-weight: 700; }
.fa-hero__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.fa-btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--primary); color: var(--primary-fg); padding: .875rem 1.5rem;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.fa-btn-primary:hover { background: rgba(31,160,80,.85); box-shadow: 0 0 32px rgba(31,160,80,.5); }
.fa-btn-primary svg { transition: transform .3s var(--ease); }
.fa-btn-primary:hover svg { transform: translate(2px, -2px); }
.fa-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border); color: var(--fg); padding: .875rem 1.5rem;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.fa-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.fa-hero__badges { margin-top: 3.5rem; display: flex; flex-wrap: wrap; gap: 2rem; }
.fa-hero__badges span { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.fa-hero__badges span:nth-child(1) svg { color: var(--accent); }
.fa-hero__badges span:nth-child(2) svg { color: var(--primary); }
.fa-hero__side {
  position: absolute; bottom: 2rem; right: 2rem; z-index: 1; display: none;
  flex-direction: column; align-items: flex-end; gap: .5rem;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted); pointer-events: none;
}
@media (min-width: 64rem) { .fa-hero__side { display: flex; } }

/* ===== TrustBar ===== */
.fa-trustbar { position: relative; z-index: 1; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
.fa-trustbar__row { max-width: 80rem; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .fa-trustbar__row { grid-template-columns: repeat(4, 1fr); } }
.fa-stat { padding: 2rem 1.5rem; text-align: center; border-right: 1px solid var(--border); }
.fa-trustbar .fa-stat:last-child { border-right: none; }
.fa-stat__value { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.05em; font-size: clamp(2.25rem, 5vw, 3rem); }
.fa-stat__label { margin-top: .5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }

/* ===== Section heads ===== */
.fa-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; margin-bottom: 4rem; border-bottom: 1px solid var(--border); }
.fa-section-head h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: .75rem; font-size: clamp(2.25rem, 6vw, 3.75rem); }

/* ===== Services ===== */
.fa-services { position: relative; z-index: 1; padding-block: clamp(6rem, 12vw, 8rem); }
.fa-services__list { border-top: 1px solid var(--border); }
.fa-service {
  display: flex; align-items: center; gap: 1.5rem; padding: 2.5rem 1.5rem;
  background: rgba(247,249,250,.4); border-bottom: 1px solid var(--border);
  transition: background .5s var(--ease), color .5s var(--ease); cursor: default;
}
.fa-service:last-child { border-bottom: none; }
.fa-service:hover { background: var(--primary); }
.fa-service__id { font-family: var(--font-mono); font-size: 12px; color: var(--muted); transition: color .5s var(--ease); }
.fa-service svg { color: var(--accent); flex: 0 0 auto; transition: color .5s var(--ease); }
.fa-service__body { flex: 1; }
.fa-service__body h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.05em; font-size: clamp(1.5rem, 4vw, 1.875rem); transition: color .5s var(--ease); }
.fa-service__body p {
  margin-top: .5rem; max-width: 28rem; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--muted);
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .5s var(--ease), color .5s var(--ease);
}
.fa-service:hover .fa-service__body p { max-height: 200px; opacity: 1; }
.fa-tags { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.fa-tags span {
  border: 1px solid var(--border); padding: .25rem .5rem;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted);
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.fa-service:hover .fa-service__id { color: rgba(255,255,255,.8); }
.fa-service:hover svg { color: #fff; }
.fa-service:hover .fa-service__body h3 { color: #fff; }
.fa-service:hover .fa-service__body p { color: rgba(255,255,255,.9); }
.fa-service:hover .fa-tags span { border-color: rgba(255,255,255,.6); color: #fff; }
@media (max-width: 47.99rem) {
  .fa-service__body p { max-height: 200px; opacity: 1; }
}

/* ===== Value Proposition ===== */
.fa-value { position: relative; z-index: 1; padding-block: clamp(6rem, 12vw, 8rem); border-top: 1px solid var(--border); }
.fa-value__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 40rem) { .fa-value__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .fa-value__grid { grid-template-columns: repeat(3, 1fr); } }
.fa-value-card { background: var(--bg); padding: 2rem; transition: background .5s var(--ease); }
.fa-value-card:hover { background: rgba(247,249,250,.6); }
.fa-value-card svg { color: var(--primary); transition: color .5s var(--ease); }
.fa-value-card:hover svg { color: var(--accent); }
.fa-value-card h4 { margin-top: 1.25rem; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.05em; font-size: 1.125rem; }
.fa-value-card p { margin-top: .75rem; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--muted); }
.fa-value-card--spacer { background: var(--bg); }

/* ===== About ===== */
.fa-about { position: relative; z-index: 1; padding-block: clamp(6rem, 12vw, 8rem); border-top: 1px solid var(--border); }
.fa-about__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 64rem) { .fa-about__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.fa-about__media { position: relative; }
.fa-about__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fa-about__badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--bg); border: 1px solid var(--border); padding: 1.5rem; display: none;
}
@media (min-width: 40rem) { .fa-about__badge { display: block; } }
.fa-about__num { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.05em; font-size: 3rem; color: var(--primary); }
.fa-about__numlabel { margin-top: .25rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.fa-about__text h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.05em; line-height: 1.1; margin-top: .75rem; font-size: clamp(2.25rem, 5vw, 3rem); }
.fa-about__text p { margin-top: 1.5rem; max-width: 32rem; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--muted); }
.fa-about__list { margin-top: 2.5rem; border-left: 1px solid var(--border); padding-left: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.fa-about__list > div { display: flex; align-items: flex-start; gap: .75rem; }
.fa-about__idx { margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.fa-about__list p { font-family: var(--font-mono); font-size: 14px; color: rgba(28,28,32,.8); }
.fa-about__cards { margin-top: 4rem; display: grid; gap: 2rem; }
@media (min-width: 40rem) { .fa-about__cards { grid-template-columns: repeat(3, 1fr); } }
.fa-mcard { border: 1px solid var(--border); padding: 1.5rem; }
.fa-mcard h3 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; font-size: 1.125rem; color: var(--primary); }
.fa-mcard p { margin-top: .75rem; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ===== Contact ===== */
.fa-contact { position: relative; z-index: 1; padding-block: clamp(6rem, 12vw, 8rem); border-top: 1px solid var(--border); }
.fa-contact__grid { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .fa-contact__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.fa-contact__info h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: .75rem; font-size: clamp(2.25rem, 6vw, 3.75rem); }
.fa-contact__info > p { margin-top: 1.5rem; max-width: 28rem; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--muted); }
.fa-contact__lines { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fa-cline { display: flex; align-items: center; gap: 1rem; transition: color .3s var(--ease); }
.fa-cline__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); color: var(--primary); transition: border-color .3s var(--ease); }
.fa-cline:hover .fa-cline__ic { border-color: var(--primary); }
.fa-cline span:last-child { font-family: var(--font-mono); font-size: 14px; color: var(--fg); }
.fa-cline:last-child .fa-cline__ic { color: var(--accent); }

.fa-contact-form { border: 1px solid var(--border); background: rgba(247,249,250,.4); padding: 1.5rem; backdrop-filter: blur(8px); }
@media (min-width: 40rem) { .fa-contact-form { padding: 2rem; } }
.fa-contact-form__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.fa-contact-form__head .fa-mono-sm { color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
.fa-field { display: block; margin-bottom: .75rem; }
.fa-field__lbl { display: block; margin-bottom: .5rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.fa-field input, .fa-field textarea {
  width: 100%; border: 1px solid var(--border); background: var(--bg); padding: .75rem 1rem;
  font-family: var(--font-mono); font-size: 14px; color: var(--fg); outline: none; transition: border-color .3s var(--ease);
}
.fa-field input:focus, .fa-field textarea:focus { border-color: var(--primary); }
.fa-field textarea { resize: none; }
.fa-send-btn {
  margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: .75rem;
  background: var(--accent); color: var(--primary-fg); padding: 1rem; min-height: 44px; width: 100%;
  font-family: var(--font-head); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  transition: filter .3s var(--ease); animation: fa-rec 1.8s var(--ease) infinite;
}
.fa-send-btn:hover { filter: brightness(1.1); }
.fa-send-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
@keyframes fa-rec {
  0% { box-shadow: 0 0 0 0 rgba(45,122,58,.55), 0 0 32px rgba(45,122,58,.4); }
  70% { box-shadow: 0 0 0 18px rgba(45,122,58,0), 0 0 32px rgba(45,122,58,.4); }
  100% { box-shadow: 0 0 0 0 rgba(45,122,58,0), 0 0 32px rgba(45,122,58,.4); }
}

/* ===== Footer ===== */
.fa-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); background: var(--bg); }
.fa-visualizer { display: flex; height: 4rem; align-items: flex-end; gap: 2px; opacity: calc(var(--vis-opacity, .8)); transition: opacity .15s linear; }
.fa-viz-bar { flex: 1; transform-origin: bottom; height: 100%; animation: fa-viz 1.2s ease-in-out infinite; }
@keyframes fa-viz { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.fa-footer__body { border-top: 1px solid var(--border); }
.fa-footer__grid { display: grid; gap: 2.5rem; padding-block: 4rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .fa-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.fa-footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; order: 2; }
@media (min-width: 48rem) { .fa-footer__brand { order: 2; } .fa-footer__col:first-of-type { order: 1; } .fa-footer__col:last-of-type { order: 3; } }
.fa-footer__brand img { height: 64px; width: auto; object-fit: contain; }
.fa-footer__col h4 { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.fa-footer__col ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.fa-footer__col ul a, .fa-footer__contact li {
  font-family: var(--font-mono); font-size: 12px; color: rgba(28,28,32,.8);
}
.fa-footer__col ul a { transition: color .3s var(--ease); }
.fa-footer__col ul a:hover { color: var(--primary); }
.fa-footer__wa {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border); padding: .5rem 1rem;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(28,28,32,.8);
  transition: border-color .3s var(--ease), color .3s var(--ease); width: max-content;
}
.fa-footer__wa:hover { border-color: var(--accent); color: var(--accent); }
.fa-footer__bar { border-top: 1px solid var(--border); }
.fa-footer__bar-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .5rem; padding-block: 1.5rem; }
@media (min-width: 40rem) { .fa-footer__bar-inner { flex-direction: row; } }
.fa-footer__bar p { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }

/* ===== Honeypot anti-spam (oculto) ===== */
.fa-hp { display: none !important; }

/* ===== Modal de confirmación ===== */
.fa-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(28,28,32,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 1.5rem; animation: fa-fade .25s var(--ease); }
@keyframes fa-fade { from { opacity: 0; } to { opacity: 1; } }
.fa-modal__card { position: relative; background: var(--bg); border: 1px solid var(--border); padding: 2.5rem 2rem; max-width: 24rem; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(28,28,32,.25); animation: fa-pop .4s var(--ease); }
@keyframes fa-pop { from { transform: scale(.92) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.fa-modal__close { position: absolute; top: .5rem; right: .75rem; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); transition: color .2s var(--ease); }
.fa-modal__close:hover { color: var(--fg); }
.fa-modal__ic { width: 56px; height: 56px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 28px; font-weight: 700; color: #fff; }
.fa-modal__ic.is-ok { background: var(--primary); }
.fa-modal__ic.is-err { background: #c0392b; }
.fa-modal__card h3 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.03em; font-size: 1.5rem; }
.fa-modal__card p { margin-top: .5rem; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--muted); }