/* Neto — landing page.
   Tokens under css/tokens/ are copied verbatim from the Neto design system
   (_ds/neto-design-system-4122e886…). Re-sync them from the design system;
   everything below is page-level styling built on top of those tokens. */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

/* ── Base ─────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* sticky header */
}

body {
  margin: 0;
  background: var(--neutral-0);
  font-family: var(--font-sans);
  color: var(--text-body);
  overflow-x: clip;
}

[hidden] { display: none !important; }

img, video, canvas { display: block; max-width: 100%; }

.icon { flex: 0 0 auto; }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.overline {
  font: var(--text-overline-role);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-height-lg);
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-body-md);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}

.btn--primary {
  background: var(--green-800);
  color: var(--neutral-0);
}
.btn--primary:hover { background: var(--green-700); color: var(--neutral-0); }

.btn--secondary {
  background: var(--neutral-0);
  border: 1px solid var(--border-default);
  color: var(--text-strong);
  font-weight: var(--weight-medium);
}
.btn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.btn--accent {
  background: var(--accent-500);
  color: var(--green-900);
}
.btn--accent:hover { background: var(--accent-400); color: var(--green-900); }

.btn--sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: var(--size-body-sm);
  white-space: nowrap;
}

.btn--lg {
  min-height: 52px;
  gap: 10px;
  padding: 0 26px;
  font-size: var(--size-body-lg);
}

/* ── Header ───────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px var(--gutter-page-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__logo {
  display: block;
  border-bottom: 0;
  line-height: 0;
}
.site-header__logo img { height: 22px; width: auto; }

/* Nav de secciones: solo desktop (en móvil queda logo + CTA, como antes) */
.site-header__nav { display: none; }

@media (min-width: 900px) {
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-left: auto;
    margin-right: var(--space-6);
  }
}

.site-header__nav a {
  border-bottom: 0;
  font-size: var(--size-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  white-space: nowrap;
}
.site-header__nav a:hover { color: var(--green-800); }

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero {
  background: var(--neutral-0);
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px var(--gutter-page-sm) 40px;
}

.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.hero__copy { flex: 1 1 420px; min-width: 0; }

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(40px, 11.5vw, 88px);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  max-width: 14ch;
  text-wrap: pretty;
}
.hero__title-accent { color: var(--accent-700); white-space: nowrap; }

.hero__lede {
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  margin: 24px 0 0;
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}

.hero__hint-arrow {
  display: inline-flex;
  animation: netoHint 2.4s var(--ease-standard) infinite;
}

@keyframes netoHint {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(6px); opacity: 1; }
}

.hero__anim { flex: 0 0 40%; max-width: 520px; }

.hero__anim-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero__anim-frame video,
.hero__anim-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero__anim-fallback { padding: 12% 8%; }

/* ── Video scroll (canvas frame scrubbing) ────────────────────────── */

.scroller {
  position: relative;
  background: var(--neutral-0);
  height: var(--scroll-length, 320vh);
}

.scroller__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--neutral-0);
}

.scroller__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--neutral-0);
}

.scroller__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter-page-sm);
  pointer-events: none;
  /* velo oscuro sobre el video para que el texto blanco se lea siempre */
  background: rgba(7, 26, 19, .35);
}

/* Both phrases stack in the center of the video; the active one fades in
   with a slight rise while the other fades out. */
.scroller__phrase {
  grid-area: 1 / 1;
  max-width: 820px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease-standard), transform .55s var(--ease-standard);
}
.scroller__phrase.is-active { opacity: 1; transform: none; }

.scroller__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(32px, 7.4vw, 64px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--neutral-0);
  margin: 0;
}

/* ── Qué ofrecemos ────────────────────────────────────────────────── */

.offer {
  background: var(--green-800);
  padding: var(--space-24) var(--gutter-page-sm);
}

.offer__inner { max-width: var(--container-max); margin: 0 auto; }

.offer__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--neutral-0);
  margin: 0;
}

