/* =============================================
   RESET Y BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: auto; }

body {
  font-family: var(--font-sans);
  background: #F5F0E6;
  color: #1F2937;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

/* =============================================
   1. BARRA DE ANUNCIO SUPERIOR
   ============================================= */
.announcement {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 0.2s ease;
}

.announcement:hover { color: #e2e2e2; }

.announcement span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* =============================================
   TOKENS — hero oscuro y mockup del inbox
   ============================================= */
:root {
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 64px;
  --panel-top: 32px;   /* del borde del escenario al panel de bloques */
  --mock-inset: 64px;  /* bloques visibles por encima del dashboard */

  /* Hero oscuro */
  --hero-bg: #17151C;
  --text-1: #FFFFFF;
  --text-2: #9A96A3;
  --nav-link: #D9D6E0;
  --lilac: #CBBDFB;
  --lilac-2: #B8A9F5;
  --lilac-3: #8B7CF6;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-line: rgba(255, 255, 255, 0.12);

  /* Mosaico de bloques detrás del dashboard */
  --block-ice: #E4EAFD;
  --block-sky: #A9C4F5;
  --block-periwinkle: #8FA8F0;
  --block-lilac: #C4B5F4;
  --block-violet: #A992EC;
  --block-deep: #7B6FD8;

  /* Mockup (ventana clara) */
  --surface: #FFFFFF;
  --mock-ink: #17151C;
  --mock-ink-soft: #3F3B4A;
  --mock-muted: #6E6A78;
  --mock-line: rgba(0, 0, 0, 0.05);
  --mock-fill: rgba(0, 0, 0, 0.04);
  --draft: #D93025;
  --send-from: #9B8CF7;
  --send-to: #6C9CF2;

  /* Etiquetas del clasificador (chips estilo Gmail) */
  --tag-incidencia: #C2185B;
  --tag-proveedor: #2FA7BA;
  --tag-comunidad: #16A766;
  --tag-morosidad: #D08A2E;
  --tag-contabilidad: #3C78D8;
  --tag-otros: #6B6B6B;
  --tag-informativo: #2DA2BB;
  --tag-responder: #4A86E8;
  --tag-urgente: #E0302C;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--mock-ink);
  outline-offset: 3px;
}

.header :focus-visible,
.hero :focus-visible { outline-color: var(--lilac); }

/* =============================================
   2. BARRA DE NAVEGACIÓN — cristal oscuro
   Sticky, pero con margin-bottom negativo para no empujar el hero:
   así el hero mide exactamente 100dvh y el mockup se corta en el borde.
   ============================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  margin-bottom: calc(-1 * var(--nav-h));
  padding: 0 24px;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1360px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: background 0.22s ease;
}

/* Fuera del hero el cristal se oscurece para que el texto blanco se lea sobre fondos claros */
.header.is-scrolled .navbar { background: rgba(23, 21, 28, 0.82); }

.navbar-logo {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-1);
  line-height: 1;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--nav-link);
  line-height: 1;
  transition: color 0.2s ease;
}

.navbar-links a:hover { color: var(--text-1); }

.navbar-links svg {
  width: 14px;
  height: 14px;
  color: var(--text-2);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.navbar-login,
.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.navbar-login {
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-1);
}

.navbar-login:hover { border-color: rgba(255, 255, 255, 0.32); }

.nav-cta {
  background: var(--lilac);
  color: var(--hero-bg);
  font-weight: 500;
}

.nav-cta:hover { background: #D8CDFC; }

.nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .header { padding: 0 16px; }

  .navbar {
    gap: 16px;
    padding: 0 12px 0 20px;
  }

  .nav-toggle { display: grid; }

  .navbar-links { display: none; }

  /* Menú desplegable del botón hamburguesa */
  .navbar.is-open {
    border-radius: 0;
    background: rgba(23, 21, 28, 0.94);
  }

  .navbar.is-open .navbar-links {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    background: rgba(23, 21, 28, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.06);
    border-radius: 0 0 20px 20px;
  }

  .navbar.is-open .navbar-links a {
    justify-content: space-between;
    height: 44px;
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .navbar-login { display: none; }
}

/* =============================================
   3. SECCIÓN HERO — título, CTA, compatibilidad y tarjetas
   ============================================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 120px);
  min-height: calc(100dvh - 120px);
  background: var(--hero-bg);
  padding: 0 24px;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 960px;
  padding-top: calc(var(--nav-h) + clamp(16px, 2vh, 32px));
  text-align: center;
}

.hero-title {
  font-size: clamp(40px, min(6.5vw, 7.5vh), 80px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-1);
  text-wrap: balance;
}

.hero-title span { display: block; }

.hero-title__muted { color: var(--text-2); }

.hero-subtitle {
  margin-top: 16px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
  color: var(--text-2);
  text-wrap: balance;
}

.hero-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  margin-top: 28px;
  padding: 0 6px 0 24px;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--hero-bg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, background 0.2s ease;
}

.hero-pill-cta:hover {
  transform: translateY(-1px);
  background: #D8CDFC;
}

.hero-pill-cta:focus-visible { outline-offset: 4px; }

.hero-pill-cta__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hero-bg);
  color: var(--lilac);
}

.hero-pill-cta__icon svg {
  width: 16px;
  height: 16px;
}

.hero-compat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-2);
}

.hero-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
}

.hero-badge img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Tarjetas de cristal oscuro: anillo exterior + capa interior.
   Conservan su hueco en el flujo (el resto del hero no se mueve) y se desplazan hacia el
   dashboard: margen del escenario + separación del mockup - 6px de hueco final. */
.hero-features {
  position: relative;
  top: calc(clamp(16px, 2vh, 32px) + var(--panel-top) - 6px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  list-style: none;
}

.hero-card {
  padding: 6px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hero-card__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--glass-fill);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.hero-card__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--lilac-2);
  border-radius: 7px;
  color: var(--lilac-2);
}

