/* ── Inter Tight ───────────────────────────────────────────────────────────
   La misma que usan las referencias, servida desde aquí y no desde Google: esta
   página presume de que nada sale de tu Mac, y pedirle la fuente a Google haría
   que el navegador de cada visitante le contase a un tercero que ha entrado. De
   paso carga antes, porque viaja con el resto del sitio.

   Solo los subconjuntos latinos. El cirílico, el griego y el vietnamita son peso
   que descargaría todo el mundo sin usarlo nunca. */
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/inter-tight-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/inter-tight-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/inter-tight-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/inter-tight-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/inter-tight-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/inter-tight-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;
  --tinta: #101014; --fondo: #ffffff; --suave: #6b6b76;
  --acento: #2f6df6; --check: #16a34a;
  --linea: #ececea; --caja: #f7f7f5; --borde: #e4e4e0;
}
@media (prefers-color-scheme: dark) {
  :root { --tinta: #f0f0f4; --fondo: #0d0d10; --suave: #9a9aa5;
          --acento: #7ba2ff; --check: #4ade80;
          --linea: #1e1e24; --caja: #15151a; --borde: #26262e; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font: 21px/1.55 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--tinta); background: var(--fondo);
  margin: 0; -webkit-font-smoothing: antialiased;
}

/* ── La rejilla ────────────────────────────────────────────────────────────
   Seis columnas, sin hueco entre ellas, y el contenido anclado a sus líneas.
   Las líneas no son un fondo decorativo: son un elemento con exactamente las
   mismas columnas, así que cada bloque empieza justo donde hay una raya. Pintar
   una rejilla por un lado y colocar el contenido por otro es lo que hace que una
   página parezca ordenada de lejos y descuadrada de cerca. */
.limite { max-width: 1198px; margin: 0 auto; padding: 0 32px; }

.lineas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  max-width: 1198px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.lineas i { border-left: 1px solid var(--linea); }
.lineas i:last-child { border-right: 1px solid var(--linea); }
body > *:not(.lineas) { position: relative; z-index: 1; }
@media (max-width: 860px) { .lineas { display: none; } }

/* Una fila de la rejilla: el texto ocupa media rejilla y la imagen, entera. */
.fila { display: grid; grid-template-columns: repeat(6, 1fr);
        row-gap: 44px; padding-block: 3.5rem; }
.fila > .texto { grid-column: 1 / 4; }
.fila.derecha > .texto { grid-column: 4 / 7; }
.fila > .media { grid-column: 1 / -1; }

/* Las secciones de solo texto también viven en la rejilla: cuatro columnas, que
   es el ancho al que una línea larga se sigue leyendo de un vistazo. */
.bloque { display: grid; grid-template-columns: repeat(6, 1fr); padding-block: 3rem; }
.bloque > * { grid-column: 1 / 5; }
.bloque > .ancho { grid-column: 1 / -1; }
@media (max-width: 860px) { .bloque > * { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .fila > .texto, .fila.derecha > .texto, .fila > .media { grid-column: 1 / -1; }
  .fila { padding-block: 2rem; }
}

/* ── Barra ─────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linea);
}
nav .limite { display: flex; align-items: center; gap: 1.4rem; height: 4rem; }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 550; font-size: 1.05rem;
         text-decoration: none; color: inherit; letter-spacing: -.01em; }
.marca img { width: 30px; height: 30px; border-radius: 7px;
              box-shadow: 0 1px 4px rgba(0,0,0,.14); }
nav .enlaces { display: flex; gap: 1.4rem; margin-left: auto; }
nav a.nav { color: var(--suave); text-decoration: none; font-size: .95rem; }
nav a.nav:hover { color: var(--tinta); }
@media (max-width: 780px) { nav .enlaces { display: none; } }

/* ── Botones ───────────────────────────────────────────────────────────── */
.boton, .boton2 {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-weight: 600; border-radius: .7rem;
  padding: .8rem 1.5rem; font-size: 1rem; white-space: nowrap;
}
.boton { background: var(--tinta); color: var(--fondo); }
.boton:hover { opacity: .88; }
.boton2 { border: 1px solid var(--borde); color: var(--tinta); }
.boton2:hover { border-color: var(--suave); }
nav .boton { padding: .5rem 1.05rem; font-size: .93rem; }

/* ── Portada ───────────────────────────────────────────────────────────── */
.hero { text-align: center; padding-block: 4.5rem 1rem; }
.pildora {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--borde); border-radius: 100px;
  padding: .4rem 1rem; font-size: .87rem; color: var(--suave);
  margin-bottom: 2rem;
}
.pildora::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
                   background: var(--check); }
