/* ============================================================
   PROMAIL · Home v2 — design tokens
   Slate-800 dark + soft teal accent. Editorial B2B.
   Aislado de styles.css del sitio actual.
   ============================================================ */
:root {
  /* Surfaces */
  --p-bg:          #1E293B;
  --p-bg-2:        #172033;
  --p-surface:     #273245;
  --p-surface-2:   #2F3B50;
  --p-surface-hi:  #3A475D;

  /* Borders */
  --p-border:      rgba(255,255,255,0.06);
  --p-border-2:    rgba(255,255,255,0.10);
  --p-border-hi:   rgba(130,192,171,0.34);

  /* Text */
  --p-fg:          #E8ECF2;
  --p-fg-2:        #9FAAC0;
  --p-fg-3:        #6F7C95;
  --p-fg-4:        #4E5972;

  /* Accent */
  --p-teal:        #82C0AB;
  --p-teal-2:      #9AD0BD;
  --p-teal-deep:   #5A9C85;
  --p-teal-ink:    #0F1929;
  --p-teal-soft:   rgba(130,192,171,0.12);
  --p-teal-soft-2: rgba(130,192,171,0.22);
  --p-teal-line:   rgba(130,192,171,0.45);

  /* Status */
  --p-ok:          #34D399;
  --p-warn:        #F59E0B;
  --p-warn-soft:   rgba(245,158,11,0.14);
  --p-err:         #F87171;
  --p-err-soft:    rgba(248,113,113,0.12);
  --p-info:        #60A5FA;
  --p-info-soft:   rgba(96,165,250,0.14);
  --p-purple:      #A78BFA;
  --p-purple-soft: rgba(167,139,250,0.14);

  /* Type */
  --font-sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* El piso de 40px es enorme en un telefono de 360px. El titular viejo tenia <br>
     explicitos y nunca necesitaba envolver; el nuevo es una frase larga que si, y con
     body{overflow-x:hidden} lo que sobra no scrollea: se RECORTA contra el borde derecho. */
  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h1:      clamp(36px, 5vw, 56px);
  --fs-h2:      clamp(28px, 3.5vw, 40px);
  --fs-h3:      22px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;
  --fs-micro:   11px;

  /* Spacing */
  --pad-pg-x:   clamp(20px, 5vw, 80px);
  --gap-section: clamp(80px, 12vw, 160px);

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --maxw: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.home-v2 {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--p-fg);
  background: var(--p-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.home-v2 button { font-family: inherit; cursor: pointer; }
body.home-v2 a { color: inherit; text-decoration: none; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease, transform 80ms ease, border-color 140ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--p-teal); color: var(--p-teal-ink); }
.btn-primary:hover { background: var(--p-teal-2); }
.btn-ghost { background: transparent; color: var(--p-fg); border-color: var(--p-border-2); }
.btn-ghost:hover { background: var(--p-surface); border-color: var(--p-border-hi); }
.btn-lg { height: 52px; padding: 0 24px; font-size: var(--fs-body); border-radius: 10px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: var(--fs-xs); }

/* ============ Type helpers ============ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--p-teal);
}
.display {
  /* Guarda: una palabra larga no puede empujar el bloque mas alla del contenedor. */
  overflow-wrap: break-word;
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
h1.section-h, h2.section-h {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.lead {
  font-size: var(--fs-lead);
  color: var(--p-fg-2);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--p-fg-3); }
.accent { color: var(--p-teal); }

/* ============ Generic page chrome ============ */
@media (max-width: 560px) {
  body.home-v2 { --fs-display: clamp(28px, 8.4vw, 40px); }
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-pg-x);
}

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(30,41,59,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--p-border);
}
.nav-inner {
  display: flex; align-items: center; gap: 24px;
  height: 64px;
}
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: 0.04em;
  font-size: 15px;
}
.logo-mark {
  width: 28px; height: 28px;
  color: var(--p-teal);
  display: grid; place-items: center;
}
.nav-links {
  display: flex; align-items: center; gap: 4px;
  margin-left: 24px;
}
.nav-link {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--p-fg-2);
  font-size: var(--fs-sm); font-weight: 500;
  transition: color 140ms ease, background 140ms ease;
}
.nav-link:hover { color: var(--p-fg); background: var(--p-surface); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ============ HERO ============ */
.hero {
  padding: clamp(64px, 12vw, 140px) 0 clamp(56px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
}
/* 🔴 Los hijos de una grilla tienen min-width:auto: NO achican por debajo de su contenido.
   La tarjeta del hero exige ~390px (su encabezado es un flex sin wrap), asi que en un
   telefono empujaba la columna Y ARRASTRABA la del texto — por eso el parrafo quedaba
   pegado al borde derecho y con overflow-x:hidden se recortaba. */
.hero-grid > *,
.case-grid > *, .composer-grid > *, .ig-grid > *, .quality-grid > *,
.db-grid > *, .custom-integ-grid > *, .integ-grid > *, .feature-grid > *,
.tpl-grid > *, .tpl-bento-grid > *, .foot-grid > * { min-width: 0; }
.hero-tag {
  display: inline-flex; align-items: flex-start; gap: 10px;
  max-width: 100%;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--p-border-hi);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--p-fg-2);
  background: var(--p-teal-soft);
  margin-bottom: 24px;
}
.hero-tag > span { min-width: 0; line-height: 1.45; }
.hero-tag .dot {
  /* La bolita se alinea con la PRIMERA linea del texto, no con el centro del bloque:
     con dos renglones, centrada queda flotando en el medio. */
  margin-top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-teal);
  box-shadow: 0 0 0 4px var(--p-teal-soft-2);
}
.hero h1 { margin: 0 0 24px; }
/* Segunda linea del titular: mas chica y apagada, se lee como el respaldo de la primera.
   Va en bloque para que caiga sola, sin depender de un <br> que en celular corta mal. */