.hero-card__icon svg {
  width: 16px;
  height: 16px;
}

/* Escenario del mockup, anclado al borde inferior del hero. En pantallas altas el espacio
   sobrante se reparte: 2/3 agrandan el dashboard (hasta 460px) y 1/3 centra el texto. */
.hero-stage {
  position: relative;
  flex: 2 0 clamp(260px, 28vw, 340px);
  width: min(1360px, 100%);
  max-height: 460px;
  margin-top: clamp(16px, 2vh, 32px);
}

/* Mosaico de bloques con degradado detrás del dashboard (estático).
   Dos filas desplazadas: las juntas de abajo no coinciden con las de arriba. */
.hero-blocks {
  position: absolute;
  top: var(--panel-top);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1360px;
  overflow: hidden;
  background: var(--block-ice);
  pointer-events: none;
}

.block { position: absolute; }

/* Fila superior: 0–45% de alto, anchos 40 / 20 / 40 */
.block--t1 { top: 0; height: 45%; left: 0; width: 40%;
  background: linear-gradient(90deg, var(--block-ice), var(--block-sky) 35%, var(--block-lilac) 70%, var(--block-violet)); }
.block--t2 { top: 0; height: 45%; left: 40%; width: 20%;
  background: linear-gradient(270deg, var(--block-ice), var(--block-sky) 55%, var(--block-periwinkle)); }
.block--t3 { top: 0; height: 45%; left: 60%; width: 40%;
  background: linear-gradient(90deg, var(--block-ice), var(--block-lilac) 45%, var(--block-violet) 80%, var(--block-deep)); }

/* Fila inferior: 45–100% de alto, anchos 12 / 30 / 22 / 26 / 10 */
.block--b1 { top: 45%; bottom: 0; left: 0; width: 12%;
  background: linear-gradient(270deg, var(--block-violet), var(--block-deep)); }
.block--b2 { top: 45%; bottom: 0; left: 12%; width: 30%;
  background: linear-gradient(90deg, var(--block-ice), var(--block-sky) 50%, var(--block-periwinkle)); }
.block--b3 { top: 45%; bottom: 0; left: 42%; width: 22%;
  background: linear-gradient(270deg, var(--block-ice), var(--block-lilac) 60%, var(--block-violet)); }
.block--b4 { top: 45%; bottom: 0; left: 64%; width: 24%;
  background: linear-gradient(90deg, var(--block-ice), var(--block-sky) 45%, var(--block-lilac)); }
.block--b5 { top: 45%; bottom: 0; left: 88%; width: 12%;
  background: linear-gradient(270deg, var(--block-lilac), var(--block-deep)); }

/* Ruido granulado por encima de los bloques */
.hero-blocks::after {
  content: "";
  position: absolute;
  inset: 0;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* =============================================
   MOCKUP DEL INBOX (rail · barra lateral · lista) + borrador flotante
   ============================================= */
.mock {
  position: absolute;
  top: calc(var(--panel-top) + var(--mock-inset));
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 82%);
  display: grid;
  grid-template-columns: 56px 196px minmax(0, 1fr);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 30px 80px -24px rgba(10, 8, 20, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  overflow: hidden;
  color: var(--mock-ink-soft);
  text-align: left;
}

.mock svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.mock ul { list-style: none; }

.mock__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-right: 1px solid var(--mock-line);
}

.mock__rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--mock-muted);
}

.mock__rail-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.mock__rail-item.is-active { color: var(--mock-ink); }
.mock__rail-item.is-active .mock__rail-icon { background: var(--mock-fill); }

.mock__side {
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-right: 1px solid var(--mock-line);
}

.mock__compose {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--mock-line);
  font-size: 13px;
  font-weight: 500;
  color: var(--mock-ink);
}

.mock__nav { margin-top: 12px; }

.mock__nav li,
.mock__labels li {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}

.mock__nav li { justify-content: space-between; }

.mock__nav li span {
  font-size: 12px;
  color: var(--mock-muted);
}

.mock__nav li.is-active {
  background: var(--mock-fill);
  font-weight: 600;
  color: var(--mock-ink);
}

.mock__heading {
  margin: 18px 10px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mock-muted);
}

.mock__labels li {
  gap: 10px;
  height: 26px;
  font-size: 12.5px;
}

.mock__labels i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.mock__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mock__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 14px 16px 6px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--mock-fill);
  font-size: 13px;
  color: var(--mock-muted);
}

.mock__day {
  padding: 10px 20px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mock-muted);
}

.mail {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 20px;
  border-top: 1px solid var(--mock-line);
  font-size: 13px;
}

.mail__from,
.mail__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mail__draft { color: var(--draft); }

.mail__count {
  font-size: 12px;
  color: #9A96A3;
}

