/* Guía de uso de Pautia
   ─────────────────────────────────────────────────────────────────────────────
   Hereda la identidad de landing.css (mismos colores, mismo tipo de letra) y
   añade solo lo que la guía necesita: el índice lateral, las figuras con
   números y las cajas de aviso.

   POR QUÉ LAS ILUSTRACIONES SON HTML Y NO CAPTURAS
   Una captura envejece: cambias un botón de sitio y el manual empieza a mentir,
   normalmente sin que nadie se dé cuenta hasta que un usuario se pierde. Estas
   maquetas están hechas con las mismas piezas que las de la portada, así que
   salen nítidas en cualquier pantalla, se leen con un lector de pantalla y
   pesan casi nada. Y los números que señalan cada cosa
   son texto de verdad, no pintados encima de una imagen: quien no ve la figura
   sigue teniendo la lista de al lado, que dice lo mismo. */

/* ── Estructura de página ──────────────────────────────────────────────────── */
.guia-cabecera{
  background:var(--banda);color:#fff;padding:var(--e5) 0 var(--e4);
}
/* El color va explícito: landing.css pinta todos los h1 de verde oscuro, y
   sobre esta cabecera verde el título se quedaba invisible. Heredar no basta
   cuando el elemento tiene su propia regla de color. */
.guia-cabecera h1{font-size:clamp(28px,5vw,40px);margin:0 0 var(--e2);
  letter-spacing:-.02em;color:#fff;}
.guia-cabecera p{margin:0;color:rgba(255,255,255,.86);max-width:52ch;font-size:17px;}
.guia-cabecera .volver{
  display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.8);
  text-decoration:none;font-weight:700;font-size:14px;margin-bottom:var(--e3);
}
.guia-cabecera .volver:hover{color:#fff;}

.guia-rejilla{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--e6);
  align-items:start;padding:var(--e5) 0 var(--e7);}
/* minmax(0,1fr) y no 1fr a secas. Un 1fr vale minmax(AUTO,1fr), y ese auto
   es min-content: la columna NO puede encogerse por debajo de lo que mida
   su contenido más ancho, así que una palabra larga estira la rejilla y saca
   la página de la pantalla. Se vio en /en/guide/ a 320 px, donde el índice
   medía 351 px dentro de una ventana de 320; en castellano cabía por poco y
   por eso no se había visto. La versión de escritorio, dos líneas arriba, ya
   lo hacía bien. */
@media (max-width:900px){ .guia-rejilla{grid-template-columns:minmax(0,1fr);gap:var(--e4);} }

/* Páginas cuyo motivo de existir es una descarga: en el móvil el índice se pone
   DEBAJO del contenido. Medido: la cabecera (258 px) más el índice (322 px)
   dejaban el botón de descargar a 772 px de una pantalla de 812. Técnicamente
   visible, y en la práctica nadie lo ve. Quien llega buscando algo para
   imprimir quiere el papel, no el índice de la página. */
@media (max-width:900px){
  .rejilla-recurso .guia-indice{order:2;}
  .rejilla-recurso .guia-cuerpo{order:1;}
}

/* ── El índice ────────────────────────────────────────────────────────────
   Eran veinte enlaces seguidos. En el ordenador van agrupados y a la vista; en
   el móvil, dentro de un <details> plegado, porque si no ocupan una pantalla
   entera antes de la primera palabra de la guía. */
.guia-indice{position:sticky;top:var(--e3);}
.indice-plegable{border:1px solid var(--borde);border-radius:var(--radio-s);
  background:var(--paper);padding:var(--e3);}
.indice-plegable > summary{cursor:pointer;list-style:none;display:flex;
  align-items:center;justify-content:space-between;gap:var(--e2);
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:800;color:var(--ink-soft);min-height:44px;}
.indice-plegable > summary::-webkit-details-marker{display:none;}
.indice-plegable > summary::after{content:'▾';font-size:14px;transition:transform .15s ease;}
.indice-plegable[open] > summary::after{transform:rotate(180deg);}
.indice-cuantos{text-transform:none;letter-spacing:0;font-weight:600;}

.indice-buscar{margin:var(--e2) 0 var(--e3);}
.indice-buscar input{width:100%;min-height:44px;padding:9px 12px;font:inherit;
  font-size:15px;border:1.5px solid var(--borde);border-radius:10px;
  background:var(--bg);color:var(--ink);}
