html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Maquetación: columnas centradas con mucho aire, secciones alternas blanco / gris claro, un solo acento azul; las capturas del guardia en marco de teléfono son las protagonistas */
/* Cloudflare guarda este archivo y sitio.js 7 días: al cambiarlos, sube el ?v= de los dos HTML (index y descargar) */
:root {
  --fondo: #FFFFFF;
  --fondo-2: #F5F5F7;
  --tarjeta: #FFFFFF;
  --tarjeta-2: #F5F5F7;
  --texto: #1D1D1F;
  --texto-2: #6E6E73;
  --linea: #D2D2D7;
  --acento: #0A66D6;
  --acento-hover: #0757B8;
  --acento-suave: rgba(10, 102, 214, .10);
  --marco: #1D1D1F;
  --barra: rgba(255, 255, 255, .78);
  --sombra: 0 30px 60px -20px rgba(29, 29, 31, .28), 0 18px 36px -18px rgba(29, 29, 31, .22);
  --logo-filtro: brightness(.32) contrast(1.4);
  --realce: 0 22px 44px -26px rgba(29, 29, 31, .32);
  --curva: cubic-bezier(.2, .7, .2, 1);
  --f-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #000000; --fondo-2: #111113; --tarjeta: #1C1C1E; --tarjeta-2: #1C1C1E; --texto: #F5F5F7; --texto-2: #A1A1A6;
    --linea: #38383A; --acento: #3B8CF5; --acento-hover: #5C9FF7; --acento-suave: rgba(59, 140, 245, .16); --marco: #3A3A3C;
    --barra: rgba(22, 22, 23, .78); --sombra: 0 30px 60px -20px rgba(0, 0, 0, .7); --logo-filtro: none; color-scheme: dark;
    --realce: 0 0 0 1px #3A3A3C, 0 22px 44px -26px rgba(0, 0, 0, .9);
  }
}
:root[data-theme="dark"] {
  --fondo: #000000; --fondo-2: #111113; --tarjeta: #1C1C1E; --tarjeta-2: #1C1C1E; --texto: #F5F5F7; --texto-2: #A1A1A6;
  --linea: #38383A; --acento: #3B8CF5; --acento-hover: #5C9FF7; --acento-suave: rgba(59, 140, 245, .16); --marco: #3A3A3C;
  --barra: rgba(22, 22, 23, .78); --sombra: 0 30px 60px -20px rgba(0, 0, 0, .7); --logo-filtro: none; color-scheme: dark;
  --realce: 0 0 0 1px #3A3A3C, 0 22px 44px -26px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--fondo); color: var(--texto); font: 400 17px/1.5 var(--f-sf); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
.envoltura { width: 100%; max-width: 1040px; margin-inline: auto; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
a { color: inherit; }
b, strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 8px; }

/* Barra superior */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--barra); }
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--barra); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--linea) 60%, transparent); }
.barra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; }
.barra img { height: 26px; width: auto; filter: var(--logo-filtro); display: block; }
.barra nav { display: flex; align-items: center; gap: 26px; font-size: 13px; color: var(--texto-2); }
.barra nav a { text-decoration: none; transition: color .2s, background .2s; }
.barra nav a:hover { color: var(--texto); }
.barra .mini { background: var(--acento); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 500; }
.barra .mini:hover { background: var(--acento-hover); color: #fff; }
@media (max-width: 640px) { .barra nav .ocultable { display: none; } }

/* Tipografía común */
.ceja { margin: 0; font-size: 17px; font-weight: 600; color: var(--acento); letter-spacing: 0; }
h1 { margin: 0; max-width: 15ch; font-size: clamp(40px, 7.2vw, 80px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
h2 { margin: 0; font-size: clamp(32px, 4.8vw, 54px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
h3 { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.suave { color: var(--texto-2); }
.entrada { margin: 0; max-width: 34em; font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.texto { margin: 0; max-width: 38em; color: var(--texto-2); line-height: 1.5; }
.texto b { color: var(--texto); }

/* Secciones */
.seccion { padding-block: 112px; }
.seccion.gris { background: var(--fondo-2); }
.cabeza { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; }
.cabeza.centro { align-items: center; text-align: center; }
@media (max-width: 640px) { .seccion { padding-block: 80px; } .cabeza { margin-bottom: 40px; } }

/* Botones */
.acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; }
.boton { display: inline-flex; align-items: center; gap: 9px; background: var(--acento); color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; padding: 12px 24px; border-radius: 999px; transition: background .2s, transform .25s var(--curva), box-shadow .25s var(--curva), scale .15s var(--curva); }
.boton:hover { background: var(--acento-hover); }
.boton svg { width: 19px; height: 19px; flex: none; transition: translate .25s var(--curva); }
.enlace { color: var(--acento); text-decoration: none; font-size: 17px; }
.enlace .flecha { display: inline-block; transition: translate .25s var(--curva); }
.enlace:hover { text-decoration: underline; }

/* Teléfono */
.telefono { width: min(290px, 72vw); max-width: 100%; aspect-ratio: 612 / 1350; border-radius: 50px; padding: 11px; background: var(--marco); box-shadow: var(--sombra); position: relative; flex: none; }
.telefono::before { content: ""; position: absolute; top: 22px; left: 50%; translate: -50% 0; width: 30%; height: 25px; border-radius: 999px; background: #000; z-index: 1; }
/* La captura empieza debajo de una franja de estado: la isla del marco nunca tapa el logo de la app (las capturas son modo Día, franja blanca) */
.telefono img { display: block; width: 100%; height: 100%; box-sizing: border-box; padding-top: 46px; object-fit: cover; object-position: top; border-radius: 40px; background: #fff; }

/* Portada */
.portada { text-align: center; padding-block: 72px 0; overflow: hidden; }
.portada .pila { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.portada .acciones { margin-top: 14px; }
.portada .ceja { font-size: 19px; }
/* Escena: el teléfono y sus dos notas van en celdas propias de una rejilla, así nunca se enciman.
   En pantallas chicas las notas quedan debajo; desde 900px flanquean al teléfono y una línea lo señala */
.escena { --hueco: clamp(32px, 4.4vw, 60px); --conector: color-mix(in srgb, var(--acento) 45%, transparent); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; margin-top: 48px; padding-bottom: 64px; }
.escena::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; translate: -50% 0; width: min(780px, 140vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--acento-suave), transparent); pointer-events: none; }
.escena .telefono { width: min(300px, 74vw); box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.folio { position: relative; width: min(320px, 100%); min-width: 0; text-align: left; background: color-mix(in srgb, var(--tarjeta) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); border-radius: 18px; padding: 14px 18px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.folio .f1 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.folio .f2 { color: var(--texto); }
.folio .f3 { color: var(--texto-2); }
.vivo { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
/* La placa se lee como placa: mayúsculas en monoespaciada del sistema, con su propio recuadro */
.placa { display: inline-block; margin-right: 4px; padding: 1px 7px; border: 1px solid var(--linea); border-radius: 6px; background: var(--tarjeta-2); font: 600 13px/1.45 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; }
.sello { position: relative; display: flex; flex-direction: column; text-align: center; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.sello .s1 { margin-bottom: 4px; font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -.035em; color: var(--texto); }
@media (min-width: 600px) and (max-width: 899px) {
  .escena { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; margin-top: 56px; }
  .escena .telefono { grid-column: 1 / -1; }
  .folio { justify-self: end; align-self: center; }
  .sello { justify-self: start; align-self: center; text-align: left; }
}
@media (min-width: 900px) {
  .escena { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--hueco); align-items: start; margin-top: 64px; padding-bottom: 96px; }
  .escena .telefono { grid-area: 1 / 2; }
  .folio { grid-area: 1 / 1; justify-self: end; align-self: end; width: auto; margin-bottom: 132px; }
  .sello { grid-area: 1 / 3; justify-self: start; margin-top: 108px; text-align: left; }
  .sello .s1 { font-size: 44px; line-height: 1.05; }
  /* Cada línea mide justo el hueco entre columnas: llega al marco del teléfono sin pisarlo */
  .folio::after, .sello::before { content: ""; position: absolute; width: var(--hueco); height: 9px; translate: 0 -50%; pointer-events: none; }
  .folio::after { left: calc(100% + 1px); top: 50%; transform-origin: left; background: radial-gradient(circle, var(--acento) 0 3px, transparent 3.5px) right center / 9px 9px no-repeat, linear-gradient(var(--conector), var(--conector)) left center / calc(100% - 4px) 1px no-repeat; }
  .sello::before { right: 100%; top: 23px; transform-origin: right; background: radial-gradient(circle, var(--acento) 0 3px, transparent 3.5px) left center / 9px 9px no-repeat, linear-gradient(var(--conector), var(--conector)) right center / calc(100% - 4px) 1px no-repeat; }
}

/* Datos clave */
.rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.dato { grid-column: span 2; background: var(--tarjeta-2); border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dato.ancho { grid-column: span 3; }
.etq { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--texto-2); }
.dato strong { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -.03em; }
.dato p { margin: 0; color: var(--texto-2); line-height: 1.5; }
.dato .proximo { color: var(--acento); }
@media (max-width: 820px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dato, .dato.ancho { grid-column: span 1; }
  .dato.ultimo { grid-column: span 2; }
}
@media (max-width: 520px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .dato, .dato.ancho, .dato.ultimo { grid-column: span 1; }
}

/* El reto: cuatro columnas con filete superior */
.columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.columna { border-top: 1px solid var(--linea); padding-top: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.columna p { margin: 0; color: var(--texto-2); }
@media (max-width: 860px) { .columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .columnas { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Apertura condicionada: tres pasos */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: paso; }
.paso { background: var(--tarjeta); border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
.paso .etq { color: var(--acento); }
.paso p { margin: 0; color: var(--texto-2); }
.paso:not(:last-child)::after { content: "›"; position: absolute; right: -14px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; background: var(--fondo-2); color: var(--texto-2); display: grid; place-items: center; font-size: 20px; line-height: 1; z-index: 1; }
@media (max-width: 760px) {
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .paso:not(:last-child)::after { content: "›"; right: auto; left: 50%; top: auto; bottom: -14px; translate: -50% 0; rotate: 90deg; }
}

/* Bloques con teléfono */
.bloque { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; justify-items: center; }
.bloque .pila { display: flex; flex-direction: column; gap: 16px; min-width: 0; justify-self: stretch; }
@media (min-width: 860px) {
  .bloque { grid-template-columns: minmax(0, 1fr) 300px; gap: 88px; }
  .bloque.invertido { grid-template-columns: 300px minmax(0, 1fr); }
  .bloque.invertido .telefono { order: -1; }
}
.lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.lista li { padding-block: 14px; border-top: 1px solid var(--linea); color: var(--texto-2); }
.lista li:last-child { border-bottom: 1px solid var(--linea); }
.lista li b { color: var(--texto); }
.frase { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.frase .f-a { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.frase .f-b { margin: 0; color: var(--texto-2); }

/* Mosaicos grandes */
.mosaicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mosaico { background: var(--tarjeta-2); border-radius: 26px; padding: 40px 36px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.seccion.gris .mosaico { background: var(--tarjeta); }
.mosaico h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.18; letter-spacing: -.025em; }
.mosaico p { margin: 0; color: var(--texto-2); }
.chip { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--acento); background: var(--acento-suave); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 760px) { .mosaicos { grid-template-columns: minmax(0, 1fr); } .mosaico { padding: 32px 26px; } }

/* Administrador */
.cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cuatro .paso::after { display: none; }
@media (max-width: 960px) { .cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cuatro { grid-template-columns: minmax(0, 1fr); } }
.nota-pie { margin: 40px auto 0; max-width: 40em; text-align: center; color: var(--texto-2); }
.nota-pie b { color: var(--texto); }

/* Cierre */
.cierre { padding-block: 120px 40px; text-align: center; }
.cierre .pila { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.eslogan { margin: 0; max-width: 18ch; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.08; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.contacto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 72px; text-align: left; }
.caja { background: var(--fondo-2); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.caja .valor { font-size: 19px; font-weight: 600; letter-spacing: -.015em; overflow-wrap: anywhere; user-select: all; text-decoration: none; }
.caja a.valor { color: var(--acento); }
.copiar { margin-top: 8px; align-self: flex-start; background: transparent; color: var(--acento); border: 0; padding: 0; font: 400 15px var(--f-sf); cursor: pointer; }
.copiar:hover { text-decoration: underline; }
@media (max-width: 760px) { .contacto { grid-template-columns: minmax(0, 1fr); } }
.pie { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--texto-2); text-align: left; }
.pie img { height: 28px; width: auto; filter: var(--logo-filtro); }

/* Movimiento. Todo parte de su lugar y a la vista: sin JS, al imprimir o con movimiento reducido la página
   se ve completa y quieta. La portada entra al cargar; lo demás lo marca sitio.js con .por-ver solo si
   todavía no está a la vista, y sube a su sitio al aparecer. Nada espera escondido con opacity 0 */
@media (prefers-reduced-motion: no-preference) {
  .portada .pila > * { animation: aparecer .8s var(--curva) backwards; }
  .portada .pila > :nth-child(2) { animation-delay: .07s; }
  .portada .pila > :nth-child(3) { animation-delay: .14s; }
  .portada .pila > :nth-child(4) { animation-delay: .21s; }
  .escena .telefono { animation: subir 1s var(--curva) .25s backwards; }
  .folio { animation: aparecer .8s var(--curva) .75s backwards; }
  .sello { animation: aparecer .8s var(--curva) .9s backwards; }
  .folio::after, .sello::before { animation: trazar .7s var(--curva) 1.35s backwards; }
  .vivo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--acento); animation: latido 2.4s ease-out 1.8s infinite; }

  .cabeza, .columna, .bloque > *, .nota-pie, .cierre .pila { transition: translate .9s var(--curva) var(--retraso, 0s), scale .9s var(--curva) var(--retraso, 0s); }
  .dato, .paso, .mosaico, .caja { transition: translate .9s var(--curva) var(--retraso, 0s), scale .9s var(--curva) var(--retraso, 0s), transform .35s var(--curva), box-shadow .35s var(--curva); }
  /* Sin transición al marcar (se baja de golpe, fuera de la vista); al quitar la marca sí sube animado */
  :root .por-ver { translate: 0 44px; scale: .98; transition: none; }
  :is(.columna, .dato, .paso, .mosaico, .caja, .bloque > *):nth-child(2) { --retraso: .08s; }
  :is(.columna, .dato, .paso, .mosaico, .caja):nth-child(3) { --retraso: .16s; }
  :is(.columna, .dato, .paso):nth-child(4) { --retraso: .24s; }
  .dato:nth-child(5) { --retraso: .32s; }
}
@keyframes aparecer { from { opacity: 0; translate: 0 18px; } }
@keyframes subir { from { opacity: 0; transform: translateY(40px); } }
@keyframes trazar { from { scale: 0 1; } }
@keyframes latido { from { scale: 1; opacity: .55; } to { scale: 3.2; opacity: 0; } }

/* Las capturas de las secciones flotan un poco más lento que el texto al recorrer (solo navegadores que lo soportan) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 860px) {
    .bloque .telefono { animation: flotar linear both; animation-timeline: view(); }
  }
}
@keyframes flotar { from { transform: translateY(40px); } to { transform: translateY(-40px); } }

/* Respuesta al cursor: solo con mouse y sin movimiento reducido */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dato:hover, .paso:hover, .mosaico:hover { transform: translateY(-4px); box-shadow: var(--realce); }
  .boton:not(.secundario):not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--acento) 85%, transparent); }
  .boton.secundario:hover { transform: translateY(-2px); }
  .boton.secundario:hover svg { translate: 0 2px; }
  .enlace:hover .flecha { translate: 3px 0; }
}
@media (prefers-reduced-motion: no-preference) { .boton:not([aria-disabled="true"]):active { scale: .97; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .por-ver { translate: none; scale: none; } }


/* --- microjack.app: lo que se agrego al publicar la pagina --- */
.paso.paso-claro { background: var(--tarjeta-2); }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton.secundario { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 1.5px var(--acento); }
.boton.secundario:hover { background: var(--acento-suave); }
.boton[aria-disabled="true"] { background: var(--linea); color: var(--texto-2); box-shadow: none; cursor: not-allowed; }
.descarga { max-width: 760px; margin: 56px auto 0; display: grid; gap: 16px; text-align: left; }
.descarga .caja h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.02em; }
.descarga .caja p, .descarga .caja li { margin: 0; color: var(--texto-2); }
.descarga ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.descarga code { font: 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; }