.hero .icono { display: block; width: 92px; height: 92px; margin: 0 auto 1.6rem;
               border-radius: 21px; box-shadow: 0 10px 34px rgba(0,0,0,.13); }
h1 { font-size: clamp(2.8rem, 7.4vw, 5.75rem); line-height: .98;
     letter-spacing: -.035em; margin: 0 0 1.4rem; font-weight: 500; }
.entradilla { font-size: 1.28rem; color: var(--suave); max-width: 39rem;
              margin: 0 auto 2.4rem; line-height: 1.5; }
.entradilla strong { color: var(--tinta); font-weight: 600; }
.acciones { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.requisitos { color: var(--suave); font-size: .9rem; margin-top: 1.1rem; }

/* ── Marcos de imagen ──────────────────────────────────────────────────── */
.marco {
  background: var(--caja); border: 1px solid var(--linea);
  border-radius: 1.4rem; padding: 2.2rem; margin: 0;
  display: flex; justify-content: center;
}
/* La captura no se estira a todo el panel: el panel es el que ocupa la rejilla
   entera, y la imagen se queda a su tamaño legible dentro. */
.marco img { max-width: 46rem; }
/* La ventanita de traducción es pequeña de verdad —428 puntos—: estirarla hasta el
   ancho de una captura de ventana la agranda más de lo que es y encima baja su
   densidad. Se enseña a su tamaño. */
.marco.pequeno img { max-width: 32rem; }
.marco img { display: block; width: 100%; height: auto; border-radius: .6rem; }
.marco.hud { padding: 3.2rem 2rem; }
.marco.hud img { max-width: 34rem; box-shadow: none; border-radius: .8rem; }
.marco img { width: 100%; height: auto; }

/* ── Secciones ─────────────────────────────────────────────────────────── */
section { padding-block: 3rem; }
.kicker { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
          color: var(--suave); margin: 0 0 .9rem; font-weight: 500; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05;
     letter-spacing: -.03em; margin: 0 0 1rem; font-weight: 500; }
h3 { font-size: 1.31rem; line-height: 1.25; letter-spacing: -.02em;
     margin: 0 0 .7rem; font-weight: 500; }
p { margin: 0 0 1.1rem; color: var(--suave); }
p strong, li strong { color: var(--tinta); font-weight: 600; }
.apagado { color: var(--suave); }


ul.checks { list-style: none; padding: 0; margin: 1.2rem 0 0; }
ul.checks li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem;
               color: var(--suave); font-size: .95rem; }
ul.checks li::before { content: "✓"; position: absolute; left: 0;
                       color: var(--check); font-weight: 700; }
ul.checks li strong { color: var(--tinta); font-weight: 600; }

/* Para enumerar pegas, no virtudes. Mismo ritmo que .checks pero sin el visto
   verde, que delante de un inconveniente dice lo contrario de lo que cuenta. */
ul.pegas li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem;
              color: var(--suave); list-style: none; }
ul.pegas li::before { content: "—"; position: absolute; left: 0; color: var(--suave); }
ul.pegas { padding-left: 0; }
ul.pegas li strong { color: var(--tinta); font-weight: 600; }

/* ── Cajas ─────────────────────────────────────────────────────────────── */
.caja { background: var(--caja); border: 1px solid var(--linea);
        border-radius: 1.2rem; padding: 2rem; margin: 2rem 0; }
.planes { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 2rem; }
.planes > * { grid-column: span 3; }
/* Sin hueco entre las dos tarjetas: cualquier separación las saca de la rejilla, así
   que en vez de separarlas se juntan en un bloque de dos mitades con el borde
   compartido. El aire lo da el relleno de dentro. */
.planes > * { border-radius: 0; margin: 0; }
.planes > *:first-child { border-radius: 1.2rem 0 0 1.2rem; }
.planes > *:last-child { border-radius: 0 1.2rem 1.2rem 0; margin-left: -1px; }
@media (max-width: 860px) {
  .planes > * { grid-column: 1 / -1; }
  .planes { row-gap: 1.2rem; }
  .planes > *, .planes > *:first-child, .planes > *:last-child {
    border-radius: 1.2rem; margin-left: 0; }
}
.plan { background: var(--caja); border: 1px solid var(--linea);
        border-radius: 1.2rem; padding: 1.8rem; }