.hero h1 .l2 {
  display: block;
  margin-top: 8px;
  color: var(--p-fg-2);
  font-weight: 600;
  font-size: 0.62em;
  letter-spacing: -0.02em;
  line-height: 1.14;
}
.hero h1 em {
  color: var(--p-teal);
  font-style: normal;
}
.hero .lead { margin-bottom: 32px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust {
  display: flex; align-items: center; gap: 20px;
  margin-top: 36px;
  color: var(--p-fg-3);
  font-size: var(--fs-xs);
  flex-wrap: wrap;
}
.hero-trust .sep { width: 1px; height: 14px; background: var(--p-border-2); }

/* Hero visual = a mini inbox preview */
.hero-card {
  min-width: 0;
  background: linear-gradient(180deg, var(--p-surface), var(--p-bg-2));
  border: 1px solid var(--p-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
  position: relative;
}
.hero-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--p-teal-line), transparent 50%);
  z-index: -1;
  opacity: 0.4;
}

/* Mini inbox UI inside hero */
.mini-inbox-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--p-border);
}
.traffic { display: flex; gap: 6px; }
.traffic span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
}
.mini-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-left: 14px; min-width: 0;
  font-size: var(--fs-xs); color: var(--p-fg-3);
}
.mini-tabs span { padding: 4px 8px; border-radius: 6px; }
.mini-tabs span.active { background: var(--p-surface-2); color: var(--p-fg); }
@media (max-width: 560px) {
  /* Dos renglones: deja de ser una pastilla y pasa a ser un bloque redondeado. */
  .hero-tag { border-radius: 12px; padding: 8px 13px 9px 11px; }
  .hero-card { padding: 13px; }
  .mini-tabs { margin-left: 8px; }
  .mini-tabs span { padding: 3px 6px; }
}