.mail__body {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.mail__text {
  min-width: 0;
  margin-left: 4px;
}

.mail__excerpt { color: var(--mock-muted); }

.mail__time {
  font-size: 12px;
  color: var(--mock-muted);
  font-variant-numeric: tabular-nums;
}

.mail--unread .mail__from,
.mail--unread .mail__subject,
.mail--unread .mail__time {
  font-weight: 600;
  color: var(--mock-ink);
}

.mail--unread .mail__draft { color: var(--draft); }

/* Chip de etiqueta estilo Gmail */
.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  animation: chip-in 350ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(300ms + var(--i, 0) * 140ms);
}

.tag--incidencia { background: var(--tag-incidencia); }
.tag--proveedor { background: var(--tag-proveedor); }
.tag--comunidad { background: var(--tag-comunidad); }
.tag--morosidad { background: var(--tag-morosidad); }
.tag--contabilidad { background: var(--tag-contabilidad); }
.tag--otros { background: var(--tag-otros); }
.tag--informativo { background: var(--tag-informativo); }
.tag--responder { background: var(--tag-responder); }
.tag--urgente { background: var(--tag-urgente); }

/* Única animación de la página nueva: Homeri "clasificando" el inbox */
@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip { animation: none; }
  .hero-pill-cta { transition: none; }
}

/* =============================================
   CÓMO FUNCIONA (blanca, tras el hero) — estructura tipo Viktor, ilustraciones tipo Jace
   ============================================= */
.how-it-works {
  --hiw-ink: #1C1A2E;
  --hiw-muted: #6E6A78;
  --hiw-violet: #6F4BBA;
  --hiw-lilac-soft: #EDE7FD;
  --hiw-card: #F8F7F5;
  --hiw-art: #F3F2F0;
  --hiw-line: #ECE9EF;
  --hiw-shadow: 0 8px 24px -8px rgba(28, 26, 46, 0.15);
  --hiw-app: 84px;
  --hiw-app-sm: 64px;
  --hiw-art-h: 300px;

  padding: 120px 24px 96px;
  background: #FFFFFF;
  font-family: var(--font-sans);
  color: var(--hiw-ink);
}

.how-it-works__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.how-it-works__header { text-align: center; }

.how-it-works__eyebrow {
  display: inline-block;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hiw-lilac-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--hiw-violet);
}

.how-it-works__title {
  margin: 24px 0 0;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--hiw-ink);
}

.how-it-works__title-accent {
  display: block;
  color: var(--hiw-violet);
}

.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 64px;
}

/* Tarjeta */
.hiw-card {
  overflow: hidden;
  border-radius: 12px;
  background: var(--hiw-card);
}

.hiw-card__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hiw-art-h);
  overflow: hidden;
  border-radius: 12px;
  background: var(--hiw-art);
}

.hiw-card__body { padding: 28px 32px 36px; }

.hiw-card__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hiw-ink);
}

/* Centrado con la primera línea: (28px × 1.15 − 20px) / 2 ≈ 6px */
.hiw-card__step {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 6px;
  border-radius: 6px;
  background: var(--hiw-violet);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #FFFFFF;
}

.hiw-card__text {
  max-width: 42ch;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hiw-muted);
}

/* Cajita blanca con el logo de una app */
.hiw-app {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--hiw-app);
  height: var(--hiw-app);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: var(--hiw-shadow);
  box-sizing: border-box;
}

.hiw-app img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.hiw-app--sm {
  width: var(--hiw-app-sm);
  height: var(--hiw-app-sm);
  border-radius: 16px;
}

/* 1 · Conecta Gmail o Outlook */
.hiw-connect { gap: 12px; }

.hiw-connect__arrow {
  flex-shrink: 0;
  width: 32px;
  margin: 0 4px;
  color: #B5B0BD;
}

.hiw-app--homeri {
  background: linear-gradient(135deg, #CBBDFB 0%, var(--hiw-lilac-soft) 100%);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hiw-ink);
}

/* 2 · Carpeta translúcida con apps asomando por detrás */
.hiw-context__stage {
  position: relative;
  width: 180px;
  height: 140px;
  margin-top: 40px;
}

.hiw-context__logo {
  position: absolute;
  z-index: 1;
}

.hiw-context__logo--1 { left: -34px; top: -30px; transform: rotate(-12deg); }
.hiw-context__logo--2 { left: 30px;  top: -52px; transform: rotate(-4deg); }
.hiw-context__logo--3 { left: 92px;  top: -46px; transform: rotate(6deg); }
.hiw-context__logo--4 { left: 150px; top: -20px; transform: rotate(12deg); }

.hiw-folder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--hiw-shadow);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #C9C4D1;
}

/* Pestaña de la carpeta */
.hiw-folder::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 100%;
  width: 72px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 3 · Borrador de email anclado abajo y cortado por el borde */
.hiw-draft__window {
  position: absolute;
  top: 44px;
  left: 10%;
  width: 80%;
  min-height: calc(100% - 20px);
  padding: 20px;
  border: 1px solid var(--hiw-line);
  border-radius: 14px 14px 0 0;
  background: #FFFFFF;
  box-sizing: border-box;
}

.hiw-draft__window p { margin: 0; }

.hiw-draft__to {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hiw-line);
}

.hiw-draft__label {
  font-size: 12px;
  color: var(--hiw-muted);
}

.hiw-draft__name {
  margin-top: 2px !important;
  font-size: 14px;
  color: var(--hiw-ink);
}

.hiw-draft__body-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 8px !important;
}

.hiw-draft__tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--hiw-lilac-soft);
  font-size: 11px;
  font-weight: 500;
  color: var(--hiw-violet);
}

.hiw-draft__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hiw-ink);
}

