/* ==========================================================================
   base.css — Reset mínimo, fuente de marca, tipografía base, rejilla 4px, shell.
   ========================================================================== */

/* --- Fuente de marca: F37Bolton (variable, eje wght 20–900) -------------- */
@font-face {
  font-family: 'F37Bolton';
  src: url('../fonts/F37Bolton-VF.woff2') format('woff2');
  font-weight: 20 900;     /* fuente variable: rango completo del eje wght */
  font-style: normal;
  font-display: swap;
}

/* --- Reset mínimo ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 2px; }

/* --- Base --------------------------------------------------------------- */
html { font-size: 100%; }
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-variation-settings: "wght" 400, "slnt" 0;
}

/* --- Escala tipográfica (clases semánticas) ----------------------------- */
.t-display {
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); font-weight: var(--font-weight-bold);
  font-variation-settings: "wght" 700;
}
.t-heading-lg {
  font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg); font-weight: var(--font-weight-bold);
  font-variation-settings: "wght" 700;
}
.t-heading {
  font-size: var(--text-heading); line-height: var(--leading-heading);
  font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700;
}
.t-heading-sm {
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-bold);
  font-variation-settings: "wght" 700;
}
.t-subheading { font-size: var(--text-subheading); line-height: var(--leading-subheading); }
.t-body { font-size: var(--text-body); line-height: var(--leading-body); }
.t-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption); }
.t-muted { color: var(--color-text-muted); }

h1, h2, h3, h4 { font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700; }

/* --- Layout / shell ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}
.section { padding-block: var(--section-gap-mobile); }
@media (min-width: 768px) { .section { padding-block: var(--section-gap); } }

.site-body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }

/* === Nav minimal aireado (estilo Lightship) === */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: padding .35s ease;
}
.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--spacing-16); min-height: 64px;
  max-width: var(--container-max);
  background: var(--color-bg);
  border: 1px solid transparent; border-radius: 0;
  transition: max-width .5s cubic-bezier(.2,.7,.2,1), min-height .35s ease, padding .35s ease,
              border-radius .4s ease, border-color .4s ease;
}
.site-brand {
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center; color: var(--color-pure-black);
}
.site-brand__logo { height: 34px; width: auto; display: block; transition: height .35s ease; }
.site-nav { display: flex; align-items: center; gap: var(--spacing-28); }
.site-nav--left { grid-column: 1; justify-self: start; }
.site-nav--right { grid-column: 3; justify-self: end; }
.navlink { font-size: var(--text-body-sm); color: var(--color-pure-black); text-underline-offset: 6px; }
.navlink:hover { text-decoration: underline; }
.navlink--cta { border: 1px solid var(--color-pure-black); border-radius: var(--radius-full); padding: var(--spacing-8) var(--spacing-20); }
.navlink--cta:hover { background: var(--color-pure-black); color: var(--color-bg); text-decoration: none; }
.navlink:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 4px; }

/* Pill flotante más estrecho al hacer scroll */
.site-header.is-scrolled { padding-top: var(--spacing-12); }
.site-header.is-scrolled .site-header__inner {
  max-width: 940px; min-height: 56px;
  padding-block: var(--spacing-8);
  border-color: var(--color-outline-gray); border-radius: var(--radius-full);
}
.site-header.is-scrolled .site-brand__logo { height: 28px; }

/* Hamburguesa (solo móvil) */
.nav-toggle { display: none; }
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--color-pure-black); }
.nav-toggle__bar + .nav-toggle__bar { margin-top: 5px; }
.site-menu { display: none; }
.site-menu[hidden] { display: none; }

/* Acceso directo a WhatsApp en el header: solo visible en móvil (a la derecha del logo). */
.header-wa { display: none; }