/* ============ SECTION HEADERS ============ */
.section {
  padding: var(--gap-section) 0;
  position: relative;
}
.section-head {
  max-width: 720px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-head .lead { margin-top: 18px; }

/* ============ CASE ============ */
.case {
  padding: clamp(64px, 8vw, 120px) 0;
  border-top: 1px solid var(--p-border);
  position: relative;
}
.case-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.case-grid > * { min-width: 0; }
.case[data-flip="true"] .case-grid { grid-template-columns: 1.15fr 0.85fr; }
.case[data-flip="true"] .case-text { order: 2; }
@media (max-width: 980px) {
  .case-grid, .case[data-flip="true"] .case-grid { grid-template-columns: 1fr; gap: 48px; }
  .case[data-flip="true"] .case-text { order: 0; }
}

.case-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--p-fg-4);
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  display: block;
}
.case-h {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.case-prob {
  color: var(--p-fg-2);
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 50ch;
  text-wrap: pretty;
}
.case-prob em {
  color: var(--p-fg); font-style: normal;
  border-bottom: 1px dashed var(--p-border-2);
  padding-bottom: 1px;
}
/* Enlaces al blog dentro del párrafo del problema. Se visten IGUAL que el <em>
   de acá arriba a propósito: suman autoridad al blog sin meter un bloque nuevo
   ni romper la lectura. El punteado ya es una marca visual, así que no dependen
   solo del color. Al pasar el mouse toman el verde de marca; el foco por teclado
   sí se ve, que si no el enlace no existe para quien no usa mouse.
   OJO: en las estadísticas NO se enlaza — abajo va la fuente (McKinsey, HBR) y
   un enlace ahí haría creer que lleva al estudio. */
.case-prob a {
  color: var(--p-fg);
  text-decoration: none;
  border-bottom: 1px dashed var(--p-border-2);
  padding-bottom: 1px;
  transition: border-bottom-color 0.2s ease, color 0.2s ease;
}
.case-prob a:hover {
  color: var(--p-teal);
  border-bottom-color: var(--p-teal);
}
.case-prob a:focus-visible {
  outline: 2px solid var(--p-teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.case-stat {
  border-left: 2px solid var(--p-teal);
  padding: 8px 0 8px 18px;
  margin: 0 0 32px;
  max-width: 50ch;
}
.case-stat .quote {
  font-size: var(--fs-body);
  color: var(--p-fg);
  margin: 0 0 8px;
  line-height: 1.5;
  text-wrap: pretty;
}
.case-stat .src {
  color: var(--p-fg-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.case-cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px;
  padding: 0 16px 0 14px;
  background: var(--p-surface);
  border: 1px solid var(--p-border-hi);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--p-fg);
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
  position: relative;
  cursor: pointer;
  font-family: inherit;
}
.case-cta:hover { background: var(--p-surface-hi); border-color: var(--p-teal); }
.case-cta:active { transform: translateY(1px); }
.case-cta .pulse {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--p-teal);
  color: var(--p-teal-ink);
  display: grid; place-items: center;
  flex: 0 0 26px;
}
.case-cta.triggered { background: var(--p-teal-soft); border-color: var(--p-teal); }
.case-cta.triggered .pulse {
  animation: home-pulse 1.2s ease-out;
}
@keyframes home-pulse {
  0% { box-shadow: 0 0 0 0 var(--p-teal-soft-2); }
  100% { box-shadow: 0 0 0 18px transparent; }
}

/* ============ MOCKUP shell ============ */
.mockup {
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
}
.mockup-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--p-bg);
  border-bottom: 1px solid var(--p-border);
  font-size: var(--fs-xs);
  color: var(--p-fg-3);
}
.mockup-bar .traffic span { background: rgba(255,255,255,0.12); width: 10px; height: 10px; border-radius: 50%; }
.mockup-bar .url {
  flex: 1;
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--p-fg-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-align: center;
}
.mockup-body {
  padding: 22px;
  min-height: 420px;
  position: relative;
}
/* Mobile: reducir padding del mockup-body para que el contenido (chat bubbles,
   email cards, items) tenga más ancho horizontal. Antes 22×2=44px se comían
   buena parte del ancho de un mockup en pantalla angosta. */