.offer__lede {
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: var(--leading-relaxed);
  color: var(--text-on-inverse-muted);
  margin: var(--space-4) 0 0;
  max-width: 44ch;
}

.offer__grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

/* Two columns: the four cards share one height per row (no ragged bottoms).
   On a single column each card measures its own content. */
@media (min-width: 856px) {
  .offer__grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
  }
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card__head { display: flex; align-items: center; gap: 10px; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-accent-soft);
  color: var(--accent-800);
  flex: 0 0 auto;
}

.card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-heading-md);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: 0;
}

.card__body {
  margin: 0;
  font-size: var(--size-body-md);
  line-height: 1.55;
  color: var(--text-body);
}

.card__note {
  margin: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.card__tag {
  margin: 0;
  align-self: flex-start;
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font: var(--text-overline-role);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Card 1 — fundadores */

.card__media--founders {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
}

.founders {
  position: relative;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 1 / 1;
}
@media (min-width: 900px) {
  .founders { max-width: 380px; }
}

.founders__slot {
  position: absolute;
  width: 52%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--neutral-0);
  box-shadow: var(--shadow-md);
  background: var(--surface-sunken);
}
.founders__slot--a { left: 0; top: 0; }
.founders__slot--b { right: 0; bottom: 0; }

.founders__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.founders__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-3);
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--size-overline);
  line-height: 1.3;
}

/* Card 2 — celular con el chat */

.card__media--phone {
  display: flex;
  justify-content: center;
  padding: var(--space-2) 0 4px;
}

.phone {
  position: relative;
  width: 234px;
  aspect-ratio: 588 / 1176;
}

/* Screen box measured off frame-phone.png's cutout */
.phone__screen {
  position: absolute;
  left: 7.82%;
  top: 3.91%;
  width: 85.2%;
  height: 91.84%;
  border-radius: 30px;
  overflow: hidden;
  background: var(--neutral-0);
  display: flex;
  flex-direction: column;
}

.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 40px 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}
.chat__name {
  font-weight: var(--weight-semibold);
  font-size: var(--size-body-sm);
  color: var(--text-strong);
}
.chat__time {
  font-family: var(--font-mono);
  font-size: var(--size-overline);
  color: var(--text-muted);
}

.chat__thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 11px 22px;
  background: var(--surface-page);
}

.bubble {
  margin: 0;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.4;
}
.bubble--out {
  align-self: flex-end;
  max-width: 86%;
  background: var(--surface-accent-soft);
  border-radius: 12px 12px 4px 12px;
  color: var(--green-900);
}
.bubble--in {
  align-self: flex-start;
  max-width: 90%;
  background: var(--neutral-0);
  border: 1px solid var(--border-subtle);
  border-radius: 12px 12px 12px 4px;
  color: var(--text-body);
}

/* Card 3 — notebook con el portal */

.card__media--laptop {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}

.laptop {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 882 / 531;
}

/* Screen box measured off frame-laptop.png's cutout */
.laptop__screen {
  position: absolute;
  left: 13.27%;
  top: 8.47%;
  width: 73.92%;
  height: 77.4%;
  overflow: hidden;
  background: var(--neutral-0);
  display: flex;
  flex-direction: column;
}

.laptop__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.portal__bar {
  flex: 0 0 auto;
  background: var(--green-800);
  padding: 5px 9px;
}
.portal__url {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-on-inverse-muted);
}

.portal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal__label {
  font: var(--text-overline-role);
  font-size: 9px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.portal__total {
  font-weight: var(--weight-medium);
  font-size: 16px;
  color: var(--text-strong);
  white-space: nowrap;
  margin-bottom: 3px;
}

.portal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  border-top: 1px solid var(--border-subtle);
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-body);
}
.portal__row .num {
  font-size: 10px;
  color: var(--text-strong);
  white-space: nowrap;
}

/* Card 4 — reloj biométrico */

.card__media--clock {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
}