.indice-buscar input:focus-visible{outline:3px solid var(--teal);outline-offset:1px;}
.indice-resultado{margin:6px 0 0;font-size:13px;color:var(--ink-soft);min-height:1.2em;}

.indice-grupo + .indice-grupo{margin-top:var(--e3);}
.indice-grupo h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--teal-dark);margin:0 0 4px;}
.indice-grupo ol{list-style:none;margin:0;padding:0;}
.indice-grupo a{display:block;padding:5px 0 5px 26px;position:relative;
  color:var(--ink-soft);text-decoration:none;font-size:14.5px;line-height:1.35;}
.indice-grupo li{position:relative;}
.indice-grupo li::before{content:attr(data-n);position:absolute;left:0;top:5px;
  font-size:11.5px;color:var(--teal);font-weight:800;}
.indice-grupo a:hover,.indice-grupo a:focus-visible{color:var(--teal);}
.indice-grupo li[hidden]{display:none;}
.indice-grupo[hidden]{display:none;}

.indice-abrir{display:block;margin-top:var(--e3);text-align:center;}

/* En el móvil el índice se toca con el dedo, no se pulsa con un ratón: 44 px de
   alto mínimo, como en el resto del proyecto. */
@media (max-width:900px){
  .guia-indice{position:static;}
  .indice-grupo a{padding-top:11px;padding-bottom:11px;min-height:44px;}
  .indice-grupo li::before{top:12px;}
}

/* En el ordenador el índice está siempre abierto: ahí sobra sitio, y plegarlo
   sería esconderlo por gusto. El summary se queda como rótulo, sin flecha. */
@media (min-width:900px){
  .indice-plegable > summary{pointer-events:none;}
  .indice-plegable > summary::after{content:none;}
}

.guia-cuerpo section{scroll-margin-top:var(--e3);margin-bottom:var(--e6);}
.guia-cuerpo h2{font-size:clamp(22px,3.4vw,29px);color:var(--teal-dark);
  margin:0 0 var(--e2);letter-spacing:-.02em;}
.guia-cuerpo h3{font-size:18px;color:var(--teal-dark);margin:var(--e4) 0 var(--e2);}
.guia-cuerpo p{max-width:64ch;margin:0 0 var(--e2);}
.guia-cuerpo ul,.guia-cuerpo ol{max-width:64ch;padding-left:1.3em;margin:0 0 var(--e3);}
.guia-cuerpo li{margin-bottom:6px;}
.guia-cuerpo li::marker{color:var(--teal);font-weight:700;}

/* Los pasos numerados grandes, para las secuencias de "haz esto, luego esto". */
.pasos{list-style:none;counter-reset:p;padding:0;margin:0 0 var(--e3);max-width:64ch;}
.pasos > li{counter-increment:p;position:relative;padding-left:44px;margin-bottom:var(--e3);}
.pasos > li::before{
  content:counter(p);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
}
.pasos > li > strong:first-child{display:block;margin-bottom:2px;}

/* ── Figuras con números ───────────────────────────────────────────────────── */
.fig{margin:0 0 var(--e4);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:var(--e4);align-items:start;}
@media (max-width:720px){ .fig{grid-template-columns:1fr;gap:var(--e3);} }
.fig-marco{position:relative;background:var(--paper);border:1px solid var(--borde);
  border-radius:22px;padding:10px;box-shadow:0 6px 24px rgba(0,0,0,.06);}
.fig-marco .pantalla{border-radius:16px;}

/* El número que señala un punto de la maqueta. Va posicionado con dos variables
   para que quede claro al leer el HTML dónde apunta cada uno. */
