/* FotoCarnet — один файл на весь сайт. Внешних шрифтов и библиотек нет:
   страница должна открываться мгновенно на телефоне в очереди в комиссарию. */

:root{
  --tinta:#101828; --tinta-suave:#475467; --tenue:#667085;
  --linea:#e4e7ec; --fondo:#ffffff; --fondo-suave:#f7f9fc; --fondo-marca:#f0f5ff;
  --marca:#1e5eff; --marca-oscura:#1246c9; --exito:#0f9d58; --alerta:#b42318;
  --radio:14px; --radio-s:10px;
  --sombra:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --ancho:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--tinta); background:var(--fondo);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--marca-oscura); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.22; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:clamp(28px,4.4vw,44px); font-weight:760}
h2{font-size:clamp(23px,2.8vw,31px); font-weight:720; margin-top:0}
h3{font-size:19px; font-weight:680}
p{margin:0 0 1em}
.envoltura{max-width:var(--ancho); margin:0 auto; padding:0 20px}
.estrecho{max-width:760px}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:8px}

/* --- шапка --- */
.cabecera{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--linea)}
.barra{display:flex; align-items:center; justify-content:space-between; gap:16px; height:62px}
.marca{display:flex; align-items:center; gap:9px; font-weight:740; font-size:18px;
  color:var(--tinta); letter-spacing:-.02em}
.marca:hover{text-decoration:none}
.marca-icono{width:22px;height:26px;border-radius:4px;background:var(--marca);
  box-shadow:inset 0 -7px 0 rgba(255,255,255,.35), inset 0 0 0 2px rgba(255,255,255,.9),
             0 0 0 2px var(--marca)}
.barra nav{display:flex; align-items:center; gap:22px; font-size:15px}
.barra nav a{color:var(--tinta-suave); font-weight:520}
.nav-cta{background:var(--marca); color:#fff!important; padding:9px 16px; border-radius:9px;
  font-weight:620}
.nav-cta:hover{background:var(--marca-oscura); text-decoration:none}
.idiomas{display:flex; align-items:center; gap:2px; border:1px solid var(--linea);
  border-radius:8px; padding:2px; background:#fff}
.idiomas .idioma{padding:4px 9px; border-radius:6px; font-size:13px; font-weight:640;
  color:var(--tenue); letter-spacing:.02em}
.idiomas .idioma:hover{text-decoration:none; background:var(--fondo-suave)}
.idiomas .idioma-activo{background:var(--fondo-marca); color:var(--marca-oscura)}
/* Переход придержан до конца загрузки снимка: нажатие принято, но ещё не
   сработало, и это должно быть видно — иначе кажется, что кнопка сломалась. */
.idiomas.esperando{opacity:.55; cursor:progress}
.idiomas.esperando .idioma{pointer-events:none}
/* На узком экране прячутся разделы меню, но не переключатель языка: человек,
   попавший не на свой язык, должен уйти на свой в один тап, а не искать подвал. */
@media(max-width:860px){.barra nav a:not(.nav-cta):not(.idioma){display:none}}

/* --- герой --- */
.heroe{background:linear-gradient(180deg,var(--fondo-marca),#fff 78%); padding:52px 0 44px;
  border-bottom:1px solid var(--linea)}
.heroe-cols{display:grid; grid-template-columns:1fr 460px; gap:44px; align-items:start}
@media(max-width:960px){.heroe-cols{grid-template-columns:1fr; gap:32px}}
.cinta{display:inline-block; background:#fff; border:1px solid #cddcff; color:var(--marca-oscura);
  font-size:13px; font-weight:620; padding:5px 12px; border-radius:99px; margin:0 0 18px}
.entradilla{font-size:18px; color:var(--tinta-suave); max-width:56ch}
.puntos{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:15px; color:var(--tinta-suave)}
.puntos li{position:relative; padding-left:22px}
.puntos li::before{content:"✓"; position:absolute; left:0; color:var(--exito); font-weight:800}

/* --- загрузчик --- */
.subidor{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:22px; scroll-margin-top:80px}
.oculto{display:none!important}
.zona{border:2px dashed #c8d3e8; border-radius:var(--radio-s); background:var(--fondo-suave);
  padding:34px 20px; text-align:center; cursor:pointer; transition:.15s}
.zona:hover,.zona.encima{border-color:var(--marca); background:var(--fondo-marca)}
.zona-icono{color:var(--marca); display:flex; justify-content:center; margin-bottom:10px}
.zona-titulo{font-weight:620; margin:0 0 4px}
.zona-nota{font-size:13.5px; color:var(--tenue); margin:0}
.enlace{background:none; border:0; padding:0; font:inherit; color:var(--marca-oscura);
  text-decoration:underline; cursor:pointer}
.ventajas{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-wrap:wrap;
  gap:6px 16px; font-size:13.5px; color:var(--tenue); justify-content:center}
.ventajas li::before{content:"● "; color:var(--marca)}

[data-paso="procesando"]{text-align:center; padding:18px 0 26px}
.proc-titulo{font-weight:660; margin:0 0 14px}
/* Полоса вместо крутилки: крутилка вертится одинаково и на пятой секунде,
   и на сороковой, а по проценту видно, сколько ещё ждать. */
.progreso{height:10px; border-radius:999px; background:var(--fondo-suave);
  border:1px solid var(--linea); overflow:hidden; margin:0 auto; max-width:340px}
.progreso-relleno{height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--marca),var(--marca-oscura))}
.proc-pct{font-weight:680; font-size:20px; margin:12px 0 4px;
  font-variant-numeric:tabular-nums}
