/* Mark Findings · web · generado desde tokens v1.0 · dirección de arte v2 */
/* Fuentes servidas por nosotros: sin petición a terceros, sin esperar a un dominio ajeno
   y sin que el visitante quede registrado en un servidor de fuentes solo por entrar. */
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/static/fonts/PlexSans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url('/static/fonts/PlexSans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url('/static/fonts/PlexSans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-weight:400;font-style:normal;font-display:swap;src:url('/static/fonts/PlexSerif-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-weight:400;font-style:italic;font-display:swap;src:url('/static/fonts/PlexSerif-400i.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-weight:600;font-style:normal;font-display:swap;src:url('/static/fonts/PlexSerif-600.woff2') format('woff2');}
:root{
  --papel:#FBFBF9; --papel-alt:#F2F0EB; --tinta:#16181C;
  --grafito:#5A5F6A; --tenue:#8C9199; --filete:#DCDDE0;
  --acento:#243B53; --limpio:#2F6F4E; --criterio:#9A6508;
  --impedimento:#9E2B20; --sindato:#8C9199;
  /* Serif para titular, sans para lectura: al revés que la v1, a propósito. */
  --display:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --texto:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --dato:'IBM Plex Sans',system-ui,sans-serif;   /* antes monoespaciada; ver cabecera */
  --ancho:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;}
img{max-width:100%;display:block;}
.env{max-width:var(--ancho);margin:0 auto;padding:0 26px;}
.env.ancho{max-width:1320px;}
a{color:var(--acento);text-decoration:none;border-bottom:1px solid rgba(36,59,83,.28);}
a:hover{border-bottom-color:var(--acento);}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.012em;line-height:1.1;}
h1{font-size:clamp(40px,5.6vw,74px);line-height:1.02;letter-spacing:-.022em;}
h2{font-size:clamp(27px,3.3vw,42px);margin-bottom:16px;letter-spacing:-.018em;}
h3{font-size:20.5px;margin-bottom:8px;}
p{margin:0 0 16px;}
em{font-style:italic;}
.mono{font-family:var(--display);}
.et{font-family:var(--texto);font-weight:500;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:18px;}
.guia{font-size:19px;line-height:1.55;color:var(--grafito);max-width:60ch;}
.nota{font-size:14px;line-height:1.55;color:var(--grafito);}

/* ── encabezado ─────────────────────────────────────────────────────────────
   El cambio de idioma NO es una sección: va separado por un filete, en mono y
   pequeño, a la derecha del todo. Es un ajuste, no un destino. */
header.top{border-bottom:1px solid var(--filete);position:sticky;top:0;
  background:rgba(251,251,249,.92);backdrop-filter:saturate(180%) blur(8px);z-index:30;}
header.top .env{display:flex;align-items:center;gap:24px;height:70px;}
.wm{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.09em;
  text-transform:uppercase;border:0;color:var(--tinta);margin-right:auto;}
.wm small{display:none;}
nav.top{display:flex;gap:26px;align-items:center;}
nav.top a{border:0;font-size:14.5px;color:var(--grafito);white-space:nowrap;}
nav.top a:hover{color:var(--tinta);}
a.idioma{font-family:var(--texto);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);border:0;padding-left:22px;margin-left:2px;position:relative;}
a.idioma:before{content:'';position:absolute;left:0;top:-4px;bottom:-4px;width:1px;
  background:var(--filete);}
a.idioma:hover{color:var(--tinta);}
a.btn-nav{font-family:var(--texto);font-size:14.5px;font-weight:500;color:var(--papel);
  background:var(--tinta);padding:9px 18px;border:0;border-radius:100px;}
a.btn-nav:hover{background:var(--acento);color:var(--papel);}

section{padding:96px 0;border-bottom:1px solid var(--filete);}
section.hero{padding:80px 0 0;border-bottom:0;}
section.gris{background:var(--papel-alt);border-bottom:0;}
.hero h1{max-width:15ch;}
.hero .guia{margin-top:28px;font-size:20.5px;max-width:48ch;}

.btn{display:inline-block;font-family:var(--texto);font-weight:500;font-size:16px;
  padding:15px 28px;background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);
  border-radius:100px;cursor:pointer;}