.clock-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Sobre nosotros ───────────────────────────────────────────────── */

.about {
  background: var(--surface-page);
  padding: var(--space-24) var(--gutter-page-sm);
}

.about__inner { max-width: var(--container-max); margin: 0 auto; }

.about__overline { color: var(--accent-800); margin: 0 0 var(--space-4); }

.about__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(28px, 7.4vw, 42px);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

.about__grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

/* Móvil: foto a la izquierda con nombre y rol al lado, bio abajo a lo
   ancho. De 420px para arriba la bio pasa a la derecha de la foto. */
.about-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

@media (min-width: 420px) {
  .about-card { align-items: start; }
  .about-card__photo { grid-row: span 2; }
}

.about-card__photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--neutral-0);
  box-shadow: var(--shadow-md);
  background: var(--surface-sunken);
}

.about-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-heading-md);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: 0;
}

.about-card__role {
  font: var(--text-overline-role);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-800);
  margin: 4px 0 0;
}

.about-card__bio {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--size-body-md);
  line-height: 1.55;
  color: var(--text-body);
}

@media (min-width: 420px) {
  .about-card__bio { grid-column: 2; }
}

.about-card__bio--pending {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Preguntas frecuentes ─────────────────────────────────────────── */

.faq {
  background: var(--neutral-0);
  padding: var(--space-24) var(--gutter-page-sm);
}

.faq__inner { max-width: 820px; margin: 0 auto; }

.faq__overline { color: var(--accent-800); margin: 0 0 var(--space-4); }

.faq__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(28px, 7.4vw, 42px);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-8);
}

.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}

.faq__item { border-bottom: 1px solid var(--border-subtle); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  background: none;
  border: 0;
  padding: var(--space-5) 4px;
  min-height: 56px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-body-lg);
  line-height: 1.4;
  color: var(--text-strong);
  transition: var(--transition-control);
}
.faq__q:hover { background: var(--surface-hover); }

.faq__sign {
  flex: 0 0 auto;
  color: var(--accent-800);
  margin-top: 2px;
}

.faq__a {
  margin: 0;
  padding: 0 var(--space-10) 22px 4px;
  font-size: var(--size-body-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* ── CTA + footer ─────────────────────────────────────────────────── */

.cta {
  background: var(--green-950);
  color: var(--text-on-inverse);
  padding: var(--space-24) var(--gutter-page-sm);
}

.cta__inner { max-width: 820px; margin: 0 auto; text-align: center; }

.cta__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--neutral-0);
  margin: 0;
}

.cta__lede {
  font-size: var(--size-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-on-inverse-muted);
  margin: var(--space-5) auto var(--space-8);
  max-width: 44ch;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: 72px;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-inverse);
  text-align: left;
}
.site-footer img { height: 20px; width: auto; }
.site-footer p {
  margin: 0;
  font-size: var(--size-body-sm);
  color: var(--text-on-inverse-muted);
}

/* ── QR modal (desktop) ───────────────────────────────────────────── */

.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

.qr-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 26, 19, .55);
  backdrop-filter: blur(3px);
}

.qr-modal__panel {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 520px;
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
}

.qr-modal__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-heading-lg);
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}

.qr-modal__lede {
  margin: 0 0 var(--space-6);
  font-size: var(--size-body-md);
  line-height: 1.55;
  color: var(--text-muted);
}

.qr-modal__code {
  width: min(288px, 38vh);
  height: min(288px, 38vh);
  margin: 0 auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  overflow: hidden;
}
.qr-modal__code img { width: 100%; height: 100%; }

.qr-modal__phone {
  margin: var(--space-6) 0 0;
  font-size: var(--size-body-md);
  color: var(--text-strong);
  white-space: nowrap;
}

.qr-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.qr-modal__actions .btn {
  min-height: 44px;
  padding: 0 var(--space-5);
}

body.is-locked { overflow: hidden; }

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__hint-arrow { animation: none; opacity: .7; }
  .scroller__phrase { transition: none; }
}