.senal{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:800;z-index:2;
  box-shadow:0 0 0 3px var(--paper), 0 2px 6px rgba(0,0,0,.25);
}
.senal.ambar{background:#B07100;}

.leyenda{list-style:none;counter-reset:l;padding:0;margin:0;}
.leyenda li{counter-increment:l;position:relative;padding-left:34px;margin-bottom:var(--e2);
  font-size:15px;line-height:1.5;}
.leyenda li::before{
  content:counter(l);position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;
}
.leyenda b{color:var(--teal-dark);}

/* ── Cajas de aviso ────────────────────────────────────────────────────────── */
.nota{border-left:4px solid var(--teal);background:var(--teal-soft);
  border-radius:0 12px 12px 0;padding:var(--e3);margin:0 0 var(--e3);max-width:64ch;}
.nota p:last-child{margin-bottom:0;}
.nota strong{color:var(--teal-dark);}
.nota.aviso{border-left-color:#D9A93A;background:#FBF3DF;}
.nota.aviso strong{color:#6B5310;}

/* Teclas y nombres de botón, para que se distingan del texto corrido. */
kbd{background:var(--paper);border:1px solid var(--borde);border-bottom-width:2px;
  border-radius:6px;padding:1px 7px;font:inherit;font-size:.93em;font-weight:700;
  color:var(--teal-dark);
  /* SIN white-space:nowrap. Lo tuvo hasta la v59, para que "Guardar copia ahora"
     se leyera de una pieza como el botón que es. El precio era que no cabía: en
     las listas anidadas de esta guía la sangría empuja el texto a la derecha y
     el nombre entero se salía de la pantalla —medido, 93 px fuera a 1024 px y
     16 px fuera a 768—. Un nombre partido en dos líneas se lee; uno que se sale
     de la pantalla, no.
     Se probó box-decoration-break:clone para que cada mitad se llevara su
     borde, y quedaba bien, pero seguía saliéndose unos pocos píxeles: el relleno
     clonado se añade DESPUÉS de decidir dónde parte la línea, así que el trozo
     de la izquierda acaba midiendo más de lo que cabía. Medido: 3,2 px fuera.

     Con inline-block la tecla es UNA caja que se parte por dentro y nunca pasa
     del ancho de su contenedor. Si no cabe en el hueco que queda, baja entera a
     la línea siguiente, que además se lee mejor que una tecla partida. */
  display:inline-block;max-width:100%;vertical-align:baseline;
  white-space:normal;overflow-wrap:break-word;}

/* Camino de menús: Ajustes › Copias de seguridad › … */
.ruta{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;
  font-weight:700;color:var(--teal-dark);}
.ruta span::after{content:" ›";color:var(--ink-soft);font-weight:400;}
.ruta span:last-child::after{content:"";}

/* ── Preguntas al final ────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--borde);padding:var(--e2) 0;}
.faq summary{cursor:pointer;font-weight:700;color:var(--teal-dark);font-size:16px;
  list-style:none;display:flex;justify-content:space-between;gap:var(--e2);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--teal);font-weight:800;flex-shrink:0;}
.faq details[open] summary::after{content:"–";}
.faq details p{margin:var(--e2) 0 0;max-width:64ch;}

/* ── Piezas de maqueta que solo usa la guía ────────────────────────────────── */
.mk-campo{background:var(--paper);border:1.5px solid var(--borde);border-radius:10px;
  padding:9px 11px;font-size:12.5px;color:var(--ink);margin-bottom:8px;}
.mk-campo b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);margin-bottom:3px;font-weight:800;}
.mk-boton{background:var(--teal);color:#fff;border-radius:10px;padding:10px;
  text-align:center;font-weight:800;font-size:13px;margin-bottom:8px;}
.mk-boton.linea{background:transparent;color:var(--teal-dark);
  border:1.5px solid var(--teal);}
.mk-opcion{background:var(--paper);border:1.5px solid var(--borde);border-radius:10px;
  padding:9px 11px;font-size:12.5px;margin-bottom:7px;display:flex;gap:8px;align-items:flex-start;}
.mk-opcion.elegida{border-color:var(--teal);background:var(--teal-soft);}
.mk-opcion i{width:15px;height:15px;border-radius:50%;border:2px solid var(--ink-soft);
  flex-shrink:0;margin-top:1px;}
.mk-opcion.elegida i{border-color:var(--teal);background:var(--teal);
  box-shadow:inset 0 0 0 3px var(--paper);}
.mk-opcion small{display:block;color:var(--ink-soft);font-size:11px;margin-top:1px;}
.mk-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 12px;border-bottom:1px solid var(--borde);font-size:13px;font-weight:700;}
.mk-fila:last-child{border-bottom:none;}
.mk-fila small{color:var(--ink-soft);font-weight:400;font-size:11.5px;}
.mk-lista{background:var(--paper);border:1px solid var(--borde);border-radius:14px;
  overflow:hidden;}
.mk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.mk-chip{border:1.5px solid var(--borde);border-radius:100px;padding:4px 11px;
  font-size:11.5px;font-weight:700;background:var(--paper);}
