/* Lingowing · marca «Burbuja» (13 nov 2026): lila, índigo y durazno; letra redonda del sistema; botones en píldora
   y burbujas de chat con una esquina chica que hace de cola. Los mismos tokens que ios/Hearsay/Tema.swift.
   La página de privacidad usa esta misma hoja (.texto, .resumen, .fecha). */

:root {
  --papel: #F5F3FF; --elevado: #FFFFFF; --relleno: #EDEAFE; --linea: #E2DEFA;
  --tinta: #1E1B3A; --suave: #4D4870;
  --indigo: #4B3BE8; --indigo-texto: #4B3BE8; --sobre-indigo: #FFFFFF;
  --durazno: #FF9F8A; --sobre-durazno: #1E1B3A;
  --precio-fondo: #FFE9E3; --precio-texto: #9A3A24;
  --error: #B3261E;
  --redonda: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-burbuja: 22px; --r-cola: 6px;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --ancho: 1120px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #14122B; --elevado: #221F42; --relleno: #2E2A57; --linea: #332F5E;
    --tinta: #F2F0FF; --suave: #B8B3DC;
    --indigo: #8B7DFF; --indigo-texto: #B3A9FF; --sobre-indigo: #14122B;
    --sobre-durazno: #14122B;
    --precio-fondo: #3A2A3F; --precio-texto: #FFC2B3;
    --error: #FF8A80;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--redonda); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 8px; }
.cont { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
html.cargando-es body { visibility: hidden; }

.salto { position: absolute; left: -9999px; }
.salto:focus { left: 16px; top: 12px; z-index: 50; background: var(--elevado); padding: 10px 16px; border-radius: 999px; }
form .salto { position: absolute; left: -9999px; }

/* ---------- Barra ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--salida); }
.nav.con-borde { border-bottom-color: var(--linea); }
.nav .cont { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em;
  text-decoration: none; color: var(--tinta); }
.marca img { width: 30px; height: 30px; border-radius: 8px; }
.marca b { font-weight: inherit; }
.nav__l { display: flex; align-items: center; gap: 4px; }
.nav__l a { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--suave); padding: 10px 12px; border-radius: 999px; }
.nav__l a:hover { color: var(--tinta); background: var(--relleno); }
.idioma { font: 700 .85rem/1 var(--redonda); color: var(--suave); background: var(--relleno); border: 0; border-radius: 999px;
  padding: 0 14px; height: 40px; margin-left: 6px; cursor: pointer; }
.idioma [aria-current="true"] { color: var(--tinta); }
@media (max-width: 720px) { .ocultable { display: none; } }

/* ---------- Botones y formulario ---------- */
.boton { font: 700 1rem/1 var(--redonda); color: var(--sobre-indigo); background: var(--indigo); border: 0; border-radius: 999px;
  height: 54px; padding: 0 26px; cursor: pointer; white-space: nowrap; transition: transform .18s var(--salida), opacity .18s; }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .6; cursor: default; }
.aviso { display: flex; gap: 8px; background: var(--elevado); border-radius: 999px; padding: 6px; max-width: 460px;
  box-shadow: 0 1px 0 var(--linea), 0 12px 32px -18px rgba(75, 59, 232, .45); }
.aviso input[type="email"] { flex: 1; min-width: 0; font: 500 1rem/1 var(--redonda); color: var(--tinta); background: transparent;
  border: 0; padding: 0 16px; height: 54px; border-radius: 999px; }
.aviso input[type="email"]::placeholder { color: var(--suave); opacity: .75; }
.aviso input[type="email"]:focus-visible { outline-offset: -3px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.aviso__estado { min-height: 1.5em; margin-top: 10px; font-size: .95rem; font-weight: 600; color: var(--indigo-texto); }
.aviso__estado.error { color: var(--error); }
.aviso__nota { font-size: .95rem; color: var(--suave); }

/* ---------- Portada ---------- */
.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); overflow: clip; }
.hero .cont { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--suave); margin: 22px 0 28px; max-width: 34em; }
.hero__sub strong { color: var(--tinta); font-weight: 700; }
.hero__demo { position: relative; justify-self: center; width: min(100%, 340px); }
@media (max-width: 860px) {
  .hero .cont { grid-template-columns: 1fr; }
  .hero__demo { width: min(78%, 320px); margin-top: 8px; }
}

