/* Portada según la referencia mobile. El resto de la web conserva sus estilos. */
.wa-brand-icon { display: none; }
html[data-page="home"] {
  --hero-background: #030a12;
  --hero-text: #f7f9fc;
  --hero-muted: #b0c4d5;
  --hero-blue: #25b8ff;
}
html[data-page="home"] .site-header {
  background: radial-gradient(ellipse at 100% 0, #123958 0, transparent 55%), var(--hero-background);
}
html[data-page="home"] .header-inner {
  height: 134px;
  max-width: 1152px;
  width: calc(100% - 64px);
  padding: 0;
  justify-content: flex-start;
}
html[data-page="home"] .landing-wordmark { color: var(--hero-text); }
html[data-page="home"] .landing-wordmark > span,
html[data-page="home"] .landing-wordmark > small { display: none; }
html[data-page="home"] .landing-brand-logo {
  width: 84px;
  height: 84px;
  box-shadow: 0 0 24px #0878ff25;
}
html[data-page="home"] .landing-instagram {
  left: auto;
  right: 0;
  gap: 14px;
  min-height: 72px;
  max-width: none;
  padding: 12px 18px;
  border-radius: 24px;
  border: 1px solid #64819d88;
  color: var(--hero-text);
  background: linear-gradient(115deg, #1d2737cc, #07121dcc 60%, #103451b3);
  box-shadow: inset 0 1px 0 #d6ebff15, 0 8px 24px #0004;
  font: 400 16px/1.3 'Inter', system-ui, sans-serif;
}
html[data-page="home"] .landing-instagram svg {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html[data-page="home"] .landing-instagram strong { font-size: 25px; }
html[data-page="home"] .landing-instagram-arrow { font: 300 30px/1 system-ui; color: #85b6de; }
html[data-page="home"] .landing-instagram:hover {
  color: #fff;
  border-color: #86b8df;
  background: linear-gradient(115deg, #26364b, #0c2134);
  box-shadow: 0 8px 28px #008bff15;
}
html[data-page="home"] .landing-hero {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px 0 100px;
  overflow: hidden;
  color: var(--hero-text);
  background:
    radial-gradient(ellipse at 90% 36%, #0b365c59, transparent 46%),
    radial-gradient(ellipse at 95% 0, #0b2947, transparent 38%),
    linear-gradient(150deg, #03070c, #030c15 65%, #020c11);
  font-family: 'Inter', system-ui, sans-serif;
}
html[data-page="home"] .landing-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 400px;
  right: -20%;
  top: -220px;
  transform: rotate(35deg);
  background: linear-gradient(transparent, #20afff, transparent);
  box-shadow: 0 0 14px 2px #009cff88;
  pointer-events: none;
}
html[data-page="home"] .landing-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  position: relative;
  width: calc(100% - 64px);
  max-width: 1152px;
  margin-inline: auto;
}
html[data-page="home"] .landing-copy > :not(.landing-showcase) { grid-column: 1; }
html[data-page="home"] .landing-copy h1 {
  font: 700 clamp(42px, 4.5vw, 62px)/1.12 'Inter', system-ui, sans-serif;
  letter-spacing: -1.8px;
  color: var(--hero-text);
}
html[data-page="home"] .landing-copy h1 span {
  white-space: nowrap;
  color: var(--hero-blue);
  background: linear-gradient(115deg, #4092fa, #1dc8ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-page="home"] .landing-subtitle {
  color: var(--hero-muted);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.4px;
  max-width: 560px;
  margin-top: 22px;
}
html[data-page="home"] .landing-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 24px;
  color: #c2d1df;
  font-size: 14px;
  line-height: 1.5;
}
html[data-page="home"] .landing-platforms > span { display: inline-flex; align-items: center; gap: 7px; }
html[data-page="home"] .landing-platforms svg { width: 20px; height: 20px; flex-shrink: 0; }
html[data-page="home"] .landing-platforms b { font-weight: 400; color: #91a9be; }
.landing-trust { display: none; }
html[data-page="home"] .landing-showcase { display: contents; }
html[data-page="home"] .landing-promises {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 32px;
}
html[data-page="home"] .landing-promises li { gap: 16px; font-size: 18px; font-weight: 500; color: var(--hero-text); }
html[data-page="home"] .landing-promises li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #23b8ff;
  background: linear-gradient(145deg, #0a263d, #030c16);
  color: #2bc8ff;
  box-shadow: 0 0 18px #009cff45, inset 0 0 8px #048cff15;
}
html[data-page="home"] .landing-promises svg { width: 24px; height: 24px; stroke-width: 3; }
html[data-page="home"] .landing-app-visual {
  grid-column: 2;
  grid-row: 1 / 7;
  position: relative;
  align-self: center;
  margin: 0 -100px 0 -140px;
  padding: 0;
  pointer-events: none;
}
html[data-page="home"] .landing-app-visual img {
  display: block;
  width: 100%;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-page="home"] .landing-intro {
  position: relative;
  max-width: 560px;
  margin-top: 34px;
  padding-top: 22px;
  color: #bdd1e0;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0;
}
html[data-page="home"] .landing-intro::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, #82bfdf, #1b3448);
}
html[data-page="home"] .landing-price-currency { color: #8aaec2; font-size: 14px; margin-top: 18px; }
html[data-page="home"] #wa-float-cta {
  background: radial-gradient(ellipse at 20% 0, #008a5e88, transparent 65%), linear-gradient(115deg, #005c3d, #003f2e);
  border: 1px solid #00d493;
  border-radius: 28px;
  min-height: 80px;
  padding: 12px 16px;
  gap: 16px;
  box-shadow: 0 0 36px #00c98322, inset 0 1px 0 #6affc75c;
  font-family: 'Inter', system-ui, sans-serif;
}
html[data-page="home"] #wa-float-cta .wa-float-symbol {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 0;
  background: none;
}
html[data-page="home"] #wa-float-cta .wa-default-icon { display: none; }
html[data-page="home"] #wa-float-cta .wa-brand-icon { display: block; width: 44px; height: 44px; color: #fff; }
html[data-page="home"] #wa-float-cta [data-wa-label] { font-size: 16px; font-weight: 600; max-width: none; }
html[data-page="home"] #wa-float-cta .wa-campaign-hint { font-size: 14px; color: #88ecd5; }
html[data-page="home"] #wa-float-cta .wa-campaign-arrow {
  width: 42px;
  height: 42px;
  margin-left: auto;
  background: linear-gradient(135deg, #00965f, #006947);
  color: #fff;
  border: 1px solid #29d49955;
  font: 300 40px/1 system-ui;
  box-shadow: none;
}
html[data-page="home"] #wa-float-cta:hover { background: linear-gradient(115deg, #00754e, #00553b); }
@media (max-width: 900px) and (min-width: 701px) {
  html[data-page="home"] .landing-copy { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  html[data-page="home"] .landing-copy h1 { font-size: 42px; }
  html[data-page="home"] .landing-subtitle { font-size: 22px; }
  html[data-page="home"] .landing-app-visual { margin-left: -160px; margin-right: -110px; }
}
@media (max-width: 700px) {
  /* Repartir el alto adicional sin dejar una franja vacía sobre WhatsApp.
     En pantallas cortas sólo se compensa el área inferior segura. svh evita saltos
     cuando Safari muestra u oculta sus barras de navegación. */
  html[data-page="home"] { --hero-room: 0px; }
  html[data-page="home"] .header-inner { width: auto; height: 90px; margin-inline: 24px; }
  html[data-page="home"] .landing-brand-logo { width: 58px; height: 58px; }
  html[data-page="home"] .landing-instagram {
    min-height: 49px;
    gap: 10px;
    padding: 8px 10px 8px 13px;
    border-radius: 18px;
    font-size: 12px;
  }
  html[data-page="home"] .landing-instagram svg { width: 23px; height: 23px; }
  html[data-page="home"] .landing-instagram strong { font-size: 18px; }
  html[data-page="home"] .landing-instagram-arrow { font-size: 23px; }
  html[data-page="home"] .landing-hero { padding: calc(10px + var(--hero-room) * .06) 0 128px; min-height: calc(100svh - 90px); }
  html[data-page="home"] .landing-copy { display: block; width: calc(100% - 52px); }
  html[data-page="home"] .landing-copy h1 { font-size: clamp(29px, 9.3vw, 56px); letter-spacing: -1px; line-height: 1.13; }
  html[data-page="home"] .landing-subtitle { margin-top: calc(14px + var(--hero-room) * .1); max-width: 94%; font-size: clamp(18px, 4.8vw, 28px); line-height: 1.3; letter-spacing: 0; }
  html[data-page="home"] .landing-platforms { margin-top: calc(18px + var(--hero-room) * .1); gap: 5px; font-size: clamp(10px, 2.7vw, 16px); flex-wrap: nowrap; }
  html[data-page="home"] .landing-platforms > span { gap: 5px; white-space: nowrap; }
  html[data-page="home"] .landing-platforms svg { width: 15px; height: 15px; }
  html[data-page="home"] .landing-showcase { display: block; position: relative; min-height: calc(clamp(174px, 49vw, 330px) + var(--hero-room) * .55); margin-top: 18px; }
  html[data-page="home"] .landing-promises { position: relative; z-index: 1; margin-top: 0; padding-top: calc(12px + var(--hero-room) * .06); gap: calc(13px + var(--hero-room) * .04); }
  html[data-page="home"] .landing-promises li { font-size: clamp(12px, 3.3vw, 19px); gap: 12px; }
  html[data-page="home"] .landing-promises li > span { width: 28px; height: 28px; }
  html[data-page="home"] .landing-promises svg { width: 19px; height: 19px; }
  html[data-page="home"] .landing-app-visual { position: absolute; top: calc(-8px + var(--hero-room) * .25); right: calc(-9% - var(--hero-room) * .16); width: calc(100% + var(--hero-room) * .3); margin: 0; }
  html[data-page="home"] .landing-intro { margin-top: 0; padding-top: calc(19px + var(--hero-room) * .09); font-size: clamp(12px, 3.45vw, 21px); line-height: 1.48; }
  html[data-page="home"] .landing-intro::before { width: 67px; }
  html[data-page="home"] .landing-price-currency { margin-top: calc(12px + var(--hero-room) * .06); font-size: clamp(12px, 2.8vw, 16px); }
  html[data-page="home"] #wa-float-cta { left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); gap: 14px; min-height: 70px; border-radius: 28px; padding: 12px 17px; }
  html[data-page="home"] #wa-float-cta .wa-float-symbol { width: 37px; height: 37px; }
  html[data-page="home"] #wa-float-cta .wa-brand-icon { width: 36px; height: 36px; }
  html[data-page="home"] #wa-float-cta [data-wa-label] { font-size: clamp(12px, 4vw, 18px); letter-spacing: -.25px; }
  html[data-page="home"] #wa-float-cta .wa-campaign-hint { font-size: clamp(12px, 3.4vw, 16px); }
  html[data-page="home"] #wa-float-cta .wa-campaign-arrow { width: 38px; height: 38px; font-size: 36px; }
}
@media (max-width: 500px) {
  html[data-page="home"] {
    --hero-room: clamp(calc(-1 * env(safe-area-inset-bottom)), calc(100svh - 728px - env(safe-area-inset-bottom)), 200px);
  }
}
@media (max-width: 500px) and (min-height: 760px) {
  html[data-page="home"] {
    /* Reservar el alto de la señal de confianza dentro del espacio disponible. */
    --hero-room: clamp(calc(-1 * env(safe-area-inset-bottom)), calc(100svh - 778px - env(safe-area-inset-bottom)), 200px);
  }
  html[data-page="home"] .landing-trust {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 12px;
    display: block;
    width: 150px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #85c9f233;
    border-radius: 12px;
    background: radial-gradient(ellipse at 0 0, #32bfff12, transparent 75%), linear-gradient(135deg, #132d40e6, #081622ed);
    box-shadow: inset 0 1px 0 #c6eeff12, 0 6px 18px #00000020;
    color: #abc3d5;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
  }
  html[data-page="home"] .landing-showcase { min-height: calc(clamp(174px, 49vw, 330px) + var(--hero-room) * .55 + 48px); }
  html[data-page="home"] .landing-app-visual { top: calc(40px + var(--hero-room) * .25); }
  html[data-page="home"] .landing-trust > span { display: block; }
  html[data-page="home"] .landing-trust > span:first-child { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; color: #d6e6f1; font-weight: 500; line-height: 22px; }
  html[data-page="home"] .landing-trust strong { color: #70d4ff; font-size: 20px; font-weight: 600; letter-spacing: -.8px; }
  html[data-page="home"] .landing-hero {
    background:
      radial-gradient(ellipse at 90% 45%, #125a8555, transparent 52%),
      radial-gradient(ellipse at 95% 0, #0b2947, transparent 38%),
      linear-gradient(150deg, #03070c, #030c15 65%, #020c11);
  }
}
@media (max-width: 500px) and (min-height: 820px) {
  html[data-page="home"] .landing-trust { width: 156px; bottom: 20px; padding: 8px 10px; border-radius: 14px; }
  html[data-page="home"] .landing-trust > span:first-child { margin-bottom: 4px; line-height: 28px; }
  html[data-page="home"] .landing-trust strong { font-size: 26px; }
}
@media (max-width: 360px) {
  html[data-page="home"] .header-inner { margin-inline: 20px; }
  html[data-page="home"] .landing-copy { width: calc(100% - 40px); }
  html[data-page="home"] .landing-platforms { font-size: 9px; gap: 4px; }
  html[data-page="home"] .landing-platforms > span { gap: 4px; }
  html[data-page="home"] .landing-platforms svg { width: 13px; height: 13px; }
  html[data-page="home"] .landing-app-visual { right: -14%; }
  html[data-page="home"] #wa-float-cta { padding-inline: 12px; gap: 10px; }
  html[data-page="home"] #wa-float-cta .wa-campaign-arrow { width: 30px; height: 30px; }
}

html[data-page="home"] .landing-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  color: var(--hero-blue);
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .28em; text-transform: uppercase;
}
html[data-page="home"] .landing-eyebrow::before {
  content: ""; width: 36px; height: 1px; background: currentColor;
}
html[data-page="home"] .landing-copy h1 { font-weight: 600; letter-spacing: -2px; }
html[data-page="home"] .landing-subtitle { font-weight: 300; letter-spacing: -.2px; }
@media (max-width: 760px) {
  html[data-page="home"] .landing-eyebrow { font-size: 12px; letter-spacing: .2em; margin-bottom: 14px; }
  html[data-page="home"] .landing-eyebrow::before { width: 24px; }
}

/* Servicios · tarjetas informativas */
html[data-page="home"] .landing-stats article { justify-content: flex-start; padding: 28px 22px 24px; }
html[data-page="home"] .landing-stat-kicker {
  order: -1; margin-bottom: 14px;
  color: #7fc6ff; font: 600 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase;
}
html[data-page="home"] .landing-stat-integrations .landing-stat-kicker { color: #b3adff; }
html[data-page="home"] .landing-stat-icon { order: -2; }
html[data-page="home"] .landing-stat-list {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0; width: 100%;
  border-top: 1px solid #2c5d8a55;
  display: flex; flex-direction: column; gap: 9px; text-align: left;
}
html[data-page="home"] .landing-stat-list li {
  position: relative; padding-left: 20px;
  color: #d4e2ef; font-size: 14px; line-height: 1.4;
}
html[data-page="home"] .landing-stat-list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 2px; background: linear-gradient(135deg, #1bcdf3, #7d78ff);
}
@media (max-width: 700px) {
  html[data-page="home"] .landing-stat-list, html[data-page="home"] .landing-stat-kicker { display: none; }
}

/* Servicios · 6 tarjetas (3x2 en desktop, 2x3 en mobile) */
html[data-page="home"] .rl-landing .landing-stats { row-gap: 20px; }
html[data-page="home"] .rl-landing .landing-stats article strong,
html[data-page="home"] .rl-landing .landing-stats article:nth-of-type(n) strong {
  font-size: 34px; white-space: normal; letter-spacing: -1px; padding: 0;
}
html[data-page="home"] .rl-landing .landing-stats article .landing-stat-icon { width: 58px; height: 58px; }
html[data-page="home"] .rl-landing .landing-stats .landing-stat-ai .landing-stat-icon { color: #a09cff; border-color: #7166b86b; background: linear-gradient(145deg, #141022, #000); }
html[data-page="home"] .rl-landing .landing-stats .landing-stat-ai .landing-stat-kicker { color: #b3adff; }
@media (max-width: 700px) {
  html[data-page="home"] .rl-landing .landing-stats article strong,
  html[data-page="home"] .rl-landing .landing-stats article:nth-of-type(n) strong { font-size: clamp(18px, 5.4vw, 24px); letter-spacing: -.5px; overflow-wrap: anywhere; }
  html[data-page="home"] .rl-landing .landing-stats article { min-height: 168px; }
}