*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* Sin esto, iOS Safari "auto-infla" el tamaño de fuente en columnas
     angostas para "mejorar la legibilidad" -- y lo hace de forma
     inconsistente entre tarjetas idénticas en CSS (una tarjeta de precio
     ensancha su texto más que su vecina, "COP" se rompe a otra línea y
     empuja el botón "Recargar" fuera de la tarjeta). Reportado con
     captura real de iPhone en la tarjeta "Más elegido" de Precios. */
  html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
  :root {
    --bg: #0a0a0f; --surface: #12121a; --surface2: #1a1a26;
    --border: rgba(255,255,255,0.08); --accent: #7c6af7; --accent2: #4fd1c5;
    --accent-amber: #f5a623; --text: #f0effe;
    --muted: rgba(240,239,254,0.85); --dim: rgba(240,239,254,0.35);
  }
  body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 300; min-height: 100vh; overflow-x: hidden; }
  /* FAQ es la última sección antes del footer -- en un teléfono alto el
     navegador no tenía suficiente página debajo para desplazarse hasta
     que el FAQ quedara bajo el nav (scroll-margin-top no sirve de nada
     si no hay a dónde desplazarse: el navegador para en seco en el
     final físico del documento). Medido: el déficit crece 1:1 con la
     altura del viewport -- a 844px faltaban 110px, a 932px (teléfono
     alto) casi 200px. 400px de aire extra cubre con margen cualquier
     teléfono real. Va en "body", NO en "footer" -- el footer es
     "display:flex; align-items:center", ponerle padding-bottom ahí
     estira la caja entera y centra el texto flotando en medio de 400px
     vacíos en vez de dejar el footer normal con aire DESPUÉS. */
  /* (Quitado 2026-09-25: el padding-bottom de 400px dejaba un vacío enorme
     bajo el pie en el celular. El FAQ ya no se fuerza a quedar arriba.) */
  canvas#waveCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.25; }
  .wrap { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 0 24px; }

  nav { position: sticky; top: 0; z-index: 10; padding: 20px 0; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(10,10,15,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .nav-links { display: flex; align-items: center; gap: 13px; }
  .nav-links a { color: rgba(240,239,254,0.85); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .nav-links a[aria-label="Inicio"] { margin-right: -2px; }
  .nav-links a[aria-label="Inicio"] svg { display: block; }
  @media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--text); } }
  .nav-home-label { display: none; }
  .nav-inicio { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  @media (min-width: 960px) {
    .nav-inicio { width: 36px; height: 36px; border-radius: 11px; background: rgba(124,106,247,0.12); border: 1px solid rgba(124,106,247,0.28); color: #c9c2ff; margin-right: 6px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
    .nav-inicio:hover { background: rgba(124,106,247,0.22); border-color: rgba(124,106,247,0.5); color: #fff; }
  }

  /* Botón hamburguesa -- reemplaza la fila de links que antes se encogía
     hasta 10.5px en pantallas chicas (ilegible, sin objetivo táctil real).
     Ícono de 3 líneas que gira a "X" con el mismo timing que el panel. */
  .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 10px; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; }
  @media (hover: hover) and (pointer: fine) { .nav-toggle:hover { border-color: var(--accent); } }
  .nav-toggle:active { background: rgba(124,106,247,0.14); }
  /* transform+opacity solamente (no "top") -- anima más barato y evita
     que el navegador tenga que recalcular layout en cada frame. */
  .nav-toggle-bars { position: relative; width: 18px; height: 13px; }
  .nav-toggle-bars span { position: absolute; left: 0; top: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-toggle-bars span:nth-child(1) { transform: translateY(0); }
  .nav-toggle-bars span:nth-child(2) { transform: translateY(5.5px); }
  .nav-toggle-bars span:nth-child(3) { transform: translateY(11px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(5.5px) rotate(-45deg); }

  /* 959px y no 640: .wrap se queda fijo en 640px de ancho hasta los 960px
     de viewport (ver el media (min-width:960px) más abajo), así que el nav
     en línea NUNCA cabía de verdad entre esos dos puntos -- dependía de
     partirse en 2 líneas (el comportamiento que reemplaza este menú). El
     corte del hamburguesa tiene que coincidir con el mismo punto real
     donde el nav por fin tiene espacio, si no el texto se corta invisible
     (body tiene overflow-x:hidden) en ese rango. */
  @media (max-width: 959px) {
    .nav-toggle { display: flex; }
    /* Panel flotante tipo tarjeta (mismo lenguaje visual que el resto del
       sitio: borde + esquinas redondeadas + glow morado de marca en el
       hover/elevación) en vez de una barra pegada al borde. */
    .nav-links {
      position: absolute; top: calc(100% + 8px); left: 24px; right: 24px; z-index: 15;
      flex-direction: column; align-items: stretch; gap: 0;
      background: rgba(15,15,22,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--border); border-radius: 16px; padding: 6px 16px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 4px 24px rgba(124,106,247,0.15);
      transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
      transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s linear 0.22s;
    }
    .nav-links.open {
      transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
      transition: transform 0.22s ease, opacity 0.18s ease;
    }
    .nav-links a { font-family: 'Montserrat', sans-serif; font-size: 15px; padding: 14px 2px; border-top: 1px solid var(--border); }
    .nav-links a:first-child { border-top: none; }
    .nav-home-label { display: inline; margin-left: 2px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-links { transition: none !important; }
    .nav-toggle-bars span { transition: none !important; }
  }
  @media (max-width: 360px) {
    .logo-dot { display: none; }
  }
  .logo-mark { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
  .logo-mark svg { width: 44px; height: 44px; }
  .logo-text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.8px; }
  .logo-dot { color: #62a6da; }

  /* Animación de entrada al hacer scroll -- la clase "reveal" se pone
     directo en el HTML (no por JS) para que el estado inicial (oculto)
     se pinte desde el primer frame, sin parpadeo. El JS solo agrega
     "in-view" cuando la sección entra en pantalla, y si algo falla (JS
     bloqueado, error en otro script de la página) el propio script de
     abajo tiene un fallback que la deja visible igual -- nunca debe
     quedar contenido (Precios, FAQ) escondido para siempre. */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
  .reveal.in-view { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; }
  }

  /* tap-highlight explícito (el flash gris/azul nativo de Android
     chocaba con el scale(0.97) de abajo) + touch-action para que un
     doble-tap no espere los ~300ms de "¿es zoom?" antes de responder. */
  .upload-zone, .modo-opcion, .asis-card button, .btn, .btn-pay,
  .record-btn, .price-card-simple button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Un press largo en iOS selecciona el texto de un control o saca el
     menú de copiar/compartir de un link -- nunca pasa en una app nativa.
     Solo en controles, nunca en texto de contenido (el usuario sí
     necesita poder seleccionar/copiar el texto de la reunión, errores,
     etc.). */
  button, summary, .modo-opcion, .asis-chip, .price-tag {
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  }

  /* "Vista única activa" en mobile -- grabando, la lista de "Mis
     reuniones" y la confirmación de envío son momentos enfocados donde
     la siguiente sección del sitio (¿Cómo funciona?/Precios) se asomaba
     justo debajo, rompiendo la sensación de pantalla completa (reportado
     con capturas reales del usuario). 86px = alto medido del nav sticky
     en mobile. Solo mobile -- en escritorio hay de sobra aire vertical y
     nunca se reportó el problema ahí. */
  @media (max-width: 480px) {
    #modoGrabar.grabando, #state-success.active,
    #state-processing.active:has(.processing-done.show) {
      /* 130 y no 86: además del nav cuenta el borde y el aire de la tarjeta;
         con 86 el final quedaba más alto que la pantalla y se cortaba. */
      min-height: calc(100svh - 130px);
      display: flex; flex-direction: column; justify-content: center;
    }
    .asis-step[data-step="jobs"].active {
      min-height: calc(100svh - 86px);
    }
  }

  /* Feedback táctil universal -- en Android/iOS no hay :hover, así que
     todo lo tocable necesita su propio estado de "presionado" para
     sentirse con respuesta inmediata. .btn no está en esta lista a
     propósito: ya tiene su propio ":active" más abajo (línea ~314) que
     cancela el translateY(-2px) del hover, y una regla con la misma
     especificidad definida después siempre gana -- se combina ahí en
     vez de acá, si no queda muerta por el orden del cascade. */
  .upload-zone:active, .modo-opcion:active, .asis-card button:active,
  .record-btn:active, .price-card-simple button:active {
    transform: scale(0.97);
  }

  /* Profundidad -- las tarjetas de sección eran solo borde plano contra
     el fondo casi negro, sin ninguna capa que las separara. Una sombra
     oscura sutil (no el glow morado, ese se queda solo para hover/foco)
     les da elevación real sin cambiar ningún color de marca. */
  .steps-card, .deliv-card, .asis-card, .price-card-simple, .faq-card {
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  }

  hero { display: block; padding: 28px 0 40px; }
  .badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(124,106,247,0.12); border: 1px solid rgba(124,106,247,0.25); border-radius: 100px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: #a89bf8; margin-bottom: 24px; }
  .badge-dot { width: 6px; height: 6px; background: var(--accent2); border-radius: 50%; animation: pulse 2s ease-in-out 4; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
  h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(40px, 7.5vw, 62px); font-weight: 800; line-height: 1.02; letter-spacing: -2.5px; margin-bottom: 20px; }
  @media (max-width: 480px) {
    /* El título se mantiene en 3 líneas también en mobile (fijo, a propósito). */
    /* Aprieta el espacio del hero en mobile para que el selector de 3 modos
       quepa sin scroll debajo, sin perder la jerarquía visual del título. */
    hero { padding: 14px 0 18px; }
    .badge { margin-bottom: 12px; padding: 5px 12px; font-size: 11px; }
    h1 { font-size: clamp(30px, 8.5vw, 38px); margin-bottom: 8px; }
    .subtitle { font-size: 13.5px; line-height: 1.45; margin-bottom: 16px; }
    .state { padding: 18px !important; }
  }
  h1 span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; transition: opacity 0.35s ease; }
  .subtitle { font-size: 17px; line-height: 1.6; color: var(--text); opacity: 0.88; max-width: 500px; margin-bottom: 44px; }

  .state-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 8px; margin-bottom: 110px; position: relative; overflow: hidden; scroll-margin-top: 100px; }
  .state-card::before { content:''; position:absolute; top:-80px; right:-80px; width:240px; height:240px; background: radial-gradient(circle, rgba(124,106,247,0.1) 0%, transparent 70%); pointer-events:none; }
  .state { display: none; padding: 32px; position: relative; }
  .state.active { display: block; animation: fadeIn 0.4s ease; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

  /* ---- Asistente virtual (sección embebida) ---- */
  #asistente { --g1:#4837d1; --g2:#12d9e0; --acc2:#9c8bff; --surf2:#0c0c14; --ok:#3ecf8e; --bad:#ff6b6b; --amber:#f5a623; }
  .asis-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; margin-bottom: 110px; scroll-margin-top: 100px; position: relative; overflow: hidden; }
  .asis-card::before { content:''; position:absolute; top:-80px; right:-80px; width:240px; height:240px; background: radial-gradient(circle, rgba(124,106,247,0.1) 0%, transparent 70%); pointer-events:none; }
  .asis-label { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 18px; }
  .asis-body { max-width: 468px; margin: 0 auto; position: relative; }
  .asis-mine { position:absolute; top:14px; right:16px; font-size:12.5px; color:var(--acc2); cursor:pointer; z-index:2; }
  .asis-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); border:1px solid rgba(124,106,247,0.4); border-radius:20px; padding:3px 10px; margin-bottom:14px; }
  .asis-sub { color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:22px; }
  .asis-dots { display:flex; gap:6px; margin-bottom:22px; }
  .asis-dots i { height:3px; flex:1; border-radius:3px; background:var(--border); transition:.35s; }
  .asis-dots i.on { background:var(--accent); }
  .asis-step { display:none; }
  .asis-step.active { display:block; animation: fadeIn 0.4s ease; }
  .asis-hidden { display:none !important; }
  .asis-card label { display:block; font-size:13px; color:var(--muted); margin-bottom:8px; font-weight:500; }
  .asis-card input[type=email], .asis-card input[type=text], .asis-card input[type=date], .asis-card input[type=time] {
    width:100%; background:var(--surf2); border:1px solid var(--border); border-radius:12px;
    padding:13px 14px; color:var(--text); font-size:16px; font-family:inherit; outline:none; appearance:none; }
  .asis-card input:focus { border-color:var(--acc2); }
  @keyframes asisEmailPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(156,139,255,0.35); }
    50% { box-shadow: 0 0 0 6px rgba(156,139,255,0); }
  }
  #asis-email { animation: asisEmailPulse 2s ease-in-out 3; }
  #asis-email:focus { animation: none; }
  .asis-card input::placeholder { color:var(--dim); }
  .asis-hint { font-size:12px; color:var(--dim); margin-top:8px; line-height:1.5; }
  .asis-hint strong { color:var(--muted); }
  .asis-row { display:flex; gap:10px; margin-top:20px; }
  .asis-row.center { justify-content:center; }
  .asis-row.center .asis-btn { flex:0 0 auto; min-width:140px; }
  .asis-btn { font-family:inherit; font-size:15px; font-weight:700; border:0; border-radius:12px; padding:13px 18px; cursor:pointer; transition:.15s; flex:1; }
  .asis-primary { background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; }
  @media (hover: hover) and (pointer: fine) { .asis-primary:hover { filter:brightness(1.05); box-shadow:0 12px 36px rgba(124,106,247,0.35); } }
  .asis-primary:disabled { opacity:.5; cursor:not-allowed; filter:none; }
  .asis-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); flex:0 0 auto; }
  @media (hover: hover) and (pointer: fine) { .asis-ghost:hover { color:var(--text); border-color:var(--acc2); } }
  .asis-soft { background:var(--surf2); color:var(--muted); border:1px solid var(--border); }
  @media (hover: hover) and (pointer: fine) { .asis-soft:hover { color:var(--text); border-color:var(--acc2); } }
  .asis-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .asis-chip { background:var(--surf2); border:1px solid var(--border); color:var(--muted); border-radius:20px; padding:9px 15px; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; flex:0 0 auto; }
  @media (hover: hover) and (pointer: fine) { .asis-chip:hover { border-color:var(--acc2); color:var(--text); } }
  .asis-chip.sel { background:rgba(124,106,247,0.18); border-color:var(--accent2); color:#fff; }
  .asis-field { margin-top:16px; }
  .asis-saldo { margin:10px 0 4px; padding:14px 18px; border-radius:10px; text-align:center; border:1px solid rgba(124,106,247,0.3); background:rgba(124,106,247,0.08); font-size:15px; font-weight:600; line-height:1.5; color:var(--text); }
  .asis-saldo.bajo { background:rgba(124,106,247,0.08); border-color:rgba(124,106,247,0.3); color:var(--text); }
  .asis-saldo.sin { background:rgba(124,106,247,0.08); border-color:rgba(124,106,247,0.3); color:var(--text); }
  .asis-saldo a { display:inline-block; margin-top:6px; color:inherit; font-weight:700; text-decoration:underline; }
  .asis-confirm { background:var(--surf2); border:1px solid var(--border); border-radius:14px; padding:16px; font-size:14px; line-height:1.7; color:var(--muted); }
  .asis-confirm strong { color:var(--text); }
  .asis-linkline { display:block; margin-top:10px; padding:9px 12px; background:#07070d; border:1px solid var(--border); border-radius:9px; font-size:12.5px; color:var(--accent2); word-break:break-all; }
  .asis-err { color:var(--bad); font-size:13px; margin-top:12px; min-height:18px; line-height:1.5; }
  .asis-err:empty { margin-top:0; min-height:0; }
  .asis-notice { background:rgba(124,106,247,0.08); border:1px solid rgba(124,106,247,0.3); border-radius:12px; padding:14px; font-size:13.5px; line-height:1.6; color:var(--text); margin-top:8px; }
  .asis-notice.bad { background:rgba(124,106,247,0.08); border-color:rgba(124,106,247,0.3); }
  .asis-notice.info { background:rgba(124,106,247,0.08); border-color:rgba(124,106,247,0.3); }
  .asis-notice h4 { font-family:'Montserrat',sans-serif; font-size:15px; margin-bottom:4px; color:var(--accent); }
  .asis-notice.bad h4 { color:var(--accent); }
  .asis-notice.info h4 { color:var(--accent); }
  .asis-success { text-align:center; padding:8px 0; }
  .asis-success .ic { width:64px; height:64px; margin:0 auto 14px; }
  .asis-success h3 { font-family:'Montserrat',sans-serif; font-size:20px; margin-bottom:10px; }
  .asis-success p { color:var(--muted); font-size:14px; line-height:1.6; }
  .asis-success .mail { color:var(--g2); font-weight:700; }
  .asis-link { color:var(--acc2); text-decoration:none; cursor:pointer; }
  .asis-livestat { margin-top:6px; font-size:13px; color:var(--muted); min-height:18px; }
  .asis-job { background:var(--surf2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
  .asis-job .top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .asis-job .when { font-size:13px; color:var(--muted); font-weight:600; }
  .asis-job .bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:4px; }
  .asis-job .url { font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
  .asis-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
  .asis-badge.live { background:rgba(62,207,142,0.14); color:var(--ok); }
  .asis-badge.wait { background:rgba(245,166,35,0.14); color:var(--amber); }
  .asis-badge.sched { background:rgba(124,106,247,0.16); color:var(--accent); }
  .asis-badge.gone { background:rgba(240,239,254,0.08); color:var(--dim); }
  .asis-job .x { background:none; border:0; color:var(--dim); font-size:12px; padding:6px 8px; flex:0 0 auto; cursor:pointer; text-decoration:underline; }
  @media (hover: hover) and (pointer: fine) { .asis-job .x:hover { color:var(--bad); } }
  .asis-empty { color:var(--dim); font-size:13.5px; text-align:center; padding:20px 0; }
  .asis-jobsPager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
  .asis-jobsPager .asis-btn { flex:0 0 auto; padding:8px 14px; font-size:13px; }
  .asis-jobsPager .asis-btn:disabled { opacity:.4; cursor:not-allowed; }
  #asis-jobsPageInfo { font-size:12.5px; color:var(--dim); }

  .upload-zone { border: 2px dashed rgba(124,106,247,0.3); border-radius: 18px; padding: 56px 28px; text-align: center; cursor: pointer; transition: all 0.25s ease; background: rgba(124,106,247,0.03); position: relative; overflow: hidden; }
  @media (hover: hover) and (pointer: fine) { .upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); background: rgba(124,106,247,0.08); transform: translateY(-2px); } }
  .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .upload-icon-wrap { width: 64px; height: 64px; background: linear-gradient(135deg, rgba(124,106,247,0.15), rgba(79,209,197,0.1)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
  .upload-icon-wrap svg { width: 30px; height: 30px; stroke: var(--accent); }
  @media (max-width: 480px) {
    .upload-zone { padding: 24px 20px; }
    .upload-icon-wrap { width: 46px; height: 46px; margin-bottom: 10px; }
    .upload-icon-wrap svg { width: 22px; height: 22px; }
    .upload-formats { margin-top: 12px; }
  }
  @media (max-width: 600px) {
    .upload-zone { padding: 14px 20px; }
    .upload-icon-wrap { width: 42px; height: 42px; margin-bottom: 8px; }
    .upload-icon-wrap svg { width: 20px; height: 20px; }
    .upload-formats { margin-top: 8px; }
    hero { padding: 12px 0 40px; }
    .badge { margin-bottom: 12px; }
    h1 { margin-bottom: 10px; }
    .subtitle { font-size: 15px; margin-bottom: 18px; }
    .waveform-wrap { margin-top: 2px; gap: 2px; }
    .waveform-canvas { height: 34px; }
    .state { padding: 14px; }
    .processing-header { margin-bottom: 14px; }
    .processing-icon { width: 44px; height: 44px; margin-bottom: 10px; }
    .checklist { gap: 8px; margin-bottom: 14px; }
    .success-wrap { padding: 8px 0; }
    .success-icon { width: 56px; height: 56px; margin-bottom: 14px; }
  }
  .upload-title { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.3px; }
  .upload-hint { font-size: 14px; color: var(--muted); }
  .upload-hint span { color: var(--accent); font-weight: 500; }
  .upload-formats { display: flex; justify-content: center; gap: 20px; margin-top: 22px; font-size: 12px; color: var(--dim); }
  .upload-formats span { display: flex; align-items: center; gap: 5px; }
  .upload-formats span::before { content:''; width:4px; height:4px; background:var(--dim); border-radius:50%; }
  .upload-limit { margin-top: 10px; font-size: 11px; color: var(--dim); text-align: center; }

  .file-card { display: flex; align-items: center; gap: 14px; background: rgba(79,209,197,0.06); border: 1px solid rgba(79,209,197,0.2); border-radius: 14px; padding: 16px 20px; margin-bottom: 28px; }
  .file-icon { width: 40px; height: 40px; background: rgba(79,209,197,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .file-icon svg { width: 20px; height: 20px; stroke: var(--accent2); }
  .file-info { flex: 1; min-width: 0; }
  .file-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .file-size { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .file-remove { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; transition: all 0.2s; }
  @media (hover: hover) and (pointer: fine) { .file-remove:hover { color: var(--text); background: rgba(255,255,255,0.05); } }
  .file-remove svg { width: 16px; height: 16px; }

  /* Saldo de minutos */
  .saldo-box {
    display: none; margin: 10px 0 16px; padding: 14px 18px;
    border-radius: 10px; border: 1px solid rgba(124,106,247,0.3); background: rgba(124,106,247,0.08);
    font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; text-align: center;
  }
  .saldo-box.visible { display: block; animation: fadeIn 0.3s ease; }

  .perfil-label { font-size: 13px; color: var(--muted); margin: 16px 0 8px; }
  .perfil-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
  .perfil-btn {
    padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--muted); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
  }
  @media (hover: hover) and (pointer: fine) { .perfil-btn:hover { border-color: var(--accent); } }
  .perfil-btn.active {
    background: linear-gradient(135deg, var(--accent), #5a4fd4);
    border-color: transparent; color: #fff;
  }
  .saldo-box strong { font-size: 16px; }
  .saldo-box.bajo { background: rgba(124,106,247,0.08); border-color: rgba(124,106,247,0.3); color: var(--text); }
  .saldo-box.sin { background: rgba(124,106,247,0.08); border-color: rgba(124,106,247,0.3); color: var(--text); }
  .saldo-link {
    display: inline-block; margin-top: 8px; color: inherit;
    font-weight: 600; text-decoration: underline;
  }

  .email-label { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.3px; }
  .email-hint { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
  .wifi-hint { display: flex; align-items: flex-start; gap: 8px; }
  .wifi-hint-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent2); margin-top: 2px; }
  .input-field { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text); width: 100%; transition: border-color 0.2s; outline: none; margin: 8px 0 10px; }
  #emailInput:placeholder-shown { animation: emailGlow 2.4s ease-in-out 4; }
  @keyframes emailGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,106,247,0.28); border-color: var(--border); }
    50% { box-shadow: 0 0 0 5px rgba(124,106,247,0); border-color: rgba(124,106,247,0.55); }
  }
  @media (prefers-reduced-motion: reduce) {
    #emailInput:placeholder-shown { animation: none; border-color: rgba(124,106,247,0.4); }
  }
  .input-field::placeholder { color: rgba(240,239,254,0.22); }
  .input-field:focus { border-color: rgba(124,106,247,0.5); }

  .btn { width: 100%; padding: 17px 24px; background: linear-gradient(135deg, var(--accent), #5a4fd4); border: none; border-radius: 13px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
  .btn:disabled { background: var(--surface2); color: var(--dim); cursor: not-allowed; opacity: 0.7; }
  @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(124,106,247,0.4); } }
  .btn:active { transform: translateY(0) scale(0.97); }
  .btn-arrow { transition: transform 0.2s; }
  @media (hover: hover) and (pointer: fine) { .btn:hover .btn-arrow { transform: translateX(4px); } }
  
  
  .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
  
  @keyframes spin { to { transform: rotate(360deg); } }

  .free-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--muted); }
  .free-note svg { width: 13px; height: 13px; stroke: var(--accent2); }

  .success-wrap { text-align: center; padding: 20px 0; }
  .success-icon { width: 72px; height: 72px; background: linear-gradient(135deg, rgba(79,209,197,0.15), rgba(79,209,197,0.05)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; position: relative; }
  .success-icon::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(79,209,197,0.2); animation: ripple 2s ease-out infinite; }
  @keyframes ripple { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(1.3);opacity:0} }
  .success-icon svg { width: 34px; height: 34px; stroke: var(--accent2); }
  .success-title { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 700; margin-bottom: 10px; letter-spacing: -1px; animation: doneFadeUp 0.5s ease 0.15s both; }
  @media (prefers-reduced-motion: reduce) {
    .success-title { animation: none; }
  }
  .success-sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
  .success-email { color: var(--accent2); font-weight: 500; }
  .success-time { display: inline-flex; align-items: center; gap: 6px; background: rgba(124,106,247,0.08); border: 1px solid rgba(124,106,247,0.2); border-radius: 100px; padding: 8px 14px; font-size: 13px; color: #a89bf8; margin-top: 20px; }
  .success-time svg { width: 13px; height: 13px; stroke: #a89bf8; }

  .pay-icon { width: 64px; height: 64px; background: linear-gradient(135deg, rgba(245,166,35,0.2), rgba(245,166,35,0.05)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
  .pay-icon svg { width: 30px; height: 30px; stroke: var(--accent-amber); }
  .pay-title { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 10px; letter-spacing: -0.8px; }
  .pay-sub { font-size: 15px; color: var(--muted); text-align: center; margin-bottom: 28px; line-height: 1.55; }
  .pay-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
  .pay-amount { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 18px; }
  .pay-currency { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; color: var(--muted); }
  .pay-number { font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
  .pay-period { font-size: 14px; color: var(--muted); margin-left: 4px; }
  .pay-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media(max-width:460px){.pay-features{grid-template-columns:1fr}}
  .pay-feat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .pay-feat svg { width: 14px; height: 14px; stroke: var(--accent2); flex-shrink: 0; }
  .pay-methods-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
  .pay-pill { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 11px; color: var(--muted); }
  .btn-pay { background: linear-gradient(135deg, var(--accent-amber), #d48614); }
  @media (hover: hover) and (pointer: fine) { .btn-pay:hover { box-shadow: 0 12px 36px rgba(245,166,35,0.35); } }
  .pay-secondary { text-align: center; margin-top: 14px; font-size: 12px; color: var(--dim); }
  .pay-secondary a { color: var(--muted); cursor: pointer; text-decoration: underline; }
  @media (hover: hover) and (pointer: fine) { .pay-secondary a:hover { color: var(--text); } }

  .faq-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 8px 28px; margin-bottom: 40px; scroll-margin-top: 100px; }
  .faq-label { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); text-align: center; margin: 20px 0 4px; }

  .deliv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; margin-bottom: 40px; scroll-margin-top: 100px; }
  .deliv-list-tag { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent2); margin-bottom: 10px; }
  .deliv-label { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 36px; }

  .price-card-simple { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; margin-bottom: 40px; text-align: center; scroll-margin-top: 100px; }
  .price-label { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
  .price-tagline { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
  
  .price-row-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
  @media (max-width: 480px) {
    .price-row-4 { margin-bottom: 8px; }
  }
  /* flex column + botón con margin-top:auto -- así el botón queda
     siempre pegado abajo de SU propia tarjeta, sin importar que una
     tarjeta vecina sea más alta (el stretch del grid ya no puede
     empujarlo fuera de donde se ve). Refuerza el fix de arriba, no
     depende de adivinar por qué una tarjeta cambiaba de alto en iOS. */
  .price-option { border: 1px solid var(--border); border-radius: 16px; padding: 18px 12px; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: transform 0.2s ease; display: flex; flex-direction: column; }
  .price-option .btn-small { margin-top: auto; }
  /* Solo transform, no border-color -- ".price-option-main" ya tiene su
     propio borde morado más fuerte (rgba ,0.5) y un hover que tocara
     border-color acá (misma especificidad, :hover suma) se lo pisaría
     y lo dejaría MÁS débil justo al pasar el mouse por la recomendada. */
  @media (hover: hover) and (pointer: fine) {
    .price-option:hover { transform: translateY(-3px); }
  }
  /* "Más elegido" se perdía entre las otras 3 tarjetas -- apenas un
     badge de 10px y un tinte de borde casi imperceptible la distinguían.
     Mismo glow morado de marca que ya se usa en hover de botones, pero
     fijo (no solo al pasar el mouse) para que de verdad se note cuál es
     la recomendada, sin inventar un color nuevo. */
  .price-option-main { border-color: rgba(124,106,247,0.5); background: rgba(124,106,247,0.07); box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 10px 30px rgba(124,106,247,0.22); }
  .price-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
  .price-option-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
  .price-option-minutes { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
  /* white-space:nowrap -- "COP" se rompía a su propia línea solo en la
     tarjeta "Más elegido" en iPhone real (el -webkit-text-size-adjust
     de arriba no lo resolvió), sumando una línea extra de alto que
     empujaba su botón "Recargar" justo bajo la barra flotante de
     Safari. Cabe de sobra en una sola línea (confirmado con Chromium a
     390px), así que se fuerza para no depender de por qué WebKit
     decidía romperlo. */
  .price-option-cost { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; white-space: nowrap; }
  .price-option-currency { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 11px; color: var(--dim); letter-spacing: 0.03em; }
  .price-option-rate { font-size: 11px; color: var(--dim); margin-bottom: 12px; }
  .btn-small { display: inline-block; width: 100%; margin-top: 10px; padding: 9px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: transform 0.14s ease-out, filter 0.14s ease-out; }
  @media (hover: hover) and (pointer: fine) { .btn-small:hover { filter: brightness(1.06); } }
  .price-note { font-size: 12px; color: var(--dim); margin-top: 18px; }
  /* El aire extra va DESPUÉS de esta nota, no entre los botones y el
     texto -- la barra flotante de Safari se posa sobre el borde
     inferior de la tarjeta al hacer scroll; con esto el texto queda
     pegado a los botones y el colchón sigue estando al final. Solo
     mobile -- en escritorio no hay barra flotante que cubra contenido. */
  @media (max-width: 480px) {
    .price-note { margin-bottom: 80px; }
  }
  .rec-email-wrap { max-width: 340px; margin: 4px auto 20px; }
  .rec-email-wrap .input-field { margin: 0; }
  .rec-hint { font-size: 11px; color: var(--dim); margin-top: 6px; }
  .rec-alert { display: none; align-items: center; gap: 12px; text-align: left; margin-top: 18px; padding: 16px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.45; }
  .rec-alert.show { display: flex; animation: fadeIn 0.3s ease; }
  .rec-alert svg { width: 26px; height: 26px; flex: 0 0 auto; }
  .rec-alert.ok { background: rgba(124,106,247,0.1); border: 1px solid rgba(124,106,247,0.3); color: var(--text); }
  .rec-alert.err { background: rgba(124,106,247,0.1); border: 1px solid rgba(124,106,247,0.3); color: var(--text); }
  .rec-alert.info { background: rgba(124,106,247,0.1); border: 1px solid rgba(124,106,247,0.3); color: var(--text); }
  
  .deliv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .deliv-list { display: flex; flex-direction: column; gap: 18px; }
  .deliv-item { border-left: 2px solid var(--accent); padding-left: 14px; }
  .deliv-item-2 { border-left-color: var(--accent2); }
  .deliv-item-3 { border-left-color: var(--accent); }
  .deliv-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 3px; }
  .deliv-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
  
  
  /* Antes era una imagen rasterizada de 620x360 -- se veía pixelada al
     escalar en pantallas grandes o retina, y además no coincidía con el
     formato real del correo que se envía (ver services/email.js: mismos
     colores y estructura -- eyebrow azul, cajita de participantes,
     resumen con borde izquierdo, y las 3 secciones en píldora "PUNTOS
     CLAVE / DECISIONES / ACCIONES"). Se reconstruye fiel a ese formato,
     en HTML/CSS real (nítido a cualquier resolución) y compacto. La
     "mock-card-behind" simula una segunda tarjeta apilada detrás. */
  .deliv-image { position: relative; padding-bottom: 9px; }
  .mock-card-behind {
    position: absolute; left: 8px; right: 8px; top: 8px; bottom: 0;
    background: var(--surface2); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 11px; z-index: 0;
  }
  .mock-card {
    position: relative; z-index: 1; background: #f5f5f7; border-radius: 11px;
    overflow: hidden; border: 1px solid rgba(255,255,255,0.18);
    /* Sombra en capas (contacto + ambiente + difusa) en vez de una sola
       sombra plana -- se ve más realista, como si la tarjeta flotara. */
    box-shadow:
      0 1px 2px rgba(0,0,0,0.24),
      0 8px 16px rgba(0,0,0,0.22),
      0 24px 40px rgba(0,0,0,0.28);
    font-family: Arial, 'Helvetica Neue', sans-serif;
  }
  .mock-head { background: #0a0a0f; padding: 7px 11px; }
  .mock-head-top { display: flex; align-items: center; gap: 4px; }
  .mock-logo { width: 12px; height: 12px; flex-shrink: 0; }
  .mock-brand { color: #fff; font-weight: 800; font-size: 10px; letter-spacing: -0.2px; }
  .mock-brand-dot { color: #62a6da; }
  /* Dos "paneles" que se alternan con un fundido -- así cada uno tiene
     más espacio y letra más grande sin agrandar la tarjeta, en vez de
     apretar todo (título + resumen + 3 secciones) en una sola vista. */
  .mock-body { padding: 11px 13px 13px; }
  /* Los dos paneles quedan uno encima del otro (misma altura fija, la del
     más alto) en vez de uno-tras-otro en flujo normal -- así al alternar
     solo cambia la opacidad y la tarjeta nunca cambia de tamaño de golpe. */
  .mock-panels { position: relative; height: 148px; }
  .mock-panel { position: absolute; inset: 0; transition: opacity 0.4s ease; }
  .mock-eyebrow { color: #4877d1; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 5px; }
  .mock-title { margin: 0 0 4px; color: #0a0a0f; font-size: 13px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; }
  .mock-meta { color: #8a8a95; font-size: 9px; margin-bottom: 9px; }
  .mock-participants { background: #eef4fb; border-radius: 6px; padding: 5px 9px; font-size: 9.5px; color: #3a5fb8; margin-bottom: 8px; }
  .mock-participants strong { color: #16161c; }
  .mock-summary { background: #ffffff; border-left: 2px solid #4877d1; padding: 8px 10px; border-radius: 0 5px 5px 0; color: #2d2d3a; font-size: 10px; line-height: 1.5; }
  .mock-section { margin-bottom: 9px; }
  .mock-section:last-child { margin-bottom: 0; }
  .mock-section-label { display: inline-block; background: #e8e8ee; padding: 2px 8px; border-radius: 100px; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4877d1; margin-bottom: 4px; }
  .mock-section ul { margin: 0; padding-left: 13px; }
  .mock-section li { color: #3a3a45; font-size: 10px; line-height: 1.45; margin-bottom: 3px; }
  .mock-section li .mock-when { color: #8a8a95; font-size: 9px; }
  .mock-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
  .mock-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d5d5dc; transition: background 0.4s ease; }
  .mock-dots i.on { background: #4877d1; }
  @media (max-width: 460px) {
    .deliv-grid { grid-template-columns: 1fr; }
  }
  .faq-item { border-bottom: 1px solid var(--border); padding: 18px 0; }
  .faq-item:last-child { border-bottom: none; }
  .faq-item summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: var(--text);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: '+'; color: var(--accent2); font-size: 22px; line-height: 1; flex-shrink: 0; }
  .faq-item[open] summary::after { content: '\2212'; }
  .faq-item p { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; padding-right: 28px; }

  .steps-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 36px 24px; margin-bottom: 40px; scroll-margin-top: 100px; }
  .steps-label { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 28px; }
  .steps-row { display: flex; align-items: flex-start; justify-content: center; }
  .step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; flex-shrink: 0; }
  .step-circle { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid; margin-bottom: 16px; background: rgba(255,255,255,0.02); }
  .step-circle svg { width: 32px; height: 32px; }
  .step-circle-1 { border-color: #7c6af7; color: #7c6af7; box-shadow: 0 0 24px rgba(124,106,247,0.4), inset 0 0 20px rgba(124,106,247,0.12); }
  .step-circle-2 { border-color: #5cb8c4; color: #5cb8c4; box-shadow: 0 0 24px rgba(92,184,196,0.4), inset 0 0 20px rgba(92,184,196,0.12); }
  .step-circle-3 { border-color: #4fd1c5; color: #4fd1c5; box-shadow: 0 0 24px rgba(79,209,197,0.4), inset 0 0 20px rgba(79,209,197,0.12); }
  .step-label { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; color: var(--text); margin-bottom: 6px; }
  .step-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
  .step-connector-wrap { flex: 1; align-self: center; max-width: 140px; min-width: 40px; margin: 0 -8px; padding-top: 34px; }
  @media (max-width: 640px) {
    .steps-row { flex-direction: column; align-items: center; gap: 28px; }
    .step-connector-wrap { display: none; }
    .step { width: 100%; }
  }

  footer { border-top: 1px solid var(--border); padding: 24px 0 36px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); flex-wrap: wrap; gap: 10px; }
  .footer-logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -0.5px; }
  
  
  
  .footer-logo span { color: #62a6da; }

  .error-msg { background: rgba(255, 100, 100, 0.1); border: 1px solid rgba(255, 100, 100, 0.3); color: #ff9999; padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; display: none; }
  .error-msg.show { display: block; animation: fadeIn 0.3s ease; }
  .compra-ok { background: rgba(79, 209, 197, 0.1); border: 1px solid rgba(79, 209, 197, 0.35); color: var(--text); padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; display: none; line-height: 1.5; }
  .compra-ok.show { display: block; animation: fadeIn 0.3s ease; }
  .compra-ok strong { color: var(--accent2); }

  /* ===== GRABACIÓN DIRECTA ===== */
  
  
  
  
  .record-btn { background: linear-gradient(135deg, #7c6af7, #4fd1c5); }
  @media (hover: hover) and (pointer: fine) { .record-btn:hover { box-shadow: 0 12px 36px rgba(124,106,247,0.35); } }
  .record-btn.recording { background: linear-gradient(135deg, #c0392b, #962d22); animation: pulse-record 1.5s ease-in-out infinite; }
  @keyframes pulse-record { 0%,100%{box-shadow:0 0 0 0 rgba(231,76,94,0.4)} 50%{box-shadow:0 0 0 12px rgba(231,76,94,0)} }
  .record-dot { width: 10px; height: 10px; background: white; border-radius: 50%; flex-shrink: 0; }
  .record-btn.recording .record-dot { background: #ff4444; animation: blink 1s infinite; border-radius: 3px; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
  .record-status { text-align: center; min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--muted); }
  .record-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: left; }
  .record-note-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent2); margin-top: 2px; }
  /* Más alto también en mobile, para que "¿Cómo funciona?" no se asome en
     la misma pantalla al elegir Grabar (mismo motivo que en escritorio). */
  #modoGrabar { padding: 32px 0; }
  #modoCargar { padding: 16px 0; }

  /* Selector de modo: 3 opciones compactas, pensado para caber sin scroll en mobile */
  .modo-header { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 28px; }
  .modo-opciones { display: flex; flex-direction: column; gap: 14px; }
  .modo-opcion {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 14px;
    padding: 13px 16px; cursor: pointer; text-decoration: none;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
    font-family: 'DM Sans', sans-serif;
  }
  @media (hover: hover) and (pointer: fine) { .modo-opcion:hover { border-color: var(--accent); background: rgba(124,106,247,0.08); transform: translateY(-2px); } }
  .modo-icon {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,106,247,0.15), rgba(79,209,197,0.1));
    display: flex; align-items: center; justify-content: center; color: var(--accent);
    animation: doneIconPop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  .modo-icon svg { width: 17px; height: 17px; }
  .modo-icon.i-asis { background: rgba(124,106,247,0.18); color: #9c8bff; }
  .modo-icon.i-grabar { background: rgba(46,213,161,0.18); color: #2ed5a1; animation-delay: 0.08s; }
  .modo-icon.i-cargar { background: rgba(74,158,255,0.18); color: #4a9eff; animation-delay: 0.16s; }
  @media (hover: hover) and (pointer: fine) {
    .modo-opcion:hover .modo-icon { transform: scale(1.1) rotate(-4deg); transition: transform 0.16s ease; }
  }
  @media (prefers-reduced-motion: reduce) {
    .modo-icon { animation: none; }
  }
  .modo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .modo-texto strong { font-size: 13.5px; font-weight: 700; color: #fff; }
  .modo-texto span { font-size: 11.5px; color: #fff; }
  .modo-chevron { flex: 0 0 auto; color: var(--dim); font-size: 18px; line-height: 1; }
  .modo-volver {
    background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600;
    cursor: pointer; padding: 4px 0; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px;
    font-family: 'DM Sans', sans-serif;
  }
  @media (hover: hover) and (pointer: fine) { .modo-volver:hover { color: var(--text); } }
  

  /* Visualizador de ondas */
  .waveform-wrap { display: none; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; scroll-margin-top: 90px; scroll-margin-bottom: 90px; }
  /* Deja aire bajo el nav sticky al centrar la tarjeta en pantalla */
  .state-card { scroll-margin-top: 90px; scroll-margin-bottom: 40px; }
  .waveform-wrap.active { display: flex; animation: fadeIn 0.4s ease; }
  .waveform-canvas { width: 100%; height: 64px; border-radius: 12px; background: rgba(124,106,247,0.06); border: 1px solid rgba(124,106,247,0.15); }
  .waveform-timer { font-family: monospace; font-size: 13px; color: var(--accent2); letter-spacing: 0.05em; }

  /* ===== PROGRESO EN VIVO (SSE) ===== */
  .processing-wrap { padding: 12px 0; }
  .processing-header { text-align: center; margin-bottom: 28px; }
  .processing-icon { display: inline-block; width: 64px; height: 64px; background: linear-gradient(135deg, rgba(124,106,247,0.2), rgba(79,209,197,0.15)); border-radius: 50%; position: relative; margin-bottom: 18px; }
  .processing-icon::before { content:''; position: absolute; inset: 10px; border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--accent2); border-radius: 50%; animation: spin 1s linear infinite; }
  .processing-title { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.5px; }
  .processing-subtitle { font-size: 13px; color: var(--muted); min-height: 20px; transition: all 0.3s; }
  .progress-bar-wrap { background: var(--surface2); border-radius: 10px; height: 8px; overflow: hidden; margin-bottom: 26px; }
  .progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 10px; transition: width 0.5s ease; width: 0%; position: relative; overflow: hidden; }
  .progress-bar::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation: shimmer 2s infinite; }
  @keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
  .checklist { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
  .check-item { display: flex; align-items: center; gap: 12px; }
  .check-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; transition: all 0.3s; }
  .check-item.active .check-dot { background: rgba(124,106,247,0.3); border-color: transparent; }
  .check-item.active .check-dot::before { content:''; position: absolute; inset: 3px; border: 2px solid rgba(124,106,247,0.5); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  .check-item.done .check-dot { background: rgba(79,209,197,0.2); border-color: transparent; }
  .check-item.done .check-dot::after { content:''; width: 10px; height: 10px; border: 2.5px solid var(--accent2); border-top: 0; border-left: 0; transform: rotate(45deg) translateY(-2px); display: block; }
  .check-label { font-size: 14px; color: rgba(240,239,254,0.3); transition: color 0.3s; }
  .check-item.active .check-label { color: var(--text); font-weight: 500; }
  .check-item.done .check-label { color: var(--accent2); }
  .check-meta { margin-left: auto; font-size: 11px; color: rgba(240,239,254,0.3); font-family: monospace; }
  .check-item.active .check-meta { color: var(--accent); }
  .check-item.done .check-meta { color: rgba(79,209,197,0.5); }
  .processing-footer { padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
  .processing-footer span:last-child { color: var(--text); font-family: monospace; }

  .processing-done { display: none; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; animation: fadeIn 0.6s ease; }
  .processing-done.show { display: block; }
  .processing-done-icon { width: 52px; height: 52px; background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: doneIconPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both, doneGlow 2.2s ease-in-out 0.5s infinite; }
  .processing-done-icon svg { width: 26px; height: 26px; stroke: #ffffff; }
  .processing-done-title { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.5px; color: #ffffff; animation: doneFadeUp 0.5s ease 0.15s both; }
  @keyframes doneIconPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes doneGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
  @keyframes doneFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    .processing-done-icon, .processing-done-title { animation: none; }
  }

  /* Fin del proceso: un solo mensaje, centrado, con el siguiente paso */
  #state-processing.active:has(.processing-done.show) .processing-header,
  #state-processing.active:has(.processing-done.show) .progress-bar-wrap,
  #state-processing.active:has(.processing-done.show) .checklist { display: none; }
  #state-processing.active:has(.processing-done.show) .processing-done { margin-top: 0; padding-top: 8px; border-top: none; }
  .processing-done-icon { width: 64px !important; height: 64px !important; background: rgba(79,209,197,0.12) !important; box-shadow: 0 0 0 8px rgba(79,209,197,0.05); }
  .processing-done-icon svg { stroke: var(--accent2) !important; width: 30px !important; height: 30px !important; }
  .processing-done-title { font-size: 26px !important; letter-spacing: -0.8px !important; }
  .processing-done-acciones { display: grid; gap: 6px; justify-items: center; margin: 26px auto 4px; max-width: 320px; }
  .processing-done-sub { font-size: 14px; color: var(--muted); line-height: 1.6; }
  .processing-done-email { color: var(--accent2); font-weight: 700; font-size: 16px; }
  .processing-done-note { display: inline-flex; align-items: center; gap: 6px; background: rgba(124,106,247,0.08); border: 1px solid rgba(124,106,247,0.2); border-radius: 100px; padding: 8px 14px; font-size: 12px; color: #a89bf8; margin-top: 16px; }

  @media (min-width: 960px) {
    /* Hero se queda en 1 columna, igual que mobile -- después de 2 intentos
       fallidos (márgenes negativos, luego un grid angosto) que causaron o
       arriesgaban desborde real en el navegador, no vale la pena seguir
       insistiendo en partirlo en columnas.

       Esto es distinto: la MISMA columna, más ancha. .wrap a 640px fijo
       (igual en mobile y escritorio) dejaba el título/párrafo partidos en
       varias líneas angostas pegadas a la izquierda, con todo el resto de
       la pantalla vacío -- en vez de tocar la estructura, se le da más
       aire horizontal a la columna completa. */
    .wrap { max-width: 900px; }

    /* Los <br class="h1-break"> del título fuerzan 3 líneas SIEMPRE, sin
       importar el ancho -- tenía sentido en mobile (angosto), pero en
       escritorio con más aire el título cabe en 1-2 líneas solo. Se
       desactivan los saltos forzados y se deja que envuelva natural. */
    .h1-break { display: none; }

    /* El clamp() del título llega a 62px pensado para que se vea grande
       en una pantalla angosta -- en escritorio, con el párrafo mucho más
       chico al lado (17px), se sentía desproporcionado, como dos bloques
       sueltos en vez de una sola unidad (título + qué hace). Se achica un
       poco para que ambos se lean como un solo bloque, más parecido a
       como se ve en mobile. */
    h1 { font-size: 32px; margin-bottom: 8px; }

    /* Badge y título centrados -- se ven más "hero" en escritorio. El
       párrafo se queda alineado a la izquierda (más fácil de leer en 3
       líneas que centrado), pero dentro de un bloque centrado, no pegado
       al borde izquierdo del ancho completo de .wrap. */
    .hero-copy { text-align: center; }
    .subtitle { text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; }

    /* Objetivo: que la tarjeta "¿Cómo quieres usar Resumime?" se vea
       COMPLETA sin scrollear, con su borde inferior visible -- pidieron
       que quepa todo aunque haya que achicar tamaños. Se recorta el aire
       entre bloques del hero (nav, badge, párrafo) Y las 3 opciones de la
       tarjeta, no el contenido. */
    nav { padding: 8px 0; }
    .badge { margin-bottom: 8px; }
    .subtitle { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
    .modo-header { margin-bottom: 22px; font-size: 14px; }
    .modo-opciones { gap: 6px; }
    .modo-opcion { padding: 7px 14px; }
    .state-card { padding: 6px; }

    /* Más separación entre secciones, para que al centrar una (clic del
       menú) no se asome la siguiente en la misma pantalla. Incluye
       state-card: al achicar Grabar/Cargar por dentro, "¿Cómo funciona?"
       quedaba lo bastante cerca como para verse en la misma pantalla y
       mezclar los dos temas -- con más separación quedan claramente
       aparte, sin tocar el ancho ni el contenido de la tarjeta. */
    .steps-card, .deliv-card, .asis-card, .price-card-simple, .state-card {
      margin-bottom: 96px;
    }

    /* Precios era la sección más alta de toda la página: título + texto +
       correo + 4 tarjetas apiladas en grid de 2 columnas (2 filas) no
       cabían en una pantalla normal. En escritorio hay ancho de sobra
       para las 4 en una sola fila -- misma tarjeta, la mitad de alto. */
    .price-row-4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .price-tagline { margin-bottom: 14px; }
    .rec-email-wrap { margin: 4px auto 14px; }

    /* Más aire entre el título "¿Cómo funciona?" y los 3 pasos, para que
       la tarjeta baje un poco y no se alcance a ver la sección siguiente
       asomando por debajo. */
    .steps-label { margin-bottom: 52px; }

    /* Asistente virtual (paso 1, correo): el botón "Continuar" quedaba
       cortado por el borde de la pantalla -- mismo criterio que Precios,
       se aprieta el espaciado vertical sin sacar contenido. */
    .asis-card { padding: 16px 22px; }
    .asis-tag { margin-bottom: 6px; }
    .asis-sub { margin-bottom: 8px; font-size: 13px; line-height: 1.45; }
    .asis-dots { margin-bottom: 8px; }
    .asis-card label { margin-bottom: 6px; }
    .asis-card input[type=email], .asis-card input[type=text], .asis-card input[type=date], .asis-card input[type=time] {
      padding: 10px 14px;
    }
    .asis-hint { margin-top: 4px; }
    .asis-saldo { margin: 6px 0 4px; padding: 10px 18px; }
    .asis-row { margin-top: 8px; }
    .asis-btn { padding: 11px 18px; }

    /* Paso 3 (¿cuándo?): con "Hoy"/"Mañana" aparece el campo Hora, y con
       "Otro día" aparecen Día + Hora apilados -- eso hacía que el paso se
       saliera de la pantalla. Día y Hora ahora van lado a lado (hay ancho
       de sobra en escritorio) en vez de apilados, y se aprieta el resto
       del espaciado del paso igual que el resto de la tarjeta. */
    .asis-dt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .asis-field { margin-top: 8px; }
    .asis-chips { gap: 5px; }
    .asis-chip { padding: 7px 13px; }
    .asis-linkline { margin-top: 4px; padding: 6px 9px; }

    /* Mis reuniones: "Cancelar" ahora comparte línea con el link (ver CSS
       base .asis-job .bottom) -- ya no agrega una línea propia. Se aprieta
       el resto del espaciado de cada tarjeta para que 3 quepan en pantalla. */
    .asis-job { padding: 8px 12px; margin-bottom: 6px; }
    .asis-job .bottom { margin-top: 2px; }
    .asis-job .x { padding: 4px 6px; }
    .asis-jobsPager { margin-top: 2px; }

    /* Grabar: el botón heredaba width:100% de .btn (genérica) y se estiraba
       al ancho completo de la tarjeta -- sin nada que lo contenga, se veía
       desproporcionado comparado con el resto (ej. Asistente, columna de
       468px). Se centra todo el panel en una columna angosta y el botón
       pasa de barra completa a píldora centrada, más acorde a una acción
       puntual que a un CTA de ancho completo. */
    #modoGrabar { max-width: 420px; margin: 0 auto; padding: 36px 0; }
    .record-btn { width: auto; min-width: 240px; margin: 0 auto; padding: 16px 36px; border-radius: 100px; }
    .waveform-wrap { width: 100%; padding: 18px; background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; margin-top: 20px; }
    .waveform-canvas { background: rgba(124,106,247,0.04); }

    /* Cargar: misma causa que Grabar -- el dropzone (pensado para tocar
       cómodo en mobile) no tenía columna propia y se estiraba enorme en
       escritorio. Se centra igual y se achica el padding/ícono. La
       tarjeta exterior (#modoCargar, con su padding) se queda del mismo
       tamaño -- lo que se achica es solo el recuadro punteado de adentro,
       para que "formatos válidos" no quede cortado en escritorio. */
    #modoCargar { max-width: 420px; margin: 0 auto; padding: 20px 0; }
    .upload-zone { padding: 24px 24px; }
    .upload-icon-wrap { width: 44px; height: 44px; margin-bottom: 8px; }
    .upload-icon-wrap svg { width: 20px; height: 20px; }
    .upload-formats { margin-top: 14px; }

    /* Selector "¿Cómo quieres usar Resumime?": mismas 3 opciones, mismo
       problema -- sin columna propia se estiraban al ancho completo. */
    #modoSelector { max-width: 460px; margin: 0 auto; }

    /* Misma causa, un paso después: la pantalla del archivo + correo (justo
       tras grabar o cargar) tampoco tenía columna propia -- el .file-card,
       el input y el botón se estiraban al ancho completo de la tarjeta.
       Además, con el espaciado pensado para mobile, la nota de "Resultado
       en segundos" al final quedaba pegada al borde de pantalla. */
    #state-email { max-width: 420px; margin: 0 auto; }
    .file-card { padding: 12px 16px; margin-bottom: 16px; }
    .email-label { margin-bottom: 4px; }
    .email-hint { margin-bottom: 10px; }
    .input-field { padding: 12px 16px; margin: 6px 0 8px; }
    .saldo-box { margin: 6px 0 10px; padding: 10px 16px; }
    #submitBtn { padding: 13px 22px; }
    .free-note { margin-top: 10px; }

    /* Procesando tu reunión: la misma pantalla, sin columna propia y con
       el padding genérico de .state (32px, pensado para mobile), se
       alcanzaba a salir de la pantalla -- ícono, título y los 5 pasos del
       checklist con su aire original sumaban más alto que el viewport. */
    #state-processing { max-width: 420px; margin: 0 auto; }
    .state { padding: 20px 24px; }
    .processing-header { margin-bottom: 18px; }
    .processing-icon { width: 52px; height: 52px; margin-bottom: 12px; }
    .processing-title { font-size: 20px; }
    .progress-bar-wrap { margin-bottom: 16px; }
    .checklist { gap: 10px; margin-bottom: 14px; }
    .processing-footer { padding-top: 12px; }


    /* Al navegar por el menú, cada sección quedaba con el aire pensado
       para el nav más alto de mobile -- de sobra en escritorio (nav de
       62px), dejaba ver un pedazo de la sección anterior asomando arriba.
       Mismo valor para las 6 tarjetas, para que todas arranquen desde el
       mismo punto exacto bajo el nav. */
    .state-card, .asis-card, .faq-card, .deliv-card, .price-card-simple, .steps-card {
      scroll-margin-top: 76px;
    }

    /* Pulido de escritorio de bajo riesgo (no toca tamaños ni posiciones,
       solo interacción con mouse -- en mobile no hay hover). */
    .modo-opcion:hover .modo-chevron { color: var(--accent); transform: translateX(2px); }
    .modo-chevron { transition: color 0.2s, transform 0.2s; }
    .faq-item summary:hover { color: var(--accent2); }
  }

  /* ===================================================================
     PREMIUM 2026-09-25: menú móvil a pantalla completa, hoja "Empieza
     gratis" (cuenta = correo, validación antes de empezar) y pie nuevo.
     =================================================================== */
  html, body { overflow-x: clip; max-width: 100%; }
  body.bloqueo-scroll { overflow: hidden; }

  /* ---- Botones píldora (menú y hoja) ---- */
  .pill { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 22px; border-radius: 999px; border: none; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.2px; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease; -webkit-tap-highlight-color: transparent; }
  .pill:active { transform: scale(0.98); }
  .pill-primario { color: #fff; background: var(--boton-bg); box-shadow: var(--boton-sombra); }
  @media (hover: hover) and (pointer: fine) { .pill-primario:hover { box-shadow: var(--boton-sombra-hover); transform: translateY(-1px); } }
  .pill-secundario { color: var(--text); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
  @media (hover: hover) and (pointer: fine) { .pill-secundario:hover { background: rgba(255,255,255,0.08); } }
  .pill:focus-visible, .menu-item:focus-visible, .sheet-cerrar:focus-visible, .menu-cerrar:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }

  /* ---- Menú móvil a pantalla completa ---- */
  .menu-movil { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: rgba(10,10,15,0.62); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0s linear 0.28s; }
  .menu-movil::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 80% 8%, rgba(124,106,247,0.22), transparent 70%), radial-gradient(55% 35% at 15% 70%, rgba(79,209,197,0.12), transparent 70%); }
  .menu-movil.abierto { opacity: 1; visibility: visible; transition: opacity 0.28s ease; }
  .menu-cabeza { position: relative; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 24px 8px; }
  .menu-cabeza .logo-text { font-size: 24px; }
  .menu-cerrar { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: none; color: var(--text); cursor: pointer; border-radius: 12px; }
  .menu-cerrar svg { width: 22px; height: 22px; }
  .menu-cuenta { position: relative; margin: 10px 24px 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); display: none; align-items: center; gap: 12px; font-size: 14px; }
  .menu-cuenta.visible { display: flex; }
  .menu-cuenta-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(124,106,247,0.35), rgba(79,209,197,0.25)); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; text-transform: uppercase; flex: 0 0 auto; }
  .menu-cuenta-datos { min-width: 0; line-height: 1.35; }
  .menu-cuenta-correo { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .menu-cuenta-min { color: var(--accent2); font-weight: 500; font-variant-numeric: tabular-nums; }
  .menu-lista { position: relative; flex: 1; overflow-y: auto; padding: 6px 24px 16px; -webkit-overflow-scrolling: touch; }
  .menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: 0 2px; color: var(--text); text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: -0.2px; border-bottom: 1px solid rgba(255,255,255,0.06); opacity: 0; transform: translateY(10px); transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1), color 0.2s; }
  .menu-item svg { width: 18px; height: 18px; color: rgba(240,239,254,0.55); flex: 0 0 auto; transition: transform 0.2s; }
  .menu-item:active { color: var(--accent2); }
  .menu-item:active svg { transform: translateX(3px); }
  .menu-movil.abierto .menu-item { opacity: 1; transform: none; }
  .menu-movil.abierto .menu-item:nth-child(1) { transition-delay: 0.04s; }
  .menu-movil.abierto .menu-item:nth-child(2) { transition-delay: 0.08s; }
  .menu-movil.abierto .menu-item:nth-child(3) { transition-delay: 0.12s; }
  .menu-movil.abierto .menu-item:nth-child(4) { transition-delay: 0.16s; }
  .menu-movil.abierto .menu-item:nth-child(5) { transition-delay: 0.20s; }
  .menu-movil.abierto .menu-item:nth-child(6) { transition-delay: 0.24s; }
  .menu-etiqueta { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent2); border: 1px solid rgba(79,209,197,0.35); padding: 3px 8px; border-radius: 6px; margin-left: auto; margin-right: 10px; }
  .menu-pie { position: relative; padding: 14px 24px max(20px, env(safe-area-inset-bottom)); display: grid; gap: 10px; background: linear-gradient(180deg, rgba(10,10,15,0), rgba(10,10,15,0.85) 30%); }
  .menu-nota { text-align: center; font-size: 12.5px; color: rgba(240,239,254,0.55); }
  @media (min-width: 960px) { .menu-movil { display: none; } }
  @media (prefers-reduced-motion: reduce) { .menu-movil, .menu-item { transition: none !important; } }

  /* En escritorio: acceso a la cuenta al final del menú superior */
  .nav-cta { display: none; }
  @media (min-width: 960px) {
    .nav-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 8px 14px; border-radius: 999px; border: none; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #fff; background: var(--boton-bg); box-shadow: var(--boton-sombra); transition: transform 0.18s, box-shadow 0.25s; white-space: nowrap; }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124,106,247,0.45); }
    .nav-cta.con-cuenta { color: var(--text); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); font-variant-numeric: tabular-nums; }
  }
  /* En celular: el menú viejo (panel desplegable) se reemplaza por el nuevo */
  @media (max-width: 959px) { .nav-links { display: none !important; } }

  /* ---- Hoja "Empieza gratis" / Mi cuenta ---- */
  .sheet-fondo { position: fixed; inset: 0; z-index: 70; background: rgba(6,6,10,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
  .sheet-fondo.abierto { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
  .sheet { position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; background: #13121c; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); padding: 10px 24px max(24px, env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform 0.42s cubic-bezier(0.32,0.72,0,1); }
  .sheet.abierto { transform: translateY(0); }
  .sheet::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 180px; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 100% at 50% 0%, rgba(124,106,247,0.18), transparent 70%); }
  .sheet-asa { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.18); margin: 0 auto 6px; }
  .sheet-cerrar { position: absolute; z-index: 5; top: 12px; right: 14px; width: 44px; height: 44px; touch-action: manipulation; display: grid; place-items: center; border: none; background: rgba(255,255,255,0.06); color: var(--text); border-radius: 12px; cursor: pointer; }
  .sheet-cerrar svg { width: 18px; height: 18px; }
  @media (min-width: 640px) {
    .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 440px; max-height: 88vh; border-radius: 26px; transform: translate(-50%, -46%) scale(0.98); opacity: 0; visibility: hidden; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, visibility 0s linear 0.3s; padding: 28px 30px 30px; }
    .sheet.abierto { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease; }
    .sheet-asa { display: none; }
  }
  .sheet-paso { position: relative; display: none; animation: fadeIn 0.3s ease; }
  .sheet[data-paso="correo"] .sheet-paso[data-paso="correo"],
  .sheet[data-paso="espera"] .sheet-paso[data-paso="espera"],
  .sheet[data-paso="listo"] .sheet-paso[data-paso="listo"] { display: block; }
  .sheet-sello { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent2); background: rgba(79,209,197,0.1); border: 1px solid rgba(79,209,197,0.28); padding: 5px 10px; border-radius: 999px; margin: 14px 0 12px; }
  .sheet h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.12; letter-spacing: -0.8px; margin-bottom: 8px; text-wrap: balance; }
  .sheet-intro { font-size: 15px; line-height: 1.55; color: rgba(240,239,254,0.72); margin-bottom: 18px; }
  .sheet-puntos { list-style: none; display: grid; gap: 12px; margin-bottom: 20px; }
  .sheet-puntos li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.45; color: rgba(240,239,254,0.72); }
  .sheet-puntos strong { display: block; color: var(--text); font-weight: 500; font-size: 14.5px; }
  .sheet-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(124,106,247,0.12); color: #b3a9ff; }
  .sheet-ico svg { width: 17px; height: 17px; }
  .sheet-campo { width: 100%; min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 10px; }
  @keyframes campoLlama { 0%,100% { border-color: rgba(255,255,255,0.12); box-shadow: 0 0 0 0 rgba(72,55,209,0); } 50% { border-color: rgba(59,102,212,0.95); box-shadow: 0 0 0 5px rgba(59,102,212,0.18); } }
  .sheet-campo.llamar { animation: campoLlama 1.6s ease-in-out 0.5s 3; }
  @media (prefers-reduced-motion: reduce) { .sheet-campo.llamar { animation: none; border-color: rgba(59,102,212,0.95); } }
  .sheet-campo:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124,106,247,0.18); }
  .sheet-error { display: none; font-size: 13.5px; color: #ff9f9f; margin: -2px 2px 10px; }
  .sheet-error.visible { display: block; }
  .sheet-letra { font-size: 12.5px; color: rgba(240,239,254,0.5); text-align: center; margin-top: 12px; line-height: 1.5; }
  .sheet-letra a { color: rgba(240,239,254,0.72); }
  .sheet-correo-destino { font-weight: 500; color: var(--text); word-break: break-all; }
  .sheet-espera-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 18px 0 16px; background: rgba(124,106,247,0.12); color: #b3a9ff; position: relative; }
  .sheet-espera-ico svg { width: 28px; height: 28px; }
  .sheet-espera-ico::after { content: ''; position: absolute; inset: -6px; border-radius: 24px; border: 2px solid rgba(124,106,247,0.35); }
  .sheet.abierto[data-paso="espera"] .sheet-espera-ico::after { animation: sheetPulso 1.8s ease-out infinite; }
  @keyframes sheetPulso { 0% { opacity: 0.9; transform: scale(0.94); } 100% { opacity: 0; transform: scale(1.12); } }
  .sheet-pasos-espera { list-style: none; counter-reset: pe; display: grid; gap: 10px; margin: 4px 0 20px; }
  .sheet-pasos-espera li { counter-increment: pe; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px; color: rgba(240,239,254,0.75); line-height: 1.45; }
  .sheet-pasos-espera strong { color: var(--text); font-weight: 500; }
  .sheet-pasos-espera li::before { content: counter(pe); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,0.06); font-size: 12.5px; font-weight: 600; color: var(--text); }
  .sheet-estado { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(240,239,254,0.6); margin-bottom: 16px; }
  .sheet-estado-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); }
  .sheet.abierto[data-paso="espera"] .sheet-estado-punto { animation: badgePulse 1.6s ease-in-out infinite; }
  .sheet-acciones-min { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
  .sheet-enlace { background: none; border: none; color: rgba(240,239,254,0.72); font-family: 'DM Sans', sans-serif; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 2px; }
  .sheet-enlace:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
  .sheet-saldo { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
  .sheet-saldo-num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 44px; letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #fff, #b8b0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sheet-saldo-txt { font-size: 15px; color: rgba(240,239,254,0.72); }
  .sheet-opciones { display: grid; gap: 8px; margin: 18px 0 6px; }
  .sheet-opcion { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: none; cursor: pointer; text-align: left; color: var(--text); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); font-family: 'DM Sans', sans-serif; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; }
  .sheet-opcion:active { transform: scale(0.99); }
  @media (hover: hover) and (pointer: fine) { .sheet-opcion:hover { background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(124,106,247,0.45); } }
  .sheet-opcion.sugerida { box-shadow: inset 0 0 0 1.5px rgba(124,106,247,0.8); background: rgba(124,106,247,0.1); }
  .sheet-opcion .sheet-ico { width: 40px; height: 40px; border-radius: 12px; }
  .sheet-opcion strong { display: block; font-weight: 500; font-size: 15.5px; }
  .sheet-opcion span.sub { display: block; font-size: 13px; color: rgba(240,239,254,0.6); margin-top: 1px; }
  .sheet-opcion > svg { width: 16px; height: 16px; color: rgba(240,239,254,0.45); }
  @media (prefers-reduced-motion: reduce) { .sheet, .sheet-fondo, .sheet-espera-ico::after { transition: none !important; animation: none !important; } }

  /* ---- Pie nuevo ---- */
  footer.pie { display: block; border-top: 1px solid var(--border); padding: 36px 0 calc(28px + env(safe-area-inset-bottom)); margin-top: 24px; }
  .pie-arriba { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
  .pie-marca { max-width: 300px; }
  .pie-marca .footer-logo { font-size: 20px; display: inline-block; }
  .pie-marca .footer-logo svg { vertical-align: -3px; margin-right: 6px; }
  .pie-lema { font-size: 14px; line-height: 1.55; color: rgba(240,239,254,0.6); margin-top: 10px; }
  .pie-columnas { display: flex; gap: 44px; flex-wrap: wrap; }
  .pie-col h3 { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: rgba(240,239,254,0.45); margin-bottom: 12px; }
  .pie-col a, .pie-col button { display: block; background: none; border: none; padding: 5px 0; color: rgba(240,239,254,0.8); font-family: 'DM Sans', sans-serif; font-size: 14.5px; text-decoration: none; cursor: pointer; text-align: left; }
  @media (hover: hover) and (pointer: fine) { .pie-col a:hover, .pie-col button:hover { color: var(--text); } }
  .pie-abajo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 13px; color: rgba(240,239,254,0.45); }
  @media (max-width: 640px) {
    .pie-arriba { flex-direction: column; gap: 26px; }
    .pie-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
    .pie-col a, .pie-col button { padding: 8px 0; }
    .pie-abajo { flex-direction: column; align-items: flex-start; }
  }

  /* ===================================================================
     SISTEMA DE DISEÑO 2026-09-25 (ronda 2): el resto de la página con el
     mismo lenguaje del menú y la hoja de cuenta -- una escala de letra,
     un solo estilo de botón (píldora clara), campos y tarjetas iguales.
     Va al final para ganarle a las reglas viejas sin reescribirlas.
     =================================================================== */
  :root {
    /* Botón principal: violeta de la marca con brillo superior y un toque
       del turquesa del logo en el borde inferior -- no blanco. */
    /* Degradado del logo (#4837d1 -> #12d9e0), con el turquesa un poco más
       oscuro para que el texto blanco se lea bien; sombra discreta. */
    /* El degradado de "Continuar" y "Recargar" en producción (violeta a
       turquesa): pedido del dueño para TODOS los botones principales. */
    --boton-bg: linear-gradient(135deg, #7c6af7, #4fd1c5);
    --boton-sombra: none;
    --boton-sombra-hover: 0 12px 36px rgba(124,106,247,0.4);
    --card-bg: #13121c;
    --card-brillo: linear-gradient(transparent, transparent);
    --txt-2: rgba(240,239,254,0.72);
    --txt-3: rgba(240,239,254,0.5);
  }

  /* Tarjetas de sección */
  .state-card, .steps-card, .deliv-card, .asis-card, .price-card-simple, .faq-card {
    background: var(--card-brillo), var(--card-bg) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 26px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  }

  /* Títulos de sección: grandes, con antetítulo */
  .steps-label, .deliv-label, .asis-label, .price-label, .faq-label {
    font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important;
    font-size: 30px !important; line-height: 1.12 !important; letter-spacing: -0.9px !important;
    color: var(--text) !important; text-align: center !important; text-wrap: balance;
  }
  [data-antetitulo]::before {
    content: attr(data-antetitulo); display: block; width: fit-content; margin: 0 auto 12px;
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--accent2); background: rgba(79,209,197,0.1); border: 1px solid rgba(79,209,197,0.28);
    padding: 5px 10px; border-radius: 999px;
  }
  .modo-header { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: -0.5px !important; }
  .email-label, .upload-title { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: -0.6px !important; line-height: 1.2 !important; }
  .step-label, .deliv-title, .price-option-name { font-family: 'Montserrat', sans-serif; font-weight: 700 !important; letter-spacing: -0.2px !important; }
  .step-label { font-size: 16px !important; text-transform: none !important; }
  .deliv-title { font-size: 17px !important; }

  /* Texto secundario: un solo tamaño y un solo gris */
  .step-desc, .deliv-desc, .price-tagline, .asis-sub, .faq-item p, .email-hint, .upload-hint, .rec-hint, .asis-hint, .price-note {
    color: var(--txt-2) !important; line-height: 1.55 !important;
  }
  .step-desc, .deliv-desc, .price-tagline, .asis-sub, .faq-item p, .email-hint { font-size: 15px !important; }
  .rec-hint, .asis-hint, .price-note, .upload-hint { font-size: 13.5px !important; }

  /* Botones: los de producción (2026-09-25, pedido del dueño) -- ver .btn,
     .btn-small, .asis-primary y .record-btn más arriba, sin reemplazos. */
  /* Secundario: vidrio con borde fino */
  .asis-ghost {
    background: rgba(255,255,255,0.04) !important; color: var(--text) !important;
    border: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important;
  }

  /* Campos */
  .input-field, .asis-card input[type=email], .asis-card input[type=text], .asis-card input[type=date], .asis-card input[type=time] {
    min-height: 54px; border-radius: 14px !important;
    background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.12) !important;
    font-size: 16px !important; color: var(--text) !important;
  }
  .input-field:focus, .asis-card input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(124,106,247,0.18) !important; outline: none; }

  /* Opciones del inicio: como las de la hoja */
  .modo-opcion {
    border: none !important; border-radius: 16px !important; min-height: 64px;
    background: rgba(255,255,255,0.04) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
  }
  @media (hover: hover) and (pointer: fine) { .modo-opcion:hover { background: rgba(255,255,255,0.07) !important; box-shadow: inset 0 0 0 1px rgba(124,106,247,0.45) !important; transform: none !important; } }
  .modo-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .modo-texto strong { font-weight: 500 !important; font-size: 15.5px !important; }
  .modo-texto span { color: var(--txt-2) !important; font-size: 13px !important; }
  .modo-volver { font-size: 14px !important; color: var(--txt-2) !important; }

  /* Precios */
  .price-option { border-radius: 18px !important; background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; padding: 20px 14px 16px !important; }
  .price-option-main { background: rgba(124,106,247,0.08) !important; border-color: rgba(124,106,247,0.55) !important; box-shadow: 0 16px 40px rgba(124,106,247,0.18) !important; }
  .price-option-cost { font-size: 22px !important; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
  .price-option-rate { color: var(--txt-3) !important; font-size: 12px !important; }

  /* Preguntas frecuentes: filas como las del menú */
  .faq-item { border-bottom: 1px solid rgba(255,255,255,0.06) !important; padding: 20px 0 !important; }
  .faq-item summary { font-family: 'DM Sans', sans-serif !important; font-weight: 500 !important; font-size: 17px !important; letter-spacing: -0.2px; }
  .faq-item summary::after { font-weight: 300; color: rgba(240,239,254,0.55) !important; transition: transform 0.25s ease; }

  /* Cómo funciona / Qué recibes */
  .deliv-list-tag { color: var(--accent2) !important; }

  /* Saldo y avisos */
  .saldo-box { border-radius: 14px !important; }
  .rec-alert, .compra-ok, .error-msg { border-radius: 14px !important; font-size: 14px !important; }
  .asis-tag { display: none !important; }
  .price-row-4 > .price-option { min-width: 0; }
  .price-note { margin-bottom: 4px !important; }
  @media (max-width: 640px) {
    .price-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    .price-option { padding: 18px 10px 14px !important; }
    .price-option-cost { font-size: 20px !important; white-space: normal !important; line-height: 1.15; }
    .price-option-currency { display: inline-block; }
  }
  .deliv-list-tag { display: none !important; }

  @media (max-width: 640px) {
    .steps-label, .deliv-label, .asis-label, .price-label, .faq-label { font-size: 26px !important; }
    .email-label, .upload-title { font-size: 20px !important; }
    .step-desc, .deliv-desc, .price-tagline, .asis-sub, .faq-item p, .email-hint { font-size: 14.5px !important; }
    .faq-item summary { font-size: 16px !important; }
    .state-card, .steps-card, .deliv-card, .asis-card, .price-card-simple, .faq-card { border-radius: 24px !important; }
  }

  /* ===== Inicio en escritorio: dos columnas iguales, centradas y con el
     bloque (texto + tarjeta) centrado en la primera pantalla ===== */
  @media (min-width: 1080px) {
    .wrap { max-width: 1180px !important; }
    /* La primera fila (texto + tarjeta) ocupa la primera pantalla menos la
       barra, y los dos quedan centrados dentro: mismo aire arriba y abajo. */
    hero { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center;
           grid-template-rows: minmax(calc(100svh - 104px), auto); padding-top: 0 !important; }
    hero > * { grid-column: 1 / -1; }
    hero .inicio-bloque > .hero-copy { grid-column: 1; align-self: center; text-align: left !important; padding: 0 !important; margin-bottom: 0 !important; }
    hero .inicio-bloque > .state-card { grid-column: 2; align-self: center; margin-bottom: 0 !important; }
    /* aire parejo antes de la primera sección */
    hero > .steps-card { margin-top: 24px !important; }
    .h1-break { display: inline !important; }
    h1 { font-size: 60px !important; line-height: 1.03 !important; letter-spacing: -2.2px !important; margin-bottom: 20px !important; }
    .badge { margin-bottom: 18px !important; }
    .subtitle { text-align: left !important; margin: 0 !important; font-size: 17px !important; line-height: 1.6 !important; max-width: 30em; }
    hero > .steps-card, hero > .deliv-card, hero > .asis-card, hero > .price-card-simple, hero > .faq-card { width: 100%; max-width: 900px; margin-left: auto !important; margin-right: auto !important; }
    footer.pie { max-width: 1100px; margin-left: auto; margin-right: auto; }
  }

  /* Menú, hoja de cuenta y botón de la barra con la misma forma que .btn */
  .pill { border-radius: 13px !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; }
  @media (hover: hover) and (pointer: fine) { .pill-primario:hover { transform: translateY(-2px); } }
  .nav-cta { border-radius: 10px !important; }

  /* Botón principal de envío y el de pago: mismo degradado que Continuar/Recargar */
  .btn:not(:disabled), .btn-pay { background: var(--boton-bg) !important; }
  .record-btn.recording { background: linear-gradient(135deg, #c0392b, #962d22) !important; }

  /* Antetítulos ("Así de simple", "El resultado"...) con los colores del
     sello "Prueba gratis" (violeta suave), en todas las pantallas */
  [data-antetitulo]::before { color: #a89bf8 !important; background: rgba(124,106,247,0.12) !important; border-color: rgba(124,106,247,0.25) !important; }
  /* Escritorio: sin el sello "Prueba gratis" y con el título centrado */
  @media (min-width: 1080px) {
    hero .inicio-bloque > .hero-copy .badge { display: none !important; }
    hero .inicio-bloque > .hero-copy { text-align: center !important; }
    hero .inicio-bloque > .hero-copy .subtitle { text-align: center !important; margin: 0 auto !important; }
  }

  /* Hoja de cuenta alineada con el sitio (2026-09-25) */
  .sheet-opcion { grid-template-columns: 40px 1fr 14px !important; }
  .sheet-opcion .modo-texto strong { display: block; }
  .sheet-opcion .modo-texto span { font-weight: 300 !important; }
  .sheet-sello { font-weight: 500 !important; }
  .sheet-opcion .modo-chevron { color: rgba(240,239,254,0.45); font-size: 20px; line-height: 1; }
  /* Etiquetas que estaban en verde azulado -> violeta del sello "Prueba gratis" */
  .menu-cuenta-min { color: #a89bf8 !important; }
  .menu-etiqueta { color: #a89bf8 !important; border-color: rgba(124,106,247,0.25) !important; background: rgba(124,106,247,0.12) !important; }
  .sheet-sello { color: #a89bf8 !important; background: rgba(124,106,247,0.12) !important; border-color: rgba(124,106,247,0.25) !important; }

  /* "inglés" destacado en la descripción del inicio */
  .subtitle strong em { font-weight: 600; font-style: italic; color: var(--text); }
  /* Menú (celular) con cuenta: correo y minutos más grandes */
  .menu-cuenta { padding: 16px 16px !important; gap: 14px !important; }
  .menu-cuenta-avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; border-radius: 12px !important; }
  .menu-cuenta-correo { font-size: 17px !important; font-weight: 500 !important; }
  .menu-cuenta-min { font-size: 16px !important; font-weight: 600 !important; margin-top: 2px; display: block; }
  /* Escritorio: el saldo como botón completo */
  @media (min-width: 960px) {
    .nav-cta.con-cuenta { padding: 9px 16px !important; font-size: 13.5px !important; color: #fff !important; background: rgba(124,106,247,0.14) !important; box-shadow: inset 0 0 0 1px rgba(124,106,247,0.45) !important; }
    .nav-cta.con-cuenta:hover { background: rgba(124,106,247,0.24) !important; }
  }

  /* Logo de la app en la cuenta del menú (en vez de la inicial) */
  .menu-cuenta-avatar { background: none !important; padding: 0 !important; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
  .menu-cuenta-avatar picture, .menu-cuenta-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* Escritorio: que la hoja de usuario nuevo, Precios y el asistente quepan
     en una sola vista sin scroll en pantallas de portátil (pedido del dueño:
     hoja ~83 %, Precios ~90 %, asistente ~95 %). En celular no cambia nada. */
  @media (min-width: 960px) {
    /* el zoom también achica el alto máximo y el margen de llegada: se
       compensan para que la hoja no haga scroll y las secciones no queden
       bajo la barra */
    .sheet { zoom: 0.83; max-height: calc(94vh / 0.83) !important; scrollbar-width: none; }
    .sheet::-webkit-scrollbar { display: none; }
    #precios { zoom: 0.9; scroll-margin-top: var(--llegada-precios, 76px) !important; }
    #asistente { zoom: 0.95; scroll-margin-top: var(--llegada-asistente, 76px) !important; }
    #como-funciona { scroll-margin-top: var(--llegada-como, 96px) !important; }
    /* los títulos de las secciones reducidas se agrandan en la misma proporción,
       para que se vean del mismo tamaño que los demás */
    #precios .price-label { font-size: calc(22px / 0.9) !important; }
    #asistente .asis-label { font-size: calc(22px / 0.95) !important; }
  }

  /* Correo ya validado, informado (sin caja de texto) */
  #emailInput[hidden] { display: none !important; }
  .correo-fijo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin: 6px 0 12px; border-radius: 14px;
    background: rgba(124,106,247,0.08); border: 1px solid rgba(124,106,247,0.25); font-size: 15px; color: var(--text); }
  .correo-fijo[hidden] { display: none; }
  .correo-fijo svg { width: 18px; height: 18px; color: #a89bf8; flex: 0 0 auto; }
  .correo-fijo span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .correo-fijo strong { font-weight: 600; }
  

  /* Aviso de "Mantén esta pantalla encendida": triángulo de advertencia en
     el violeta de los íconos del sitio, titilando suave. Solo se anima
     mientras se ve (la sección de Grabar oculta no gasta nada); es una
     animación de opacidad, la más barata para el celular. */
  .record-note-icon { width: 18px !important; height: 18px !important; color: #ffffff !important; margin-top: 0 !important; animation: avisoTitila 1.6s ease-in-out 8; }
  @keyframes avisoTitila { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  @media (prefers-reduced-motion: reduce) { .record-note-icon { animation: none; } }

  /* Títulos de sección un poco más chicos que el logo (26px en celular),
     para que el logo siga mandando */
  .steps-label, .deliv-label, .asis-label, .price-label, .faq-label { font-size: 22px !important; letter-spacing: -0.6px !important; }
  @media (max-width: 640px) {
    .steps-label, .deliv-label, .asis-label, .price-label, .faq-label { font-size: 22px !important; letter-spacing: -0.6px !important; }
    .email-label, .upload-title { font-size: 18px !important; }
    .modo-header { font-size: 18px !important; }
  }

  /* "inglés" en blanco, negrita y cursiva (inicio y Cómo funciona) */
  .subtitle strong em, .step-desc strong em { color: #ffffff !important; font-weight: 700 !important; font-style: italic !important; }
  /* Asistente: correo informado, consejo y hora en línea */
  #asis-email[hidden], #asisCorreoLabel[hidden], #asisCorreoHint[hidden] { display: none !important; }
  #asisCorreoFijo { margin: 4px 0 10px; }
  
  #asis-timeField label { margin: 0 !important; white-space: nowrap; }
  #asis-timeField input { flex: 1; min-width: 0; }

  /* Asistente: "Mis reuniones" como botón visible, alineado con "‹ Cambiar"
     y con aire antes de la descripción */
  #asistente .modo-volver { margin-bottom: 20px !important; }
  .asis-mine { top: -4px !important; right: 0 !important; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; font-size: 13.5px !important; font-weight: 600; color: #d6cfff !important;
    background: rgba(124,106,247,0.14); border: 1px solid rgba(124,106,247,0.35); }
  .asis-mine::before { content: ''; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat; }
  @media (hover: hover) and (pointer: fine) { .asis-mine:hover { background: rgba(124,106,247,0.24); } }
  /* Día y hora parejos: misma fila, misma columna para la etiqueta */
  .asis-dt-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 12px; }
  #asis-dateField:not(.asis-hidden), #asis-timeField:not(.asis-hidden) { display: grid !important; grid-template-columns: 38% 1fr; align-items: center; gap: 12px; margin-top: 0 !important; }
  #asis-dateField label, #asis-timeField label { margin: 0 !important; white-space: normal !important; line-height: 1.3; }
  #asis-dateField input, #asis-timeField input { width: 100%; min-width: 0; }
  /* Íconos de calendario y reloj en claro sobre el fondo oscuro */
  .asis-card input[type=date], .asis-card input[type=time] { color-scheme: dark; }
  .asis-card input[type=date]::-webkit-calendar-picker-indicator, .asis-card input[type=time]::-webkit-calendar-picker-indicator { opacity: 0.95; cursor: pointer; }

  /* Día y hora sin etiquetas visibles (se entienden solos); la zona horaria
     va al lado de la hora. Los dos campos con el mismo ancho. */
  .asis-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #asis-dateField:not(.asis-hidden), #asis-timeField:not(.asis-hidden) { grid-template-columns: 1fr 118px !important; }
  #asis-dateField input { grid-column: 1; }
  .asis-tz { font-size: 13.5px; line-height: 1.3; color: rgba(240,239,254,0.72); }

  /* "Otro día": fecha y hora en la misma fila; la zona horaria va debajo
     de la hora. Con "Hoy"/"Mañana" (solo hora) la zona sigue al lado. */
  .asis-dt-row:has(#asis-dateField:not(.asis-hidden)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 10px !important; align-items: start; }
  .asis-dt-row:has(#asis-dateField:not(.asis-hidden)) #asis-dateField,
  .asis-dt-row:has(#asis-dateField:not(.asis-hidden)) #asis-timeField { grid-template-columns: 1fr !important; row-gap: 6px; }
  .asis-dt-row:has(#asis-dateField:not(.asis-hidden)) input { padding-left: 12px !important; padding-right: 10px !important; font-size: 15px !important; }
  .asis-dt-row:has(#asis-dateField:not(.asis-hidden)) .asis-tz { font-size: 12.5px; padding-left: 4px; }
  @media (max-width: 380px) { .asis-dt-row:has(#asis-dateField:not(.asis-hidden)) input { font-size: 14px !important; padding-left: 9px !important; padding-right: 7px !important; } }

  .asis-tope { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5;
    background: rgba(124,106,247,0.08); border: 1px solid rgba(124,106,247,0.22); color: rgba(240,239,254,0.85); }
  @media (min-width: 960px) {
    .asis-tope { width: 90%; margin: 8px auto 0; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
    #asis-confirm .asis-conf-fila { padding: 7px 0; }
  }

  /* Último paso del asistente: sin la descripción de arriba (las líneas de
     progreso se mantienen) y la confirmación en filas */
  #asistente:has(.asis-step.active[data-step="3"]) #asis-sub { display: none !important; }
  .asis-conf-titulo { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; color: var(--text); margin-bottom: 12px; }
  .asis-conf-fila { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .asis-conf-fila:last-of-type { border-bottom: none; }
  .asis-conf-fila > svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(124,106,247,0.12); color: #a89bf8; }
  .asis-conf-fila > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .asis-conf-etq { font-size: 12.5px; color: rgba(240,239,254,0.6); }
  .asis-conf-val { font-size: 15px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; line-height: 1.4; }
  .asis-conf-link { color: #5fd4c7; font-weight: 400; font-size: 14px; }

  /* ===== Consumo en el celular (2026-09-25) =====
     Animaciones de borde/sombra obligan a redibujar en cada cuadro (y con el
     fondo desenfocado de la hoja, a desenfocar la pantalla completa 60 veces
     por segundo). Se reemplazan por un halo que solo cambia de opacidad, que
     el teléfono resuelve sin redibujar. */
  .sheet-campo.llamar { animation: none !important; }
  .campo-halo { position: relative; margin-bottom: 10px; }
  .campo-halo .sheet-campo { margin-bottom: 0 !important; }
  .campo-halo::after { content: ''; position: absolute; inset: -4px; border-radius: 18px; pointer-events: none;
    border: 2px solid rgba(143,132,230,0.95); box-shadow: 0 0 0 4px rgba(124,106,247,0.16); opacity: 0; will-change: opacity; }
  .campo-halo.llamar::after { animation: haloLlama 1.6s ease-in-out 0.5s 3; }
  @keyframes haloLlama { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .campo-halo.llamar::after { animation: none; opacity: 1; } }
  /* Botón de grabar: el latido rojo era una sombra animada durante TODA la
     grabación; ahora es un anillo que crece y se desvanece (escala + opacidad) */
  .record-btn.recording { animation: none !important; position: relative; overflow: visible !important; }
  .record-btn.recording::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 6px rgba(231,76,94,0.35); opacity: 0; will-change: transform, opacity; animation: anilloGrabando 1.5s ease-out infinite; }
  @keyframes anilloGrabando { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
  @media (prefers-reduced-motion: reduce) { .record-btn.recording::after { animation: none; } }

  /* ===== Inicio que cabe en la primera pantalla de cualquier celular =====
     Como el menú y la hoja de cuenta: letra y espacios se ajustan al ALTO
     visible (svh), no solo al ancho. En pantallas altas se ve igual que antes;
     en las bajas (iPhone SE, Android chicos) se compacta para que la tarjeta
     "¿Cómo quieres usar Resumime?" se vea completa sin desplazarse. */
  @media (max-width: 640px) {
    nav { padding-top: clamp(6px, 1.4svh, 20px) !important; padding-bottom: clamp(6px, 1.4svh, 20px) !important; margin-bottom: 0 !important; }
    .logo-mark, .logo-mark svg { width: clamp(34px, 5.6svh, 46px) !important; height: clamp(34px, 5.6svh, 46px) !important; }
    .logo-text { font-size: clamp(21px, 3.6svh, 26px) !important; }
    hero { padding-top: clamp(4px, 1.2svh, 12px) !important; }
    .badge { margin-bottom: clamp(6px, 1.3svh, 12px) !important; }
    h1 { font-size: clamp(26px, min(5.4svh, 10.5vw), 42px) !important; line-height: 1.02 !important; margin-bottom: clamp(6px, 1.3svh, 12px) !important; }
    .subtitle { font-size: clamp(13px, 2.15svh, 16px) !important; line-height: 1.42 !important; margin-bottom: clamp(8px, 1.8svh, 18px) !important; }
    .state-card { padding: 4px !important; }
    #state-upload { padding-top: clamp(8px, 1.8svh, 18px) !important; padding-bottom: clamp(8px, 1.8svh, 18px) !important; }
    .modo-header { font-size: clamp(15px, 2.5svh, 18px) !important; margin-bottom: clamp(8px, 1.8svh, 24px) !important; }
    .modo-opciones { gap: clamp(6px, 1.1svh, 12px) !important; }
    .modo-opcion { min-height: 0 !important; padding-top: clamp(6px, 1.3svh, 13px) !important; padding-bottom: clamp(6px, 1.3svh, 13px) !important; }
    .modo-icon { width: clamp(32px, 5.2svh, 40px) !important; height: clamp(32px, 5.2svh, 40px) !important; }
    .modo-texto strong { font-size: clamp(14px, 2.35svh, 15.5px) !important; }
    .modo-texto span { font-size: clamp(12px, 2svh, 13px) !important; }
  }

  /* ===== SISTEMA DE PANTALLAS EN CELULAR (2026-09-28) =====
     Misma receta del menú hamburguesa, para el inicio y todas las secciones:
     cada una es una "pantalla" = el alto visible bajo la barra. Una sola
     medida de espacio (--aire) para todo, sin ajustes por modelo:
       - tarjeta a --aire de la barra y a --aire del borde de abajo
       - entre una tarjeta y la siguiente, siempre 2 x --aire
       - todas las tarjetas del mismo alto en cada celular
       - por dentro, como el menú: sello + título arriba (mismo relleno en
         todas), el contenido en el medio, y lo que cierra (nota) abajo.
     El inicio va en la caja invisible .inicio-bloque, en el centro óptico
     (40 % del aire libre arriba, 60 % abajo) en vez de "enters" a mano.
     dvh = alto visible real con o sin la barra del navegador (como el menú);
     svh queda de respaldo para navegadores viejos. Si una sección no cabe
     (Preguntas frecuentes, pasos largos del Asistente) arranca igual y se
     alarga hacia abajo. */
  .inicio-bloque { display: contents; }
  @media (max-width: 640px) {
    :root {
      --nav-alto: calc(2 * clamp(6px, 1.4svh, 20px) + max(44px, clamp(34px, 5.6svh, 46px))); /* = alto real de <nav> */
      --aire: 16px;
      --relleno: clamp(20px, 3.4svh, 28px);
      --pantalla: calc(100svh - var(--nav-alto));
    }
    hero { padding-top: 0 !important; }

    /* Inicio: título + opciones en el centro óptico de su pantalla */
    .inicio-bloque {
      display: flex; flex-direction: column; gap: 8px;
      box-sizing: border-box; min-height: var(--pantalla);
      padding: var(--aire) 0; margin-bottom: var(--aire);
    }
    .inicio-bloque::before { content: ''; flex: 2 1 0; }
    .inicio-bloque::after { content: ''; flex: 3 1 0; }
    .inicio-bloque > .hero-copy, .inicio-bloque > .state-card { margin-top: 0 !important; margin-bottom: 0 !important; flex: none; }

    /* Secciones: mismo marco para todas */
    hero > .steps-card, hero > .deliv-card, hero > .price-card-simple, hero > .asis-card, hero > .faq-card {
      box-sizing: border-box;
      min-height: calc(var(--pantalla) - 2 * var(--aire)) !important;
      margin-top: 0 !important; margin-bottom: calc(2 * var(--aire)) !important;
      padding-top: var(--relleno) !important; padding-bottom: var(--relleno) !important;
      scroll-margin-top: calc(var(--nav-alto) + var(--aire)) !important;
    }
    hero > .steps-card, hero > .deliv-card, hero > .price-card-simple {
      display: flex !important; flex-direction: column; justify-content: flex-start;
    }
    /* Contenido al medio, bajo el título */
    /* ¿Cómo funciona?: separación entre pasos que crece con el alto del
       celular pero con tope (--paso, máx. 56px); el título queda a media
       separación del paso 1 y lo que sobra va al final de la tarjeta. */
    #como-funciona { --paso: clamp(32px, 7svh, 56px); }
    #como-funciona .steps-row { flex: none; justify-content: flex-start; margin-top: calc(var(--paso) / 2) !important; margin-bottom: 0 !important; gap: var(--paso) !important; }
    #que-recibes .deliv-grid { margin-top: auto !important; margin-bottom: auto !important; }
    /* Precios: los paquetes junto a la descripción y la nota abajo, como los botones del menú */
    #precios .price-row-4 { margin-top: 0 !important; row-gap: calc(2 * var(--aire)) !important; }
    #precios .price-note { margin-top: auto !important; padding-top: var(--aire); }
    #faq .faq-label { margin-top: 0 !important; } /* traía 20px propios: el título quedaba más abajo que en las demás */
    /* Subpantallas del inicio (todo lo que no es el selector de 3 opciones:
       Grabar, Grabando, Cargar, Enviar mi resumen, Procesando, Listo, Pago):
       son una pantalla más, igual que las secciones -- aterrizan a --aire
       bajo la barra y miden pantalla - 2 x aire, con el contenido centrado. */
    .state-card { scroll-margin-top: calc(var(--nav-alto) + var(--aire)) !important; }
    .state-card:has(#modoSelector[hidden]), .state-card:has(> .state.active:not(#state-upload)) {
      box-sizing: border-box; min-height: calc(var(--pantalla) - 2 * var(--aire));
      display: flex; flex-direction: column;
    }
    .state-card:has(#modoSelector[hidden]) > .state.active, .state-card:has(> .state.active:not(#state-upload)) > .state.active {
      flex: 1; display: flex; flex-direction: column; justify-content: center;
    }
    #modoGrabar.grabando, #state-success.active, #state-processing.active:has(.processing-done.show) { min-height: 0 !important; }

    /* ¿Cómo funciona? (gráfica, no espacio): círculos que crecen con el alto
       y la misma letra que ¿Qué recibes? */
    #como-funciona .step { grid-template-columns: clamp(48px, calc(14svh - 29px), 80px) 1fr; column-gap: clamp(14px, 2.4svh, 20px); }
    #como-funciona .step-circle { width: clamp(48px, calc(14svh - 29px), 80px) !important; height: clamp(48px, calc(14svh - 29px), 80px) !important; }
    #como-funciona .step-circle svg { width: clamp(20px, 4svh, 32px) !important; height: clamp(20px, 4svh, 32px) !important; }
    #como-funciona .step-label { font-size: clamp(14.5px, 2.4svh, 17px) !important; margin-bottom: clamp(2px, 0.6svh, 6px) !important; }
    #como-funciona .step-desc { font-size: clamp(13px, 2.05svh, 15px) !important; }

    /* Sin scroll-snap: al llevar la página a una subpantalla del inicio
       (Enviar mi resumen, Procesando) el navegador la volvía a jalar a la
       sección más cercana y quedaba descuadrada. */
  }
  @supports (height: 100dvh) {
    @media (max-width: 640px) { :root { --pantalla: calc(100dvh - var(--nav-alto)); } }
  }

  /* ===== Secciones que caben en una pantalla de celular (2026-09-25) =====
     Mismo criterio que el inicio: tamaños ligados al alto visible (svh). */
  .rec-email-wrap[hidden] { display: none !important; }
  @media (max-width: 640px) {
    [data-antetitulo]::before { margin-bottom: clamp(6px, 1.2svh, 12px) !important; }
    .steps-label, .deliv-label, .asis-label, .price-label, .faq-label { margin-bottom: clamp(10px, 2svh, 24px) !important; }
    /* Cómo funciona: cada paso en una fila (círculo a la izquierda, texto a la derecha) */
    .steps-row { gap: clamp(10px, 1.8svh, 20px) !important; align-items: stretch !important; }
    .step { display: grid !important; grid-template-columns: clamp(48px, 7.5svh, 64px) 1fr; column-gap: 14px; align-items: center; text-align: left !important; width: 100% !important; }
    .step-circle { width: clamp(48px, 7.5svh, 64px) !important; height: clamp(48px, 7.5svh, 64px) !important; margin: 0 !important; grid-row: span 2; }
    .step-circle svg { width: clamp(20px, 3.2svh, 26px) !important; height: clamp(20px, 3.2svh, 26px) !important; }
    .step-label { margin: 0 0 2px !important; align-self: end; }
    .step-desc { align-self: start; font-size: clamp(13px, 2.1svh, 14.5px) !important; }
    /* Qué recibes */
    .deliv-grid { gap: clamp(12px, 2svh, 24px) !important; }
    .deliv-list { gap: clamp(8px, 1.5svh, 18px) !important; }
    .deliv-title { font-size: clamp(14.5px, 2.4svh, 17px) !important; }
    .deliv-desc { font-size: clamp(13px, 2.05svh, 15px) !important; }
    .deliv-image { zoom: clamp(0.72, calc(100svh / 900px), 1); }
    /* Precios */
    .price-tagline { font-size: clamp(13px, 2.05svh, 15px) !important; margin-bottom: clamp(8px, 1.6svh, 16px) !important; }
    .rec-email-wrap { margin-bottom: clamp(8px, 1.6svh, 14px) !important; }
    .price-row-4 { gap: clamp(8px, 1.4svh, 12px) !important; }
    .price-option { padding: clamp(10px, 1.8svh, 18px) 10px clamp(10px, 1.6svh, 14px) !important; }
    .price-option-name { font-size: clamp(13px, 2svh, 14px) !important; margin-bottom: 2px !important; }
    .price-option-minutes { font-size: clamp(12px, 1.9svh, 13px) !important; margin-bottom: clamp(4px, 1svh, 10px) !important; }
    .price-option-cost { font-size: clamp(17px, 2.8svh, 20px) !important; }
    .price-option-rate { margin-bottom: clamp(6px, 1.2svh, 12px) !important; }
    .price-option .btn-small { min-height: clamp(36px, 5.6svh, 44px) !important; margin-top: clamp(4px, 1svh, 10px) !important; }
    .price-note { font-size: 12px !important; margin-top: clamp(8px, 1.6svh, 18px) !important; }
    /* El nombre (Prueba/Recarga) repite lo que ya dicen el precio y el botón: los minutos hacen de título */
    .price-option-name { display: none !important; }
    .price-option-minutes { font-size: clamp(14px, 2.3svh, 15.5px) !important; font-weight: 700 !important; color: var(--text, #fff) !important; }
    .price-option { padding-top: clamp(14px, 2.2svh, 20px) !important; }
    .price-option-cost { white-space: nowrap !important; }
    .price-option-currency { font-size: 10px !important; }
    #precios { padding-left: 16px !important; padding-right: 16px !important; }
    .price-tagline br { display: none; }
    #recEmail { padding-top: clamp(10px, 1.7svh, 16px) !important; padding-bottom: clamp(10px, 1.7svh, 16px) !important; }
    .rec-hint { font-size: 12px !important; margin-top: 4px !important; }
  }
  /* Celulares bajos (iPhone SE, Android chicos): lo justo para que las 4 opciones se vean sin bajar */
  @media (max-width: 640px) and (max-height: 620px) {
    .rec-hint { display: none !important; }
    .price-tagline { line-height: 1.4 !important; }
    .price-option-rate { margin-bottom: 4px !important; }
    .price-option .btn-small { margin-top: 2px !important; }
    /* Preguntas frecuentes */
    .faq-item { padding: clamp(12px, 2svh, 20px) 0 !important; }
  }