/* El teléfono: un marco simple con la pantalla real de la app. */
.tel { position: relative; border-radius: 46px; padding: 9px; background: var(--tinta);
  box-shadow: 0 40px 80px -40px rgba(30, 27, 58, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.tel img { width: 100%; aspect-ratio: 570 / 1240; object-fit: cover; border-radius: 38px; background: var(--papel); }
@media (prefers-color-scheme: dark) { .tel { background: #0A0918; box-shadow: 0 0 0 1px var(--linea); } }

/* Burbujas que salen del teléfono: lo que te dijeron y lo que respondes. */
.burbuja { position: absolute; z-index: 2; max-width: 230px; padding: 12px 16px; font-weight: 700; line-height: 1.25;
  border-radius: var(--r-burbuja); box-shadow: 0 18px 40px -18px rgba(30, 27, 58, .45); }
.burbuja small { display: block; font-size: .8rem; font-weight: 500; opacity: .8; margin-top: 2px; }
.burbuja--ellos { left: -18%; top: 15%; background: var(--elevado); color: var(--tinta); border-bottom-left-radius: var(--r-cola); }
.burbuja--tu { right: -16%; top: 47%; background: var(--durazno); color: var(--sobre-durazno); border-bottom-right-radius: var(--r-cola); }
/* En teléfono, la burbuja de ellos sube al borde del marco para no tapar la barra de idiomas de la captura. */
@media (max-width: 860px) { .burbuja--ellos { left: -12%; top: -4%; } .burbuja--tu { right: -12%; top: 52%; } .burbuja { max-width: 190px; font-size: .95rem; } }

/* Entrada de la portada: una sola secuencia al cargar. */
.entra { animation: entra .6s var(--salida) both; animation-delay: calc(var(--i, 0) * 70ms); }
.entra--burbuja { animation: burbuja .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(500ms + var(--i, 0) * 450ms); }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes burbuja { from { opacity: 0; transform: scale(.9) translateY(8px); } }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(56px, 9vw, 112px) 0; }
.cabeza { max-width: 44rem; margin-bottom: clamp(28px, 4vw, 48px); }
.cabeza p { color: var(--suave); font-size: 1.15rem; margin-top: 16px; max-width: 36em; }

.rev, .rev-hijos > * { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--salida), transform .5s var(--salida); }
.rev.visto, .rev-hijos.visto > * { opacity: 1; transform: none; }
.rev-hijos.visto > *:nth-child(2) { transition-delay: 60ms; } .rev-hijos.visto > *:nth-child(3) { transition-delay: 120ms; }
.rev-hijos.visto > *:nth-child(4) { transition-delay: 180ms; }
html.sin-js .rev, html.sin-js .rev-hijos > * { opacity: 1; transform: none; }

/* Tres botones: los mismos de la app. */
.botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.botones li p { color: var(--suave); margin-top: 8px; max-width: 26em; }
.pildora { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; border-radius: 999px;
  font-weight: 800; margin-bottom: 18px; }
.pildora svg { width: 22px; height: 22px; flex: none; }
.pildora span { display: flex; flex-direction: column; line-height: 1.1; }
.pildora small { font-size: .78rem; font-weight: 500; opacity: .8; }
.pildora--escuchar { background: var(--tinta); color: var(--papel); }
.pildora--hablar { background: var(--durazno); color: var(--sobre-durazno); }
.pildora--teclado { background: var(--relleno); color: var(--tinta); padding: 0 18px; }
@media (max-width: 760px) { .botones { grid-template-columns: 1fr; } }

/* La banda índigo: una conversación. */
.charla { background: var(--indigo); color: var(--sobre-indigo); }
.charla .cont { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.charla h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.charla .cabeza { margin: 0; }
.charla .cabeza p { color: inherit; opacity: .85; }
.hilo { display: grid; gap: 10px; }
.hilo li { max-width: 86%; padding: 12px 18px; border-radius: var(--r-burbuja); line-height: 1.3; }
.hilo .ellos { justify-self: start; background: color-mix(in srgb, var(--sobre-indigo) 24%, transparent); border-bottom-left-radius: var(--r-cola); }
.hilo .tu { justify-self: end; background: var(--sobre-indigo); color: var(--indigo); font-weight: 700; border-bottom-right-radius: var(--r-cola); margin-bottom: 14px; }
.hilo small { display: block; font-size: .85rem; font-weight: 500; opacity: .8; margin-top: 2px; }
@media (prefers-color-scheme: dark) { .hilo .tu { color: var(--indigo); background: #14122B; color: #B3A9FF; } }
@media (max-width: 860px) { .charla .cont { grid-template-columns: 1fr; } }

/* Pantallas reales con su explicación. */
.pantallas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.pantallas figure { margin: 0; }
.pantallas .tel { border-radius: 36px; padding: 7px; margin-bottom: 22px; max-width: 280px; }
.pantallas .tel img { border-radius: 30px; }
.pantallas figcaption p { color: var(--suave); margin-top: 6px; }
@media (max-width: 760px) {
  .pantallas { grid-template-columns: 1fr; gap: 44px; }
  .pantallas figure { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; }
  .pantallas .tel { margin: 0; border-radius: 22px; padding: 4px; } .pantallas .tel img { border-radius: 18px; }
}

/* Detalles: lista en dos columnas, sin tarjetas. */
.detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(28px, 5vw, 72px); }
.detalles li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.detalles svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--relleno); color: var(--indigo-texto); }
.detalles p { color: var(--suave); margin-top: 4px; }
@media (max-width: 760px) { .detalles { grid-template-columns: 1fr; } }

/* Idiomas */
.idiomas { display: flex; flex-wrap: wrap; gap: 8px; }
.idiomas li { background: var(--elevado); border-radius: 999px; padding: 9px 16px; font-weight: 700; }
.idiomas li small { font-weight: 500; color: var(--suave); margin-left: 4px; font-size: .88rem; }
.idiomas li.completo { box-shadow: inset 0 0 0 2px var(--indigo); }
.leyenda { margin-top: 18px; color: var(--suave); font-size: .95rem; display: flex; gap: 10px; align-items: center; }
.leyenda::before { content: ""; width: 18px; height: 18px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--indigo); flex: none; }

/* Privacidad */
.privado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.privado ul { display: grid; gap: 12px; }
.privado li { background: var(--elevado); border-radius: var(--r-burbuja); border-bottom-left-radius: var(--r-cola); padding: 16px 20px;
  display: grid; grid-template-columns: 26px 1fr; gap: 2px 14px; }
.privado li svg { width: 26px; height: 26px; color: var(--indigo-texto); grid-row: span 2; align-self: center; }
.privado li b { font-weight: 800; } .privado li span { color: var(--suave); font-size: .97rem; }
@media (max-width: 860px) { .privado { grid-template-columns: 1fr; } }

/* Precio */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--elevado); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; }
.plan__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.plan .precio { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-top: 18px; font-variant-numeric: tabular-nums; }
.plan .precio small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--suave); margin-left: 6px; }
.plan .bajo { color: var(--suave); margin: 8px 0 20px; }
.plan ul { display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: .98rem; }
.plan li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--indigo-texto); }
.plan--destacado { background: var(--indigo); color: var(--sobre-indigo); }
.plan--destacado .precio small, .plan--destacado .bajo { color: inherit; opacity: .82; }
.plan--destacado li svg { color: inherit; }
.sello { font-size: .78rem; font-weight: 800; background: var(--durazno); color: var(--sobre-durazno); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.nota-precio { margin-top: 18px; color: var(--suave); font-size: .95rem; }
@media (max-width: 860px) { .planes { grid-template-columns: 1fr; } }

/* Ayuda */
.ayuda { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); }
.contacto { margin-top: 24px; color: var(--suave); }
.correo { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--indigo-texto); text-decoration: none; }
.correo:hover { text-decoration: underline; }
.preguntas details { background: var(--elevado); border-radius: 20px; padding: 0 20px; margin-bottom: 8px; }
.preguntas summary { cursor: pointer; list-style: none; font-weight: 700; padding: 18px 28px 18px 0; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2.5px solid var(--indigo-texto); border-bottom: 2.5px solid var(--indigo-texto); transform: rotate(45deg); transition: transform .2s var(--salida); }
.preguntas details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.preguntas details p { color: var(--suave); padding-bottom: 18px; max-width: 40em; }
.preguntas a { color: var(--indigo-texto); font-weight: 600; }
@media (max-width: 860px) { .ayuda { grid-template-columns: 1fr; } }