@media (max-width: 640px) {
  .mockup-body { padding: 14px; min-height: auto; }
  .mockup-bar .url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Loader between click and reveal */
.loader-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(23,32,51,0.6), rgba(23,32,51,0.85));
  backdrop-filter: blur(6px);
  border-radius: inherit;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.loader-overlay.show { opacity: 1; }
.loader-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--p-surface);
  border: 1px solid var(--p-border-hi);
  border-radius: var(--radius-pill);
  color: var(--p-fg);
  font-size: var(--fs-sm);
}
.spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(130,192,171,0.25);
  border-top-color: var(--p-teal);
  animation: home-spin 700ms linear infinite;
}
@keyframes home-spin { to { transform: rotate(360deg); } }

/* Reveal-on-enter helpers */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 380ms ease, transform 420ms cubic-bezier(0.2,0.8,0.2,1); }
.case.in-view .reveal { opacity: 1; transform: none; }
.case.in-view .stag-1 { transition-delay: 80ms; }
.case.in-view .stag-2 { transition-delay: 160ms; }
.case.in-view .stag-3 { transition-delay: 240ms; }
.case.in-view .stag-4 { transition-delay: 320ms; }
.case.in-view .stag-5 { transition-delay: 400ms; }
.case.in-view .stag-6 { transition-delay: 480ms; }
.case.in-view .stag-7 { transition-delay: 560ms; }
.case.in-view .stag-8 { transition-delay: 640ms; }

/* Pills used in mockups */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.05);
  color: var(--p-fg-2);
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pill-bare::before { display: none; }
.pill-ok   { background: rgba(52,211,153,0.14); color: var(--p-ok); }
.pill-warn { background: var(--p-warn-soft);    color: var(--p-warn); }
.pill-err  { background: var(--p-err-soft);     color: var(--p-err); }
.pill-teal { background: var(--p-teal-soft-2);  color: var(--p-teal); }
.pill-info { background: var(--p-info-soft);    color: var(--p-info); }
.pill-purp { background: var(--p-purple-soft);  color: var(--p-purple); }

/* ============ How it works ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
}
.step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--p-teal);
  letter-spacing: 0.16em;
  margin-bottom: 24px;
  display: block;
}
.step h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.step p {
  color: var(--p-fg-2);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* ============ Final CTA ============ */
.final {
  border-top: 1px solid var(--p-border);
  padding: var(--gap-section) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 320px at 50% 0%, var(--p-teal-soft), transparent 70%);
  pointer-events: none;
}
.final .display { margin: 0 auto 28px; max-width: 18ch; }
.final .lead { margin: 0 auto 40px; }
.final-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ Footer ============ */
.home-footer {
  border-top: 1px solid var(--p-border);
  background: var(--p-bg-2);
  padding: 72px 0 32px;
  color: var(--p-fg-3);
  font-size: var(--fs-sm);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 880px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; }
}
.foot-col h4 {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-fg-4);
  margin: 0 0 16px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { color: var(--p-fg-2); }
.foot-col a:hover { color: var(--p-teal); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--p-border);
  color: var(--p-fg-4);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}

/* ============ Mockup shared bits (staggered enter, typewriter, progress) ============ */
.mk-stag { opacity: 0; transform: translateY(8px); animation: mkIn 460ms cubic-bezier(0.2,0.8,0.2,1) forwards; }
@keyframes mkIn { to { opacity: 1; transform: none; } }
.mk-progress { height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.mk-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--p-teal), var(--p-teal-2)); width: 0; animation: mkProg 1200ms cubic-bezier(0.2,0.8,0.2,1) forwards; }
@keyframes mkProg { to { width: var(--w, 100%); } }
.mk-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 8px; }
.mk-row:hover { background: var(--p-surface); }
.mk-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-fg-4); font-weight: 700; }
.mk-divider { height: 1px; background: var(--p-border); margin: 14px 0; }