.btn:hover{background:var(--acento);border-color:var(--acento);}
.btn.sec{background:transparent;color:var(--tinta);}
.btn.sec:hover{background:var(--papel-alt);color:var(--tinta);}

.rej{display:grid;gap:30px;}
.rej2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.rej3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

/* ── hero partido: texto + fotografía ─────────────────────────────────────── */
.hero-rej{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;}
.foto{position:relative;overflow:hidden;background:var(--papel-alt);}
.foto img{width:100%;height:100%;object-fit:cover;}
.foto.alta{aspect-ratio:4/5;}
.foto.ancha{aspect-ratio:16/9;}
.foto figcaption{font-size:12.5px;color:var(--tenue);padding-top:11px;}
figure{margin:0;}

/* ── cifras: filetes finos y número grande, sin cajas ──────────────────────── */
.cifras{margin-top:10px;}
.cifra{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;
  border-top:1px solid var(--filete);padding:26px 0 24px;}
.cifra:last-child{border-bottom:1px solid var(--filete);}
.cifra b{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,62px);
  line-height:1;letter-spacing:-.03em;}
.cifra span{font-size:15px;color:var(--grafito);line-height:1.45;padding-top:8px;}

/* ── pasos ────────────────────────────────────────────────────────────────── */
.paso{border-top:1px solid var(--tinta);padding-top:20px;}
.paso .n{font-family:var(--display);font-size:15px;color:var(--acento);margin-bottom:14px;}
.paso h3{margin-bottom:10px;}
.paso p{font-size:15.5px;color:var(--grafito);margin:0;}

/* ── bloque de aval / quién hay detrás ────────────────────────────────────── */
.aval{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.aval h2{max-width:16ch;}
.firma{display:flex;gap:14px;align-items:center;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--filete);font-size:14px;color:var(--grafito);}

/* ── prueba (el hueco de las reseñas, hoy con prueba verificable) ─────────── */
.prueba{border:1px solid var(--filete);background:var(--papel);padding:30px 32px;}
.prueba q{font-family:var(--display);font-size:22px;line-height:1.35;quotes:none;display:block;}
.prueba .de{font-size:12.5px;color:var(--tenue);margin-top:18px;}

.tarjeta-n{border-top:1px solid var(--tinta);padding-top:18px;}
.tarjeta-n .nom{font-family:var(--display);font-size:23px;line-height:1.5;
  letter-spacing:-.01em;color:var(--tinta);}

.tarjeta{border:1px solid var(--filete);padding:30px;background:var(--papel);}
.tarjeta.destaca{border-color:var(--tinta);}
.precio{font-family:var(--display);font-weight:400;font-size:46px;letter-spacing:-.03em;}
.precio small{font-size:14px;font-weight:400;color:var(--tenue);font-family:var(--texto);
  letter-spacing:0;margin-left:2px;}
ul.lista{list-style:none;padding:0;margin:18px 0 0;font-size:15px;}
ul.lista li{padding:8px 0 8px 20px;position:relative;border-top:1px solid var(--filete);}
ul.lista li:before{content:'';position:absolute;left:0;top:16px;width:6px;height:6px;
  border-radius:50%;background:var(--acento);}
ul.lista li.no:before{background:transparent;border:1px solid var(--tenue);}

/* herramienta */
.tool{background:var(--papel-alt);border:1px solid var(--filete);padding:32px;}
.campo{display:block;margin-bottom:16px;}
.campo span{display:block;font-weight:500;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:7px;}
input[type=text],select{width:100%;font-family:var(--texto);font-size:16.5px;padding:13px 14px;
  border:1px solid var(--filete);background:var(--papel);color:var(--tinta);border-radius:2px;}