.hiw-draft__text + .hiw-draft__text { margin-top: 1.5em !important; }

/* Botón final */
.how-it-works__cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.how-it-works__btn {
  padding: 16px 40px;
  border-radius: 999px;
  background: var(--hiw-ink);
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
}

.how-it-works__btn:hover { background: #2E2B45; }

@media (max-width: 899px) {
  .how-it-works { padding: 88px 20px 80px; }

  .how-it-works__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 48px auto 0;
  }
}

@media (max-width: 599px) {
  .how-it-works {
    --hiw-app: 64px;
    --hiw-app-sm: 48px;
    --hiw-art-h: 240px;
  }

  .hiw-app { border-radius: 16px; }
  .hiw-app--sm { border-radius: 12px; }
  .hiw-app--homeri { font-size: 14px; }
  .hiw-connect { gap: 8px; }
  .hiw-connect__arrow { width: 24px; margin: 0; }

  .hiw-context__stage {
    width: 150px;
    height: 116px;
    margin-top: 32px;
  }

  .hiw-context__logo--1 { left: -26px; top: -22px; }
  .hiw-context__logo--2 { left: 26px;  top: -40px; }
  .hiw-context__logo--3 { left: 76px;  top: -36px; }
  .hiw-context__logo--4 { left: 124px; top: -14px; }

  .hiw-folder { font-size: 24px; }
  .hiw-card__body { padding: 24px 24px 28px; }
  .hiw-card__title { font-size: 24px; }
  .hiw-card__step { margin-top: 4px; }
}

/* Responsive: hero y mockup */
@media (max-width: 900px) {

  .mock { grid-template-columns: minmax(0, 1fr); }

  .mock__rail,
  .mock__side { display: none; }

  .mail { grid-template-columns: 128px minmax(0, 1fr) auto; }
}

@media (max-width: 600px) {
  .hero { padding: 0 16px; }

  .hero-stage { min-height: 320px; }

  .mock { width: calc(100% - 32px); }

  .hero-features {
    top: 0;
    flex-direction: column;
    align-items: center;
  }

  .mail {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    height: auto;
    padding: 10px 16px;
  }

  .mail__body { flex-wrap: wrap; }

  .mail__text {
    flex-basis: 100%;
    margin: 2px 0 0;
  }

  .mail__excerpt,
  .mail__time { display: none; }
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: #003580;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 53, 128, 0.12), 0 2px 6px rgba(0, 53, 128, 0.08);
}

.btn-primary:hover {
  background: #0071C2;
}

.btn.hero-cta {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1px;
  background: #111827;
  color: #f3f1ed;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.btn.hero-cta:hover {
  background: #1F2937;
}

.btn.hero-cta svg {
  width: 14px;
  height: 14px;
}

.btn-secondary {
  background: #fff;
  color: #1F2937;
  border: 1px solid #E5E7EB;
  padding: 12px 22px;
}

.btn-secondary:hover {
  background: #F8FAFC;
}

/* =============================================
   FUNCIONES — bento de 3 tarjetas (referencia tipo Superhuman)
   ============================================= */
.features {
  --ft-ink: #1C1A2E;
  --ft-muted: #6E6A78;
  --ft-body: #4A4656;
  --ft-violet: #6F4BBA;
  background: #F5F4F1;
  padding: 112px 24px;
}

.features__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.features__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.features__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ft-ink);
}

.features__brand-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ft-violet);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.features__title {
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ft-ink);
}

.features__title-muted {
  display: block;
  color: var(--ft-muted);
}

.features__subtitle {
  max-width: 60ch;
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ft-body);
}

.features__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

.features__btn {
  padding: 14px 22px;
  border-radius: 8px;
  background: var(--ft-violet);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease;
}

.features__btn:hover { background: #5E3DA3; }

.features__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ft-violet);
  font-size: 16px;
  text-decoration: none;
}

.features__link svg { width: 16px; height: 16px; }
.features__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cuadrícula */
.features__grid {
  display: grid;
  grid-template-columns: 58fr 42fr;
  grid-template-rows: auto 1fr;
  gap: 28px;
  height: 660px;
  margin-top: 64px;
}