/* ============ System (bento) ============ */
.system-section {
  background:
    radial-gradient(900px 400px at 20% 0%, var(--p-teal-soft), transparent 60%),
    var(--p-bg);
}
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 16px;
}
.bento-card {
  background: linear-gradient(180deg, var(--p-surface), var(--p-bg-2));
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 200ms ease, transform 200ms ease;
}
.bento-card:hover { border-color: var(--p-border-hi); transform: translateY(-2px); }
.bento-card .b-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--p-teal);
  margin: 0 0 12px;
}
.bento-card .b-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.bento-card .b-desc {
  color: var(--p-fg-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
}
.bento-card .b-art {
  margin-top: auto;
  padding-top: 20px;
}
.b-auto    { grid-column: span 4; grid-row: span 2; }
.b-flow    { grid-column: span 2; grid-row: span 2; }
.b-multi   { grid-column: span 2; }
.b-catalog { grid-column: span 2; }
.b-vault   { grid-column: span 2; }
.b-support { grid-column: span 2; }
.b-integ   { grid-column: span 4; }
@media (max-width: 1040px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .b-auto    { grid-column: span 4; grid-row: span 1; }
  .b-flow    { grid-column: span 4; grid-row: span 1; }
  .b-multi   { grid-column: span 2; }
  .b-catalog { grid-column: span 2; }
  .b-vault   { grid-column: span 2; }
  .b-support { grid-column: span 2; }
  .b-integ   { grid-column: span 4; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .b-auto, .b-flow, .b-multi, .b-catalog, .b-vault, .b-support, .b-integ {
    grid-column: span 1; grid-row: span 1;
  }
}

/* ============ Legal / content pages (privacidad, términos, seguridad, etc) ============ */
.legal-page {
  padding: clamp(48px, 8vw, 96px) 0 clamp(80px, 10vw, 140px);
  background: var(--p-bg);
  min-height: calc(100vh - 64px);
  position: relative;
}
.legal-page::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 280px;
  background: radial-gradient(600px 240px at 30% 0%, var(--p-teal-soft), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.legal-container {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad-pg-x);
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--p-fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 32px;
  transition: color 140ms ease, gap 140ms ease;
}
.legal-back:hover {
  color: var(--p-teal);
  gap: 10px;
}
.legal-header {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--p-border);
}
.legal-header .eyebrow { display: block; margin-bottom: 16px; }
.legal-header h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--p-fg);
}
.legal-last-updated {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--p-fg-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.legal-intro {
  font-size: var(--fs-lead);
  color: var(--p-fg-2);
  line-height: 1.6;
  margin: 0 0 56px;
  max-width: 64ch;
  text-wrap: pretty;
}
.legal-intro strong { color: var(--p-fg); font-weight: 600; }

.legal-section {
  margin-bottom: 48px;
  padding-top: 8px;
}
.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--p-fg);
  margin: 0 0 20px;
}
.legal-section h2::before {
  content: attr(data-number);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--p-teal);
  letter-spacing: 0.08em;
  background: var(--p-teal-soft);
  border: 1px solid var(--p-border-hi);
  border-radius: 8px;
  padding: 4px 10px;
  flex: none;
  align-self: center;
}
.legal-section h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--p-fg);
  margin: 28px 0 12px;
}
.legal-section p {
  color: var(--p-fg-2);
  font-size: var(--fs-body);
  line-height: 1.75;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.legal-section p strong,
.legal-section li strong { color: var(--p-fg); font-weight: 600; }
.legal-section p em,
.legal-section li em { color: var(--p-fg); font-style: italic; }
.legal-section a {
  color: var(--p-teal);
  text-decoration: none;
  border-bottom: 1px dashed var(--p-border-hi);
  transition: color 140ms ease, border-color 140ms ease;
}
.legal-section a:hover {
  color: var(--p-teal-2);
  border-bottom-color: var(--p-teal);
}
.legal-section ul {
  list-style: none;
  margin: 12px 0 20px;
  padding: 0;
}
.legal-section ul li {
  position: relative;
  padding-left: 24px;
  color: var(--p-fg-2);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin-bottom: 12px;
}
.legal-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--p-teal);
}
.legal-section ul li ul {
  margin: 8px 0 0;
}
.legal-section ul li ul li::before {
  background: var(--p-fg-4);
  width: 6px;
}