input:focus,select:focus{outline:2px solid var(--acento);outline-offset:-1px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.chip{font-family:var(--display);font-size:15.5px;padding:9px 14px;border:1px solid var(--filete);
  background:var(--papel);cursor:pointer;display:flex;align-items:center;gap:8px;}
.chip:hover{border-color:var(--tinta);}
.chip.sel{border-color:var(--acento);background:#fff;}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--filete);display:inline-block;}
.chip i.limpio{background:var(--limpio);} .chip i.ocupado{background:var(--impedimento);}
.chip i.cargando{background:var(--criterio);}
.aviso{border-left:3px solid var(--criterio);background:var(--papel);padding:16px 18px;
  font-size:14.5px;margin-top:20px;}

table.web{width:100%;border-collapse:collapse;font-size:15px;}
table.web th{font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--tinta);}
table.web td{padding:13px 12px 13px 0;border-bottom:1px solid var(--filete);vertical-align:top;}

details{border-bottom:1px solid var(--filete);padding:18px 0;}
details summary{font-family:var(--display);font-weight:400;font-size:19px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;}
details summary::-webkit-details-marker{display:none;}
details summary:after{content:'+';color:var(--tenue);font-family:var(--dato);}
details[open] summary:after{content:'–';}
details .cont{padding-top:12px;max-width:70ch;color:var(--grafito);font-size:15.5px;}

footer{padding:72px 0 0;background:var(--papel);border-top:1px solid var(--filete);}
footer a{color:var(--grafito);border:0;font-size:14.5px;display:block;padding:5px 0;}
footer a:hover{color:var(--tinta);}
.pie-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.pie-cols .et{margin-bottom:10px;}
.pie-marca{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(30px,8.6vw,116px);line-height:1;color:var(--tinta);
  text-align:center;margin:82px 0 46px;user-select:none;white-space:nowrap;}
.pie-barra{border-top:1px solid var(--filete);display:flex;flex-wrap:wrap;gap:14px 28px;
  align-items:center;justify-content:space-between;padding:22px 0 34px;}
.pie-barra a,.pie-barra span{font-size:13px;color:var(--tenue);padding:0;display:inline;}
.pie-barra nav{display:flex;gap:22px;flex-wrap:wrap;}
@media (max-width:760px){ .pie-cols{grid-template-columns:1fr 1fr;gap:24px;} }

.ia{border:1px solid var(--filete);background:var(--papel-alt);padding:18px 20px;font-size:14px;
  line-height:1.5;color:var(--grafito);}
.ia b{color:var(--tinta);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:7px;}
.muestra{border:1px solid var(--filete);background:var(--papel-alt);padding:24px 26px;}
table.web.mini th, table.web.mini td{padding:8px 8px 8px 0;font-size:13.5px;}
table.web.mini th.c, table.web.mini td.c{text-align:center;padding-right:0;}
.punto{display:inline-block;width:9px;height:9px;border-radius:50%;}
.punto.limpio{background:var(--limpio);} .punto.criterio{background:var(--criterio);}
.punto.impedimento{background:var(--impedimento);}
.punto.sindato{background:transparent;border:1px solid var(--sindato);}

/* Dos columnas con nombre: en línea no se pueden colapsar en móvil, y una rejilla
   de 1.55fr/1fr a 390 px es exactamente cómo se desborda una página a la derecha. */
.rej-inf{grid-template-columns:1.55fr 1fr;gap:48px;align-items:start;}
.rej-pru{grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:36px;}
@media (max-width:980px){
  .hero-rej,.aval,.rej-inf,.rej-pru{grid-template-columns:1fr;gap:36px;}
  .hero-rej .foto.alta{aspect-ratio:3/2;}
}
@media (max-width:760px){
  section{padding:64px 0;} .hero{padding:44px 0 0;}
  /* En móvil el encabezado ocupa dos líneas: pegado arriba se comería un quinto de la
     pantalla, así que ahí deja de ser fijo. */
  header.top{position:static;backdrop-filter:none;background:var(--papel);}
  header.top .env{height:auto;padding:14px 20px;flex-wrap:wrap;gap:10px 18px;}
  .wm{margin-right:0;width:100%;}
  nav.top{gap:14px 18px;flex-wrap:wrap;}
  nav.top a{font-size:13.5px;}
  a.idioma{padding-left:0;margin-left:auto;} a.idioma:before{display:none;}
  body{font-size:16px;} .hero .guia{font-size:18.5px;}
  .cifra{grid-template-columns:1fr;gap:4px;} .cifra span{padding-top:0;}
}