/* Barrera Conversation · base compartida (tokens, tipografía, botones, header, footer) */

:root {
  /* Marca (muestreada del logo) */
  --yellow: oklch(0.825 0.17 82.6);   /* #FBB900 */
  --yellow-deep: oklch(0.74 0.165 78);
  --red: oklch(0.647 0.188 18.5);     /* #EA5160 */
  --blue: oklch(0.65 0.117 244);      /* #4996D1 */

  /* Neutros: el gris del wordmark (#373736) y variantes */
  --ink: oklch(0.336 0.004 100);
  --ink-deep: oklch(0.22 0.004 100);
  --ink-2: oklch(0.42 0.006 95);
  --ink-soft: oklch(0.5 0.008 90);
  --bg: oklch(0.985 0.004 82);
  --surface: oklch(0.955 0.012 82);
  --line: oklch(0.85 0.02 82);
  --on-ink: oklch(0.96 0.01 82);
  --on-ink-soft: oklch(0.82 0.015 82);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 0.75rem;
  --pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-sticky: 10;
  --z-float: 20;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-variation-settings: "wdth" 100;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--ink-deep); color: var(--yellow);
  padding: 0.6rem 1rem; border-radius: var(--pill); z-index: var(--z-float);
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Tipografía ---------- */
h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.25rem);
  font-weight: 760;
  font-variation-settings: "wdth" 108;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
h3 {
  font-size: 1.25rem;
  font-weight: 680;
  font-variation-settings: "wdth" 104;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lead {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 44ch;
  margin-top: 1rem;
}
.lead--light { color: var(--on-ink-soft); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--pill);
  font-weight: 640;
  font-variation-settings: "wdth" 104;
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-out), background-color 0.25s, color 0.25s, box-shadow 0.35s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.08s; }
.btn .ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.btn--ink { background: var(--ink-deep); color: var(--yellow); }
.btn--ink:hover { background: oklch(0.17 0.004 100); box-shadow: 0 10px 24px -12px oklch(0.2 0.02 82 / 0.7); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: oklch(0.86 0.15 84); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { background: oklch(0.2 0.02 82 / 0.08); }
.btn--sm { padding: 0.7rem 1.1rem; font-size: 0.95rem; }
.btn--lg { padding: 1.15rem 1.9rem; font-size: 1.15rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.6rem;
}
.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; min-width: 0; }
.brand img { width: clamp(150px, 17vw, 200px); height: auto; flex: none; }
.brand__slogan {
  font-size: 0.82rem;
  font-weight: 560;
  font-variation-settings: "wdth" 100;
  line-height: 1.15;
  color: var(--ink);
  max-width: 11ch;
  padding-left: 0.9rem;
  border-left: 1px solid oklch(0.3 0.03 82 / 0.35);
}
@media (max-width: 40rem) { .brand__slogan { display: none; } }

section { scroll-margin-top: 5.5rem; }

/* Footer */
.site-footer { background: var(--ink-deep); color: var(--on-ink-soft); font-size: 0.92rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding-block: 1.5rem; }
.site-footer strong { color: var(--on-ink); font-weight: 680; }
.site-footer a { color: var(--yellow); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Botón flotante */
.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-float);
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(0.62 0.18 150); color: white;
  box-shadow: 0 12px 28px -10px oklch(0.2 0.05 150 / 0.6);
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.wa-float .ico { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.wa-float[hidden] { display: grid; opacity: 0; pointer-events: none; transform: translateY(1rem); }

/* Reveals (solo con JS y sin reduced motion) */
.reveal--armed > * { opacity: 0; transform: translateY(14px); }
.reveal--in > * {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal--in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal--in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal--in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal--in > *:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}