/* Cierre */
.cierre { padding: 0 0 clamp(56px, 8vw, 96px); }
.caja { background: var(--durazno); color: var(--sobre-durazno); border-radius: 36px; border-bottom-right-radius: 10px;
  padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; }
.caja p { margin-top: 12px; opacity: .85; }
.caja .aviso { box-shadow: none; }
.caja .aviso__estado { color: var(--sobre-durazno); }
.caja .boton { background: #1E1B3A; color: #FFFFFF; }
@media (max-width: 860px) { .caja { grid-template-columns: 1fr; } }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 28px 0 40px; color: var(--suave); font-size: .95rem; }
.pie .cont { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pie a { text-decoration: none; } .pie a:hover { color: var(--tinta); text-decoration: underline; }
.pie .marca { font-size: 1.1rem; }

/* ---------- Página de privacidad ---------- */
.texto { width: min(100% - 40px, 720px); margin: 0 auto; padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.texto h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.texto h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.texto p, .texto li { color: var(--suave); margin-top: 12px; }
.texto ul { list-style: disc; padding-left: 22px; }
.texto a { color: var(--indigo-texto); font-weight: 600; }
.texto .fecha { font-size: .95rem; margin-top: 10px; }
.texto .resumen { background: var(--elevado); color: var(--tinta); font-weight: 700; font-size: 1.15rem; line-height: 1.4;
  border-radius: var(--r-burbuja); border-bottom-left-radius: var(--r-cola); padding: 20px 24px; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .entra--burbuja { animation: none; }
  .rev, .rev-hijos > * { opacity: 1; transform: none; transition: none; }
  .boton { transition: none; }
}