.plan.destacado { border-color: var(--acento); }

/* El resultado bueno dentro de una comparación. Va en color y en negrita: el color
   solo no serviría para quien no lo distingue. */
span.destacado { color: var(--check); font-weight: 600; }

/* En la comparación, quién escribe qué. Va como etiqueta pequeña encima de cada
   resultado en vez de en una columna propia: en el móvil una tercera columna
   obliga a desplazar la tabla justo cuando hay menos sitio. */
.tabla .quien { display: block; font-size: .75rem; letter-spacing: 1.1px;
                text-transform: uppercase; color: var(--suave); margin-top: .9rem; }
.tabla .quien:first-child { margin-top: 0; }
.tabla td { vertical-align: top; }

/* La tabla y su nota van juntas: el marco coloca a sus hijos en fila y sin esto la
   nota se iba al lado de la tabla en vez de debajo. */
.conNota { width: 100%; }
.conNota .tabla { margin-top: 0; }
.conNota .nota { margin: 0.4rem 0 0; }
.precio { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0 1.2rem; }
.precio strong { font-size: 2.2rem; letter-spacing: -.03em; }
.precio span { color: var(--suave); font-size: .95rem; }

.nota { color: var(--suave); font-size: .92rem; }
a { color: var(--acento); }

footer { border-top: 1px solid var(--linea); margin-top: 4rem;
         padding: 2.5rem 0 4rem; color: var(--suave); font-size: .93rem; }
footer p { margin-bottom: .5rem; }

/* ── Los gráficos ──────────────────────────────────────────────────────────
   Los SVG van incrustados en la página, no como <img>, y sin estilos propios:
   toman los colores de las mismas variables que todo lo demás. Así dejan de
   ser dibujos con su paleta particular —que se desajusta en cuanto el sitio
   cambia de tono— y pasan a ser parte del diseño. */
.grafico { display: block; width: 100%; height: auto; max-width: 46rem; }
.grafico .lienzo   { fill: var(--fondo); }
.grafico .barra    { fill: var(--linea); }
.grafico .borde    { stroke: var(--linea); stroke-width: 1; fill: none; }
.grafico .panel    { fill: var(--caja); }
.grafico .rotulo   { fill: var(--suave); font: 500 13px 'Inter Tight', system-ui, sans-serif;
                     letter-spacing: 1.4px; }
.grafico .suave    { fill: var(--suave); font: 400 19px 'Inter Tight', system-ui, sans-serif; }
.grafico .fuerte   { fill: var(--tinta); font: 500 19px 'Inter Tight', system-ui, sans-serif; }
.grafico .dato     { fill: var(--suave); font: 400 14px 'Inter Tight', system-ui, sans-serif; }
.grafico .clave    { fill: var(--suave); font: 400 15px ui-monospace, SFMono-Regular, Menlo, monospace; }
.grafico .verde    { fill: var(--check); font: 500 14px 'Inter Tight', system-ui, sans-serif; }
.grafico .azul     { fill: var(--acento); font: 500 12px 'Inter Tight', system-ui, sans-serif;
                     letter-spacing: 1.3px; }
.grafico .chip     { fill: var(--linea); }
.grafico .chiptxt  { fill: var(--tinta); font: 500 14px 'Inter Tight', system-ui, sans-serif; }
.grafico .flecha,
.grafico .verdetrazo { stroke: var(--check); stroke-width: 2; fill: none;
                       stroke-linecap: round; stroke-linejoin: round; }