.mk-chip.on{background:var(--banda-clara);border-color:var(--banda-clara);color:#fff;}
.mk-tarjeta{background:var(--paper);border:1px solid var(--borde);border-radius:14px;
  padding:12px;margin-bottom:9px;}
.mk-tarjeta h4{margin:0 0 3px;font-size:14px;color:var(--ink);}
.mk-tarjeta .meta{font-size:11.5px;color:var(--ink-soft);margin-bottom:8px;}
.mk-acciones{display:flex;gap:5px;flex-wrap:wrap;}
.mk-acciones span{border:1.5px solid var(--borde);border-radius:8px;padding:4px 8px;
  font-size:10.5px;font-weight:700;color:var(--teal-dark);}
.mk-barra-pestanas{display:flex;background:var(--paper);border-top:1px solid var(--borde);}
.mk-barra-pestanas div{flex:1;text-align:center;padding:9px 0;font-size:10.5px;
  font-weight:800;color:var(--ink-soft);}
.mk-barra-pestanas div.on{color:var(--teal);}

/* ═══ MAQUETAS DE INSTALACIÓN ═════════════════════════════════════════════════
   Dibujan las pantallas del sistema —la barra de Safari, la hoja de compartir,
   el menú de Chrome— para poder señalar el botón exacto que hay que pulsar.

   Instalar es el único momento en que Pautia depende de una interfaz que no es
   suya, y en iPhone es donde más gente se atasca: el botón de compartir no dice
   "instalar" en ninguna parte, y la opción buena está a media lista, más abajo
   de lo que se ve sin desplazar. De ahí que estas maquetas imiten al sistema y
   no a la app.

   Son aproximaciones, no capturas: Apple y Google cambian estas pantallas cada
   año. Se dibuja lo que no cambia —dónde está el botón y cómo se llama la
   opción— y no los detalles decorativos. */

.mk-so{background:#EFEFF3;border-radius:16px;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
.mk-so-web{background:#fff;padding:14px 12px;min-height:118px;}
.mk-so-web .mini-barra{background:var(--teal-dark);color:#fff;border-radius:9px;
  padding:8px 10px;font-size:11px;font-weight:800;margin-bottom:8px;}
.mk-so-web .mini-linea{height:7px;background:#EDEAE2;border-radius:4px;margin-bottom:6px;}
.mk-so-web .mini-linea.corta{width:62%;}

/* La barra de direcciones y la botonera de abajo de Safari */
.mk-safari-url{background:#E3E3E8;margin:8px;border-radius:10px;padding:7px 12px;
  font-size:12px;color:#3C3C43;text-align:center;font-weight:600;}
.mk-safari-url span{color:#8E8E93;font-weight:400;}
.mk-barra-ios{display:flex;justify-content:space-around;align-items:center;
  padding:6px 10px 10px;background:#F2F2F7;}
.mk-barra-ios .ico-ios{width:26px;height:26px;color:#007AFF;display:block;}
.mk-barra-ios .apagado{color:#B9B9BE;}

/* La hoja de compartir */
.mk-hoja{background:#F2F2F7;border-radius:14px 14px 0 0;padding:10px 0 6px;}
.mk-hoja-cabeza{display:flex;align-items:center;gap:9px;padding:4px 14px 10px;
  border-bottom:1px solid #D9D9DE;margin-bottom:4px;}
.mk-hoja-cabeza img{width:30px;height:30px;border-radius:7px;}
.mk-hoja-cabeza b{font-size:12.5px;color:#000;display:block;}
.mk-hoja-cabeza small{font-size:10.5px;color:#8E8E93;}
.mk-hoja-fila{display:flex;justify-content:space-between;align-items:center;
  padding:9px 14px;font-size:12.5px;color:#000;background:#fff;
  border-bottom:1px solid #EDEDF0;}
.mk-hoja-fila:last-child{border-bottom:none;}
.mk-hoja-fila .ico-ios{width:19px;height:19px;color:#000;flex-shrink:0;}
.mk-hoja-fila.buena{font-weight:800;}
.mk-hoja-corte{text-align:center;font-size:10.5px;color:#8E8E93;padding:6px;
  background:#fff;border-bottom:1px solid #EDEDF0;font-style:italic;}

/* La pantalla de confirmar, con el nombre editable */
.mk-confirmar{background:#F2F2F7;padding:12px;}
.mk-confirmar-cabeza{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;margin-bottom:12px;}
.mk-confirmar-cabeza .cancelar{color:#007AFF;}
.mk-confirmar-cabeza b{font-size:13px;}
.mk-confirmar-cabeza .anadir{color:#007AFF;font-weight:800;}
.mk-confirmar-caja{display:flex;align-items:center;gap:10px;background:#fff;
  border-radius:10px;padding:10px;}
.mk-confirmar-caja img{width:44px;height:44px;border-radius:10px;}
.mk-confirmar-caja b{font-size:13px;display:block;}
.mk-confirmar-caja small{font-size:11px;color:#8E8E93;}

/* El menú de tres puntos de Chrome */
.mk-chrome-barra{display:flex;align-items:center;gap:8px;background:#F1F3F4;
  padding:8px 10px;}
.mk-chrome-barra .url{flex:1;background:#fff;border-radius:100px;padding:6px 12px;
  font-size:11.5px;color:#5F6368;}
.mk-chrome-barra .puntos{font-size:17px;color:#5F6368;padding:0 4px;letter-spacing:0;}
.mk-menu{background:#fff;border-radius:8px;box-shadow:0 3px 14px rgba(0,0,0,.16);
  margin:6px 6px 10px auto;width:78%;overflow:hidden;}
.mk-menu div{padding:9px 13px;font-size:12px;color:#202124;border-bottom:1px solid #F1F3F4;}
.mk-menu div:last-child{border-bottom:none;}
.mk-menu div.buena{font-weight:800;}

/* La barra de direcciones del ordenador */
.mk-escritorio{background:#DEE1E6;padding:8px;}
.mk-escritorio .pestana{background:#fff;border-radius:8px 8px 0 0;padding:6px 12px;
  font-size:11px;width:60%;color:#3C4043;}
.mk-escritorio .barra{background:#fff;border-radius:100px;padding:6px 10px;
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:#5F6368;}
.mk-escritorio .barra .url{flex:1;}
.mk-escritorio .barra .instalar{color:#1A73E8;font-size:15px;}

/* La pantalla de inicio, para enseñar cómo queda al terminar */
.mk-inicio{background:linear-gradient(160deg,#5A7D8C,#2F4858);padding:16px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;}
.mk-inicio figure{margin:0;text-align:center;}
.mk-inicio img,.mk-inicio .hueco{width:100%;aspect-ratio:1;border-radius:13px;display:block;}
.mk-inicio .hueco{background:rgba(255,255,255,.22);}
.mk-inicio figcaption{font-size:9px;color:#fff;margin-top:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);}

/* El aro que rodea el botón exacto. Va aparte del número: el número dice cuál
   es, y el aro dice DÓNDE, que es lo que se busca con el pulgar. */
.aro{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:var(--d,44px);height:var(--d,44px);border-radius:50%;
  border:3px solid #E4572E;box-shadow:0 0 0 3px rgba(228,87,46,.22);
  pointer-events:none;z-index:1;}
.aro.ancho{border-radius:10px;width:var(--w,90%);height:var(--h,34px);}

/* ── Safari nuevo: la barra compacta de abajo ──────────────────────────────────
   Comprobado en un iPhone real el 13 de agosto de 2026. En las versiones nuevas
   de iOS esta barra NO lleva el icono de compartir: lleva atrás, la vista de
   lectura, la dirección, recargar y "···". El de compartir está dentro de ese
   menú, y ese es justo el paso donde la gente se queda mirando la pantalla. */
.mk-safari-pill{display:flex;align-items:center;gap:8px;padding:10px 12px 14px;
  background:#1C1C1E;}
.mk-safari-pill .redondo{width:30px;height:30px;border-radius:50%;background:#2C2C2E;
  color:#E5E5EA;display:flex;align-items:center;justify-content:center;font-size:13px;
  flex-shrink:0;}
.mk-safari-pill .campo{flex:1;background:#2C2C2E;border-radius:100px;
  padding:7px 12px;display:flex;align-items:center;justify-content:center;gap:8px;
  color:#E5E5EA;font-size:12px;}

/* El menú del "···" */
.mk-menu-ios{background:#2C2C2E;border-radius:14px;margin:8px;overflow:hidden;}
.mk-menu-ios div{padding:10px 14px;font-size:12.5px;color:#F2F2F7;
  border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.mk-menu-ios div:last-child{border-bottom:none;}
.mk-menu-ios div.buena{font-weight:800;}
.mk-menu-ios .ico-ios{width:17px;height:17px;color:#F2F2F7;flex-shrink:0;}

/* La fila de botones redondos de la hoja de compartir (Copiar, Marcadores…) */
.mk-hoja-redondos{display:flex;justify-content:space-around;padding:12px 8px;
  background:#fff;border-bottom:1px solid #EDEDF0;}
.mk-hoja-redondos figure{margin:0;text-align:center;width:22%;}
.mk-hoja-redondos span{width:40px;height:40px;border-radius:50%;background:#EFEFF3;
  display:flex;align-items:center;justify-content:center;margin:0 auto 4px;}
.mk-hoja-redondos figcaption{font-size:9px;color:#3C3C43;line-height:1.2;}
.mk-hoja-redondos .ico-ios{width:18px;height:18px;color:#000;}

/* La pantalla de confirmar, tal y como es ahora: X, título, botón azul, y el
   interruptor de "Abrir como app web", que si se apaga deja un simple acceso
   directo en vez de la app. */
.mk-conf-barra{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:#1C1C1E;color:#fff;}
.mk-conf-barra .cerrar{width:26px;height:26px;border-radius:50%;background:#2C2C2E;
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.mk-conf-barra b{flex:1;font-size:13px;}
/* El azul de la barra de iOS, un punto más oscuro que el de Apple: con el suyo
   (#0A84FF) el blanco encima daba 3,65 y hace falta 4,5. Sigue leyéndose como
   el azul de iOS, y esto es una réplica de una captura, no su interfaz. */
.mk-conf-barra .pill{background:#0069D9;color:#fff;border-radius:100px;
  padding:5px 14px;font-size:12.5px;font-weight:700;}
.mk-conf-datos{display:flex;align-items:center;gap:10px;padding:11px 12px;
  background:#2C2C2E;}
.mk-conf-datos img{width:40px;height:40px;border-radius:9px;}
.mk-conf-datos b{color:#fff;font-size:13px;display:block;}
.mk-conf-datos small{color:#8E8E93;font-size:11px;}
.mk-conf-interruptor{display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px;background:#2C2C2E;margin-top:8px;color:#fff;font-size:12.5px;}
.mk-conf-interruptor i{width:38px;height:22px;border-radius:100px;background:#34C759;
  position:relative;flex-shrink:0;}
.mk-conf-interruptor i::after{content:"";position:absolute;right:2px;top:2px;
  width:18px;height:18px;border-radius:50%;background:#fff;}
.mk-conf-pie{padding:9px 12px;color:#8E8E93;font-size:10.5px;background:#1C1C1E;}

/* Los avisos dentro de la guía y las salidas al producto. Antes el primer
   enlace a la app estaba a 28.798 px: el 97 % de la página. Quien lee una guía
   de uso es quien más cerca está de usarla. */
.aviso-guia{max-width:64ch;background:var(--teal-soft);border-left:4px solid var(--teal);
  border-radius:0 10px 10px 0;padding:11px 14px;margin:0 0 var(--e3);font-size:15.5px;}
.guia-salida{margin:var(--e4) 0 0;}
.guia-salida .btn{display:inline-block;}

.cabecera-acciones{margin:var(--e4) 0 0;}
.cabecera-acciones .btn{display:inline-block;}

/* La prueba visual arriba del todo en las landings. Antes se leía una página
   entera sobre un problema que quien llega ya tiene, y la pantalla del producto
   no aparecía nunca. */
.prueba-arriba{margin:0 0 var(--e6);display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--e4);align-items:center;}
.prueba-arriba figcaption{color:var(--ink-soft);font-size:16px;line-height:1.6;max-width:46ch;}
.prueba-arriba figcaption strong{color:var(--ink);}
@media (max-width:720px){
  .prueba-arriba{grid-template-columns:1fr;gap:var(--e3);}
}
.cabecera-nota{margin:var(--e2) 0 0;color:rgba(255,255,255,.8);font-size:14.5px;}


/* ── Modo oscuro de la guía ──────────────────────────────────────────────────
   Va al final, por lo mismo que en landing.css: puesto arriba lo pisa cualquier
   regla posterior de la misma especificidad. */
@media (prefers-color-scheme: dark){
  /* Los chips de las maquetas llevaban el color heredado del cuerpo sobre un
     fondo de papel oscuro: 1,85. Se les pone el suyo. */
  .mk-chip{color:var(--ink);}

  /* El aviso ámbar tiene el fondo escrito a mano, así que en oscuro se quedaba
     claro con el texto claro encima. */
  .nota.aviso{background:#3A3418;border-left-color:#D9A93A;color:#F2E6C4;}
  .nota.aviso strong{color:#F0D98A;}
  .nota.aviso a{color:#fff;}
}