/* Landing de venta — estilos.
   Reorganización 02/08/2026: fuera del HTML (landing). */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --dark:       #06090f;
      --dark2:      #0a0f1a;
      --dark3:      #101826;
      --elev:       #131d2e;
      /* Paleta SololaTech: el lago Atitlán (teal) + maíz (dorado) */
      --accent:     #2BC0D3;
      --accent-2:   #12A5B8;
      --accent-3:   #E8B33C;
      /* Solo lo usa `.bill-tab.active`, que lleva texto blanco encima. En
         #0E8A9A eso daba 4.10:1 — por debajo de AA en el selector que elige
         entre pago mensual y anual, o sea justo antes de pagar. Un tono mas
         hondo del mismo azul: 5.79:1, sin color nuevo en la paleta. */
      --accent-ink: #0A707D;
      --text:       #e6edf6;
      --muted:      #93a3b8;
      /* Ver la nota de --faint en styles.css: #64748b se quedaba en 3.55:1
         sobre las tarjetas. Mismo valor en los dos archivos. */
      --faint:      #76869d;
      --border:     rgba(255, 255, 255, .08);
      --border-2:   rgba(255, 255, 255, .14);
      --card-bg:    rgba(255, 255, 255, .035);
      --card-hi:    rgba(255, 255, 255, .06);
      --heading:    #ffffff;
      --radius:     18px;
      --radius-sm:  12px;
      --shadow:     0 18px 50px -12px rgba(0, 0, 0, .65);
      --shadow-sm:  0 6px 22px -8px rgba(0, 0, 0, .55);
      --glow:       0 0 0 1px rgba(43, 192, 211, .35), 0 18px 60px -16px rgba(43, 192, 211, .45);
      /* TINTA PARA TEXTO SOBRE EL ACENTO (11/08/2026).
         Los botones rellenos llevaban `color:#fff` sobre el degradado cian:
         2.19:1 al inicio y 2.96:1 al final. El mínimo accesible es 4.5:1, y
         hablamos del botón MÁS importante del sitio — el que dice «Probar
         gratis 30 días»—. No es un detalle de norma: con sol de mediodía en
         un teléfono, ese texto desaparece.
         Con esta tinta el mismo cian da 9.09:1 / 6.74:1, sin tocar la marca.
         Es lo que ya hacía el sitio corporativo (`.btn` usa #062A31), así
         que además deja de haber dos criterios para el mismo botón. */
      --sobre-acento: #04222b;
      --grad:       linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      /* El segundo color era rgba(99,102,241,.14) — el `indigo-500` que trae
         Tailwind por defecto. No esta en la paleta de marca y no aparece en
         ningun otro punto del proyecto: es un resto de plantilla. Al 14 % de
         opacidad no canta, pero mete un morado en un sistema que es cian y
         ambar entero. Se pasa a `--accent-2`, que es lo que ya hacia el
         mismo token en styles.css (23/08/2026). */
      --grad-soft:  linear-gradient(135deg, rgba(43, 192, 211, .14), rgba(18, 165, 184, .14));
      --max:        1200px;
      /* Alto de la firma tejida superior. El nav se apoya justo debajo. */
      --firma-h:    5px;
    }

    /* ── MODO CLARO ─────────────────────────────────────── */

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

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: var(--dark);
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden;
      font-feature-settings: "cv02", "cv03", "cv04", "ss01";
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 6px;
    }

    ::selection { background: rgba(43, 192, 211, .28); color: #fff; }

    .wrap { max-width: var(--max); margin: 0 auto; width: 100%; }

    /* ── FIRMA TEJIDA (el hilo de Sololá) ───────────────────
       Va FIJA y por encima del nav. Antes era un div en el flujo normal
       mientras el nav es position:fixed top:0, así que el nav se le montaba
       encima: la franja se veía a través del nav transparente, quedaba
       borrosa bajo el blur al hacer scroll y desaparecía a los 5px. Una
       firma de marca debe estar siempre, nítida y en el mismo sitio. */
    /* ── EL HILO TEJIDO COMO SEPARADOR (12/08/2026) ────────────────────
       Hasta ahora la firma de Sololá solo estaba en la barra superior. El
       sitio corporativo, en cambio, la repite entre secciones (`.hilo`), y
       era otra de las diferencias que hacían que los dos parecieran de
       empresas distintas.

       Va como `::before` de cada sección y no como un `<div>` suelto para
       que no haya que tocar el HTML cada vez que se añada una sección — y
       para que no se cuele en el hero, que ya tiene la suya arriba.

       MUY tenue (2px y opacidad baja) a propósito: repetido a todo color
       cinco veces en una página oscura, el tejido pasa de firma a ruido y
       compite con los precios, que es lo que la gente vino a leer. */
    .trust::before, .products::before, .features::before,
    .about::before, .cta-section::before {
      content: ''; display: block; height: 2px;
      position: absolute; top: 0; left: 0; right: 0;
      opacity: .55;
      background: repeating-linear-gradient(90deg,
        #12A5B8 0 42px, #0B2436 42px 58px, #E8B33C 58px 84px,
        #B3552E 84px 102px, #0E3A52 102px 144px, #7BC4CE 144px 162px);
    }
    .trust, .products, .features, .about, .cta-section { position: relative; }
    /* El hilo de la barra superior sí va a plena intensidad: es LA firma. */
    .firma-hilo {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--firma-h);
      z-index: 101;                /* por encima del nav (100) */
      pointer-events: none;
      background: repeating-linear-gradient(90deg,
        #12A5B8 0 42px, #0B2436 42px 58px, #E8B33C 58px 84px,
        #B3552E 84px 102px, #0E3A52 102px 144px, #7BC4CE 144px 162px);
    }

    /* ── NAV ────────────────────────────────────────────── */
    nav {
      position: fixed;
      top: var(--firma-h); left: 0; right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 6%;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background .3s, border-color .3s, padding .3s, backdrop-filter .3s;
    }

    nav.scrolled {
      background: color-mix(in srgb, var(--dark) 78%, transparent);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      border-bottom: 1px solid var(--border);
      padding: 11px 6%;
    }

    .nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }

    .nav-logo {
      width: 38px; height: 38px;
      border-radius: 11px;
      flex-shrink: 0;
      box-shadow: 0 6px 18px -4px rgba(43, 192, 211, .45);
    }

    .nav-name { font-weight: 800; font-size: 15px; color: var(--heading); line-height: 1.15; letter-spacing: -.01em; }
    .nav-name span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    .nav-links { display: flex; gap: 30px; align-items: center; }
    .nav-links a {
      color: var(--muted); text-decoration: none;
      font-size: 14px; font-weight: 500; transition: color .2s;
    }
    .nav-links a:hover { color: var(--heading); }

    .nav-cta {
      background: var(--grad) !important;
      color: var(--sobre-acento) !important;
      padding: 9px 18px;
      border-radius: 9px;
      font-weight: 600 !important;
      font-size: 14px !important;
      box-shadow: 0 6px 18px -6px rgba(43, 192, 211, .7);
      transition: transform .2s, box-shadow .2s, opacity .2s !important;
    }
    .nav-cta:hover { transform: translateY(-1px); opacity: .94; }

    .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; }
    .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }

    /* ── BOTONES ────────────────────────────────────────── */
    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      background: var(--grad);
      color: var(--sobre-acento);
      padding: 15px 30px;
      border-radius: 12px;
      font-size: 15px; font-weight: 700;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s, filter .2s;
      box-shadow: 0 12px 30px -10px rgba(43, 192, 211, .65);
      border: none;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(43, 192, 211, .8); filter: saturate(1.1); }
    .btn-primary svg { width: 18px; height: 18px; }

    .btn-secondary {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      background: var(--card-bg);
      border: 1px solid var(--border-2);
      color: var(--text);
      padding: 15px 30px;
      border-radius: 12px;
      font-size: 15px; font-weight: 600;
      text-decoration: none;
      transition: background .2s, transform .2s, border-color .2s;
      backdrop-filter: blur(6px);
    }
    .btn-secondary:hover { background: var(--card-hi); transform: translateY(-2px); border-color: var(--accent); }
    .btn-secondary svg { width: 18px; height: 18px; }

    /* ── HERO ───────────────────────────────────────────── */
    .hero {
      position: relative;
      padding: 150px 6% 90px;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
      background: radial-gradient(ellipse 70% 55% at 50% -8%, rgba(43, 192, 211, .10) 0%, transparent 60%);
    }
    /* VELO, NO REJILLA (11/08/2026).
       Aquí había una cuadrícula de 56×56 px dibujada con dos degradados de
       línea. Sobre la foto del lago se leía como un enrejado encima del
       paisaje —las "marcas cuadradas"—, y el sitio corporativo, que es la
       misma marca, nunca la tuvo: allí el hero es foto + velo degradado
       (`.foto-velo` en sitio_corporativo/css/styles.css).
       Se adopta ese mismo tratamiento: tres paradas verticales, oscuro
       arriba y abajo, más claro en el centro, para que el texto tenga
       contraste sin tapar la foto. */
    .hero-bg::before {
      content: ''; position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(180deg,
        rgba(7, 26, 41, .82) 0%,
        rgba(11, 36, 54, .55) 45%,
        rgba(6, 22, 33, .88) 100%);
    }
    /* Esencia SololaTech: el lago Atitlán respirando detrás del hero.
       El velo de arriba ya oscurece, así que la foto sube de brillo y de
       opacidad: antes se compensaba el enrejado apagándola. */
    .hero-foto { position: absolute; inset: 0; z-index: 0;
      background: url('/static/img/lago.webp') center/cover no-repeat;
      filter: blur(3px) brightness(.85) saturate(1.15); opacity: .6;
      animation: lago-zoom 36s ease-in-out infinite alternate; will-change: transform; }
    @keyframes lago-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
    .hero .hero-inner { position: relative; z-index: 3; }
    .hero-lago { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 2px;
      font-size: 13px; font-weight: 700; color: var(--accent-3); letter-spacing: .02em; }
    .hero-lago::before { content: ''; width: 18px; height: 3px; border-radius: 2px;
      background: repeating-linear-gradient(90deg, #12A5B8 0 6px, #E8B33C 6px 12px, #B3552E 12px 18px); }

    /* Aurora animada (sutil) */
    .aurora { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55; z-index: 1; will-change: transform; }
    .aurora.a1 { width: 520px; height: 520px; top: -170px; left: 46%; background: radial-gradient(circle, rgba(43,192,211,.5), transparent 70%); animation: drift1 19s ease-in-out infinite; }
    .aurora.a2 { width: 460px; height: 460px; top: -70px; right: 4%; background: radial-gradient(circle, rgba(232,179,60,.30), transparent 70%); animation: drift2 23s ease-in-out infinite; }
    .aurora.a3 { width: 420px; height: 420px; bottom: -190px; left: 3%; background: radial-gradient(circle, rgba(123,196,206,.32), transparent 70%); animation: drift3 27s ease-in-out infinite; }
    @keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-48px,38px) scale(1.12); } }
    @keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(42px,30px) scale(1.08); } }
    @keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,-30px) scale(1.1); } }
    .hero-inner {
      position: relative; z-index: 1;
      max-width: var(--max); margin: 0 auto;
      display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
    }
    .hero-copy { max-width: 600px; }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 9px;
      background: rgba(43, 192, 211, .1);
      border: 1px solid rgba(43, 192, 211, .28);
      color: var(--accent);
      font-size: 12.5px; font-weight: 600;
      padding: 7px 15px; border-radius: 999px;
      margin-bottom: 26px; letter-spacing: .02em;
    }
    .hero-badge::before {
      content: ''; width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(43, 192, 211, .2); animation: pulse 2.2s infinite;
    }
    @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

    .hero h1 {
      font-size: clamp(2.5rem, 5.4vw, 4rem);
      font-weight: 900; line-height: 1.05; letter-spacing: -.03em;
      margin-bottom: 22px; color: var(--heading);
    }
    .gradient-text {
      background: linear-gradient(100deg, var(--accent), var(--accent-2) 60%, #E8B33C);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .hero p {
      font-size: clamp(1.02rem, 1.6vw, 1.18rem);
      color: var(--muted); max-width: 540px; margin-bottom: 34px; font-weight: 400;
    }
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

    .hero-stats {
      display: flex; gap: 40px; margin-top: 52px; flex-wrap: wrap;
      padding-top: 32px; border-top: 1px solid var(--border);
    }
    .stat-num {
      font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em;
      background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
      line-height: 1;
    }
    /* «desde» delante del precio (23/08/2026). La etiqueta decía «al mes,
       desde», que no cierra en español: el «desde» quedaba colgando al final
       de una frase que ya había terminado. El resto de cifras del hero sí
       encadenan («2 min» + «para crear tu cuenta»), asi que esta era la
       unica que se leia rota.
       Va DENTRO de .stat-num y no en la etiqueta para que el orden de
       lectura sea «desde $17 · al mes», que es como se dice. En tamaño
       pequeño y sin el degradado, para que no compita con la cifra. */
    .stat-pre {
      font-size: 12.5px; font-weight: 600; margin-right: 5px;
      letter-spacing: 0; vertical-align: .28em;
      -webkit-text-fill-color: var(--muted); color: var(--muted);
    }
    .stat-label { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-weight: 500; }

    /* ── HERO: MOCKUP DE PRODUCTO ───────────────────────── */
    .hero-visual { position: relative; }
    .mock {
      background: linear-gradient(170deg, var(--elev), var(--dark3));
      border: 1px solid var(--border-2);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      transform: perspective(1600px) rotateY(-9deg) rotateX(3deg);
      transform-origin: center right;
    }
    .mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border); }
    .mock-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
    .mock-bar .d1 { background: #f87171; } .mock-bar .d2 { background: #fbbf24; } .mock-bar .d3 { background: #34d399; }
    .mock-bar .mock-url { margin-left: 10px; font-size: 11px; color: var(--faint); background: var(--dark2); padding: 4px 12px; border-radius: 7px; border: 1px solid var(--border); }
    .mock-body { display: grid; grid-template-columns: 64px 1fr; min-height: 320px; }
    .mock-side { background: rgba(255,255,255,.02); border-right: 1px solid var(--border); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .mock-side b { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: block; }
    .mock-side u { width: 26px; height: 8px; border-radius: 4px; background: var(--border-2); display: block; }
    .mock-main { padding: 18px; }
    .mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
    .mock-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 11px; padding: 12px; }
    .mock-kpi small { font-size: 9.5px; color: var(--faint); display: block; }
    .mock-kpi span { font-size: 17px; font-weight: 800; color: var(--heading); display: block; margin-top: 3px; }
    .mock-kpi em { font-size: 9px; font-style: normal; color: var(--accent-3); font-weight: 700; }
    .mock-chart { display: flex; align-items: flex-end; gap: 8px; height: 92px; padding: 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; }
    .mock-chart i { flex: 1; border-radius: 5px 5px 0 0; background: var(--grad); opacity: .85; display: block; animation: grow 1.1s ease-out backwards; }
    @keyframes grow { from { height: 0 !important; opacity: 0; } }
    .mock-rows { display: flex; flex-direction: column; gap: 8px; }
    .mock-row { display: flex; align-items: center; gap: 10px; }
    .mock-row b { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-soft); border: 1px solid var(--border); flex-shrink: 0; }
    .mock-row u { height: 8px; border-radius: 4px; background: var(--border-2); display: block; }
    .mock-float {
      position: absolute; right: -18px; bottom: 34px;
      background: var(--elev); border: 1px solid var(--border-2);
      border-radius: 13px; padding: 12px 15px; box-shadow: var(--shadow-sm);
      display: flex; align-items: center; gap: 10px;
      animation: floaty 4s ease-in-out infinite;
    }
    @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    .mock-float .fdot { position: relative; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-3), var(--accent)); display: flex; align-items: center; justify-content: center; }
    .mock-float .fdot::after { content: ''; position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 0 0 rgba(45, 212, 191, .5); animation: ring 2.6s ease-out infinite; }
    @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, .45); } 70%, 100% { box-shadow: 0 0 0 13px rgba(45, 212, 191, 0); } }
    .mock-float .fdot svg { width: 18px; height: 18px; color: #042; position: relative; z-index: 1; }
    .mock-float small { font-size: 10px; color: var(--faint); display: block; }
    .mock-float span { font-size: 13px; font-weight: 800; color: var(--heading); }

    /* ── TRUST STRIP ────────────────────────────────────── */
    .trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--dark2); }
    .trust-inner { max-width: var(--max); margin: 0 auto; padding: 26px 6%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 36px; }
    .trust-item { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
    .trust-item svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; }

    /* ── SECCIONES ──────────────────────────────────────── */
    section { padding: 104px 6%; }
    .section-label {
      display: inline-block; font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
      margin-bottom: 14px;
    }
    .section-title { font-size: clamp(1.85rem, 3.6vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; margin-bottom: 16px; color: var(--heading); }
    .section-sub { font-size: 1.06rem; color: var(--muted); max-width: 580px; margin-bottom: 56px; }

    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
    /* LA ÚLTIMA FILA YA NO QUEDA COJA (12/08/2026).
       Con `grid` y 10 tarjetas en 4 columnas salía 4 + 4 + 2, y las dos
       últimas se pegaban a la izquierda dejando media fila vacía. Se lee
       como si la página se hubiera cortado.

       Con `flex` y `justify-content:center`, los huérfanos se CENTRAN y la
       fila parece deliberada. Y lo importante: funciona con CUALQUIER
       número de tarjetas — hoy son 10, mañana 9 u 11 y no hay que volver
       aquí a recontar. `flex-grow:0` evita que las dos últimas se estiren
       al ancho de cuatro, que es lo que las delataría. */
    .grid-4 {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 20px;
    }
    .grid-4 > * { flex: 0 1 calc(25% - 15px); min-width: 230px; }
    @media (max-width: 980px) { .grid-4 > * { flex-basis: calc(50% - 10px); } }
    @media (max-width: 540px) { .grid-4 > * { flex-basis: 100%; min-width: 0; } }

    /* ── NOSOTROS ───────────────────────────────────────── */
    .about { background: var(--dark2); }
    .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: var(--max); margin: 0 auto; }
    .about-text .section-sub { margin-bottom: 0; }
    .about-features { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
    .about-feat { display: flex; gap: 15px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; transition: border-color .25s, transform .25s; }
    .about-feat:hover { border-color: var(--border-2); transform: translateX(4px); }
    .about-feat-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 11px; background: var(--grad-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
    .about-feat-icon svg { width: 20px; height: 20px; color: var(--accent); }
    .about-feat-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; color: var(--heading); }
    .about-feat-text p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

    .about-visual { background: linear-gradient(155deg, var(--dark3), rgba(43, 192, 211, .07)); border: 1px solid var(--border-2); border-radius: 22px; padding: 48px 40px; text-align: center; box-shadow: var(--shadow-sm); }
    .about-logo-big { width: 82px; height: 82px; border-radius: 22px; margin: 0 auto 24px; box-shadow: 0 14px 40px -8px rgba(43, 192, 211, .45); }
    .about-visual h3 { font-size: 1.32rem; font-weight: 800; margin-bottom: 8px; color: var(--heading); }
    .about-visual p { font-size: 14px; color: var(--muted); line-height: 1.65; }
    .about-tag { display: inline-block; background: rgba(43, 192, 211, .1); border: 1px solid rgba(43, 192, 211, .22); color: var(--accent); font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 999px; margin: 4px; }

    /* Nota (01/08/2026): la sección Visión/Misión/Valores se movió al sitio
       corporativo (sololatech.com). La landing de venta se centra en producto:
       Productos → Funciones → Nosotros → Contacto. */

    /* ── MODAL RECOMENDADOR (paleta del lago) ───────────── */
    /* Restaurado el 01/08/2026: se perdió en una reescritura de la landing
       (regresión reportada por el fundador). Fuente: commit d31e4b7. */
    .rm-overlay { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(4, 9, 15, .74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
    .rm-overlay.open { display: flex; }
    .rm-panel { position: relative; width: min(700px, 100%); max-height: 88vh; overflow-y: auto; background: var(--dark3); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px 24px; }
    .rm-panel::before { content: ''; position: sticky; display: block; top: -30px; margin: -30px -28px 24px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
    .rm-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); font-size: 15px; cursor: pointer; line-height: 1; }
    .rm-close:hover { color: var(--text); border-color: var(--border-2); }
    .rm-title { font-size: 1.32rem; font-weight: 800; color: var(--heading); margin-bottom: 6px; padding-right: 40px; line-height: 1.25; }
    .rm-title em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .rm-sub { font-size: 14px; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
    .rm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 16px; border: none; border-radius: var(--radius-sm); font-weight: 800; font-size: 14.5px; cursor: pointer; transition: filter .15s, border-color .15s; }
    .rm-btn-fill { background: var(--grad); color: var(--sobre-acento); box-shadow: 0 8px 22px -8px rgba(43,192,211,.55); }
    .rm-btn-fill:hover { filter: brightness(1.08); }
    .rm-btn-ghost { background: transparent; border: 1px solid var(--border-2); color: var(--text); }
    .rm-btn-ghost:hover { border-color: var(--accent); }
    .rm-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
    .rm-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--faint); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
    .rm-divider::before, .rm-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .rm-search { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--dark2); color: var(--text); font-size: 14px; margin-bottom: 10px; }
    .rm-search::placeholder { color: var(--faint); }
    .rm-search:focus { outline: none; border-color: rgba(43,192,211,.5); }
    .rm-lista { max-height: 250px; overflow-y: auto; padding-right: 4px; }
    .rm-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); font-weight: 800; margin: 12px 0 7px; }
    .rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .rm-chip { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: 11px; border: 1px solid var(--border); background: var(--dark2); cursor: pointer; transition: .15s; font-size: 13.5px; color: var(--text); }
    .rm-chip:hover { border-color: rgba(43,192,211,.5); transform: translateY(-1px); }
    .rm-chip.sel { border-color: var(--accent); background: rgba(43,192,211,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
    .rm-chip .ic { font-size: 1.05rem; line-height: 1; }
    /* auto-fit y no `1fr 1fr`: el inventario declara DOS dimensiones y el
       clinico TRES (medicos, cuentas, especialidades). Con dos columnas
       fijas, la tercera caia sola en una fila a media anchura. */
    .rm-size { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-top: 14px; }
    .rm-size label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
    .rm-size input { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--dark2); color: var(--text); font-size: 14px; }
    .rm-err { color: #f87171; font-size: 13.5px; margin-top: 10px; }
    .rm-result-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
    .rm-plan-name { font-size: 1.5rem; font-weight: 900; color: var(--heading); }
    .rm-price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; color: var(--heading); }
    .rm-price .m { font-size: 1.7rem; font-weight: 900; }
    .rm-price .u, .rm-price .y { color: var(--muted); font-size: 13.5px; }
    .rm-trial { color: var(--accent); font-size: 13px; margin-bottom: 10px; }
    .rm-reasons { list-style: none; margin: 12px 0 4px; display: grid; gap: 8px; }
    .rm-reasons li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--muted); }
    /* La marca la pone el CSS, no el JavaScript. Antes el JS escribia el
       caracter dentro de un innerHTML junto al texto de la razon; separarlo
       deja el texto en textContent, que es donde no puede inyectarse nada. */
    .rm-reasons .ck { color: var(--accent-3); flex: 0 0 auto; }
    .rm-reasons .ck::before { content: "\2713"; }

    /* ── Lo que el plan NO incluye ─────────────────────── */
    .rm-limits { list-style: none; margin: 4px 0 2px; display: grid; gap: 7px; }
    .rm-limits li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--faint); }
    .rm-limits .lm { color: var(--faint); flex: 0 0 auto; }
    .rm-limits .lm::before { content: "\2022"; }

    /* ── Paso 0: elegir producto ───────────────────────── */
    .rm-productos { display: grid; gap: 10px; margin-top: 14px; }
    .rm-producto { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 13px; border: 1px solid var(--border); background: var(--dark2); color: var(--text); cursor: pointer; font-family: inherit; transition: .15s; }
    .rm-producto:hover { border-color: rgba(43,192,211,.5); transform: translateY(-1px); }
    .rm-producto .ic { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
    .rm-producto-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .rm-producto-nombre { font-size: 14.5px; font-weight: 700; color: var(--heading); }
    .rm-producto-sub { font-size: 12.5px; color: var(--muted); }

    /* ── Necesidades declaradas (casillas del paso 1) ──── */
    .rm-necesidades { margin-top: 14px; display: grid; gap: 7px; }
    .rm-necesidades-titulo { font-size: 12px; color: var(--muted); margin: 0 0 2px; }
    .rm-necesidad { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); cursor: pointer; }
    .rm-necesidad input { margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }

    /* ── Estados y detalles del modal ──────────────────── */
    .rm-cargando, .rm-vacio { color: var(--muted); font-size: 13.5px; margin: 0; }
    .rm-plan-elegido { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .rm-coincide { color: var(--accent); font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
    .rm-enlace { color: var(--accent); font-weight: 700; white-space: nowrap; }
    .rm-actions { display: grid; gap: 10px; margin-top: 16px; }
    @media (min-width: 560px) { .rm-actions { grid-template-columns: 1fr 1fr; } }
    .rm-note { font-size: 12px; color: var(--faint); margin-top: 14px; text-align: center; }
    .rm-hidden { display: none; }
    @media (max-width: 520px) { .rm-panel { padding: 24px 18px 20px; } .rm-panel::before { margin: -24px -18px 20px; top: -24px; } .rm-size { grid-template-columns: 1fr; } }

    /* ── PRODUCTOS / PLANES ─────────────────────────────── */
    .products { background: var(--dark2); }
    .products-center { max-width: var(--max); margin: 0 auto; }
    .products-header { text-align: center; margin-bottom: 44px; }
    .products-header .section-sub { margin: 0 auto; }

    .prod-tabs { display: inline-flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 auto 22px; padding: 6px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; }
    .products-header + .prod-tabs, .prod-tabs { display: flex; width: fit-content; }
    .prod-tab { background: transparent; border: none; color: var(--muted); font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 11px 26px; border-radius: 10px; cursor: pointer; transition: all .25s; }
    .prod-tab:hover { color: var(--heading); }
    .prod-tab.active { background: var(--grad); color: var(--sobre-acento); box-shadow: 0 6px 18px -6px rgba(43, 192, 211, .6); }

    .bill-toggle { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 0 auto 44px; padding: 5px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; width: fit-content; }
    .bill-tab { background: transparent; border: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: all .25s; display: inline-flex; align-items: center; gap: 8px; }
    .bill-tab.active { color: #fff; background: var(--accent-ink); }
    .bill-tab.active .bill-badge { background: rgba(255,255,255,.22); }
    .bill-badge { background: linear-gradient(135deg, var(--accent-3), var(--accent)); color: #042; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }

    .plans-panel { display: none; }
    .plans-panel.active { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; align-items: stretch; }

    .plan-card {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 32px 28px;
      display: flex; flex-direction: column; gap: 22px;
      transition: border-color .25s, transform .25s, box-shadow .25s;
      position: relative; overflow: hidden;
    }
    .plan-card:hover { border-color: var(--border-2); transform: translateY(-5px); box-shadow: var(--shadow-sm); }
    .plan-card.featured {
      border-color: rgba(43, 192, 211, .55);
      /* Segundo resto del `indigo-500` de Tailwind, y este pesaba mas que el
         de `--grad-soft`: pintaba de morado el fondo de la TARJETA DESTACADA,
         que es justo la que mas se mira en la pagina de precios. */
      background: linear-gradient(168deg, rgba(43, 192, 211, .1) 0%, rgba(18, 165, 184, .08) 100%);
      box-shadow: var(--glow);
    }
    .plan-card.featured::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; background: linear-gradient(160deg, rgba(56,189,248,.6), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
    .plan-badge { position: absolute; top: 18px; right: 18px; background: var(--grad); color: var(--sobre-acento); font-size: 10.5px; font-weight: 800; padding: 5px 13px; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(56,189,248,.7); }
    .plan-name { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
    .plan-price { font-size: 2.5rem; font-weight: 900; line-height: 1; color: var(--heading); letter-spacing: -.02em; }
    .plan-price .amt { color: var(--heading); }
    .plan-price .per { font-size: .95rem; font-weight: 500; color: var(--muted); }
    .plan-price-custom { font-size: 1.55rem; font-weight: 900; line-height: 1.5; color: var(--heading); }
    .plan-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
    .plan-features { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; }
    .plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.8px; color: var(--text); font-weight: 500; line-height: 1.45; }
    .plan-features li::before {
      content: ''; width: 18px; height: 18px; min-width: 18px; margin-top: 1px; border-radius: 50%;
      background-color: rgba(45, 212, 191, .14);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center; background-size: 11px;
    }
    .plan-btn { display: flex; align-items: center; justify-content: center; padding: 13px; border-radius: 11px; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: all .2s; }
    .plan-btn-outline { border: 1.5px solid var(--border-2); color: var(--text); background: transparent; }
    .plan-btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
    .plan-btn-fill { background: var(--grad); color: var(--sobre-acento); box-shadow: 0 10px 26px -10px rgba(43, 192, 211, .7); }
    .plan-btn-fill:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(43, 192, 211, .85); }

    /* ── Cartelera vista por quien YA tiene plan (landing-suscripcion.js) ──
       El plan contratado se marca; los demás siguen visibles porque cambiar
       de plan es la razón por la que un cliente vuelve a mirar precios. */
    .plan-card-actual { border-color: rgba(45, 212, 191, .6); background: linear-gradient(168deg, rgba(45, 212, 191, .10) 0%, rgba(43, 192, 211, .06) 100%); }
    .plan-badge-actual { background: linear-gradient(135deg, #2dd4bf, #12A5B8); box-shadow: 0 6px 16px -6px rgba(45, 212, 191, .75); }
    /* Con dos sellos en la misma esquina se leería "MÁS POPULAR" encima de
       "TU PLAN ACTUAL". Cuál es su plan importa más que cuál es el popular. */
    .plan-card-actual .plan-badge:not(.plan-badge-actual) { display: none; }
    .plan-btn-ghost { border: 1.5px dashed var(--border-2); color: var(--muted); background: transparent; font-family: inherit; cursor: pointer; margin-top: 10px; }
    .plan-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
    .plans-nota-cobro { max-width: var(--max); margin: 18px auto 0; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

    /* ── AVISO DE SUSCRIPCIÓN SIN COMPLETAR ─────────────────
       Lo muestra plan-pendiente.js quitando el atributo [hidden].
       OJO: la regla [hidden] va DESPUÉS y con !important a propósito.
       Estos estilos vivían inline en el HTML y `display:flex` inline
       ganaba al `display:none` del atributo hidden, así que la caja se
       pintaba VACÍA para todo visitante sin selección guardada. */
    .pp-aviso {
      display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
      max-width: 900px; margin: 0 auto 32px; padding: 20px 24px;
      background: rgba(245, 158, 11, .08);
      border: 1.5px solid rgba(245, 158, 11, .35);
      border-radius: 14px; text-align: left;
    }
    .pp-aviso[hidden] { display: none !important; }
    .pp-icono {
      flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
      background: rgba(245, 158, 11, .18); color: #f59e0b;
      font-weight: 800; font-size: 18px;
      display: flex; align-items: center; justify-content: center;
    }
    .pp-texto { flex: 1 1 320px; min-width: 240px; }
    .pp-titulo { font-weight: 800; color: #f59e0b; margin-bottom: 6px; }
    .pp-detalle { font-size: 14px; color: var(--muted, #94a3b8); line-height: 1.55; }
    .pp-acciones { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .pp-acciones .plan-btn { white-space: nowrap; }
    .pp-descartar {
      background: none; border: none; color: var(--muted, #94a3b8);
      font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px;
    }
    .sr-only {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap;
    }

    /* ── CARACTERÍSTICAS ────────────────────────────────── */
    .features { background: var(--dark); }
    .features-center { max-width: var(--max); margin: 0 auto; }
    .features-header { text-align: center; margin-bottom: 56px; }
    .features-header .section-sub { margin: 0 auto; }
    .feat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; transition: border-color .25s, transform .25s, box-shadow .25s; }
    .feat-card:hover { border-color: var(--border-2); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
    .feat-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--grad-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
    .feat-ico svg { width: 22px; height: 22px; color: var(--accent); }
    .feat-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 7px; color: var(--heading); }
    .feat-card p { font-size: 13.8px; color: var(--muted); line-height: 1.6; }

    /* ── CTA / CONTACTO ─────────────────────────────────── */
    .cta-section { position: relative; background: var(--dark2); border-top: 1px solid var(--border); text-align: center; padding: 100px 6%; overflow: hidden; }
    .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(43, 192, 211, .12), transparent 65%); pointer-events: none; }
    .cta-section > * { position: relative; z-index: 1; }
    .cta-section h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 900; margin-bottom: 16px; letter-spacing: -.025em; color: var(--heading); }
    .cta-section > p { font-size: 1.12rem; color: var(--muted); max-width: 540px; margin: 0 auto 38px; }

    .lead-form { max-width: 660px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
    .lead-form .full { grid-column: 1 / -1; }
    .lead-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
    .lead-form input, .lead-form select, .lead-form textarea {
      width: 100%; background: var(--dark3); border: 1px solid var(--border-2); border-radius: 11px;
      color: var(--text); font-family: inherit; font-size: 14px; padding: 13px 15px; outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 192, 211, .15); }
    .lead-form button { border: none; cursor: pointer; font-family: inherit; }
    .lead-msg { grid-column: 1 / -1; font-size: 14px; font-weight: 600; min-height: 20px; }
    .btn-primary.full { width: 100%; }

    /* ── FOOTER ─────────────────────────────────────────── */
    footer { background: var(--dark); border-top: 1px solid var(--border); padding: 60px 6% 32px; }
    .footer-inner { max-width: var(--max); margin: 0 auto; }
    .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
    .footer-brand .nav-brand { margin-bottom: 14px; }
    .footer-brand p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 270px; }
    .footer-col h5 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text); margin-bottom: 16px; }
    .footer-col a { display: block; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 11px; transition: color .2s; }
    .footer-col a:hover { color: var(--accent); }
    .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
    .footer-bottom p { font-size: 13px; color: var(--faint); }

    /* ── IDIOMA Y TEMA ──────────────────────────────────── */
    .lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; }
    .lang-switch a { color: var(--muted); font-weight: 700; text-decoration: none; }
    .lang-switch a.on { color: var(--accent); }
    .lang-sep { color: var(--muted); opacity: .4; }

    /* ── MENÚ DE USUARIO ────────────────────────────────── */
    .user-menu { position: relative; display: inline-flex; }
    .um-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--grad); padding: 0; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color .2s, box-shadow .2s; }
    .um-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 192, 211, .2); }
    .um-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
    .um-initial { color: #fff; font-weight: 800; font-size: 16px; }
    .um-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; background: var(--dark3); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 200; }
    .um-dropdown.open { display: block; }
    .um-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
    .um-name { font-weight: 800; font-size: 14px; color: var(--text); text-transform: uppercase; letter-spacing: .02em; }
    .um-email { font-size: 13px; color: var(--muted); margin-top: 2px; word-break: break-all; }
    .um-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border: none; border-radius: 9px; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s; }
    .um-item:hover { background: rgba(43, 192, 211, .1); }
    .um-static { cursor: default; } .um-static:hover { background: transparent; }
    .um-lang { display: flex; gap: 4px; }
    .um-lang a { padding: 3px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
    .um-lang a:hover { color: var(--text); }
    .um-lang a.on { color: var(--accent); border-color: rgba(43, 192, 211, .4); background: rgba(43, 192, 211, .08); }
    .um-divider { height: 1px; background: var(--border); margin: 6px 4px; }
    .um-logout { color: #f87171; } .um-logout:hover { background: rgba(248, 113, 113, .1); }

    /* ── SCROLL REVEAL ──────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
    .reveal.in { opacity: 1; transform: none; }

    /* ── RESPONSIVE ─────────────────────────────────────── */
    @media (max-width: 980px) {
      .hero-inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
      .hero-copy { max-width: 640px; margin: 0 auto; }
      .hero p { margin-left: auto; margin-right: auto; }
      .hero-btns { justify-content: center; }
      .hero-stats { justify-content: center; }
      .mock { transform: none; max-width: 520px; margin: 0 auto; }
      .mock-float { right: 0; }
    }
    @media (max-width: 768px) {
      nav { padding: 13px 5%; }
      nav.scrolled { padding: 10px 5%; }
      /* Menú móvil alineado a la DERECHA (la hamburguesa vive a la derecha:
         los elementos deben caer bajo ella — pedido del fundador 14-jul) */
      .nav-links { display: none; flex-direction: column; align-items: flex-end; text-align: right; position: fixed; top: calc(62px + var(--firma-h)); left: 0; right: 0; background: var(--dark2); border-bottom: 1px solid var(--border); padding: 22px 5%; gap: 18px; box-shadow: var(--shadow); }
      .nav-links.open { display: flex; }
      .nav-hamburger { display: flex; }
      #nav-auth { width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
      /* Menú de usuario dentro del nav móvil: acordeón en flujo, a lo ancho
         (el panel flotante se salía por el borde izquierdo — fix 14-jul) */
      .nav-links .user-menu, #nav-auth .user-menu { width: 100%; justify-content: flex-end; }
      .nav-links .um-dropdown, #nav-auth .um-dropdown { position: static; width: 100%; min-width: 0; margin-top: 8px; box-shadow: none; text-align: left; }
      .about-inner { grid-template-columns: 1fr; gap: 40px; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
      .hero-stats { gap: 26px; }
      section { padding: 76px 6%; }
    }
    @media (max-width: 480px) {
      .footer-top { grid-template-columns: 1fr; }
      .hero-btns { flex-direction: column; align-items: stretch; }
      .hero-btns a { width: 100%; }
      .hero { padding-top: 124px; }
      .mock-float { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
      .reveal { opacity: 1; transform: none; }
    }