.grafico .gristrazo { stroke: var(--borde); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.grafico .tacha    { fill: var(--borde); text-decoration: line-through; }
.grafico .tachaln  { stroke: #d76b6b; stroke-width: 2; stroke-linecap: round; }
.grafico .nube     { fill: none; stroke: var(--borde); stroke-width: 1.8; stroke-dasharray: 5 5; }
.grafico .disp     { fill: var(--caja); }
.grafico .dispborde{ stroke: var(--borde); stroke-width: 1.4; fill: none; }
.grafico .num      { fill: var(--linea); }
.grafico .numtxt   { fill: var(--tinta); font: 600 15px 'Inter Tight', system-ui, sans-serif; }
.grafico .titulo   { fill: var(--tinta); font: 500 17px 'Inter Tight', system-ui, sans-serif; }
.grafico .desc     { fill: var(--suave); font: 400 14px 'Inter Tight', system-ui, sans-serif; }
.grafico .panelsel { fill: color-mix(in srgb, var(--acento) 9%, var(--fondo)); }
.grafico .selborde { stroke: var(--acento); stroke-width: 1.5; fill: none; }
.grafico .barrafondo { fill: var(--linea); }
.grafico .barrallena { fill: var(--check); }
/* La selección de texto: el azul del sistema, no el de la marca. */
.grafico .sel      { fill: #b9d4ff; }
@media (prefers-color-scheme: dark) { .grafico .sel { fill: #24405f; } }
/* Los semáforos de la ventana no cambian con el tema: son los del sistema. */
.grafico .p1 { fill: #ff5f57; } .grafico .p2 { fill: #febc2e; } .grafico .p3 { fill: #28c840; }
/* El indicador es oscuro siempre, como en la app. */
.grafico .paso    { fill: var(--caja); }
/* El cursor de texto: va pegado al final de la frase, que es donde
   estaría de verdad. */
.grafico .cursor  { stroke: var(--acento); stroke-width: 2; }

/* El panel flotante de VoiceFlow es siempre oscuro —imita una terminal— así que todo
   lo que va dentro lleva color fijo. Si tomara el del tema, en modo claro el texto se
   volvería oscuro sobre fondo oscuro y desaparecería, que es lo que pasaba con la
   traducción. Los valores salen de DictationHUD, no del ojo: fondo 0.05/0.05/0.055 y
   fósforo 0.21/1/0.43, con las mismas opacidades que usa TranslationCard. */
.grafico .capsula    { fill: #0d0d0e; }
.grafico .capsfuerte { fill: #f0f0f0; font: 500 19px 'Inter Tight', system-ui, sans-serif; }
.grafico .capsdebil  { fill: #9e9e9e; font: 400 17px 'Inter Tight', system-ui, sans-serif; }
.grafico .capstxt    { fill: #36ff6e; font: 500 15px 'Inter Tight', system-ui, sans-serif; }
.grafico .onda       { stroke: #36ff6e; stroke-width: 3; stroke-linecap: round; }
/* Los dos botones pesan lo mismo en la app: solo cambian de color, no de grosor. */
.grafico .btn2       { fill: #122f1b; }
.grafico .btn2txt    { fill: #2fdb5f; font: 500 15px 'Inter Tight', system-ui, sans-serif; }
.grafico .btn2tecla  { fill: #21863e; font: 500 15px 'Inter Tight', system-ui, sans-serif; }
.grafico .btn1       { fill: #36ff6e; }
.grafico .btn1txt    { fill: #0d0d0e; font: 500 15px 'Inter Tight', system-ui, sans-serif; }
.grafico .btn1tecla  { fill: #1f7a39; font: 500 15px 'Inter Tight', system-ui, sans-serif; }

/* ── Tablas de «esto sí, esto no» ──────────────────────────────────────────────
   Se usan para decir con claridad qué funciona sin conexión y qué no. La columna
   del veredicto va en color, pero nunca SOLO en color: lleva su palabra al lado,
   que es lo que lee quien no distingue el verde del rojo. */
.tabla { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1rem; }
.tabla th, .tabla td { text-align: left; padding: 0.85rem 0.5rem;
                       border-bottom: 1px solid var(--linea); }
.tabla th { font-size: 0.8rem; font-weight: 500; letter-spacing: 1.2px;
            text-transform: uppercase; color: var(--suave); }
.tabla td { color: var(--tinta); }
.tabla td.si  { color: var(--check); font-weight: 500; white-space: nowrap; }
.tabla td.no  { color: var(--suave); }
@media (max-width: 640px) {
  .tabla { font-size: 0.9rem; }
  .tabla th, .tabla td { padding: 0.7rem 0.35rem; }
}

/* ── Pasos numerados ──────────────────────────────────────────────────────────
   Tres columnas en pantalla ancha y una debajo de otra en el móvil. El número va
   dentro de un círculo porque a esa altura de la página el lector ya no lee: mira
   cuántos pasos son y decide si le compensa. */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
         margin: 2rem 0 0; }
.paso { border: 1px solid var(--linea); border-radius: 1.1rem; padding: 1.4rem; }
.paso .num { display: inline-flex; align-items: center; justify-content: center;
             width: 1.9rem; height: 1.9rem; border-radius: 50%;
             background: var(--linea); color: var(--tinta);
             font-size: .95rem; font-weight: 600; margin-bottom: .7rem; }
.paso h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.paso p { margin: 0; font-size: .96rem; }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; gap: 1rem; } }