/* Smart Path Solutions — landing page
   Palette comes from the logo: navy, blue, green.
   Mobile-first. No build step, no frameworks. */

:root {
  --navy: #0B3C6E;
  --navy-deep: #082A4D;
  --blue: #1174B8;
  --green: #00A650;
  --green-deep: #00803E;   /* variante del verde para texto sobre blanco: AA */
  --mint: #5FD394;
  --ink: #12222E;
  --body: #42535F;
  --muted: #4A5A66;
  --dim: #7C8A93;
  --dim-2: #8B979E;
  --line: #E3E9ED;
  --line-soft: #E9EEF1;
  --bg: #FFFFFF;
  --bg-band: #F4F7F9;
  --bg-cream: #FAF6F0;     /* crema cálido, solo para las tarjetas de problema */
  --line-warm: #EDE3D6;
  --field: #FBFDFE;
  --sans: 'Source Sans 3', Helvetica, Arial, sans-serif;
  --head: 'Montserrat', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --grad: linear-gradient(120deg, #0B3C6E, #1174B8 55%, #00A650);
  --pad-x: clamp(18px, 5vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--green); }

h1, h2, h3 { font-family: var(--head); letter-spacing: -0.02em; }

/* Iconos: SVG inline desde el sprite del <body>, ya no una fuente. La fuente
   Material Symbols Rounded pesaba 365 KB para 35 iconos.

   El tamano se sigue gobernando con font-size aunque aqui ya no haya texto:
   el SVG mide 1em, asi que TODAS las reglas que ya ajustaban font-size
   (.ms.sm, .btn .ms, .ind .ms, .play-btn .ms...) siguen funcionando sin
   tocarlas. fill: currentColor hereda el color como lo hacia la fuente. */
.ms {
  width: 1em;
  height: 1em;
  font-size: 26px;
  line-height: 1;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.2em;
  flex: 0 0 auto;
}
.ms.sm { font-size: 18px; }
.green { color: var(--green); }
.mint { color: var(--mint); }
.icon-blue { color: var(--blue); }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding-top: clamp(52px, 9vw, 96px); padding-bottom: clamp(52px, 9vw, 96px); }
.section-sm { padding-top: clamp(46px, 8vw, 88px); padding-bottom: clamp(46px, 8vw, 88px); }
.band { background: var(--bg-band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

section[id] { scroll-margin-top: 84px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.logo { height: clamp(42px, 10vw, 58px); width: auto; display: block; }
.logo-link:hover { opacity: 0.85; }
/* Phone beside the header CTA. See the media query below for the small-screen
   behaviour. */
/* The logo is a flex item and was being squeezed to nothing once the phone
   joined the row — pin it so it can never shrink. */
.logo-link { flex: 0 0 auto; }
.header-actions { display: flex; align-items: center; gap: clamp(8px, 2.4vw, 18px); flex: 0 0 auto; }
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 2px;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(13px, 3.1vw, 15px);
  color: var(--navy);
  white-space: nowrap;
}
.header-tel:hover { color: var(--green); }
.header-tel .ms { font-size: 20px; color: var(--green); }

/* Under ~520px the logo, the full number and the CTA stop fitting on one row.
   Drop the digits and keep the icon as a 44px tap target; the link keeps its
   aria-label, and the number stays visible in the contact section. */
@media (max-width: 520px) {
  .header-tel-num { display: none; }
  .header-tel { min-width: 44px; justify-content: center; gap: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(14px, 3.6vw, 16px);
  border: none;
  border-radius: 999px;
  padding: 15px 22px;
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 150ms ease, border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.btn .ms { font-size: 20px; }
.btn-sm { padding: 11px 16px; min-height: 42px; font-size: clamp(12px, 3.2vw, 14px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--green); color: #fff; }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -12px rgba(11,60,110,0.6); }
.btn-grad:hover { filter: brightness(1.07); color: #fff; }
.btn-ghost { background: #fff; color: var(--navy); border: 1.5px solid #C9D8E1; padding: 14px 22px; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { color: var(--green); }
.btn-block { width: 100%; margin-top: 4px; min-height: 52px; }
.btn[disabled] { opacity: 0.65; cursor: default; }

/* ---------- shared type ---------- */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow-mint { color: var(--mint); }
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section h2, .band h2 {
  font-weight: 800;
  font-size: clamp(26px, 6.2vw, 40px);
  line-height: 1.12;
  color: var(--navy);
  margin: 12px 0 clamp(24px, 4vw, 40px);
  max-width: 22em;
}
.section h2.on-dark { color: #fff; margin-bottom: 0; }
.section .sub, .band .sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: -14px 0 clamp(26px, 5vw, 40px);
  max-width: 34em;
}
.body { font-size: 16.5px; line-height: 1.65; color: var(--body); margin: 0 0 16px; max-width: 32em; }
.body.sm { font-size: 15.5px; color: var(--muted); }
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--navy);
  border-bottom: 2px solid var(--green);
  padding-bottom: 3px;
}

/* ---------- grids ---------- */
.grid { display: grid; gap: clamp(14px, 2.5vw, 20px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 3vw, 26px); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Con 5 tarjetas, auto-fit dejaba un hueco en la última fila. Flex con base
   300px da 3 + 2, y las dos de abajo se estiran para ocupar el ancho. */
.grid-fill { display: flex; flex-wrap: wrap; }
.grid-fill > * { flex: 1 1 300px; }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 4vw, 28px); }
.card.tight { border-radius: 16px; padding: 22px; }
.card h3 { font-weight: 700; font-size: 17px; color: var(--navy); margin: 12px 0 8px; letter-spacing: -0.01em; }
.card p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.step h3 { font-size: 19px; margin: 10px 0; }
.step p { font-size: 15.5px; line-height: 1.6; }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--blue); letter-spacing: 0.06em; }


/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;          /* keeps the -z layers inside the section */
  background: var(--navy);     /* holds the colour while the photo decodes */
}
.hero-pic { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;    /* recalibrado para la imagen cuadrada: 34% cortaba la cabeza */
  display: block;
}
/* Brand navy, ~0.6 average: heaviest behind the copy on the left, lightest on
   the right so the photograph still reads. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(11,60,110,0.90) 0%,
    rgba(11,60,110,0.84) 34%,
    rgba(11,60,110,0.78) 50%,
    rgba(11,60,110,0.52) 78%,
    rgba(8,42,77,0.40) 100%);
}
/* Small screens: the copy sits over far more of the photo, so lift the overlay
   and shift the crop to keep the worker visible. */
@media (max-width: 720px) {
  .hero-overlay {
    background: linear-gradient(163deg,
      rgba(11,60,110,0.86) 0%,
      rgba(11,60,110,0.80) 48%,
      rgba(8,42,77,0.70) 100%);
  }
  /* Only the width is cropped at this ratio, so the worker is never cut off
     vertically; 28% centres him inside the visible slice. */
  .hero-pic img { object-position: 28% center; }
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(36px, 8vw, 84px);
  padding-bottom: clamp(40px, 8vw, 92px);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #DCE6EB;
  margin: 0 0 clamp(18px, 4vw, 26px);
}
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); display: block; flex: 0 0 auto; }
.hero h1 {
  font-weight: 800;
  font-size: clamp(33px, 8.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 clamp(16px, 3vw, 22px);
}
.lede {
  font-size: clamp(17px, 4.3vw, 21px);
  line-height: 1.5;
  color: var(--body);
  margin: 0 0 clamp(24px, 5vw, 34px);
  max-width: 30em;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(22px, 4vw, 28px); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.checks .ms { font-size: 17px; }

/* On-dark hero copy. Must sit after the base .hero h1 / .lede / .checks rules
   above: same specificity, so source order is what decides.
   "missed call" uses --mint, not --green: measured against the real composite,
   #00A650 tops out near 1.5:1 here and would need an almost solid overlay to
   reach 3:1. --mint is the same brand green the site already uses on dark. */
.hero h1 { color: #fff; }
.hero h1 .green { color: var(--mint); }

/* Hero, nivel 1: display serif en dos líneas. Va con `.hero h1.hero-title`
   porque `.hero h1` de más arriba tiene la misma especificidad y ganaría por
   orden de aparición. */
.hero h1.hero-title {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(27px, 3.6vw, 41px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(14px, 2.4vw, 20px);
}
.ht-line { display: block; }

/* Nivel 2: el gancho de dolor. Sans pesada contra la serif del titular, más
   una regla mint a la izquierda para que lea como línea de fuerza y no como
   subtítulo. */
.hero-hook {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(17.5px, 4.5vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 clamp(13px, 2.6vw, 20px);
  padding-left: 13px;
  border-left: 3px solid var(--mint);
  max-width: 17em;
}

/* Nivel 3: apoyo, deliberadamente pequeño. */
.hero .lede {
  font-size: clamp(14.5px, 3.7vw, 16.5px);
  line-height: 1.55;
  color: rgba(255,255,255,0.93);
  margin: 0 0 clamp(20px, 3.8vw, 28px);
  max-width: 34em;
}
.hero .checks li { color: #fff; }
.hero .checks .ms.green { color: var(--mint); }

/* ---------- problema -> solución (stack del hero+1) ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--bg-cream);
  border: 1px solid var(--line-warm);
}
.stack-ic { flex: 0 0 auto; font-size: 24px; color: var(--blue); margin-top: 1px; }
.stack-body { min-width: 0; }
.stack-card h3 {
  font-family: var(--head);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 5px;
}
.stack-card p { font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 0; }
/* la tercera marca el giro a solución */
.stack-card-dark { background: var(--navy-deep); border-color: var(--navy-deep); }
.stack-card-dark h3 { color: #fff; }
.stack-card-dark p { color: rgba(255,255,255,0.90); }
.stack-card-dark .stack-ic { color: var(--mint); }

/* ---------- demo player ---------- */
.demo-card { border-radius: 22px; box-shadow: 0 24px 50px -34px rgba(11,60,110,0.45); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.demo-top .mono-label { font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.tag-ai {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--green-deep);
  border: 1px solid #BCE3CC;
  border-radius: 999px;
  padding: 3px 9px;
}
.demo-title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(17px, 4.2vw, 20px);
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 20px;
}
.demo-player { display: flex; align-items: center; gap: 16px; }
.play-btn {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #0B3C6E, #00A650);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(11,60,110,0.7);
}
.play-btn .ms { font-size: 28px; }
.wave { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 44px; }
.wave i {
  display: block;
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 3px;
  background: #D3DFE7;
  transform-origin: center;
}
.wave.playing i { background: linear-gradient(180deg, #1174B8, #00A650); animation: spl-pulse 900ms ease-in-out infinite; }
@keyframes spl-pulse { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.demo-note { font-size: 13.5px; line-height: 1.5; color: #6B7A83; margin: 16px 0 0; }

/* Maqueta de conversación, dentro de la misma tarjeta blanca del demo para no
   abrir un hueco entre dos tarjetas. Mismos radios y paleta que el resto;
   bordes finos en vez de sombras. */
/* Los tres bloques del hero derecho se apilan con una separación pareja. */
.hero-stack { display: flex; flex-direction: column; gap: 14px; }
/* bloque 2: la conversación, ahora tarjeta propia (lleva .card en el HTML) */
.demo-convo { border-radius: 22px; }
.convo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.convo-head .mono-label { font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.convo-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.demo-convo .bubble {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 8px;
  padding: 9px 13px;
  border-radius: 14px;
  max-width: 88%;
  width: fit-content;
}
.demo-convo .bubble-in { background: var(--bg-band); color: var(--body); border-bottom-left-radius: 5px; }
.demo-convo .bubble-out {
  background: var(--navy);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}
.demo-convo .convo-done {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(0,166,80,0.08);
  border: 1px solid rgba(0,166,80,0.22);
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}
.demo-convo .convo-done .ms { font-size: 17px; color: var(--green); }

.sms-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 30px -22px rgba(11,60,110,0.55);
}
.sms-icon {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--blue);
  margin-top: 1px;
}
.sms-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sms-t { font-family: var(--head); font-weight: 700; font-size: 13.5px; color: var(--navy); }
.sms-s { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sms-time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- industries ---------- */
.industries { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.ind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(16px, 3.5vw, 22px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: transform 160ms ease, border-color 160ms ease;
}
.ind:hover { border-color: var(--green); transform: translateY(-2px); }
.ind .ms { font-size: 28px; }
.ind-label { font-family: var(--head); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--navy); }

/* ---------- trial ---------- */
.trial-card {
  background: linear-gradient(135deg, #0B3C6E 0%, #12628F 48%, #00A650 130%);
  border-radius: 24px;
  padding: clamp(26px, 6vw, 52px);
  color: #fff;
  box-shadow: 0 30px 60px -40px rgba(11,60,110,0.8);
}
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 18px;
}
.trial-card h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  max-width: 20em;
}
.trial-card > p {
  font-size: clamp(16px, 4.2vw, 19px);
  line-height: 1.55;
  color: #DCE9F1;
  margin: 0 0 clamp(24px, 4vw, 32px);
  max-width: 32em;
}
.trial-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.trial-note { font-size: 14.5px; color: #C6DCEA; }

/* ---------- dashboard mockup ---------- */
.dash {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 26px 54px -38px rgba(11,60,110,0.5);
  overflow: hidden;
}
.dash-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #FAFCFD;
}
.dash-bar .dot { width: 9px; height: 9px; }
.dash-live { font-family: var(--head); font-weight: 700; font-size: 13.5px; color: var(--navy); }
.dash-mock { margin-left: auto; font-size: 10.5px; color: var(--dim-2); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--line); }
.dash-col { background: #fff; padding: clamp(18px, 4vw, 24px); display: flex; flex-direction: column; gap: 10px; }
.dash-h { font-weight: 700; font-size: 14px; color: var(--navy); margin: 0 0 6px; }
.appt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--bg-band); }
.time { font-family: var(--mono); font-size: 12px; color: var(--blue); padding-top: 2px; }
.appt-t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.appt-s { font-size: 13px; color: #6B7A83; }
.callbox { border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px; }
.callbox.row { display: flex; align-items: center; gap: 8px; }
.callbox-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.callbox-t { font-weight: 600; font-size: 14px; color: var(--ink); }
.mono-time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim-2); }
.transcript { font-family: var(--mono); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.transcript .t-sarah { color: var(--navy); margin-bottom: 6px; }
.stat { padding: 16px; border-radius: 12px; border: 1px solid var(--line-soft); }
.stat-navy { background: linear-gradient(135deg, #0B3C6E, #12628F); color: #fff; border: none; }
.stat-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #9FCBE3; }
.stat-k.dim { color: var(--dim-2); }
.stat-v { font-family: var(--head); font-weight: 800; font-size: 30px; line-height: 1.1; margin-top: 6px; }
.stat-v.navy { color: var(--navy); }
.stat-note { font-size: 13px; line-height: 1.5; color: var(--dim-2); margin: 0; }

/* ---------- beyond ---------- */
.beyond { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.beyond::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 380px at 88% -8%, rgba(0,166,80,0.34), transparent 70%),
    radial-gradient(560px 340px at 4% 108%, rgba(17,116,184,0.4), transparent 72%);
  pointer-events: none;
}
.beyond > .wrap { position: relative; }
.beyond-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  margin-bottom: clamp(30px, 5vw, 48px);
}
.beyond-head h2 { font-weight: 800; font-size: clamp(26px, 6.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 12px 0 0; color: #fff; }
.beyond-sub { font-size: 16.5px; line-height: 1.6; color: #B9CEDD; margin: 0; }
.glass {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 26px);
  background: linear-gradient(165deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  transition: border-color 160ms ease;
}
.glass:hover { border-color: rgba(95,211,148,0.6); }
.glass h3 { font-weight: 700; font-size: 18px; margin: 14px 0 8px; color: #fff; }
.glass p { font-size: 15px; line-height: 1.55; color: #B9CEDD; margin: 0; }

/* ---------- local / founder ---------- */
.local-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.local-grid h2 { margin-bottom: 18px; }
.founder { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.founder img { border-radius: 20px; display: block; width: 100%; height: auto; object-fit: cover; }
.photo-slot {
  border-radius: 20px;
  border: 1px solid var(--line);
  background-color: var(--bg-band);
  background-image: repeating-linear-gradient(135deg, rgba(11,60,110,0.055) 0 10px, rgba(11,60,110,0) 10px 20px);
  min-height: clamp(230px, 50vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.photo-slot .mono-label { font-size: 11.5px; color: var(--dim); text-align: center; }
.founder figcaption { display: flex; align-items: baseline; gap: 8px; }
.founder-name { font-family: var(--head); font-weight: 700; font-size: 15.5px; color: var(--navy); }
.founder figcaption .mono-label { font-size: 12.5px; color: var(--dim); }

/* ---------- photography ---------- */
/* One treatment shared by every photo so they read as a family: the same 18px
   radius as .card, a light desaturation, and a navy -> blue -> green -> warm
   neutral grade multiplied over the image so it sits inside the brand palette
   instead of on top of it. No copy is ever placed over a photo, so nothing
   here can hurt text contrast. */
.ph {
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-band);
  border: 1px solid var(--line);
}
.ph img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.82) contrast(1.04);
}
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg,
    rgba(11,60,110,0.34) 0%,
    rgba(17,116,184,0.16) 40%,
    rgba(0,166,80,0.12) 68%,
    rgba(198,170,132,0.20) 100%);
  mix-blend-mode: multiply;
}

/* copy | photo row. Same auto-fit reflow as .local-grid, so it stacks to one
   column on small screens with the copy first and the photo below it. */
.media-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.media-split h2 { margin-bottom: 18px; }
.media-split h2:last-child { margin-bottom: 0; }
.media-split .sub { margin: 0; }
.media-split + .grid,
.media-split + .dash { margin-top: clamp(30px, 5vw, 52px); }

/* hero right column: photo stacked above the demo card */
.hero-side { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 24px); }

/* ---------- sección de demos (navy, corta entre dos claras) ---------- */
.demos { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.demos::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(660px 420px at 88% 16%, rgba(0,166,80,0.26), transparent 72%),
    radial-gradient(520px 320px at 2% 106%, rgba(17,116,184,0.36), transparent 72%);
  pointer-events: none;
}
/* Ilustración decorativa anclada al borde inferior. Altura acotada para que
   quede como banda de textura y no llegue al panel; el contenido va por
   encima con z-index explícito. */
.demos-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0.12;
}
.demos-art img {
  display: block;
  width: 100%;
  height: clamp(110px, 22vw, 310px);
  object-fit: cover;
  object-position: bottom center;
}
.demos > .wrap { position: relative; z-index: 1; }

/* Mobile: la tarjeta ocupa todo el ancho, así que la ilustración sólo asomaba
   52px por debajo y al 12% no se percibía. Se abre sitio dentro de la misma
   sección navy y se sube la opacidad. Desktop no se toca. */
/* Desktop: a lo ancho completo el `cover` escala por ancho y recortaba el
   tercio superior, dejando el faro y los pinos fuera de cuadro. Con `contain`
   entra la ilustración completa, anclada abajo a la derecha, que es el espacio
   libre al lado de la tarjeta del player. Mobile no entra acá. */
@media (min-width: 768px) {
  /* Se abre sitio abajo: con `contain` el dibujo está limitado por el alto de
     la caja, y subir ese alto sin más metería la banda por detrás de los tabs. */
  .demos > .wrap { padding-bottom: clamp(110px, 13vw, 190px); }
  .demos-art {
    opacity: 0.16;
    right: 0;                          /* anclada al borde derecho */
    /* El canto izquierdo se funde con el navy en vez de cortarse en seco. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 25%);
            mask-image: linear-gradient(to right, transparent, #000 25%);
  }
  .demos-art img {
    /* 39vw es siempre mayor que ancho/3, así que `cover` escala por alto: el
       alto entra completo y lo que sobra de ancho sangra fuera del viewport
       por la izquierda, sin dejar canto visible. */
    height: clamp(300px, 39vw, 720px);
    object-fit: cover;
    object-position: bottom right;
  }
}

@media (max-width: 767px) {
  .demos > .wrap { padding-bottom: 140px; }
  .demos-art { opacity: 0.22; }
  /* 170px de banda: por encima de los 140px visibles, y con esa altura el
     `cover` escala por alto, así que el faro y los pinos entran completos. */
  .demos-art img { height: 170px; }
}
/* Va con `.demos .demos-h2`: `.section h2` de más arriba es (0-1-1) y le
   ganaba a una clase sola, dejando el titular navy sobre navy. */
.demos .demos-h2 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(26px, 6.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 12px 0 12px;
}
.demos-sub { font-size: 16.5px; line-height: 1.6; color: #C6D8E5; margin: 0 0 clamp(24px, 4vw, 34px); max-width: 34em; }

/* tabs */
.demo-tabs {
  display: flex;
  flex-wrap: nowrap;              /* nunca dos filas */
  gap: clamp(6px, 1.8vw, 10px);
  margin-bottom: clamp(18px, 3vw, 24px);
  overflow-x: auto;               /* último recurso, antes que partirse */
  scrollbar-width: none;
}
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 14.5px);
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 999px;
  padding: 10px clamp(12px, 3.4vw, 18px);
  min-height: 44px;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.demo-tab:hover { border-color: var(--mint); }
.demo-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.demo-tab.is-on {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--navy-deep);
}

/* panel: tarjeta clara sobre el navy, para reusar el player del hero tal cual */
.demo-panel {
  background: #fff;
  border-radius: 22px;
  padding: clamp(20px, 4vw, 28px);
  max-width: 640px;
}
.demos-kind { display: block; font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px; }
.demo-panel .demo-title { margin: 0 0 16px; }
.demos-seekrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.demos-time { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 0 0 auto; min-width: 34px; }
.demos-time:last-of-type { text-align: right; }
.demos-seek {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 22px;
  accent-color: var(--green);
  cursor: pointer;
}
.demos-seek:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.demos-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }
.demos-note.is-error { color: #B4381F; }
.demos-noscript { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.demos-noscript p { margin: 0; color: #C6D8E5; }
.demos-noscript .mono-label { color: #C6D8E5; }

/* ---------- faq ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 18px 20px;
  min-height: 56px;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(15px, 3.9vw, 17px);
  color: var(--navy);
}
.faq-i { margin-left: auto; font-size: 22px; }
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0; padding: 0 20px 20px; }

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.contact h2 { margin-bottom: 16px; }
.form {
  border-radius: 22px;
  box-shadow: 0 24px 50px -34px rgba(11,60,110,0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 5vw, 30px);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-l { font-family: var(--head); font-weight: 700; font-size: 13px; color: var(--navy); }
.opt { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim-2); }
.form input, .form select {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  padding: 13px 15px;
  border: 1.5px solid #DCE6EB;
  border-radius: 12px;
  background: var(--field);
  outline: none;
  min-height: 48px;
  width: 100%;
}
.form input:focus, .form select:focus { border-color: var(--green); }
.form input[aria-invalid="true"] { border-color: #C2543A; }
.select-wrap { position: relative; display: block; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; }
.select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--dim); font-size: 22px; }
/* honeypot — off-screen rather than display:none, which naive bots skip */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* `.card p` (0-1-1) outranks a bare `.form-status` (0-1-0) and greys both
   states out, so scope these to .form to win on specificity. */
.form .form-status { margin: 0; font-size: 14.5px; line-height: 1.55; color: #0A7D40; font-weight: 600; }
.form .form-status.error { color: #B4381F; }
.form-fine { font-size: 13.5px; line-height: 1.5; color: #6B7A83; margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #B9CEDD; padding: clamp(36px, 7vw, 60px) 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; align-items: start; }
.footer-name { font-family: var(--head); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -0.01em; }
.footer-line { font-size: 15px; margin-top: 8px; }
.footer-mail { display: inline-block; margin-top: 10px; font-size: 15px; color: var(--mint); }
.footer-nav { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer-nav a { color: #B9CEDD; }
.footer-nav a:hover, .footer-mail:hover { color: var(--mint); }
.footer-fine { font-size: 13.5px; line-height: 1.6; color: #8CA6B9; }
.footer-bottom {
  margin-top: clamp(26px, 5vw, 40px);
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: #8CA6B9;
}

/* ---------- scroll reveal ----------
   Only opacity and transform ever animate, so nothing here can shift layout.
   Baseline below is the no-JS / reduced-motion state: everything visible. */
.reveal, .reveal-up, .reveal-left, .reveal-right, .stagger > * {
  opacity: 1;
  transform: none;
}
/* The hidden state is gated on .js-motion, which main.js only adds when motion
   is allowed — so if the script never runs, the page still reads normally. */
.js-motion .reveal,
.js-motion .reveal-up,
.js-motion .reveal-left,
.js-motion .reveal-right,
.js-motion .stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(.22,.7,.25,1), transform 600ms cubic-bezier(.22,.7,.25,1);
}
/* Directional variants. Each also names `.stagger > .x` so it outranks the
   `.js-motion .stagger > *` rule above (3 classes beats 2) and a direction
   still applies to a card inside a staggered group. */
.js-motion .reveal-left,
.js-motion .stagger > .reveal-left  { transform: translateX(-40px); }
.js-motion .reveal-right,
.js-motion .stagger > .reveal-right { transform: translateX(40px); }
.js-motion .reveal-up,
.js-motion .stagger > .reveal-up    { transform: translateY(24px); }

.js-motion .is-in { opacity: 1 !important; transform: none !important; }

/* The hero never reacts to scroll — it just fades up once on load. */
.js-motion .hero-fade {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms cubic-bezier(.22,.7,.25,1), transform 700ms cubic-bezier(.22,.7,.25,1);
}
.js-motion .hero-grid > .hero-fade + .hero-fade { transition-delay: 110ms; }
.js-motion.is-loaded .hero-fade { opacity: 1; transform: none; }

/* Small screens: same effects, shorter travel (main.js shortens the delays). */
@media (max-width: 720px) {
  .js-motion .reveal-left,
  .js-motion .stagger > .reveal-left  { transform: translateX(-24px); }
  .js-motion .reveal-right,
  .js-motion .stagger > .reveal-right { transform: translateX(24px); }
  .js-motion .reveal-up,
  .js-motion .stagger > .reveal-up    { transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal,
  .js-motion .reveal-up,
  .js-motion .reveal-left,
  .js-motion .reveal-right,
  .js-motion .stagger > *,
  .js-motion .hero-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .wave.playing i { animation: none; }
}

/* ---------- simple content pages (about, privacy, 404) ----------
   Scoped under .page, which the landing never uses, so none of this can
   reach the existing design. Type scale and colours come from the same
   custom properties as the rest of the site. */
.page { padding-top: clamp(46px, 8vw, 84px); padding-bottom: clamp(56px, 9vw, 96px); }
.page h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 10px 0 clamp(16px, 3vw, 24px);
}
.page h2 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(18.5px, 3.4vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: clamp(28px, 4.5vw, 38px) 0 10px;
}
.page p, .page li { font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 34em; }
.page p { margin: 0 0 15px; }
.page ul { margin: 0 0 15px; padding-left: 20px; }
.page li { margin-bottom: 7px; }
.page a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.page a:not(.btn):hover { color: var(--green); }
.page .lead { font-size: clamp(17px, 2.6vw, 19px); color: var(--muted); max-width: 32em; }
.page .updated { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--dim); margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vw, 34px); }

/* ---------- calculadora de llamadas perdidas ---------- */
/* Sin estilo nuevo: reutiliza .card, .btn-grad, .field-l, .mono-label y los
   tokens de :root. Lo unico propio es la retícula y el bloque de resultado. */

/* El equivalente en texto solo aparece sin JS: lo revela el <noscript> del
   <head>, que a su vez esconde .calc-live. Asi no hay parpadeo ni hace falta
   un script inline. */
.calc-plain { display: none; color: var(--body); line-height: 1.65; max-width: 60ch; }

.calc { padding: clamp(20px, 4vw, 30px); }

.calc-grid { display: grid; gap: clamp(16px, 3vw, 26px); }
@media (min-width: 620px) { .calc-grid { grid-template-columns: 1fr 1fr; } }

.calc-field { display: flex; flex-direction: column; gap: 9px; }
.calc-field .field-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

/* El valor en vivo en fuente mono, como los demas datos del sitio */
.calc-val { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--blue); }

.calc-money { position: relative; display: flex; align-items: center; }
.calc-cur {
  position: absolute; left: 14px; color: var(--dim); font-size: 16px; pointer-events: none;
}
.calc-money input {
  width: 100%; padding: 13px 14px 13px 30px;
  font: 400 16px var(--sans); color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
}
.calc-money input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

/* Sliders: pista y pulgar propios para los tres navegadores, con area tactil
   de 44px aunque la pista se vea fina. */
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--line);
}
.calc input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--line);
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(11,60,110,0.3);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(11,60,110,0.3);
}
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--navy); outline-offset: 2px; }
.calc input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--navy); outline-offset: 2px; }

.calc-adv { margin-top: clamp(16px, 3vw, 22px); border-top: 1px solid var(--line-soft); padding-top: 14px; }
.calc-adv summary {
  cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 14.5px;
  color: var(--blue); min-height: 44px; display: flex; align-items: center;
}
.calc-adv summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.calc-adv[open] summary { margin-bottom: 14px; }

.calc-out {
  margin-top: clamp(20px, 4vw, 28px); padding: clamp(18px, 3.5vw, 26px);
  background: var(--bg-band); border-radius: 14px; text-align: center;
}
/* Todos estos son <p> DENTRO de .card, y `.card p` tiene especificidad 0-1-1
   frente al 0-1-0 de una clase suelta: sin escoparlos bajo .calc, la cifra
   grande se quedaba en los 15px grises de .card p. Es la misma trampa que ya
   aplasto a .form-status y a las burbujas del demo. */
.calc .calc-out-l {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.calc .calc-year {
  font-family: var(--head); font-weight: 800; color: var(--navy);
  font-size: clamp(34px, 9vw, 52px); line-height: 1.05; margin: 6px 0 4px;
}
.calc .calc-out-sub { font-size: 15.5px; line-height: 1.5; color: var(--body); margin: 0; }
.calc .calc-out-sub span { font-family: var(--mono); color: var(--navy); }

/* --dim (#7C8A93) sobre blanco da 3,55:1 y no llega a AA. El descargo es
   justo lo que tiene que poder leerse, asi que va en --muted. */
.calc .calc-note { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 16px 0 0; }
.calc-cta { margin-top: 18px; }
@media (max-width: 519px) { .calc-cta { display: flex; width: 100%; } }