.feat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.feat-card--drafts {
  grid-row: 1 / 3;
  background: linear-gradient(180deg, #3E2A7A 0%, #7048B6 100%);
  color: #fff;
}

.feat-card--integrations {
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(155, 140, 247, 0.45), transparent 70%),
    linear-gradient(160deg, #2E2466 0%, #4A3A8E 100%);
  color: #fff;
}

.feat-card--labels {
  background: #E4E1DC;
  color: var(--ft-ink);
}

.feat-card__art {
  position: relative;
  flex: 1;
  min-height: 0;
}

.feat-card__text {
  padding: 0 32px 32px;
  text-align: left;
}

.feat-card__label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.feat-card--labels .feat-card__label { color: var(--ft-body); }

.feat-card__title {
  max-width: 30ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Tarjeta grande: borrador */
.feat-drafts__sky {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 64%;
  overflow: hidden;
  background: #C4B5F4;
}

.feat-drafts__sky::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(35% 30% at 30% 30%, #E8C8F0, transparent 70%),
    radial-gradient(40% 35% at 75% 25%, #F2D4E8, transparent 70%),
    radial-gradient(45% 40% at 60% 70%, #9B8CF7, transparent 70%),
    radial-gradient(35% 30% at 20% 80%, #F2D4E8, transparent 70%),
    radial-gradient(30% 25% at 85% 75%, #E8C8F0, transparent 70%);
  filter: blur(18px);
}

.feat-drafts__curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feat-drafts__block {
  position: absolute;
  top: 26%;
  left: 12%;
  width: 40%;
  height: 46%;
  background: linear-gradient(135deg, #8E4FC0 0%, #6A3FB0 100%);
}

.feat-mail {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 420px;
  max-width: 86%;
  padding: 24px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 12, 50, 0.35), 0 4px 12px rgba(20, 12, 50, 0.18);
  color: var(--ft-ink);
}

.feat-mail__row {
  display: flex;
  gap: 16px;
  margin: 0 0 10px;
  font-size: 13px;
  white-space: nowrap;
}

.feat-mail__who { flex: 0 0 72px; font-weight: 500; }

.feat-mail__snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #8A8696;
}

.feat-mail__draft {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #9B8CF7, #6C9CF2) border-box;
}

.feat-mail__draft-head { margin: 0 0 8px; font-size: 13px; color: var(--ft-ink); }
.feat-mail__draft-tag { color: #8B7CF6; }

.feat-mail__draft-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ft-ink);
}

.feat-mail__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 13px;
  color: #8A8696;
}

.feat-mail__foot svg { width: 14px; height: 14px; }

/* Tarjeta derecha arriba: dock de integraciones */
.feat-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 10px;
  min-height: 150px;
  padding: 36px 16px 16px;
}

.feat-dock__bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(20, 18, 30, 0.85);
}

.feat-dock__app {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
}

.feat-dock__app img { width: 60%; height: 60%; object-fit: contain; }

.feat-dock__app--main {
  width: 64px;
  height: 64px;
  margin-top: -18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.feat-dock__more {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 18, 30, 0.8);
  color: #fff;
  font-size: 11px;
}

/* Tarjeta derecha abajo: etiquetas */
.feat-labels { overflow: hidden; }

.feat-labels__pills {
  position: absolute;
  top: 28px;
  left: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.feat-labels__pill {
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(28, 26, 46, 0.08);
  font-size: 12px;
  color: var(--ft-ink);
  white-space: nowrap;
}

.feat-labels__pill:nth-child(2) { margin-left: -8px; }
.feat-labels__pill:nth-child(3) { margin-left: 16px; }
.feat-labels__pill em { font-style: normal; color: #8A8696; }

.feat-inbox {
  position: absolute;
  top: 22px;
  left: 34%;
  width: 460px;
  border-radius: 10px 0 0 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 26, 46, 0.08);
  font-size: 11px;
}

.feat-inbox__tabs {
  display: flex;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #EEECE8;
  color: #8A8696;
  white-space: nowrap;
}

.feat-inbox__tabs .is-active { color: var(--ft-ink); font-weight: 500; }
.feat-inbox__tabs em { font-style: normal; opacity: 0.7; }

.feat-inbox__list {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.feat-inbox__list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #F3F1EE;
  white-space: nowrap;
}

.feat-inbox__list li.is-selected::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--ft-violet);
}

.feat-inbox__from {
  flex: 0 0 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--ft-ink);
}

.feat-inbox__chip {
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--chip) 16%, #fff);
  color: var(--chip);
  font-weight: 500;
}

.feat-inbox__subject { color: #4A4656; }

@media (max-width: 899px) {
  .features { padding: 88px 16px; }

  .features__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .feat-card--drafts { grid-row: auto; min-height: 560px; }
  .feat-card--integrations { min-height: 340px; }
  .feat-card--labels { min-height: 420px; }
  .feat-card__art { min-height: 180px; }
  .feat-card--drafts .feat-card__art { min-height: 400px; }
}

@media (max-width: 599px) {
  .feat-card__title { font-size: 22px; }
  .feat-card__text { padding: 0 24px 24px; }
  .feat-mail { width: 90%; max-width: 90%; top: 8%; padding: 18px; }
  .feat-dock__app { width: 44px; height: 44px; border-radius: 12px; }
  .feat-dock__app--main { width: 54px; height: 54px; }
  .feat-labels__pills { left: 16px; }
  .feat-inbox { left: 46%; }
}

/* =============================================
   PRECIOS — contenedor beige con tarjetas (referencia tipo Jace)
   ============================================= */
.pricing {
  --pr-ink: #1C1A2E;
  --pr-muted: #6E6A78;
  --pr-feature: #3A3645;
  --pr-violet: #6F4BBA;
  --pr-violet-hover: #5E3DA3;
  --pr-lilac-soft: #EDE7FD;
  --pr-line: #F1EADC;
  --pr-ghost-line: #E5E0D6;

  scroll-margin-top: var(--nav-h);
  padding: 96px 24px;
  background: #FFFFFF;
  font-family: var(--font-sans);
  color: var(--pr-ink);
}

.pricing :focus-visible { outline-color: var(--pr-violet); }

.pricing__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 80px 64px;
  border: 1px solid #F3EBDD;
  border-radius: 24px;
  background: #F5F5F0;
}

.pricing__title {
  margin: 0;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--pr-ink);
}

/* Selector anual / mensual */
.pricing__toggle {
  display: flex;
  width: fit-content;
  gap: 2px;
  margin: 48px auto 0;
  padding: 4px;
  border: 1px solid var(--pr-ghost-line);
  border-radius: 999px;
  background: #FFFFFF;
}

.pricing__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--pr-muted);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.pricing__toggle-btn:hover { color: var(--pr-ink); }

