/* PREDIA — estilos compartidos de la landing.
 *
 * Estaban EN LÍNEA dentro de index.html. Se extraen aquí para que la página de
 * precios use exactamente el mismo estilo y no una copia que se va separando:
 * el día que alguien cambie un color, lo cambia en un sitio.
 *
 * Contenido idéntico al bloque que había en index.html, sin tocar una regla.
 * Lo específico de cada página va en su propio <style>, DESPUÉS de este enlace.
 */

    /* ============================================================
   PREDIA · Landing oficial
   Marca: #071D4D primario · #147DF5 secundario · #147DF5 acento
   Secciones alternadas claro / oscuro · estética comercial premium
   ============================================================ */

    :root {
      --primary: #147DF5;
      --primary-700: #0A5AC0;
      --secondary: #4B9CFF;
      --accent: #147DF5;
      --accent-600: #0A5AC0;

      /* Oscuro */
      --d-bg: #030D22;
      --d-bg2: #06183D;
      --d-surface: #0A1F46;
      --d-surface2: #0D2856;
      --d-text: #eaf2fb;
      --d-soft: #a9c0d6;
      --d-dim: #6f8aa3;
      --d-line: rgba(125, 172, 219, .16);
      --d-line2: rgba(125, 172, 219, .3);

      /* Claro */
      --l-bg: #F3F6FA;
      --l-bg2: #ffffff;
      --l-surface: #ffffff;
      --l-text: #071D4D;
      --l-soft: #5F6B7A;
      --l-dim: #8A96A6;
      --l-line: #e2e9f2;
      --l-line2: #cdd9e8;

      --grad-brand: linear-gradient(125deg, var(--secondary), var(--primary));
      --grad-accent: linear-gradient(125deg, #4B9CFF, var(--accent));
      --grad-hero: linear-gradient(135deg, #0A2050 0%, #06183D 55%, #030D22 100%);

      --radius: 18px;
      --radius-lg: 26px;
      --maxw: 1200px;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --h1: 'Poppins', Arial, Helvetica, Roboto, sans-serif;
      --body: 'Inter', Arial, Helvetica, Roboto, sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }
    }

    body {
      font-family: var(--body);
      background: var(--d-bg);
      color: var(--d-text);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

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

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

    ul {
      list-style: none
    }

    .container {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 24px
    }

    h1,
    h2,
    h3 {
      font-family: var(--h1);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -.02em
    }

    .eyebrow {
      font-family: var(--h1);
      font-weight: 700;
      font-size: .76rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: .55rem;
    }

    .eyebrow::before {
      content: "";
      width: 26px;
      height: 2px;
      background: var(--grad-accent);
      border-radius: 2px
    }

    .grad-text {
      background: var(--grad-accent);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .grad-text-blue {
      background: var(--grad-brand);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    /* ===== Secciones / temas ===== */
    .section {
      padding: clamp(72px, 9vw, 128px) 0;
      position: relative;
      overflow: hidden
    }

    .section-head {
      max-width: 680px;
      margin-bottom: 56px
    }

    .section-head h2 {
      font-size: clamp(2rem, 4.2vw, 3rem);
      margin: 16px 0 14px
    }

    .center {
      margin-left: auto;
      margin-right: auto;
      text-align: center
    }

    .center.section-head p {
      margin-left: auto;
      margin-right: auto
    }

    /* Oscuro (por defecto el body ya es oscuro) */
    .theme-dark {
      background: var(--d-bg);
      color: var(--d-text)
    }

    .theme-dark .section-head p,
    .theme-dark .lead {
      color: var(--d-soft)
    }

    /* Claro */
    .theme-light {
      background: var(--l-bg);
      color: var(--l-text)
    }

    .theme-light h1,
    .theme-light h2,
    .theme-light h3 {
      color: var(--l-text)
    }

    .theme-light .section-head p {
      color: var(--l-soft)
    }

    .theme-light .eyebrow {
      color: var(--accent-600)
    }

    /* Separador diagonal sutil entre temas */
    .theme-light::before,
    .theme-light::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 60px;
      pointer-events: none
    }

    /* ===== Botones ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      font-family: var(--h1);
      font-weight: 700;
      font-size: .95rem;
      padding: .95rem 1.6rem;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s;
      white-space: nowrap;
    }

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

    .btn-primary {
      background: var(--grad-accent);
      color: #04210f;
      box-shadow: 0 14px 32px -12px rgba(20, 125, 245, .65)
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 46px -14px rgba(20, 125, 245, .85)
    }

    .btn-blue {
      background: var(--grad-brand);
      color: #fff;
      box-shadow: 0 14px 32px -12px rgba(20, 125, 245, .7)
    }

    .btn-blue:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 46px -14px rgba(20, 125, 245, .85)
    }

    .btn-ghost-d {
      background: rgba(255, 255, 255, .05);
      color: var(--d-text);
      border-color: var(--d-line2)
    }

    .btn-ghost-d:hover {
      transform: translateY(-3px);
      border-color: var(--secondary);
      background: rgba(20, 125, 245, .18)
    }

    .btn-ghost-l {
      background: #fff;
      color: var(--primary);
      border-color: var(--l-line2)
    }

    .btn-ghost-l:hover {
      transform: translateY(-3px);
      border-color: var(--secondary);
      box-shadow: 0 14px 30px -16px rgba(31, 78, 120, .4)
    }

    /* ===== Header ===== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      transition: background .4s var(--ease), box-shadow .4s, backdrop-filter .4s
    }

    .header.scrolled {
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(16px);
      box-shadow: 0 8px 30px -18px rgba(20, 40, 60, .4)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .7rem;
      font-family: var(--h1);
      font-weight: 800;
      font-size: 1.32rem;
      letter-spacing: -.01em;
      color: var(--d-text);
      transition: color .35s
    }

    .header.scrolled .brand {
      color: var(--primary)
    }


    /* Logo oficial (imagen). La cabecera y el pie van sobre fondo oscuro, así que
       usan la versión invertida. La altura manda; el ancho se ajusta solo. */

    /* La cabecera es transparente sobre el héroe oscuro y se vuelve blanca al
       hacer scroll. El logo tiene que cambiar con ella: la versión invertida
       desaparecía sobre el fondo claro. Se alternan por opacidad, sin JS. */
    .brand {
      position: relative
    }

    .brand .logo-claro {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .35s var(--ease)
    }

    .brand .logo-oscuro {
      transition: opacity .35s var(--ease)
    }

    .header.scrolled .brand .logo-oscuro {
      opacity: 0
    }

    .header.scrolled .brand .logo-claro {
      opacity: 1
    }

    /* Mismo problema con el botón fantasma: texto blanco sobre fondo blanco. */
    .header.scrolled .btn-ghost-d {
      background: rgba(7, 29, 77, .04);
      color: var(--l-text);
      border-color: rgba(7, 29, 77, .22)
    }

    .header.scrolled .btn-ghost-d:hover {
      border-color: var(--primary);
      background: rgba(20, 125, 245, .1);
      color: var(--primary)
    }

    .logo-oficial {
      height: 54px;
      width: auto;
      display: block
    }

    .footer-about .logo-oficial {
      height: 58px
    }

    @media (max-width:640px) {
      .logo-oficial {
        height: 40px
      }
    }

    .brand .mark {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--grad-brand);
      box-shadow: 0 8px 22px -8px rgba(20, 125, 245, .85);
      flex-shrink: 0
    }

    .brand .mark svg {
      width: 22px;
      height: 22px
    }

    .brand small {
      font-family: var(--body);
      font-weight: 500;
      font-size: .6rem;
      letter-spacing: .18em;
      color: var(--d-dim);
      display: block;
      margin-top: -3px;
      transition: color .35s
    }

    .header.scrolled .brand small {
      color: var(--l-dim)
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem
    }


    .nav-links a {
      color: var(--d-soft);
      font-size: .93rem;
      font-weight: 500;
      transition: color .25s;
      position: relative
    }

    .header.scrolled .nav-links a {
      color: var(--l-soft)
    }

    .nav-links a:hover {
      color: var(--d-text)
    }

    .header.scrolled .nav-links a:hover {
      color: var(--primary)
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      height: 2px;
      width: 0;
      background: var(--grad-accent);
      transition: width .3s var(--ease)
    }

    .nav-links a:hover::after {
      width: 100%
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 1rem
    }

    /* ===== La barra del menú, compacta SIEMPRE =====
       El contenedor está topado en 1200 px: la fila nunca pasa de 1152 px por
       ancho que sea el monitor, así que NO existe una pantalla donde la versión
       holgada quepa. Con la tipografía de antes la suma daba ~1139 px —logotipo
       152, siete enlaces ~681, dos botones ~306— y los enlaces acababan tocando
       los botones. Estas reglas van DESPUÉS de las básicas a propósito: una
       versión anterior las puso antes y la regla base las pisaba en silencio. */
    .nav-links { gap: 1.25rem }

    .nav-links a { font-size: .86rem }

    /* Solo los botones de la cabecera. Los del resto del sitio no se tocan. */
    .nav-cta .btn {
      padding: .72rem 1.15rem;
      font-size: .88rem
    }

    .burger {
      display: none;
      background: none;
      border: 0;
      cursor: pointer;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      color: var(--d-text)
    }

    .header.scrolled .burger {
      color: var(--primary)
    }

    .burger:hover {
      background: rgba(255, 255, 255, .08)
    }

    /* ===== HERO (oscuro) ===== */
    .hero {
      position: relative;
      padding: 150px 0 96px;
      background: var(--grad-hero);
      /* Los orbes decorativos se salen del viewport a propósito para que el
         degradado sangre por los bordes. `.section` y `.cta` ya los recortan;
         el hero no, y era el único sitio por el que la página scrolleaba de
         lado — muy visible en móvil. */
      overflow: hidden
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: .55;
      background-image: linear-gradient(var(--d-line) 1px, transparent 1px), linear-gradient(90deg, var(--d-line) 1px, transparent 1px);
      background-size: 60px 60px;
      -webkit-mask-image: radial-gradient(circle at 72% 30%, #000 0%, transparent 70%);
      mask-image: radial-gradient(circle at 72% 30%, #000 0%, transparent 70%);
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: 0;
      opacity: .5;
      animation: float 15s ease-in-out infinite
    }

    .orb-1 {
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, var(--secondary), transparent 70%);
      top: -80px;
      right: -60px
    }

    .orb-2 {
      width: 340px;
      height: 340px;
      background: radial-gradient(circle, var(--accent), transparent 70%);
      bottom: -100px;
      left: -80px;
      animation-delay: -5s
    }

    @keyframes float {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(0, -32px)
      }
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1.12fr;
      gap: 54px;
      align-items: center
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      padding: .5rem 1rem;
      border-radius: 999px;
      background: rgba(20, 125, 245, .14);
      border: 1px solid rgba(20, 125, 245, .45);
      color: #8FC2FF;
      font-size: .82rem;
      font-weight: 600;
      margin-bottom: 26px
    }

    .badge .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse 2.2s infinite
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(20, 125, 245, .55)
      }

      70% {
        box-shadow: 0 0 0 12px rgba(20, 125, 245, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(20, 125, 245, 0)
      }
    }

    .hero h1 {
      font-size: clamp(2.6rem, 6vw, 4.5rem);
      font-weight: 900;
      margin-bottom: 22px
    }

    .hero .lead {
      font-size: clamp(1.08rem, 2vw, 1.3rem);
      color: var(--d-soft);
      max-width: 520px;
      margin-bottom: 36px
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 32px
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      color: var(--d-dim);
      font-size: .86rem
    }

    .hero-meta span {
      display: inline-flex;
      align-items: center;
      gap: .5rem
    }

    .hero-meta svg {
      width: 16px;
      height: 16px;
      color: var(--accent)
    }

    /* ===== Mockup de app realista ===== */
    .app-shot {
      position: relative;
      perspective: 1600px
    }

    .app-window {
      background: #0e2236;
      border: 1px solid var(--d-line2);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03) inset;
      transform: rotateY(-9deg) rotateX(3deg) rotate(.5deg);
      transform-style: preserve-3d;
      transition: transform .6s var(--ease);
    }

    .app-shot:hover .app-window {
      transform: rotateY(-4deg) rotateX(1deg)
    }

    .app-bar {
      display: flex;
      align-items: center;
      gap: .45rem;
      padding: 11px 14px;
      background: #0b1c2e;
      border-bottom: 1px solid var(--d-line)
    }

    .app-bar i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: block;
      background: var(--d-line2)
    }

    .app-bar i:nth-child(1) {
      background: #e25c5c
    }

    .app-bar i:nth-child(2) {
      background: #e2b04e
    }

    .app-bar i:nth-child(3) {
      background: var(--accent)
    }

    .app-bar .url {
      margin-left: 10px;
      font-size: .7rem;
      color: var(--d-dim);
      background: rgba(255, 255, 255, .05);
      padding: 3px 12px;
      border-radius: 8px;
      letter-spacing: .03em
    }

    .app-body {
      display: grid;
      grid-template-columns: 62px 1fr
    }

    .app-side {
      background: #0a1929;
      padding: 16px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      border-right: 1px solid var(--d-line)
    }

    .app-side .logo {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: var(--grad-brand);
      display: grid;
      place-items: center;
      margin-bottom: 6px
    }

    .app-side .logo svg {
      width: 18px;
      height: 18px
    }

    .app-side .nav-ic {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: var(--d-dim)
    }

    .app-side .nav-ic svg {
      width: 18px;
      height: 18px
    }

    .app-side .nav-ic.on {
      background: rgba(20, 125, 245, .22);
      color: #7fb6e8
    }

    .app-main {
      padding: 16px
    }

    .app-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px
    }

    .app-head h4 {
      font-family: var(--h1);
      font-size: .95rem;
      color: var(--d-text)
    }

    .app-head .av {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--grad-accent)
    }

    .app-search {
      font-size: .64rem;
      color: var(--d-dim);
      background: rgba(255, 255, 255, .05);
      padding: 5px 10px;
      border-radius: 7px
    }

    .app-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      margin-bottom: 12px
    }

    .kpi {
      background: rgba(255, 255, 255, .035);
      border: 1px solid var(--d-line);
      border-radius: 11px;
      padding: 10px
    }

    .kpi b {
      font-family: var(--h1);
      font-size: 1.1rem;
      display: block;
      line-height: 1;
      color: var(--d-text)
    }

    .kpi small {
      font-size: .58rem;
      color: var(--d-dim);
      letter-spacing: .03em
    }

    .kpi .up {
      color: #8FC2FF;
      font-size: .58rem;
      font-weight: 600
    }

    .app-chart {
      height: 96px;
      display: flex;
      align-items: flex-end;
      gap: 7px;
      padding: 12px;
      background: rgba(255, 255, 255, .035);
      border: 1px solid var(--d-line);
      border-radius: 11px;
      margin-bottom: 12px
    }

    .bar {
      flex: 1;
      border-radius: 4px 4px 0 0;
      background: var(--grad-brand);
      opacity: .9;
      animation: grow 1.1s var(--ease) backwards
    }

    .bar:nth-child(even) {
      background: var(--grad-accent)
    }

    @keyframes grow {
      from {
        height: 0 !important;
        opacity: 0
      }
    }

    .app-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .prop {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, .035);
      border: 1px solid var(--d-line);
      border-radius: 11px;
      padding: 8px 10px
    }

    .prop .thumb {
      width: 40px;
      height: 34px;
      border-radius: 7px;
      flex-shrink: 0;
      background-size: cover;
      background-position: center
    }

    .prop .t1 {
      background: linear-gradient(135deg, #147DF5, #071D4D)
    }

    .prop .t2 {
      background: linear-gradient(135deg, #4B9CFF, #147DF5)
    }

    .prop .t3 {
      background: linear-gradient(135deg, #4a7fb0, #2c4a66)
    }

    .prop .info {
      flex: 1;
      min-width: 0
    }

    .prop .info b {
      font-size: .74rem;
      color: var(--d-text);
      display: block;
      font-family: var(--h1)
    }

    .prop .info small {
      font-size: .62rem;
      color: var(--d-dim)
    }

    .prop .price {
      font-family: var(--h1);
      font-size: .74rem;
      color: #8FC2FF;
      white-space: nowrap
    }

    .tagpill {
      font-size: .55rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      letter-spacing: .04em
    }

    .tagpill.green {
      background: rgba(20, 125, 245, .18);
      color: #8FC2FF
    }

    .tagpill.blue {
      background: rgba(20, 125, 245, .2);
      color: #8cc0ee
    }

    .tagpill.amber {
      background: rgba(226, 176, 78, .18);
      color: #e7c474
    }

    .float-card {
      position: absolute;
      background: rgba(8, 21, 34, .92);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(20, 125, 245, .45);
      border-radius: 14px;
      padding: 11px 15px;
      box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
      display: flex;
      align-items: center;
      gap: .7rem;
      z-index: 3
    }

    .float-card svg {
      width: 30px;
      height: 30px;
      color: var(--accent)
    }

    .float-card b {
      font-family: var(--h1);
      font-size: 1rem;
      color: var(--d-text)
    }

    .float-card small {
      display: block;
      font-size: .66rem;
      color: var(--d-dim)
    }

    .fc-1 {
      right: -24px;
      top: 30%;
      animation: float 9s ease-in-out infinite
    }

    .fc-2 {
      left: -30px;
      bottom: 8%;
      animation: float 11s ease-in-out infinite -3s
    }

    /* Trust strip */
    .trust {
      margin-top: 64px;
      position: relative;
      z-index: 2
    }

    .trust p {
      text-align: center;
      color: var(--d-dim);
      font-size: .76rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: 20px
    }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 36px;
      opacity: .78
    }

    .trust-row span {
      font-family: var(--h1);
      font-weight: 700;
      color: var(--d-soft);
      font-size: .95rem;
      display: inline-flex;
      align-items: center;
      gap: .5rem
    }

    .trust-row span svg {
      width: 18px;
      height: 18px;
      color: var(--secondary)
    }

    /* ===== Grids ===== */
    .grid {
      display: grid;
      gap: 22px
    }

    .cols-2 {
      grid-template-columns: repeat(2, 1fr)
    }

    .cols-3 {
      grid-template-columns: repeat(3, 1fr)
    }

    .cols-4 {
      grid-template-columns: repeat(4, 1fr)
    }

    /* Card claro */
    .theme-light .card {
      background: var(--l-surface);
      border: 1px solid var(--l-line);
      box-shadow: 0 18px 40px -28px rgba(20, 40, 60, .4)
    }

    .theme-light .card:hover {
      border-color: var(--l-line2);
      box-shadow: 0 28px 60px -28px rgba(20, 40, 60, .55)
    }

    .theme-light .card h3 {
      color: var(--l-text)
    }

    .theme-light .card p {
      color: var(--l-soft)
    }

    /* Card oscuro */
    .theme-dark .card {
      background: linear-gradient(160deg, var(--d-surface), var(--d-bg2));
      border: 1px solid var(--d-line)
    }

    .theme-dark .card:hover {
      border-color: var(--d-line2)
    }

    .theme-dark .card p {
      color: var(--d-soft)
    }

    .card {
      border-radius: var(--radius);
      padding: 30px;
      position: relative;
      overflow: hidden;
      transition: transform .4s var(--ease), border-color .4s, box-shadow .4s
    }

    .card:hover {
      transform: translateY(-6px)
    }

    .card h3 {
      font-size: 1.18rem;
      margin-bottom: 10px;
      font-weight: 700
    }

    .card p {
      font-size: .96rem
    }

    .card .ic {
      width: 54px;
      height: 54px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      margin-bottom: 18px
    }

    .card .ic svg {
      width: 26px;
      height: 26px
    }

    /* Qué resuelve (claro, acento de marca).
       Era rojo de alarma, en juego con una copia que nombraba dolencias. Cambiar
       solo las palabras habría dejado la sección diciendo «problema» en color. */
    .solu .card .ic {
      background: #e8f1ff;
      color: #147DF5
    }

    .solu .card::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 4px;
      background: linear-gradient(180deg, #147DF5, transparent)
    }

    /* Beneficios (oscuro, acento verde) */
    .bene .card .ic {
      background: rgba(20, 125, 245, .14);
      border: 1px solid rgba(20, 125, 245, .4);
      color: #8FC2FF
    }

    .bene .card::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 4px;
      background: var(--grad-accent)
    }

    /* Tech (claro, acento azul) */
    .tech-feat .ic {
      background: #e8f1fa;
      color: var(--secondary)
    }

    /* ===== Segmentos (claro) ===== */
    .seg-card {
      background: var(--l-surface);
      border: 1px solid var(--l-line);
      border-radius: var(--radius-lg);
      padding: 34px 30px;
      transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 44px -30px rgba(20, 40, 60, .45)
    }

    .seg-card:hover {
      transform: translateY(-8px);
      border-color: var(--accent);
      box-shadow: 0 34px 70px -32px rgba(31, 78, 120, .5)
    }

    .seg-card .tag {
      font-family: var(--h1);
      font-weight: 700;
      font-size: .72rem;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--accent-600);
      margin-bottom: 16px;
      display: block
    }

    .seg-card h3 {
      font-size: 1.45rem;
      margin-bottom: 12px;
      color: var(--l-text)
    }

    .seg-card p {
      color: var(--l-soft);
      margin-bottom: 22px;
      font-size: .97rem
    }

    .seg-list li {
      display: flex;
      gap: .7rem;
      align-items: flex-start;
      color: var(--l-soft);
      font-size: .92rem;
      padding: 6px 0
    }

    .seg-list svg {
      width: 18px;
      height: 18px;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 3px
    }

    .seg-cover {
      height: 120px;
      border-radius: 14px;
      margin-bottom: 22px;
      position: relative;
      overflow: hidden
    }

    .seg-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 60%)
    }

    .seg-cover.c1 {
      background: linear-gradient(135deg, #147DF5, #071D4D)
    }

    .seg-cover.c2 {
      background: linear-gradient(135deg, #071D4D, #0e2236)
    }

    .seg-cover.c3 {
      background: linear-gradient(135deg, #147DF5, #071D4D)
    }

    .seg-cover svg {
      position: absolute;
      right: 14px;
      bottom: 12px;
      width: 42px;
      height: 42px;
      color: rgba(255, 255, 255, .85);
      z-index: 1
    }

    /* ===== Por qué (oscuro) ===== */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px
    }

    .why-card {
      text-align: center;
      padding: 34px 22px;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--d-line);
      transition: transform .4s var(--ease), border-color .4s
    }

    .why-card:hover {
      transform: translateY(-6px);
      border-color: var(--secondary)
    }

    .why-card .big {
      font-family: var(--h1);
      font-weight: 900;
      font-size: 2.3rem;
      line-height: 1;
      margin-bottom: 10px
    }

    .why-card p {
      color: var(--d-soft);
      font-size: .92rem
    }

    .why-banner {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center;
      padding: 22px 28px;
      border-radius: var(--radius);
      background: linear-gradient(120deg, rgba(31, 78, 120, .55), rgba(20, 125, 245, .2));
      border: 1px solid var(--d-line2);
      font-family: var(--h1);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--d-text)
    }

    .why-banner svg {
      width: 24px;
      height: 24px;
      color: var(--accent)
    }

    /* ===== Tecnología (claro) ===== */
    .tech-wrap {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 52px;
      align-items: center
    }

    .tech-points li {
      display: flex;
      gap: .8rem;
      padding: 11px 0;
      color: var(--l-soft);
      font-size: .99rem;
      align-items: flex-start
    }

    .tech-points svg {
      width: 20px;
      height: 20px;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 4px
    }

    .tech-points b {
      color: var(--l-text);
      font-weight: 600
    }

    .tech-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 18px
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .7rem 1.05rem;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--l-line);
      font-weight: 600;
      font-size: .9rem;
      color: var(--l-text);
      box-shadow: 0 10px 24px -20px rgba(20, 40, 60, .5);
      transition: transform .3s var(--ease), border-color .3s, box-shadow .3s
    }

    .chip:hover {
      transform: translateY(-4px);
      border-color: var(--accent);
      box-shadow: 0 18px 36px -22px rgba(20, 125, 245, .5)
    }

    .chip svg {
      width: 18px;
      height: 18px;
      color: var(--secondary)
    }

    .tech-card {
      background: linear-gradient(145deg, var(--primary), #0e2236);
      border-radius: var(--radius-lg);
      padding: 34px;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 70px -34px rgba(31, 78, 120, .7)
    }

    .tech-card::before {
      content: "";
      position: absolute;
      right: -50px;
      top: -50px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(20, 125, 245, .4), transparent 70%)
    }

    .tech-card .ic {
      width: 54px;
      height: 54px;
      border-radius: 15px;
      background: rgba(255, 255, 255, .12);
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      position: relative
    }

    .tech-card .ic svg {
      width: 26px;
      height: 26px;
      color: #8FC2FF
    }

    .tech-card h3 {
      font-size: 1.3rem;
      margin-bottom: 10px;
      color: #fff;
      position: relative
    }

    .tech-card p {
      color: #cfe0f0;
      font-size: .96rem;
      position: relative
    }

    .tech-mini {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 24px;
      position: relative
    }

    .tech-mini .m {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 12px;
      padding: 14px
    }

    .tech-mini .m b {
      font-family: var(--h1);
      font-size: 1.3rem;
      color: #fff;
      display: block
    }

    .tech-mini .m small {
      color: #a9c8e4;
      font-size: .76rem
    }

    /* ===== CSOFT (oscuro) ===== */
    .csoft-wrap {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 48px;
      align-items: center
    }

    .csoft-card {
      background: linear-gradient(160deg, var(--d-surface), var(--d-bg2));
      border: 1px solid var(--d-line2);
      border-radius: var(--radius-lg);
      padding: 38px;
      position: relative;
      overflow: hidden
    }

    .csoft-card::before {
      content: "";
      position: absolute;
      right: -60px;
      top: -60px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(20, 125, 245, .3), transparent 70%)
    }

    .csoft-logo {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin-bottom: 22px;
      position: relative
    }

    .csoft-logo .mark {
      width: 48px;
      height: 48px;
      border-radius: 13px;
      background: var(--grad-brand);
      display: grid;
      place-items: center
    }

    .csoft-logo .mark svg {
      width: 26px;
      height: 26px
    }

    .csoft-logo b {
      font-family: var(--h1);
      font-weight: 800;
      font-size: 1.18rem;
      color: var(--d-text)
    }

    .csoft-reallogo {
      height: 42px;
      width: auto;
      display: block;
      transition: opacity .3s, transform .3s
    }

    .csoft-link {
      display: inline-flex
    }

    .csoft-link:hover .csoft-reallogo {
      opacity: .85;
      transform: translateY(-2px)
    }

    .ilink {
      color: #8FC2FF;
      font-weight: 600;
      border-bottom: 1px solid rgba(20, 125, 245, .45);
      transition: color .25s
    }

    .ilink:hover {
      color: #D6E8FF
    }

    .theme-light .ilink {
      color: var(--accent-600);
      border-bottom-color: rgba(20, 125, 245, .4)
    }

    .csoft-logo small {
      display: block;
      font-size: .64rem;
      color: var(--d-dim);
      letter-spacing: .12em
    }

    .csoft-card>p {
      color: var(--d-soft);
      position: relative
    }

    .csoft-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 26px;
      position: relative
    }

    .csoft-stats .s {
      padding: 18px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--d-line)
    }

    .csoft-stats .s b {
      font-family: var(--h1);
      font-weight: 800;
      font-size: 1.2rem;
      color: #8FC2FF;
      display: block
    }

    .csoft-stats .s small {
      color: var(--d-dim);
      font-size: .8rem
    }

    .csoft-feats li {
      display: flex;
      gap: .9rem;
      align-items: flex-start;
      padding: 14px 0;
      border-bottom: 1px solid var(--d-line)
    }

    .csoft-feats li:last-child {
      border-bottom: 0
    }

    .csoft-feats svg {
      width: 22px;
      height: 22px;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 2px
    }

    .csoft-feats b {
      color: var(--d-text);
      font-weight: 700;
      display: block;
      font-family: var(--h1);
      margin-bottom: 2px
    }

    .csoft-feats span {
      color: var(--d-soft);
      font-size: .92rem
    }

    /* ===== CTA final (gradiente vibrante) ===== */
    .cta {
      padding: clamp(72px, 9vw, 120px) 0;
      position: relative;
      overflow: hidden;
      background: var(--d-bg)
    }

    .cta-box {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: linear-gradient(135deg, var(--primary) 0%, #1a5e8f 45%, var(--accent-600) 130%);
      padding: clamp(44px, 6vw, 76px);
      text-align: center;
      box-shadow: 0 40px 90px -40px rgba(31, 78, 120, .8)
    }

    .cta-box .hero-grid {
      opacity: .35
    }

    .cta-box .orb-2 {
      opacity: .45
    }

    .cta-inner {
      position: relative;
      z-index: 2;
      max-width: 700px;
      margin: 0 auto
    }

    /* Los textos de este bloque son cortos y quedaban con la última palabra
       sola en su renglón («…antes que / nadie»). `balance` reparte las líneas
       en vez de llenar la primera hasta el borde. */
    .cta-box h2,
    .cta-box>.cta-inner>p,
    .form-note,
    .cta-secondary {
      text-wrap: balance
    }

    .cta-inner .eyebrow {
      color: #D6E8FF;
      justify-content: center
    }

    .cta-box h2 {
      font-size: clamp(2.1rem, 4.6vw, 3.4rem);
      margin: 16px 0 14px;
      color: #fff
    }

    .cta-box p {
      color: #dcebf6;
      font-size: 1.08rem;
      margin-bottom: 32px
    }

    .cta-box p b {
      color: #fff
    }

    /* ---- Evolucionamos contigo ---- */
    .evo-box {
      text-align: center;
      max-width: 1000px;
      margin: 0 auto
    }

    .evo-lead {
      max-width: 720px;
      margin: 14px auto 0;
      font-size: 1.08rem;
      line-height: 1.65;
      color: rgba(255, 255, 255, .86)
    }

    .evo-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
      margin-top: 40px;
      text-align: left
    }

    .evo-card {
      padding: 26px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .05)
    }

    .evo-card h3 {
      font-family: var(--h1);
      font-size: 1.02rem;
      margin-bottom: 10px;
      color: #fff
    }

    .evo-card p {
      font-size: .92rem;
      line-height: 1.6;
      color: rgba(255, 255, 255, .78)
    }

    /* ---- Contáctanos ------------------------------------------------------
       Dos caminos con el MISMO peso visual, no un formulario y una nota al
       margen. En una feria la mayoría no llena formularios: saca el celular y
       escribe por WhatsApp. Darle a ese camino media pantalla es reconocer cómo
       contacta la gente de verdad. */
    /* El bloque CTA nació para un titular centrado de 700 px. Dos columnas con
       campos de formulario no caben ahí: los correos salían cortados y las
       etiquetas partidas en tres renglones. Este bloque se ensancha, y solo el
       texto de arriba se queda estrecho para que siga leyéndose bien. */
    #contacto .cta-inner {
      max-width: 1000px
    }

    #contacto .cta-inner>p {
      max-width: 620px;
      margin-left: auto;
      margin-right: auto
    }

    .contacto-grid {
      display: grid;
      grid-template-columns: 1.3fr .8fr;
      gap: 22px;
      margin-top: 36px;
      text-align: left;
      /* Cada tarjeta mide lo que mide su contenido. Estirándolas a la misma
         altura, la del formulario quedaba con un hueco muerto bajo el botón. */
      align-items: start
    }

    /* El formulario necesita su propia superficie: sobre el degradado del bloque
       los campos flotaban y se leían mal. */
    .form-contacto {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 14px;
      align-content: start;
      /* Cada fila alinea por el campo, no por la etiqueta: si una etiqueta
         ocupa dos renglones y la de al lado uno, los dos campos siguen a la
         misma altura. */
      align-items: end;
      padding: 28px;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(3, 13, 34, .38);
      backdrop-filter: blur(6px)
    }

    /* Antes esto era `.campo:nth-child(1)`: bastaba mover un campo de sitio para
       que el ancho saltara al equivocado. Ahora lo dice el marcado. */
    .campo--ancho,
    .form-contacto .campo-consent,
    .form-contacto button,
    .form-contacto .form-msg {
      grid-column: 1 / -1
    }

    .campo label {
      display: block;
      font-size: .73rem;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: 7px;
      color: var(--d-soft)
    }

    .campo label .req {
      color: var(--secondary);
      margin-left: 2px
    }

    .campo input,
    .campo select {
      width: 100%;
      min-height: 46px;
      padding: .8rem 1rem;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .22);
      background-color: rgba(3, 13, 34, .55);
      color: #fff;
      font-family: var(--body);
      font-size: .95rem;
      /* Hace que el desplegable nativo y el relleno automático se pinten en
         oscuro. Sin esto, en Windows el menú del select sale blanco sobre
         blanco y parece roto. */
      color-scheme: dark;
      transition: border-color .25s, box-shadow .25s, background-color .25s
    }

    .campo input::placeholder {
      color: var(--d-dim)
    }

    /* El relleno automático de Chrome pinta el campo de amarillo y el texto de
       negro: el formulario se veía averiado justo después de que el navegador
       ayudara. */
    .campo input:-webkit-autofill,
    .campo input:-webkit-autofill:focus {
      -webkit-text-fill-color: #fff;
      -webkit-box-shadow: 0 0 0 1000px #0A1F46 inset;
      caret-color: #fff
    }

    /* Flecha propia: la nativa desaparece sobre fondo oscuro. */
    .campo select {
      appearance: none;
      -webkit-appearance: none;
      padding-right: 42px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c0d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 18px;
      cursor: pointer
    }

    .campo input:focus,
    .campo select:focus {
      outline: none;
      border-color: var(--secondary);
      background-color: rgba(3, 13, 34, .75);
      box-shadow: 0 0 0 3px rgba(75, 156, 255, .3)
    }

    .campo input[aria-invalid="true"],
    .campo select[aria-invalid="true"] {
      border-color: #FF9B93;
      box-shadow: 0 0 0 3px rgba(255, 120, 110, .22)
    }

    .campo-consent {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      font-size: .84rem;
      line-height: 1.55;
      color: var(--d-soft);
      cursor: pointer;
      padding: 4px 0
    }

    .campo-consent input {
      margin-top: 2px;
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      accent-color: var(--secondary);
      cursor: pointer
    }

    .campo-consent a {
      color: #fff;
      font-weight: 600;
      border-bottom: 1px solid rgba(255, 255, 255, .4)
    }

    .campo-consent a:hover {
      border-bottom-color: #fff
    }

    /* La trampa antibots. Fuera de pantalla en vez de display:none porque
       algunos bots ignoran los campos ocultos, y una persona con lector de
       pantalla la salta por el aria-hidden del contenedor. */
    .trampa {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden
    }

    .form-contacto .btn-primary {
      background: #fff;
      color: var(--primary);
      width: 100%;
      justify-content: center;
      padding: 1rem 1.5rem;
      margin-top: 2px
    }

    .form-contacto .btn-primary:hover {
      background: #eaf3ff
    }

    .form-contacto .btn-primary:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none
    }

    /* El mensaje de error no puede ser una línea gris más: si el envío falla, la
       persona tiene que enterarse. */
    .form-contacto .form-msg {
      margin: 0;
      padding: 11px 14px;
      border-radius: 11px;
      font-family: var(--body);
      font-size: .88rem;
      font-weight: 500;
      line-height: 1.5
    }

    /* Sobre el degradado azul del bloque, un tinte translúcido no se distingue
       del fondo: el aviso tenía que ser opaco para leerse como aviso. */
    .form-contacto .form-msg.ok {
      color: #0B3D6B;
      background: #DCEDFF;
      border-left: 4px solid var(--primary)
    }

    .form-contacto .form-msg.err {
      color: #7A1A12;
      background: #FFE2DE;
      border-left: 4px solid #E5544A
    }

    /* ---- Escríbenos directo ---- */
    .contacto-directo {
      display: flex;
      flex-direction: column;
      padding: 28px;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, .18);
      background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04))
    }

    .contacto-directo h3 {
      font-family: var(--h1);
      font-weight: 700;
      font-size: 1.12rem;
      color: #fff
    }

    .canal-intro {
      margin: 6px 0 20px;
      font-size: .88rem;
      line-height: 1.55;
      color: var(--d-soft)
    }

    .canal {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 14px;
      margin-bottom: 10px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(3, 13, 34, .3);
      transition: border-color .25s var(--ease), background .25s, transform .25s var(--ease)
    }

    .canal:hover {
      border-color: rgba(255, 255, 255, .4);
      background: rgba(3, 13, 34, .5);
      transform: translateX(3px)
    }

    .canal-icono {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: rgba(255, 255, 255, .1)
    }

    .canal-icono svg {
      width: 20px;
      height: 20px
    }

    /* El verde es el de WhatsApp, no de la paleta: aquí identifica el canal, y
       cambiarlo por el azul de marca haría que el icono no se reconociera. */
    .canal--wa .canal-icono {
      background: rgba(37, 211, 102, .16);
      color: #4AE07F
    }

    .canal--mail .canal-icono {
      color: var(--secondary)
    }

    .canal-txt {
      min-width: 0
    }

    .canal-v {
      display: block;
      font-family: var(--h1);
      font-weight: 600;
      font-size: 1.02rem;
      color: #fff;
      letter-spacing: .01em;
      white-space: nowrap
    }

    .canal--mail .canal-v {
      font-size: .95rem;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .canal-et {
      display: block;
      font-size: .76rem;
      color: var(--d-dim);
      margin-top: 1px
    }

    .canal-nota {
      margin-top: auto;
      padding-top: 16px;
      font-size: .8rem;
      color: var(--d-dim)
    }

    .form-note {
      margin-top: 16px;
      font-size: .82rem;
      color: rgba(255, 255, 255, .78)
    }

    .form-msg {
      margin-top: 18px;
      font-weight: 700;
      font-family: var(--h1);
      display: none
    }

    .form-msg.show {
      display: block
    }

    .form-msg.ok {
      color: #D6E8FF
    }

    .form-msg.err {
      color: #ffd2cf
    }

    .cta-secondary {
      margin-top: 18px;
      font-size: .92rem;
      color: #dcebf6
    }

    /* El último párrafo heredaba `margin-bottom:32px` de `.cta-box p` y dejaba
       el contenido descentrado dentro del recuadro: más aire abajo que arriba. */
    .cta-inner> :last-child {
      margin-bottom: 0
    }

    .cta-secondary a {
      color: #fff;
      font-weight: 700;
      border-bottom: 1px solid rgba(255, 255, 255, .5)
    }

    /* ===== Footer (oscuro profundo) ===== */
    .footer {
      padding: 72px 0 36px;
      background: #06111d;
      border-top: 1px solid var(--d-line)
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
      gap: 36px;
      margin-bottom: 48px
    }

    .footer .brand {
      margin-bottom: 16px;
      color: var(--d-text)
    }

    .footer .brand small {
      color: var(--d-dim)
    }

    .footer-about p {
      color: var(--d-soft);
      font-size: .92rem;
      max-width: 300px
    }

    .footer-col h4 {
      font-family: var(--h1);
      font-size: .8rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--d-dim);
      margin-bottom: 18px
    }

    .footer-col a {
      display: block;
      color: var(--d-soft);
      font-size: .92rem;
      padding: 6px 0;
      transition: color .25s, transform .25s
    }

    .footer-col a:hover {
      color: var(--d-text);
      transform: translateX(3px)
    }

    .footer-col a svg {
      width: 14px;
      height: 14px;
      display: inline-block;
      vertical-align: -2px;
      margin-right: .4rem;
      color: var(--accent)
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding-top: 28px;
      border-top: 1px solid var(--d-line);
      color: var(--d-dim);
      font-size: .85rem
    }

    .socials {
      display: flex;
      gap: 12px
    }

    .socials a {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      border: 1px solid var(--d-line);
      transition: border-color .3s, transform .3s, color .3s
    }

    .socials a:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
      color: var(--accent)
    }

    .socials svg {
      width: 18px;
      height: 18px
    }

    /* ===== Reveal ===== */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    .reveal[data-d="1"] {
      transition-delay: .08s
    }

    .reveal[data-d="2"] {
      transition-delay: .16s
    }

    .reveal[data-d="3"] {
      transition-delay: .24s
    }

    .reveal[data-d="4"] {
      transition-delay: .32s
    }

    @media (prefers-reduced-motion:reduce) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none
      }

      .orb,
      .fc-1,
      .fc-2,
      .bar,
      .badge .dot,
      .app-window {
        animation: none !important;
        transform: none !important
      }
    }

    /* ===== Responsive ===== */
    @media (max-width:980px) {

      .hero-inner,
      .tech-wrap,
      .csoft-wrap {
        grid-template-columns: 1fr
      }

      .app-shot {
        max-width: 560px;
        margin: 0 auto
      }

      .app-window {
        transform: none
      }

      .cols-4,
      .why-grid,
      .cols-3 {
        grid-template-columns: repeat(2, 1fr)
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    /* ===== Menú: la barra deja de caber mucho antes de 680 px =====
       Siete enlaces + logotipo + dos botones no entran en una fila por debajo
       de ~1024 px: a 900 px los enlaces se montaban sobre los botones. Estas
       reglas vivían en el bloque de 680 px y por eso el menú se veía roto en
       portátiles pequeños y tabletas. */
    @media (max-width:1150px) {
      .nav-links {
        position: fixed;
        inset: 76px 0 auto 0;
        flex-direction: column;
        gap: 0;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(14px);
        box-shadow: 0 20px 40px -20px rgba(20, 40, 60, .4);
        padding: 8px 24px 24px;
        transform: translateY(-130%);
        transition: transform .4s var(--ease);
        /* Si el menú tiene más enlaces que alto la pantalla, se desplaza en vez
           de cortarse: con siete entradas y un móvil apaisado pasa. */
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
      }

      .nav-links.open {
        transform: translateY(0)
      }

      .nav-links a {
        padding: 14px 0;
        width: 100%;
        border-bottom: 1px solid var(--l-line);
        color: var(--l-soft)
      }

      .nav-cta .btn-ghost-d,
      .nav-cta .btn-ghost-l {
        display: none
      }

      .burger {
        display: grid;
        place-items: center
      }
    }

    @media (max-width:680px) {

      /* El padding fluido del recuadro (44px por lado) dejaba la columna de
         contenido en 254px dentro de una pantalla de 390: todo partido en
         renglones de tres palabras. */
      .cta-box {
        padding: 40px 22px
      }

      /* En móvil todo va en una sola columna. La mitad de la gente de la feria
         abre esto de pie, con una mano y con el celular, así que WhatsApp va
         PRIMERO: llenar seis campos con el pulgar es mucho pedir cuando basta
         con abrir un chat. */
      .contacto-grid,
      .form-contacto {
        grid-template-columns: 1fr;
        gap: 18px
      }

      .contacto-directo {
        order: -1
      }

      .form-contacto,
      .contacto-directo {
        padding: 22px
      }

      .evo-cards {
        margin-top: 28px
      }

      .cols-2,
      .cols-3,
      .cols-4,
      .why-grid,
      .csoft-stats,
      .tech-mini {
        grid-template-columns: 1fr
      }

      .footer-grid {
        grid-template-columns: 1fr
      }

      .hero {
        padding-top: 120px
      }

      .float-card {
        display: none
      }
    }

    /* ===== Workflow Timeline & Features Grid ===== */
    .workflow-timeline {
      position: relative;
      margin: 60px 0 80px;
      padding: 20px 0;
    }

    .timeline-line {
      position: absolute;
      top: 55px;
      left: 5%;
      right: 5%;
      height: 3px;
      background: var(--grad-brand);
      border-radius: 2px;
      opacity: .5;
    }

    .workflow-steps {
      display: flex;
      justify-content: space-between;
      position: relative;
      flex-wrap: wrap;
      gap: 20px;
    }

    .step {
      flex: 1;
      min-width: 120px;
      max-width: 160px;
      text-align: center;
      position: relative;
    }

    .step-marker {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--grad-brand);
      color: #fff;
      font-family: var(--h1);
      font-weight: 700;
      font-size: 1rem;
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      position: relative;
      z-index: 2;
      box-shadow: 0 4px 15px -5px rgba(31, 78, 120, .5);
    }

    .step-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 12px;
      color: var(--d-soft);
    }

    .step-icon svg {
      width: 100%;
      height: 100%;
    }

    .step h4 {
      font-family: var(--h1);
      font-size: .95rem;
      color: var(--d-text);
      margin-bottom: 6px;
    }

    .step p {
      font-size: .8rem;
      color: var(--d-dim);
      line-height: 1.4;
    }

    /* Features Grid */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 60px;
    }

    .feature-category {
      background: linear-gradient(160deg, var(--d-surface), var(--d-bg2));
      border: 1px solid var(--d-line);
      border-radius: var(--radius);
      padding: 28px;
      transition: transform .4s var(--ease), border-color .4s;
    }

    .feature-category:hover {
      transform: translateY(-6px);
      border-color: var(--d-line2);
    }

    .category-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--d-line);
    }

    .cat-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
    }

    .cat-icon svg {
      width: 24px;
      height: 24px;
    }

    .cat-icon.core {
      background: rgba(20, 125, 245, .2);
      color: #8cc0ee;
    }

    .cat-icon.billing {
      background: rgba(20, 125, 245, .2);
      color: #8FC2FF;
    }

    .cat-icon.ops {
      background: rgba(226, 176, 78, .2);
      color: #e7c474;
    }

    .cat-icon.comms {
      background: rgba(125, 172, 219, .2);
      color: #a9c0d6;
    }

    .cat-icon.advanced {
      background: rgba(255, 255, 255, .1);
      color: var(--d-text);
    }

    .category-header h3 {
      font-size: 1.1rem;
      color: var(--d-text);
    }

    .feature-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 0;
      font-size: .88rem;
      color: var(--d-soft);
      border-bottom: 1px solid var(--d-line);
    }

    .feature-list li:last-child {
      border-bottom: none;
    }

    .feature-list li svg {
      width: 16px;
      height: 16px;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* Help CTA */
    .help-cta {
      margin-top: 60px;
    }

    .help-box {
      background: linear-gradient(135deg, rgba(20, 125, 245, .2), rgba(20, 125, 245, .15));
      border: 1px solid var(--d-line2);
      border-radius: var(--radius);
      padding: 28px 32px;
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .help-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: var(--grad-brand);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .help-icon svg {
      width: 28px;
      height: 28px;
      color: #fff;
    }

    .help-content h4 {
      font-family: var(--h1);
      font-size: 1.2rem;
      color: var(--d-text);
      margin-bottom: 6px;
    }

    .help-content p {
      color: var(--d-soft);
      font-size: .95rem;
    }

    .help-badge {
      margin-left: auto;
      padding: 8px 16px;
      background: rgba(20, 125, 245, .2);
      border: 1px solid rgba(20, 125, 245, .4);
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      color: #8FC2FF;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    /* Responsive for workflow */
    @media (max-width:980px) {
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .workflow-steps {
        justify-content: center;
      }

      .step {
        min-width: 140px;
      }

      .timeline-line {
        display: none;
      }
    }

    @media (max-width:680px) {
      .features-grid {
        grid-template-columns: 1fr;
      }

      .workflow-steps {
        flex-direction: column;
        align-items: center;
      }

      .step {
        max-width: 100%;
        text-align: left;
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 0 16px;
      }

      .step-marker {
        grid-row: 1 / 3;
        margin: 0;
      }

      .step-icon {
        display: none;
      }

      .help-box {
        flex-direction: column;
        text-align: center;
      }

      .help-badge {
        margin-left: 0;
      }
    }