.proc-nota{color:var(--tenue); font-size:14px; margin:0}
/* Замечания предпроверки. Жёлтый, а не красный: это подозрение, а не отказ,
   и выглядеть оно должно как подсказка на полях, а не как ошибка. */
.avisos{margin:16px auto 0; max-width:420px; text-align:left; background:#fffbeb;
  border:1px solid #fde68a; border-radius:var(--radio-s); padding:12px 14px}
.avisos-titulo{font-weight:660; font-size:14px; margin:0 0 6px; color:#7a5200}
.avisos ul{margin:0; padding-left:18px; font-size:13.5px; color:#7a5200; line-height:1.5}
.avisos li+li{margin-top:5px}
.avisos-nota{font-size:12.5px; color:#9a7100; margin:8px 0 0}

.listo-titulo{font-weight:700; font-size:19px; margin:0 0 14px}
/* Ширина превью — не вопрос вкуса: по этой картинке человек решает, платить
   или нет. На 150 px не видно ни кромки волос, ни резкости. */
.resultado{display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:start}
@media(max-width:560px){.resultado{grid-template-columns:1fr; justify-items:center}}
@media(max-width:560px){.res-carnet{max-width:230px}}
.res-carnet{margin:0}
.res-carnet img{width:100%; border-radius:8px; border:1px solid var(--linea); background:#fff}
.res-carnet figcaption{font-size:12.5px; color:var(--tenue); text-align:center; margin-top:6px}
.ampliar{color:var(--marca-oscura); text-decoration:underline}
.res-marca{font-size:13.5px; color:var(--tenue); margin:0 0 10px}
.res-lista{margin:0 0 14px; padding-left:19px; font-size:14.5px; color:var(--tinta-suave)}
.res-lista li{margin-bottom:3px}
.res-accion{margin-top:16px; text-align:center}
.res-nota{font-size:12.5px; color:var(--tenue); margin:10px 0 8px}
.error-titulo{font-weight:700; color:var(--alerta); margin:0 0 8px}
.error-texto{color:var(--tinta-suave); margin:0 0 16px}

/* --- кнопки --- */
.boton{display:inline-block; background:var(--marca); color:#fff; border:0; border-radius:10px;
  padding:12px 20px; font:inherit; font-weight:640; cursor:pointer; text-align:center}
.boton:hover{background:var(--marca-oscura); text-decoration:none; color:#fff}
.boton:disabled{opacity:.6; cursor:default}
.boton.grande{width:100%; padding:14px 20px; font-size:16.5px}
.boton.claro{background:#fff; color:var(--marca-oscura); width:auto}
.boton.claro:hover{background:#eef3ff; color:var(--marca-oscura)}
.boton.fantasma{background:transparent; color:var(--marca-oscura); border:1px solid #b9cdff;
  padding:10px 18px}
.boton.fantasma:hover{background:var(--fondo-marca)}

/* --- секции --- */
.franja{background:var(--fondo-suave); border-block:1px solid var(--linea); padding:52px 0}
.bloque{padding:52px 0}
.tres{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media(max-width:860px){.tres{grid-template-columns:1fr}}
.tres h3{margin:10px 0 6px}
.tres p{color:var(--tinta-suave); margin:0; font-size:15px}
.num{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:var(--marca); color:#fff; font-weight:700; font-size:15px}
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.tarjeta{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:20px}
.tarjeta h3{margin:0 0 6px; font-size:17px}
.tarjeta p{margin:0; font-size:14.5px; color:var(--tinta-suave)}
.dos-cols{display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start}
@media(max-width:900px){.dos-cols{grid-template-columns:1fr; gap:28px}}
.dos-cols.invertido{grid-template-columns:1.35fr 300px}
@media(max-width:900px){.dos-cols.invertido{grid-template-columns:1fr}}
.mini{font-size:16px; margin:0 0 10px}
.marcada{list-style:none; padding:0; margin:0}
.marcada li{position:relative; padding:0 0 8px 24px; font-size:15px; color:var(--tinta-suave)}
.marcada li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--exito); font-weight:800}
.caja{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:20px;
  box-shadow:var(--sombra); margin-top:18px}
.ejemplo{margin:0; background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px; box-shadow:var(--sombra)}
.ejemplo img{border-radius:8px; margin:0 auto}
.ejemplo figcaption{font-size:13px; color:var(--tenue); margin-top:10px; text-align:center}

.tabla-envoltura{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:#fff}
.tabla{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
.tabla th,.tabla td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--linea)}
.tabla thead th{background:var(--fondo-suave); font-size:13px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tenue)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla td:nth-child(2){font-weight:620; white-space:nowrap}
.tabla td:nth-child(3){color:var(--tinta-suave)}
.intro-tabla{max-width:70ch; color:var(--tinta-suave)}
.aviso{background:var(--fondo-marca); border-left:3px solid var(--marca); border-radius:0 8px 8px 0;
  padding:14px 18px; margin:20px 0 0; font-size:15px; color:var(--tinta-suave)}
.consejos{margin:0; padding-left:22px; color:var(--tinta-suave)}
.consejos li{margin-bottom:10px}
.consejos strong,.marcada strong{color:var(--tinta)}

.comparativa{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
@media(max-width:860px){.comparativa{grid-template-columns:1fr}}
.comp-col{border:1px solid var(--linea); border-radius:var(--radio); padding:22px; background:#fff}
.comp-col p{font-size:14.5px; color:var(--tinta-suave)}
.comp-col.destacada{border:2px solid var(--marca); box-shadow:var(--sombra)}
/* .comp-col p — это 0,1,1, поэтому одного класса тут мало: правила ниже
   должны быть не менее специфичными, иначе цена унаследует кегль абзаца. */
.comp-col p.comp-titulo{font-weight:660; color:var(--tinta); margin:0 0 4px; font-size:15px}
.comp-col p.comp-precio{font-size:30px; font-weight:760; color:var(--tinta); margin:0 0 10px;
  letter-spacing:-.02em; line-height:1.2}

details{border-bottom:1px solid var(--linea); padding:14px 0}
summary{cursor:pointer; font-weight:620; list-style:none; position:relative; padding-right:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:4px; top:-2px; font-size:22px;
  color:var(--marca); font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0; color:var(--tinta-suave); font-size:15px}

.cierre{background:var(--marca); color:#fff; text-align:center; padding:56px 0}
.cierre h2{color:#fff}
.cierre p{color:#dbe6ff; margin-bottom:22px}

.cabecera-articulo{background:linear-gradient(180deg,var(--fondo-marca),#fff); padding:38px 0 26px}
.migas{font-size:13.5px; color:var(--tenue); margin-bottom:12px}
.articulo{padding:34px 0 56px}
.articulo h2{margin-top:36px; font-size:25px}
.articulo article > p,.articulo article > ul{max-width:68ch}
.lateral{position:sticky; top:78px}
@media(max-width:900px){.lateral{position:static}}
blockquote{margin:18px 0; padding:14px 20px; border-left:3px solid var(--marca);
  background:var(--fondo-suave); color:var(--tinta-suave); font-style:italic; border-radius:0 8px 8px 0}

.gracias{text-align:center}
.gracias .caja,.gracias .aviso{text-align:left}
.marca-ok{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:#e7f7ee;
  color:var(--exito); font-size:26px; line-height:52px; font-weight:800}
.legal h2{font-size:20px; margin-top:32px}
.legal ul{color:var(--tinta-suave)}
.legal li{margin-bottom:6px}

.pie{background:#0c1526; color:#a9b6cc; padding:44px 0 22px; font-size:14.5px; margin-top:0}
.pie-cols{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px}
@media(max-width:800px){.pie-cols{grid-template-columns:1fr; gap:24px}}
.pie a{color:#cfdaee}
.pie ul{list-style:none; padding:0; margin:0}
.pie li{margin-bottom:7px}
.pie-marca{font-weight:700; color:#fff; font-size:17px; margin-bottom:6px}
.pie-titulo{font-weight:640; color:#fff; margin-bottom:9px}
.pie-nota{color:#8fa0bb; font-size:13.5px}
.pie-legal{border-top:1px solid #1c2942; margin-top:28px; padding-top:18px}
.pie-legal p{color:#7d8ca6; font-size:13px; margin:0}

/* --- блог --- */
.lista-blog{list-style:none; padding:0; margin:0}
.lista-blog li{padding:22px 0; border-bottom:1px solid var(--linea)}
.lista-blog li:last-child{border-bottom:0}
.lista-blog h2{font-size:22px; margin:0 0 6px}
.lista-blog p{color:var(--tinta-suave); margin:0 0 6px}
.lista-blog .fecha{font-size:13px; color:var(--tenue); margin:0}
.articulo .fecha{font-size:13.5px; color:var(--tenue); margin:0 0 4px}
.volver{display:inline-block; margin-top:28px; font-size:15px}
.cta-blog{background:var(--fondo-marca); border:1px solid #cddcff; border-radius:var(--radio);
  padding:22px; margin-top:32px; text-align:center}
.cta-blog h2{font-size:20px; margin:0 0 6px}
.cta-blog p{color:var(--tinta-suave); margin:0 0 14px}