.pricing__toggle-btn[aria-pressed="true"] {
  background: var(--pr-ink);
  color: #FFFFFF;
}

.pricing__toggle-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pr-lilac-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--pr-violet);
  transition: background-color 150ms ease, color 150ms ease;
}

/* El texto llega de pricing-plans.json; sin él no se pinta la pastilla vacía */
.pricing__toggle-badge:empty { display: none; }

.pricing__toggle-btn[aria-pressed="true"] .pricing__toggle-badge {
  background: rgba(255, 255, 255, 0.15);
  color: var(--lilac);
}

@media (prefers-reduced-motion: reduce) {
  .pricing__toggle-btn,
  .pricing__toggle-badge { transition: none; }
}

/* Tarjetas */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  max-width: 880px;
  margin: 40px auto 0;
}

.pricing__card {
  display: flex;
  flex-direction: column;
  margin-top: 40px; /* deja sitio a la pestaña de la destacada */
  padding: 28px;
  border: 1px solid var(--pr-line);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px -12px rgba(60, 40, 10, 0.12);
  box-sizing: border-box;
}

.pricing__featured {
  display: flex;
  flex-direction: column;
}

.pricing__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  border-radius: 8px 8px 0 0;
  background: var(--pr-ink);
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}

.pricing__card--featured {
  flex: 1;
  margin-top: 0;
  border-color: var(--pr-ink);
  border-radius: 0 0 8px 8px;
  background: #F6F3FE;
}

.pricing__plan {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--pr-muted);
}

.pricing__price {
  min-height: 1.1em; /* reserva el hueco mientras carga pricing-plans.json */
  margin: 6px 0 0;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pr-ink);
}

.pricing__price-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--pr-muted);
}

.pricing__audience {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--pr-ink);
}

.pricing__features {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pricing__features li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pr-feature);
}

.pricing__features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--lilac-2);
  transform: rotate(45deg);
}

.pricing__cta {
  margin-top: auto;
  padding-top: 32px;
}

.pricing__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pricing__btn--outline {
  border-color: var(--pr-violet);
  background: transparent;
  color: var(--pr-violet);
}

.pricing__btn--outline:hover {
  border-color: var(--pr-violet-hover);
  background: var(--pr-lilac-soft);
  color: var(--pr-violet-hover);
}

.pricing__btn--primary {
  background: var(--pr-violet);
  color: #FFFFFF;
}

.pricing__btn--primary:hover { background: var(--pr-violet-hover); }

.pricing__btn--ghost {
  border-color: var(--pr-ghost-line);
  background: #FFFFFF;
  color: var(--pr-ink);
}

.pricing__btn--ghost:hover { border-color: #CFC8BA; }

.pricing__cta-note {
  margin: 12px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--pr-muted);
}

@media (max-width: 900px) {
  .pricing {
    padding: 64px 16px;
  }

  .pricing__inner {
    padding: 56px 20px;
  }

  .pricing__toggle {
    margin-top: 32px;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 32px auto 0;
  }

  .pricing__card {
    margin-top: 0;
  }

  .pricing__featured {
    order: -1;
  }
}

@media (max-width: 400px) {
  .pricing__inner {
    padding: 48px 12px;
  }

  .pricing__toggle-btn {
    padding: 8px 12px;
    font-size: 14px;
  }

  .pricing__card {
    padding: 24px 20px;
  }
}

/* =============================================
   PROOF — Card layout (referencia tipo Bland)
   ============================================= */
.proof-min {
  --bg-page: #FFFFFF;
  --bg-card: #F5F5F0;
  --border-card: #4B5563;
  --text: #111111;
  --text-muted: #6B7280;
  --list-muted: #9CA3AF;
  background: var(--bg-page);
  color: var(--text);
  padding: 120px 40px 128px;
}

.proof-min__inner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.proof-min__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin: 0 0 8px;
  align-self: stretch;
}

.proof-min__hero-title {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  text-align: left;
}

.proof-min__hero-body {
  margin: 0;
  flex: 0 0 auto;
  max-width: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
}

.proof-min__hero-body span {
  display: block;
  white-space: nowrap;
}

.proof-min__hero {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 32px 48px 0;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 500px;
}

.proof-min__device-title {
  margin: auto 0 20px;
  max-width: none;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #111111;
  flex-shrink: 0;
}

.proof-min__device {
  width: min(100%, 720px);
  margin-top: 0;
  margin-bottom: -8%;
  flex-shrink: 0;
}

.proof-min__device-screen {
  position: relative;
  width: 100%;
  background: #1a1d24;
  border-radius: 16px 16px 0 0;
  padding: 12px 12px 0;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.08),
    0 18px 48px rgba(99, 102, 241, 0.12),
    0 40px 90px rgba(168, 85, 247, 0.08);
}

.proof-min__device-bezel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0c0e12;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.proof-min__device-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 16px;
  background: #0c0e12;
  border-radius: 0 0 10px 10px;
  z-index: 5;
}

.proof-min__device-desktop {
  position: absolute;
  inset: 0;
  padding: 32px 20px 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.proof-min__device-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/wallpaper.jpg") center / cover no-repeat;
}

.proof-min__device-app {
  position: relative;
  z-index: 1;
  width: 90%;
  max-height: calc(100% - 32px);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.2);
  line-height: 0;
  background: transparent;
}

.proof-min__device-app img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: transparent;
}

.proof-min__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.proof-min__card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 22px 28px 24px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
}