.legal-contact-box {
  background: var(--p-surface);
  border: 1px solid var(--p-border-hi);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 16px 0;
}
.legal-contact-box p {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.legal-contact-box p:last-child { margin-bottom: 0; }

/* Tabla para SLA y similares */
.legal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 16px 0;
  font-size: var(--fs-sm);
}
.legal-table th {
  background: var(--p-surface);
  color: var(--p-fg-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--p-border-2);
}
.legal-table td {
  padding: 14px 16px;
  color: var(--p-fg-2);
  border-bottom: 1px solid var(--p-border);
  vertical-align: top;
  line-height: 1.5;
}
.legal-table tr:last-child td { border-bottom: none; }
.priority-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.priority-critical { color: var(--p-err); background: var(--p-err-soft); }
.priority-high { color: var(--p-warn); background: var(--p-warn-soft); }
.priority-medium { color: var(--p-info); background: var(--p-info-soft); }
.priority-low { color: var(--p-fg-3); background: rgba(255,255,255,0.04); }

/* ============ Marketing content pages (seguridad, ventajas) ============ */
.page-hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 360px;
  background: radial-gradient(700px 280px at 50% 0%, var(--p-teal-soft), transparent 70%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.page-hero .eyebrow { display: block; margin-bottom: 16px; }
.page-hero h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--p-fg);
}
.page-hero .lead {
  margin: 0 auto;
  text-align: center;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 56px auto 0;
}
@media (max-width: 720px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
  background: linear-gradient(180deg, var(--p-surface), var(--p-bg-2));
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
}
.stat-number {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--p-teal);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-fg-3);
}

.feature-section {
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 1px solid var(--p-border);
}
.feature-section-head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}
.feature-section-head h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--p-fg);
}
.feature-section-head .lead { margin: 0 auto; text-align: center; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: linear-gradient(180deg, var(--p-surface), var(--p-bg-2));
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.feature-card:hover { border-color: var(--p-border-hi); transform: translateY(-2px); }
.feature-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--p-teal-soft);
  border: 1px solid var(--p-border-hi);
  color: var(--p-teal);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.feature-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--p-fg);
  margin: 0 0 10px;
  line-height: 1.25;
}
.feature-card p {
  color: var(--p-fg-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}
.feature-card p strong { color: var(--p-fg); font-weight: 600; }
.feature-card p a { color: var(--p-teal); }

.page-cta {
  border-top: 1px solid var(--p-border);
  padding: clamp(64px, 10vw, 120px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 280px at 50% 0%, var(--p-teal-soft), transparent 70%);
  pointer-events: none;
}
.page-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 var(--pad-pg-x); }
.page-cta h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--p-fg);
}
.page-cta .lead { margin: 0 auto 28px; text-align: center; }
.page-cta-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.legal-footer-note {
  margin-top: 64px;
  padding: 28px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--p-fg-3);
  font-size: var(--fs-sm);
}
.legal-footer-note a { color: var(--p-teal); }
.legal-footer-note a:hover { color: var(--p-teal-2); }

/* ============ Login screen ============ */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 64px);
  background: var(--p-bg);
  position: relative;
  overflow: hidden;
}
.login-screen::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(closest-side, var(--p-teal-soft), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.login-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.login-brand img {
  height: 32px;
  width: auto;
  display: block;
}
.login-brand h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 12px 0 4px;
  color: var(--p-fg);
}
.login-brand p {
  font-size: var(--fs-sm);
  color: var(--p-fg-3);
  margin: 0;
  max-width: 36ch;
}
.login-card {
  width: 100%;
  background: linear-gradient(180deg, var(--p-surface), var(--p-bg-2));
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.login-card .login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-card .form-group label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--p-fg-3);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.login-card .form-group input[type="text"],
.login-card .form-group input[type="password"],
.login-card .form-group input[type="email"] {
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  color: var(--p-fg);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  width: 100%;
  transition: border-color 140ms ease, background 140ms ease;
}
.login-card .form-group input:focus {
  outline: none;
  border-color: var(--p-teal-line);
  background: var(--p-surface);
}
.login-card .form-group input::placeholder { color: var(--p-fg-4); }