@media (max-width: 760px) {
  .site-header__inner { grid-template-columns: 40px 1fr 40px; min-height: 60px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    grid-column: 1; justify-self: start; width: 40px; height: 40px;
    border: 1px solid var(--color-outline-gray); border-radius: 10px; background: transparent; cursor: pointer;
  }
  .site-brand__logo { height: 26px; }
  .site-nav--left, .site-nav--right { display: none; }

  /* hamburguesa — logo — WhatsApp (3ª columna del grid del header) */
  .header-wa {
    display: inline-flex; align-items: center; justify-content: center;
    grid-column: 3; justify-self: end; width: 40px; height: 40px;
    background: #25d366; border-radius: 10px; color: #fff;
    transition: background-color .15s ease, transform .1s ease;
  }
  .header-wa:hover { background: #1ebe5b; }
  .header-wa:active { transform: translateY(1px); }
  .header-wa:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 3px; }
  .header-wa__icon { width: 22px; height: 22px; fill: currentColor; }

  .site-menu:not([hidden]) { display: grid; gap: var(--spacing-4); background: var(--color-bg); border-top: 1px solid var(--color-outline-gray); border-bottom: 1px solid var(--color-outline-gray); box-shadow: 0 14px 28px rgba(0,0,0,.10); padding: var(--spacing-12) var(--spacing-24); }
  .site-menu a { padding: var(--spacing-12) var(--spacing-4); font-size: var(--text-subheading); color: var(--color-pure-black); }
}

/* === Footer minimal === */
.site-footer { background: var(--color-pure-black); color: var(--color-paper-white); padding-top: var(--spacing-64); padding-bottom: var(--spacing-40); overflow: hidden; }
.site-footer a { color: var(--color-paper-white); text-underline-offset: 3px; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__top {
  display: flex; flex-wrap: wrap; gap: var(--spacing-24);
  align-items: flex-end; justify-content: space-between; padding-bottom: var(--spacing-40);
}
.site-footer__tagline { max-width: 34ch; line-height: 1.35; }
.site-footer__cta {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  background: var(--color-paper-white); color: var(--color-pure-black);
  border-radius: var(--radius-full); padding: var(--spacing-12) var(--spacing-24);
  white-space: nowrap; font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700;
}
.site-footer a.site-footer__cta { color: var(--color-pure-black); } /* gana a .site-footer a (texto blanco) */
.site-footer__cta:hover { opacity: .85; text-decoration: none; }

/* Wordmark a ancho completo (SVG que se estira al 100% en cualquier pantalla). */
.site-footer__brand { display: block; width: 100%; margin: var(--spacing-24) 0 var(--spacing-40); }
.site-footer__brand svg { display: block; width: 100%; height: auto; overflow: visible; }
.site-footer__brand text { fill: var(--color-paper-white); font-family: var(--font-f37bolton); font-weight: 700; }
.site-footer__grid { display: grid; gap: var(--spacing-40); grid-template-columns: 1fr; border-top: 1px solid #2a2a2a; padding-top: var(--spacing-40); }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer__label { color: var(--color-medium-gray); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--spacing-12); }
.site-footer__col li { color: var(--color-outline-gray); }
.site-footer__col li + li { margin-top: var(--spacing-8); }
.t-muted-dark { color: var(--color-medium-gray); }
.site-footer__bottom { border-top: 1px solid #2a2a2a; margin-top: var(--spacing-40); padding-top: var(--spacing-20); color: var(--color-medium-gray); display: flex; flex-wrap: wrap; gap: var(--spacing-12) var(--spacing-24); align-items: center; justify-content: space-between; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--spacing-20); font-size: var(--text-caption); }
.site-footer__legal a { color: var(--color-outline-gray); }
.site-footer__legal a:hover { color: var(--color-paper-white); }

/* === Reveal al hacer scroll (sobrio, orquestado — design.md §10) ===
   Solo se oculta si hay JS (.has-js) y el usuario no pide menos movimiento;
   así nunca queda contenido invisible sin JS o con reduce-motion. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  .has-js .reveal.is-visible { opacity: 1; transform: none; }
}
.reveal-1 { --reveal-delay: .04s; }
.reveal-2 { --reveal-delay: .11s; }
.reveal-3 { --reveal-delay: .18s; }
.reveal-4 { --reveal-delay: .25s; }
.reveal-5 { --reveal-delay: .32s; }
.reveal-6 { --reveal-delay: .39s; }

/* Parallax sobrio (lo conduce motion.js) */
[data-parallax] { will-change: transform; }