.proof-min__list,
.proof-min__langs {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  justify-content: flex-start;
}

.proof-min__list li {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--list-muted);
}

.proof-min__list li:nth-child(1) { opacity: 1; }
.proof-min__list li:nth-child(2) { opacity: 0.85; }
.proof-min__list li:nth-child(3) { opacity: 0.65; }
.proof-min__list li:nth-child(4) { opacity: 0.45; }
.proof-min__list li:nth-child(5) { opacity: 0.28; }

.proof-min__langs li {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.proof-min__langs .is-green { color: #00AF87; }
.proof-min__langs .is-red { color: #E11D48; }
.proof-min__langs .is-purple { color: #7C3AED; }
.proof-min__langs .is-blue { color: #2563EB; }
.proof-min__langs .is-pink { color: #DB2777; }

.proof-min__card-title {
  margin: auto 0 0;
  font-family: var(--font-sans);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text);
}

.proof-min__accent {
  color: #d84622;
}

.proof-min__card-body {
  margin: 12px 0 0;
  max-width: 34ch;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .proof-min {
    padding: 88px 20px 96px;
  }

  .proof-min__inner {
    max-width: 100%;
  }

  .proof-min__intro {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 4px;
  }

  .proof-min__hero-title {
    font-size: clamp(36px, 8vw, 48px);
  }

  .proof-min__hero-body {
    flex: none;
    max-width: none;
    text-align: left;
    margin-top: 0;
  }

  .proof-min__hero-body span {
    white-space: normal;
  }

  .proof-min__hero {
    padding: 24px 16px 0;
    border-radius: 8px;
    min-height: 380px;
  }

  .proof-min__device-title {
    margin: auto 0 14px;
    max-width: none;
    white-space: normal;
    font-size: clamp(22px, 5.5vw, 28px);
  }

  .proof-min__device-desktop {
    padding: 24px 12px 0;
  }

  .proof-min__device-app {
    width: 92%;
    max-height: calc(100% - 24px);
  }

  .proof-min__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .proof-min__card {
    min-height: 0;
    padding: 24px 22px 28px;
    border-radius: 8px;
  }

  .proof-min__list,
  .proof-min__langs {
    min-height: 0;
    margin-bottom: 22px;
  }

  .proof-min__list li,
  .proof-min__langs li {
    font-size: 20px;
  }

  .proof-min__card-title {
    margin-top: 0;
  }
}

/* =============================================
   5. SECCIÓN BLANCA DEBAJO
   ============================================= */
.section-below {
  min-height: 100vh;
  padding: 80px 48px;
  background: white;
  color: #111;
}

.section-below h2 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.section-below p {
  font-size: 18px;
  color: #555;
  max-width: 600px;
}

/* =============================================
   RESPONSIVE (pantallas pequeñas)
   ============================================= */
@media (max-width: 768px) {
  .section-below {
    padding: 60px 24px;
  }

  .section-below h2 {
    font-size: 28px;
  }
}

/* =============================================
   INTEGRACIONES (HappyRobot / Bland layout)
   ============================================= */
.integrations {
  background: #ECE8E3;
  padding: 112px 48px;
}

.integrations__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  gap: 56px 48px;
  align-items: center;
}

.integrations__copy {
  min-width: 0;
  padding-right: 8px;
}

.integrations__title {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  font-style: normal;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #000000;
}

.integrations__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.integrations__body p {
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.38;
  color: #000000;
}

.integrations__visual {
  min-width: 0;
}

.integ-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 520;
  background-color: #F5F5F0;
  background-image: radial-gradient(rgba(75, 85, 99, 0.12) 1px, transparent 1.2px);
  background-size: 16px 16px;
  background-position: 8px 8px;
  border-radius: 8px;
  border: 1px solid #D4CFC6;
  overflow: hidden;
}

.integ-diagram__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.integ-line {
  fill: none;
  stroke: #C9C2B8;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  animation: integ-dash 2.8s linear infinite;
}

.integ-line--leads { stroke: #B7C4B4; }
.integ-line--mail { stroke: #C4BDB4; }
.integ-line--msg { stroke: #B8C9C3; }

.integ-pulse {
  opacity: 0.85;
}

@keyframes integ-dash {
  to { stroke-dashoffset: -48; }
}

.integ-node {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.integ-diagram.is-inview .integ-node {
  opacity: 1;
  transform: none;
}

.integ-diagram.is-inview .integ-node--idealista { transition-delay: 0.05s; }
.integ-diagram.is-inview .integ-node--fotocasa { transition-delay: 0.14s; }
.integ-diagram.is-inview .integ-node--gmail { transition-delay: 0.08s; }
.integ-diagram.is-inview .integ-node--outlook { transition-delay: 0.18s; }
.integ-diagram.is-inview .integ-node--whatsapp { transition-delay: 0.24s; }

.integ-node--idealista { top: 8%; left: 3%; }
.integ-node--fotocasa { bottom: 8%; left: 3%; }
.integ-node--gmail { top: 8%; right: 3%; }
.integ-node--outlook { top: 42%; right: 3%; }
.integ-node--whatsapp { bottom: 8%; right: 3%; }

.integ-node__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #fff;
  border: 1px solid #E8E4DE;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.integ-node__mark img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.integ-node__mark--whatsapp img {
  width: 50px;
  height: 50px;
}

.integ-card {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(58%, 280px);
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.integ-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.integ-card__brand {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #00AF87;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.integ-card__name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  letter-spacing: -0.02em;
}

.integ-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #9CA3AF;
}

.integ-card__dots {
  display: inline-flex;
  gap: 3px;
}

.integ-card__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00AF87;
  opacity: 0.35;
  animation: integ-dot 1.2s ease-in-out infinite;
}

.integ-card__dots i:nth-child(2) { animation-delay: 0.15s; }
.integ-card__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes integ-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}

.integ-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.integ-card__lead {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

.integ-card__chip {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: #6B7280;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 2px 7px;
}

.integ-card__chip--ok {
  color: #047857;
  background: rgba(0, 175, 135, 0.1);
  border-color: rgba(0, 175, 135, 0.2);
}

.integ-card__draft {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #6B7280;
  margin-bottom: 14px;
}

.integ-card__actions {
  display: flex;
  gap: 8px;
}

.integ-card__btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  background: #111827;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.integ-card__btn--ghost {
  background: #fff;
  color: #374151;
  border: 1px solid #E5E7EB;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .integ-line,
  .integ-card__dots i,
  .integ-node {
    animation: none !important;
    transition: none !important;
  }

  .integ-pulse {
    display: none;
  }

  .integ-node,
  .integ-diagram.is-inview .integ-node {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 980px) {
  .integrations {
    padding: 72px 24px;
  }

  .integrations__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .integrations__copy {
    padding-right: 0;
  }

  .integrations__title {
    font-size: clamp(22px, 7vw, 36px);
  }

  .integ-diagram {
    max-width: 560px;
    margin: 0 auto;
  }

  .integ-card {
    width: min(62%, 250px);
    padding: 14px 12px 12px;
  }

  .integ-card__draft {
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .integ-node {
    width: 56px;
  }

  .integ-node__mark {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .integ-node__mark img {
    width: 32px;
    height: 32px;
  }

  .integ-node__mark--whatsapp img {
    width: 42px;
    height: 42px;
  }

  .integ-card__actions {
    flex-direction: column;
  }

  .integ-card__btn {
    justify-content: center;
  }
}

/* =============================================
   FOOTER — recuadro CTA + enlaces (referencia tipo Jace, fondo tipo Superhuman)
   ============================================= */
.footer {
  --fo-ink: #1C1A2E;
  --fo-text: #3A3645;
  --fo-violet: #6F4BBA;
  --fo-dash: rgba(28, 26, 46, 0.08);
  --fo-dots: rgba(28, 26, 46, 0.18);
  position: relative;
  overflow: hidden;
  padding: 0 24px;
  background:
    radial-gradient(60% 90% at 0% 40%, #E8E2FD 0%, transparent 70%),
    radial-gradient(50% 80% at 85% 70%, #CCD4F2 0%, transparent 70%),
    radial-gradient(45% 70% at 100% 20%, #E2DEFB 0%, transparent 70%),
    linear-gradient(90deg, #E8E2FD 0%, #D3D8F5 50%, #E2DEFB 100%);
  color: var(--fo-ink);
}

.footer__glow {
  position: absolute;
  top: -120px;
  right: -10%;
  width: 70%;
  height: 360px;
  background: linear-gradient(160deg, transparent 20%, rgba(255, 255, 255, 0.35) 45%, transparent 70%);
  filter: blur(40px);
  transform: rotate(-8deg);
  pointer-events: none;
}

.footer__inner {
  position: relative;
  max-width: 1340px;
  margin: 0 auto;
  padding: 96px 32px 48px;
  border-left: 1px dashed var(--fo-dash);
  border-right: 1px dashed var(--fo-dash);
}

.footer a:focus-visible {
  outline: 2px solid var(--fo-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Recuadro CTA */
.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 32px;
  border-radius: 20px;
  background: #2E2152;
  text-align: center;
}

.footer__cta-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #FFFFFF;
}

.footer__cta-text {
  max-width: 60ch;
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.footer__btn--solid { background: #FFFFFF; color: var(--fo-ink); }
.footer__btn--solid:hover { background: #EDE7FD; }

.footer__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

.footer__btn--ghost:hover { border-color: rgba(255, 255, 255, 0.6); }

.footer .footer__btn:focus-visible {
  outline-color: #CBBDFB;
  border-radius: 999px;
}

.footer__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.footer__perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.footer__perks svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #CBBDFB;
}

/* Fila de logo y enlaces */
.footer__main {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
  padding: 32px 0;
  border-top: 2px dotted var(--fo-dots);
  border-bottom: 2px dotted var(--fo-dots);
}

.footer__logo {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #CBBDFB 0%, #EDE7FD 100%);
  color: var(--fo-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.footer .footer__logo:focus-visible { border-radius: 10px; }

.footer__links {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}

.footer__links a {
  font-size: 16px;
  color: var(--fo-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__links a:hover,
.footer__legal-links a:hover { color: var(--fo-violet); }

/* Fila legal */
.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 32px;
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.footer__legal-links a {
  font-size: 15px;
  color: var(--fo-text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__copy {
  margin: 0;
  font-size: 15px;
  color: var(--fo-text);
}

@media (max-width: 899px) {
  .footer { padding: 0 16px; }

  .footer__inner {
    padding: 72px 0 40px;
    border-left: none;
    border-right: none;
  }

  .footer__cta { padding: 56px 24px; }

  .footer__perks {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer__links {
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
  }

  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__legal-links {
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 599px) {
  .footer__cta-actions {
    flex-direction: column;
    align-self: stretch;
  }

  .footer__btn { width: 100%; }
}