.login-card .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--p-fg-2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.login-card .checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--p-teal);
  cursor: pointer;
}

.login-card .error-message {
  background: var(--p-err-soft);
  border: 1px solid rgba(248, 113, 113, 0.32);
  color: var(--p-err);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.btn-block {
  width: 100%;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--p-fg-4);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 4px 0;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--p-border-2);
}

.btn-google {
  background: white;
  color: #3c4043;
  border: 1px solid #dadce0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  width: 100%;
  transition: background 140ms ease, transform 80ms ease;
  cursor: pointer;
}
.btn-google:hover { background: #f8f9fa; }
.btn-google:active { transform: translateY(1px); }

.login-foot {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--p-fg-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.login-foot a {
  color: var(--p-fg-3);
  transition: color 140ms ease;
}
.login-foot a:hover { color: var(--p-teal); }

.login-pwd-wrap {
  position: relative;
}
.login-pwd-wrap input { padding-right: 40px !important; }
.login-pwd-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--p-fg-4);
  display: flex;
  align-items: center;
  transition: color 140ms ease;
}
.login-pwd-toggle:hover { color: var(--p-teal); }

/* Scrollbar ProMail (regla [[feedback_promail_scrollbar_spec]]: 5px + hover verde) */
body.home-v2 ::-webkit-scrollbar { width: 5px; height: 5px; }
body.home-v2 ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
body.home-v2 ::-webkit-scrollbar-thumb:hover { background: var(--p-teal); }
body.home-v2 ::-webkit-scrollbar-track { background: transparent; }

/* ===== Nav: dropdown Producto + hamburguesa mobile (páginas públicas estáticas) ===== */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-trigger { background: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-dd-trigger svg { transition: transform 0.18s ease; opacity: 0.7; }
.nav-dd:hover .nav-dd-trigger svg, .nav-dd:focus-within .nav-dd-trigger svg { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 210px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; padding: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); display: none; flex-direction: column; gap: 2px; z-index: 60; }
.nav-dd-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; }
.nav-dd-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--p-fg-2); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.nav-dd-menu a:hover { background: var(--p-surface-hi); color: var(--p-teal); }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 0; margin-left: auto; width: 40px; height: 40px; position: relative; color: var(--p-fg); }
.burger-bar { position: absolute; left: 8px; width: 24px; height: 2px; background: currentColor; border-radius: 999px; transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), opacity 200ms ease, top 220ms cubic-bezier(0.2,0.8,0.2,1); }
.bar-1 { top: 14px; } .bar-2 { top: 20px; } .bar-3 { top: 26px; }
.bar-1.open { top: 20px; transform: rotate(45deg); }
.bar-2.open { opacity: 0; }
.bar-3.open { top: 20px; transform: rotate(-45deg); }
.nav-mobile { position: absolute; top: 100%; left: 0; right: 0; background: rgba(30,41,59,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--p-border); padding: 12px var(--pad-pg-x) 20px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.nav-mobile.open { display: flex; }
.nav-mobile-link { display: block; padding: 14px 16px; border-radius: 8px; color: var(--p-fg); font-size: var(--fs-body); font-weight: 500; text-decoration: none; transition: background 140ms ease, color 140ms ease; }
.nav-mobile-link:hover, .nav-mobile-link:active { background: var(--p-surface); color: var(--p-teal); }
.nav-mobile-cta { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--p-border); }
.nav-mobile-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 760px) { .nav-burger { display: block; } .nav .nav-right { display: none; } }
@media (min-width: 761px) { .nav-mobile { display: none !important; } }