/* Los estilos de la pagina comercial y de la de contacto.
   Estaban adentro del HTML. Se sacaron cuando aparecio la segunda pagina:
   copiados en las dos, el primer cambio de color deja una distinta de la
   otra, y eso no se nota hasta que alguien mira las dos juntas. */
/* ===========================================================
   NS · Gestión Integral en Salud
   Página clara. Las pantallas del sistema son las protagonistas
   y usan los colores y las formas del propio NS (styles.css).
   Todos los datos de las pantallas son inventados.
   =========================================================== */
:root{
  /* --- los mismos de la app --- */
  --navy:#0B1F3A; --petrol:#123B5D; --turq:#18B7B2; --turq-d:#139a96; --celeste:#DDF4F3;
  --bg:#FFFFFF; --hover:#F4F6F9; --border:#D9E1E8;
  --text:#1D2939; --text-2:#667085;
  --success:#2E8B57; --success-bg:#E8F3EC;
  --warning:#D99A21; --warning-bg:#FAF1DE;
  --info:#3B82C4;   --info-bg:#E7F0F9;
  /* Los mismos colores de la app, pero oscurecidos para TEXTO sobre blanco:
     el ámbar de la app da 2,44 de contraste y el mínimo legible es 4,5.
     Son justo los números con los que la página argumenta. */
  --warning-txt:#8A6212; --success-txt:#26734A; --turq-txt:#0E6C69;
  --r-1:6px; --r-2:10px; --r-3:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,31,58,.07);
  --sh-2:0 1px 2px rgba(11,31,58,.06), 0 8px 24px rgba(11,31,58,.08);
  --sh-3:0 18px 48px rgba(11,31,58,.14);
  --sh-4:0 30px 70px rgba(11,31,58,.18);
  /* --- de la página ---
     Archivo es de Omnibus-Type, de Buenos Aires. Una sola familia variable:
     la jerarquía la dan el ANCHO y el peso, no dos tipografías distintas. */
  --fuente:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --app:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ancho:1160px;
  --gutter:clamp(20px,5vw,40px);
  --barra-h:68px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--fuente);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;text-decoration:none}
p{margin:0}
/* los titulares van ANCHOS: es de donde sale el tono institucional */
h1,h2,h3{
  margin:0;font-weight:700;font-stretch:116%;letter-spacing:-.016em;line-height:1.12;
  text-wrap:balance;color:var(--navy);
}
::selection{background:var(--celeste);color:var(--navy)}
/* que el titular no quede tapado por la barra pegajosa al saltar */
section[id]{scroll-margin-top:calc(var(--barra-h) + 14px)}

.envolver{
  width:100%;max-width:var(--ancho);margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
}
.envolver--ancho{max-width:1320px}
.seccion{padding-block:clamp(62px,8vw,96px)}
.seccion--gris{background:var(--hover);border-block:1px solid var(--border)}
h2{font-size:clamp(27px,3.9vw,40px)}
/* 66 y no 56: con 56 la bajada usaba 594 px de los 1160 que tiene al lado, o
   sea la mitad, y se veia angosta debajo de un titulo ancho. 66 la lleva a 700
   y sigue adentro del rango comodo de lectura (45-75 letras por renglon); mas
   que eso el ojo pierde el renglon al volver. */
.lead{color:var(--text-2);font-size:clamp(16.5px,1.5vw,18.5px);max-width:66ch;margin-top:16px}
/* el rótulo es una etiqueta de archivo, no un adorno de color:
   una raya corta y el texto en gris. inline-flex para que se centre solo
   cuando la sección está centrada. */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:12px;font-weight:600;letter-spacing:.115em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 16px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--turq);flex:0 0 auto}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:700;padding:13px 24px;
  border-radius:var(--r-2);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .17s,border-color .17s,color .17s;
}
.btn--lleno{background:var(--turq);color:#042B2A}
.btn--lleno:hover{background:var(--turq-d)}
.btn--borde{border-color:var(--border);color:var(--navy);background:#fff}
.btn--borde:hover{border-color:var(--navy)}
.btn--chico{padding:9px 17px;font-size:14px}

/* ---------- barra ---------- */
.barra{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
/* La barra usa MAS ancho que el contenido de abajo, a proposito. Con el ancho
   del contenido (1160) el menu recibia 735 px y necesitaba 769: se desbordaba
   de su caja y el boton Ingresar le quedaba ENCIMA de "Preguntas", doce
   pixeles montado. No se ve como un error de medida, se ve como que la barra
   esta apretada.

   1240 y no mas: medido a 1440, el hueco pasa de -12 a 68 px y el logo se corre
   40 px del borde del contenido de abajo. Con 1320 el hueco daba 148, que es
   aire de sobra, y el logo quedaba 80 px corrido: la barra se despegaba de la
   pagina. */
.barra__in{display:flex;align-items:center;gap:22px;height:var(--barra-h);max-width:1240px}
/* El logo es el archivo de verdad. El trazo blanco va en currentColor,
   asi que se tine con el color del lugar donde esta. */
.logo{display:flex;align-items:center;flex:0 0 auto;color:var(--navy);line-height:0}
.logo__img{height:34px;width:auto;display:block}
.logo--pie{color:#fff}
.logo--pie .logo__img{height:52px}
/* El espacio entre renglones CEDE cuando la pantalla se achica. Con 18px fijos
   el menu necesitaba 985px y se esconde a los 1000: quince pixeles de margen,
   o sea que una palabra mas lo partia en dos lineas. Asi se mantiene el aire en
   una pantalla grande y se aprieta sola en una chica. */
.menu{display:flex;gap:clamp(11px,1.5vw,18px);margin-left:12px;flex:0 1 auto;min-width:max-content}
/* Entre 1041 y 1180 los ocho renglones no entran junto con los DOS botones de
   la derecha, asi que se va el de la demo, que igual esta dos veces mas abajo.
   Con eso el menu se sigue viendo en una ventana de notebook a media pantalla,
   en vez de caer a la hamburguesa.
   El tope era 1100 y quedaba corto: de 1101 a 1180 el menu volvia a salir con
   los dos botones y se montaba con Ingresar. */
@media(min-width:1041px) and (max-width:1180px){
  .menu{gap:14px}
  .menu a{font-size:13.5px}
  .barra__acc .btn--lleno{display:none}
}
.menu a{
  font-size:14.5px;font-weight:500;color:var(--text-2);position:relative;padding-block:4px;
  transition:color .16s;
  /* Un renglon del menu NO se parte en dos lineas. Pasaba con los de dos
     palabras ("Como funciona", "Cuanto tiempo") y no se ve midiendo alturas:
     la caja la fija el contenedor, asi que todos miden lo mismo igual. Se ve
     mirando los rectangulos del texto, que es lo que hace el probador. */
  white-space:nowrap;
}
.menu a:hover{color:var(--navy)}
.menu__movil{display:none}
.menu a.aca{color:var(--navy);font-weight:700}
.menu a.aca::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--turq);border-radius:2px;
}
.barra__acc{display:flex;gap:9px;flex:0 0 auto;align-items:center}
/* botón del menú en celular */
.hamb{
  display:none;width:40px;height:40px;border:1px solid var(--border);background:#fff;
  border-radius:var(--r-2);cursor:pointer;padding:0;place-items:center;flex:0 0 auto;
}
.hamb span{display:block;width:17px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:transform .2s,background .2s}
.hamb span::before,.hamb span::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:var(--navy);
  border-radius:2px;transition:transform .2s,top .2s;
}
.hamb span::before{top:-6px} .hamb span::after{top:6px}
.hamb[aria-expanded="true"] span{background:transparent}
.hamb[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamb[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:1040px){
  .hamb{display:grid}
  .barra__in{justify-content:space-between;gap:12px}
  .menu{
    display:none;position:absolute;left:0;right:0;top:var(--barra-h);
    background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--sh-2);
    flex-direction:column;gap:0;margin:0;padding:8px 0;
  }
  .menu.abierto{display:flex}
  .menu a{
    padding:13px max(var(--gutter),env(safe-area-inset-left,0px));font-size:16px;
    font-weight:600;color:var(--navy);
  }
  .menu a.aca::after{display:none}
  /* el renglón abierto se marca con una barra, no con un color flojo */
  .menu a.aca{color:var(--navy);box-shadow:inset 3px 0 0 var(--turq)}
  .menu__movil{display:block;border-top:1px solid var(--border);margin-top:8px;padding-top:15px}
}
@media(max-width:420px){.barra__acc .btn--borde{display:none}}

/* ---------- hero ---------- */
/* sin resplandor de color: la pantalla del sistema es lo único que tiene que pesar.
   Queda un lavado grisáceo mínimo que apoya la barra de arriba. */
.hero{padding-block:clamp(48px,6vw,78px) 0;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0 0 auto;height:400px;z-index:-1;
  background:linear-gradient(to bottom,var(--hover),rgba(255,255,255,0));
}
.hero h1{font-size:clamp(34px,5.3vw,57px);letter-spacing:-.025em;font-stretch:120%}
.hero h1 em{font-style:normal;color:var(--turq-d)}
.hero .lead{margin:20px auto 0;text-align:center}
.hero__cta{display:flex;gap:11px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero__micro{
  display:flex;gap:9px 26px;justify-content:center;flex-wrap:wrap;margin-top:26px;
  font-size:13.5px;font-weight:600;color:var(--text-2);
}
.hero__micro span{display:flex;align-items:center;gap:8px}
.hero__micro span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--turq)}

/* ---------- marco de pantalla ---------- */
.pantalla{
  margin-top:clamp(36px,5vw,54px);border-radius:var(--r-3);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--sh-4);background:#fff;max-width:100%;
}
.pantalla--chica{box-shadow:var(--sh-3);margin-top:0}
.pantalla__barra{
  display:flex;align-items:center;gap:9px;padding:11px 16px;
  background:var(--hover);border-bottom:1px solid var(--border);
}
.punto{width:10px;height:10px;border-radius:50%;background:#D9E1E8;flex:0 0 auto}
.pantalla__url{
  margin-left:8px;font-family:var(--app);font-size:12px;color:var(--text-2);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:4px 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pantalla__ej{
  margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#042B2A;background:var(--turq);border-radius:var(--r-pill);padding:3px 10px;flex:0 0 auto;
}
.desliza{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pie-pantalla{font-size:13px;color:var(--text-2);margin-top:12px;text-align:center}
/* el aviso lo decide si la pantalla DE VERDAD no entra, no el ancho de la ventana:
   hay pantallas angostas que se deslizan en un monitor grande */
.pie-pantalla.hay-que-deslizar::after{content:" ↔ Deslizala para verla entera."}

/* ===== la app de NS, con sus propias formas ===== */
.app{display:grid;grid-template-columns:224px 1fr;min-width:1020px;font-family:var(--app);text-align:left}
.app__side{background:var(--navy);padding:16px 12px;color:#CFE3EE}
.app__marca{display:flex;align-items:center;gap:6px;color:#fff;font-weight:700;font-size:19px;padding:4px 10px 16px;letter-spacing:-.03em}
.app__marca img{height:26px;width:auto;display:block}
.app__rot{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7FA3BA;padding:12px 10px 7px}
.app__link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-1);font-size:13px;color:#CFE3EE}
.app__link--on{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.app__link .ch{margin-left:auto;background:var(--turq);color:#042B2A;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:var(--r-pill)}
.app__main{background:#fff;min-width:0}
.app__top{height:56px;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--border)}
.app__top b{font-size:14px;color:var(--text);font-weight:600}
.app__top .meta{font-size:12px;color:var(--text-2)}
.app__av{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--celeste);color:var(--petrol);font-size:12px;font-weight:700;display:grid;place-items:center}
.app__cuerpo{padding:20px}
.app__h{font-size:15px;font-weight:700;color:var(--text);margin-bottom:14px;letter-spacing:-.01em}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.kpis--4{grid-template-columns:repeat(4,1fr)}
.kpis--4 .kpi__v{font-size:21px}
.kpi__c{font-size:11.5px;color:var(--text-2);margin-top:4px}
.kpi{border:1px solid var(--border);border-radius:var(--r-2);padding:14px 16px;box-shadow:var(--sh-1)}
.kpi__r{font-size:11.5px;color:var(--text-2);margin-bottom:7px}
.kpi__v{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kpi__d{font-size:11.5px;margin-top:5px;font-weight:600;color:var(--text-2)}
.kpi--ok .kpi__d{color:var(--success-txt)}
.kpi--av .kpi__v,.kpi--av .kpi__d{color:var(--warning-txt)}

.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);font-weight:600;padding:0 12px 9px;border-bottom:1px solid var(--border)}
.tb td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--text);white-space:nowrap}
.tb tr:last-child td{border-bottom:0}
.tb .num{text-align:right;font-variant-numeric:tabular-nums}
.tb .flo{color:var(--text-2)}
.et{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.et--ok{background:var(--success-bg);color:#1F6B41}
.et--esp{background:var(--warning-bg);color:#8A6212}
.et--inf{background:var(--info-bg);color:#2A5F91}
.et--tur{background:var(--celeste);color:#0E6C69}

/* ===== la pantalla del cruce: informe | bandeja ===== */
.ins{font-family:var(--app);text-align:left;min-width:1000px;background:#fff}
.ins__top{
  display:flex;align-items:center;gap:14px;padding:11px 18px;
  border-bottom:1px solid var(--border);background:#fff;
}
.ins__arch{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.ins__pager{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:13px;color:var(--text-2)}
.ins__fl{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:12px;color:var(--text-2)}
.ins__subir{
  background:var(--turq);color:#042B2A;font-size:13.5px;font-weight:700;
  padding:8px 16px;border-radius:var(--r-2);white-space:nowrap;
}
.ins__ico{display:flex;gap:7px;margin-right:auto}
.ins__ico i{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  display:grid;place-items:center;font-size:12px;font-style:normal;color:var(--text-2);
}
.ins__cuerpo{display:grid;grid-template-columns:1.15fr .85fr}
.ins__doc{background:#3A3A3A;padding:18px;display:grid;align-items:stretch;justify-items:center}
.hoja{background:#fff;width:100%;max-width:430px;padding:22px 26px;font-size:11px;line-height:1.5;color:#333;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.hoja__logo{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--petrol);font-weight:800;font-size:13px;letter-spacing:-.01em}
.hoja__logo span{width:18px;height:18px;border-radius:50%;background:var(--celeste);border:2px solid var(--turq)}
.hoja__tit{text-align:center;font-weight:700;text-decoration:underline;margin:4px 0 14px;font-size:12px;color:#222}
.hoja__dat{margin-bottom:12px}
.hoja__h{font-weight:700;margin:12px 0 6px;color:#222}
.hoja p{margin-bottom:7px}

.ins__panel{padding:16px 18px;background:#fff;border-left:1px solid var(--border);min-width:0}
.ins__campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.campo{border:1px solid var(--border);border-radius:var(--r-2);padding:9px 12px;min-width:0}
.campo__e{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:3px}
.campo__v{font-size:12.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.campo__v small{font-weight:400;color:var(--text-2);font-size:11.5px}
.ins__estado{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-size:11.5px;color:var(--text-2)}

.ins__h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:700;margin-bottom:10px;line-height:1.5}
.ins__h b{color:var(--text)}
.ins__h-fila{display:flex;align-items:flex-start;gap:12px;margin-bottom:11px}
.ins__usar2{background:var(--turq);color:#042B2A;font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:var(--r-2);white-space:nowrap;flex:0 0 auto}

.cand{border:1px solid var(--border);border-radius:var(--r-2);padding:11px 13px;margin-bottom:9px;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start;box-shadow:var(--sh-1)}
.cand__tick{width:16px;height:16px;border-radius:4px;background:var(--turq);color:#042B2A;display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:2px}
.cand__t{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.35}
.cand__m{font-size:11px;color:var(--text-2);margin-top:4px;overflow-wrap:anywhere}
.cand__av{
  display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11px;font-weight:600;
  color:#8A6212;background:var(--warning-bg);border-radius:var(--r-1);padding:4px 8px;
}
.cand__der{display:grid;gap:7px;justify-items:end}
.cand__usar{border:1px solid var(--border);border-radius:var(--r-2);font-size:11.5px;font-weight:700;color:var(--text);padding:5px 13px}

.ins__mano{border-top:1px solid var(--border);margin-top:14px;padding-top:14px}
.ins__fila{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:5px}
.ins__inp{border:1px solid var(--border);border-radius:var(--r-2);padding:8px 11px;font-size:12px;color:var(--text-2)}
.ins__ok{background:var(--turq);color:#042B2A;font-size:12px;font-weight:700;padding:8px 15px;border-radius:var(--r-2);white-space:nowrap}
.ins__ayuda{font-size:10.5px;color:var(--text-2);margin-bottom:12px}

/* ---------- tres cosas ---------- */
/* tres columnas o una: con auto-fit quedaban dos arriba y una sola abajo */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:40px}
@media(max-width:860px){.tres{grid-template-columns:1fr;gap:28px}}
.tres h3{font-size:19px;margin-bottom:8px}
.tres p{color:var(--text-2);font-size:15.5px}
/* el paso va numerado porque es una secuencia de verdad: se conecta, se cruza,
   se transmite. Misma raya que el rótulo de sección, para que sea el mismo idioma. */
.tres__n{
  display:flex;align-items:center;gap:11px;margin:0 0 13px;
  color:var(--text-2);font-weight:700;font-size:12.5px;letter-spacing:.1em;
}
.tres__n::before{content:"";width:24px;height:2px;background:var(--turq);flex:0 0 auto}

/* ---------- partido ---------- */
.partido{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4.5vw,56px);align-items:center}
.partido--invertido{grid-template-columns:1.14fr .86fr}
.partido--invertido .partido__txt{order:2}
/* sin esto la pantalla ancha estira la grilla y la página se va de costado */
.partido > *{min-width:0}
@media(max-width:900px){
  .partido,.partido--invertido{grid-template-columns:1fr;gap:34px}
  .partido--invertido .partido__txt{order:0}
}
.lista{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.lista li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:15.5px;color:var(--text-2)}
.lista li::before{content:"✓";color:var(--turq-d);font-weight:800;font-size:13px;background:var(--celeste);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;margin-top:2px}
.lista b{color:var(--text);font-weight:700}

/* ---------- lo demás del circuito ---------- */
/* seis cosas: tres y tres, no cuatro y dos sueltas */
.demas{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 36px;margin-top:40px}
@media(max-width:940px){.demas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.demas{grid-template-columns:1fr}}
.demas__it{border-top:2px solid var(--celeste);padding-top:16px;position:relative}
.demas__it::before{content:"";position:absolute;top:-2px;left:0;width:38px;height:2px;background:var(--turq)}
.demas__it h3{font-size:17.5px;margin-bottom:7px}
.demas__it p{color:var(--text-2);font-size:15px}

/* ---------- tarjetas ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:38px}
/* sin sombra ni salto al pasar el mouse: una ficha, no un botón */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-2);padding:26px 26px 28px}
.card__et{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.card__et::before{content:"";width:18px;height:2px;background:var(--turq);flex:0 0 auto}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--text-2);font-size:15.5px}

/* ---------- en camino ---------- */
.camino{margin-top:20px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;border:1px dashed var(--turq);background:var(--celeste);border-radius:var(--r-3);padding:22px 26px}
@media(max-width:680px){.camino{grid-template-columns:1fr;gap:16px}}
.camino__et{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--turq-d);margin-bottom:8px}
.camino p{color:#2E5B59;font-size:15.5px}
.camino b{color:var(--navy)}

/* ---------- contacto ---------- */
.cierre{background:var(--navy);color:#C6DAE7}
.cierre h2{color:#fff}
.cierre .lead{color:#9FBDD1}
.cierre__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:860px){.cierre__in{grid-template-columns:1fr;gap:30px}}
.canal{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-3);padding:20px 22px}
.canal + .canal{margin-top:12px}
.canal__et{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7FA3BA;margin-bottom:11px}
.mail{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mail code{font-family:var(--app);font-size:15px;color:#fff;background:rgba(255,255,255,.1);padding:9px 13px;border-radius:var(--r-1);user-select:all;overflow-wrap:anywhere}
.copiar{font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;background:none;border:1px solid rgba(255,255,255,.26);color:#DCEBF4;border-radius:var(--r-1);padding:9px 14px}
.copiar:hover{border-color:#fff}
.ext{color:var(--turq);font-weight:700;font-size:15.5px;display:inline-flex;gap:7px;align-items:center}
.ext:hover{text-decoration:underline}

.pie{background:var(--navy);border-top:1px solid rgba(255,255,255,.1);color:#7FA3BA;font-size:13.5px}
.pie__in{display:flex;justify-content:space-between;gap:18px 36px;flex-wrap:wrap;padding-block:26px;align-items:center}
.pie__in .logo{color:#fff;font-size:18px}
.pie__ac{max-width:50ch}

/* ---------- lo que hoy te lleva ---------- */
.reloj{
  margin-top:38px;border:1px solid var(--border);border-radius:var(--r-3);background:#fff;
  box-shadow:var(--sh-1);overflow:hidden;
}
.reloj__fila{
  display:grid;grid-template-columns:1fr 104px 104px 96px;gap:14px;align-items:center;
  padding:13px 20px;border-bottom:1px solid var(--border);
}
.reloj__fila--cab{background:var(--hover);padding-block:9px}
.reloj__fila--cab span{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);font-weight:700;
}
.reloj__fila--cab span:not(:first-child){text-align:right}
.reloj__t{font-size:15.5px;font-weight:600;color:var(--text)}
.reloj__c span{display:none}
.reloj input{
  font-family:var(--fuente);font-size:15px;font-weight:600;width:100%;padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--r-2);color:var(--text);background:#fff;
  text-align:right;
}
.reloj__h{
  font-size:17px;font-weight:700;color:var(--petrol);text-align:right;
  font-variant-numeric:tabular-nums;
}
/* El cierre de la cuenta: el unico momento de la pagina donde el numero que se
   lee es del que mira y no nuestro. Por eso es lo mas grande que hay despues
   del titular del arranque. */
.reloj__pie{padding:30px 30px 34px;background:var(--navy);color:#C6DAE7;text-align:left}
.reloj__rot{
  margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7FA3BA;font-weight:700;
}
.reloj__num{margin:6px 0 0;line-height:1}
.reloj__pie b{
  font-size:clamp(50px,7vw,82px);color:#fff;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-stretch:112%;
}
/* La frase es lo que de verdad traduce el numero: cuatro jornadas al mes se
   entiende sin pensarlo, 33,5 horas no. Por eso no va en letra chica gris. */
.reloj__eq{
  margin:12px 0 0;font-size:clamp(16px,1.6vw,19px);font-weight:600;color:var(--celeste);
  max-width:40ch;line-height:1.45;
}
@media(max-width:860px){ .reloj__pie{padding:24px 20px 28px} }
@media(max-width:700px){
  .reloj__fila{grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px}
  .reloj__fila--cab{display:none}
  .reloj__t{grid-column:1/-1}
  .reloj__c span{display:block;font-size:11.5px;color:var(--text-2);margin-bottom:5px;font-weight:600}
  .reloj input{text-align:left}
  .reloj__h{grid-column:1/-1;text-align:left;border-top:1px solid var(--border);padding-top:11px}
}

/* ---------- preguntas ---------- */
.faq{margin-top:34px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  align-items:baseline;padding:18px 0;font-size:16.5px;font-weight:700;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--turq-d);font-size:22px;font-weight:700;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--text-2);font-size:15.5px;padding:0 0 20px;max-width:74ch}

/* ---------- el formulario ---------- */
.form{display:grid;gap:15px}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.form__fila{grid-template-columns:1fr}}
.campo-f{display:grid;gap:7px;min-width:0}
.campo-f > span{font-size:13.5px;font-weight:600;color:#C6DAE7}
.campo-f input,.campo-f textarea{
  font-family:inherit;font-size:15.5px;color:#fff;width:100%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-2);padding:12px 14px;
  transition:border-color .16s,background .16s;
}
.campo-f textarea{resize:vertical;min-height:76px;line-height:1.5}
.campo-f input::placeholder,.campo-f textarea::placeholder{color:#7FA3BA}
.campo-f input:focus,.campo-f textarea:focus{
  background:rgba(255,255,255,.12);border-color:var(--turq);outline:none;
}
.campo-f input[aria-invalid="true"],.campo-f textarea[aria-invalid="true"]{border-color:#FF9B8A}
.campo-f em{font-style:normal;font-size:12.5px;color:#FF9B8A;min-height:0}
/* quién es: dos botones, no un desplegable */
.quien{border:0;padding:0;margin:0;min-width:0}
.quien legend{font-size:13.5px;font-weight:600;color:#C6DAE7;padding:0;margin-bottom:7px}
.quien__op{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.quien__op{grid-template-columns:1fr}}
.quien__op label{
  display:block;text-align:center;font-size:14.5px;font-weight:600;color:#C6DAE7;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-2);padding:12px 10px;transition:border-color .16s,background .16s,color .16s;
}
.quien__op input{position:absolute;opacity:0;width:1px;height:1px}
.quien__op input:checked + span{color:#042B2A}
.quien__op label:has(input:checked){background:var(--turq);border-color:var(--turq);color:#042B2A}
.quien__op label:has(input:focus-visible){outline:2px solid var(--turq);outline-offset:3px}
/* la trampa para los robots: nadie la ve, y si la completan no entra */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__pie{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:4px}
.form__nota{font-size:12.5px;color:#7FA3BA;max-width:42ch}
.aviso-f{
  border-radius:var(--r-2);padding:14px 16px;font-size:14.5px;line-height:1.5;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#DCEBF4;
}
.aviso-f--ok{background:rgba(24,183,178,.16);border-color:var(--turq);color:#CFF3F1}
.aviso-f b{color:#fff}
.aviso-f a{color:var(--turq);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gracias{display:grid;gap:12px;align-content:start}
.gracias h3{color:#fff;font-size:21px}
.gracias p{color:#9FBDD1;font-size:15.5px}

/* ---------- los pasos del arranque ---------- */
.arranque{counter-reset:paso;list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}
.arranque li{
  display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  font-size:15.5px;color:#9FBDD1;
}
.arranque li b{color:#fff;font-weight:700}
.arranque li::before{
  content:counter(paso);counter-increment:paso;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--turq);font-size:13px;font-weight:800;
  display:grid;place-items:center;
}

:focus-visible{outline:2px solid var(--turq);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-9999px;background:var(--turq);color:#042B2A;padding:12px 20px;font-weight:700;z-index:100}
.saltar:focus{left:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* ---- La cinta de "cada parte se contrata sola" ----
   Va entre las capacidades y la calculadora, que es donde el lector acaba de ver
   todo lo que el sistema hace y piensa "esto es mucho para mi". No es una
   seccion mas: es un mensaje comercial en el medio de los descriptivos, asi que
   lleva otro tratamiento. Navy, como el arranque y el cierre, para que la
   pagina quede atada por esos tres. El ritmo gris/blanco de las secciones se
   mantiene: una cinta no entra en la cuenta. */
.eyebrow--claro{color:#7FA3BA}
.cinta{background:var(--navy);color:#fff;padding:58px 0}
.cinta__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.cinta h2{color:#fff;margin:0 0 13px;font-size:30px}
.cinta p{margin:0;color:#BFD4E2;font-size:16px;line-height:1.62;max-width:46ch}
.cinta p + p{margin-top:12px}
.cinta b{color:#fff;font-weight:600}
.cinta__rot{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7FA3BA;margin:0 0 14px}
/* Las fichas van con borde y sin relleno a proposito: una ficha vacia se lee
   como "disponible, elegí", que es justo lo que dice el texto al lado.
   Rellenas se leerian como "esto ya lo tenés". */
.piezas{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.piezas li{border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);
  padding:8px 15px;font-size:13.5px;color:#DCEBF4;white-space:nowrap}
.piezas li b{color:#fff;font-weight:600}
.cinta__pie{margin-top:18px;font-size:14px;color:#9FBDD0;max-width:40ch}
@media(max-width:900px){
  .cinta{padding:44px 0}
  .cinta__g{grid-template-columns:1fr;gap:30px}
  .cinta h2{font-size:25px}
}
@media(max-width:480px){
  .piezas li{white-space:normal}
}

/* Las dos palabras que tienen que quedar del arranque. */
.hero .lead b{color:var(--navy);font-weight:650}

/* El camino de vuelta a la portada, en la pagina de contacto. */
.volver{margin-top:26px;font-size:15px}
.volver a{color:#BFD4E2;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.volver a:hover{color:#fff}

/* El cierre de la portada: ya no lleva el formulario, lleva el boton que
   lleva a el. El formulario vive en /contacto, su propia pagina. */
.cierre__acc{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.btn--grande{font-size:17px;padding:16px 32px}
.cierre__nota{margin:14px 0 0;color:#9FBDD0;font-size:14.5px}
.cierre__li{margin:22px 0 0;font-size:15px}
.cierre__li a{color:#BFD4E2;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.cierre__li a:hover{color:#fff}
@media(max-width:860px){.cierre__acc{align-items:stretch}.btn--grande{text-align:center}}

/* El h1 de la pagina de contacto: el de la portada es el titular que ocupa
   la pantalla entera, y aca es el titulo de un formulario. */
.cierre h1{color:#fff;font-size:clamp(27px,3.4vw,36px);line-height:1.14;margin:0 0 14px}

/* ============================================================
   CELULAR: lo que se toca con el dedo
   ============================================================
   Medido a 375 px el 06/11/2026. La pagina no se desbordaba por ningun lado,
   asi que lo que quedaba por arreglar no se ve mirando: se ve midiendo que tan
   grande es cada cosa que hay que apretar. El minimo comodo con un dedo son
   44 px (Apple) / 48 (Google); abajo de eso se falla el toque y se vuelve a
   intentar, que es la sensacion de "esta pagina no anda bien en el telefono".

   Lo que estaba chico:
     los ocho campos de la calculadora   34 px
     el enlace de LinkedIn               19 px
     el boton del menu                   40 px
     Copiar                              35 px
   Nada de esto se toca en una pantalla grande: ahi se apunta con el mouse. */
@media(max-width:860px){
  /* Los campos de la calculadora son donde mas se escribe en el telefono.
     16px de letra ademas evita que el navegador haga zoom solo al enfocarlos,
     que descoloca la pantalla entera. */
  .reloj input{min-height:46px;font-size:16px;padding:10px 12px}
  /* El boton del menu: 40 era justo. */
  .hamb{width:46px;height:46px}
  /* Copiar y el enlace de LinkedIn. El enlace crece por abajo y por arriba sin
     mover el texto de lugar, asi que el espacio tocable es mas grande que lo
     que se ve. */
  .copiar{min-height:44px;padding:11px 18px}
  .cierre__li a, .volver a{display:inline-block;padding:12px 0;border-bottom:0}
  /* EL FORMULARIO. Lo de la letra no es estetico: en un iPhone, un campo con
     menos de 16 px hace que Safari haga ZOOM SOLO al tocarlo. La pantalla se
     descoloca, el que estaba escribiendo pierde de vista el resto y tiene que
     pellizcar para volver. Con 16 no pasa. Son los siete campos que se llenan. */
  .campo-f input, .campo-f textarea, .form input, .form textarea, .form select{
    font-size:16px;min-height:46px;
  }
  .campo-f textarea, .form textarea{min-height:92px}
  /* El boton de enviar ocupa el ancho: con el pulgar no se apunta. */
  .form button[type="submit"], .form .btn{width:100%;min-height:50px}
  .cierre__li a{text-decoration:underline;text-underline-offset:4px}
  .volver a{text-decoration:underline;text-underline-offset:4px}
}

/* ============================================================
   LA PAGINA DE DATOS PERSONALES
   ============================================================
   Un texto legal se lee distinto que una pagina de venta: renglon mas angosto,
   mas aire entre parrafos y los titulos marcando de donde a donde va cada tema.
   Lo que NO lleva es letra chica: si algo esta escrito para que no se lea, la
   pagina deja de servir para lo que existe. */
.legal{padding-block:clamp(36px,4.5vw,60px) clamp(50px,6vw,80px)}
.envolver--legal{max-width:760px}
.legal h1{font-size:clamp(30px,3.6vw,42px);margin:10px 0 0}
.legal h2{
  font-size:clamp(19px,2vw,23px);margin:clamp(34px,4vw,46px) 0 12px;
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--border);
}
.legal p{margin:0 0 13px;font-size:16.5px;line-height:1.68;color:var(--text)}
.legal .lead{margin-bottom:0}
.legal a{color:var(--turq-txt);text-decoration:underline;text-underline-offset:3px}
.legal__l{margin:0 0 13px;padding-left:20px;display:grid;gap:9px}
.legal__l li{font-size:16.5px;line-height:1.62;color:var(--text)}
/* Lo que hay que leer sin falta: el reparto de responsabilidades y la leyenda
   que pide la AAIP. Van resaltados, no escondidos. */
.legal__aviso{
  background:var(--celeste);border-radius:var(--r-2);padding:18px 22px;
  margin:22px 0 10px;border-left:3px solid var(--turq-d);
}
.legal__aviso p{margin:0}
.legal__aviso p + p{margin-top:10px}
.legal__nota{font-size:14.5px;color:var(--text-2);line-height:1.6}
/* La tabla de los dos roles: es el centro del documento, porque de ahi sale
   todo lo demas. */
.legal__t{width:100%;border-collapse:collapse;margin:18px 0 10px;font-size:15.5px}
.legal__t th, .legal__t td{
  text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--border);
}
.legal__t thead th{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
  background:var(--hover);font-weight:700;
}
.legal__t tbody td:first-child{font-weight:650;color:var(--text);white-space:nowrap;width:1%}
@media(max-width:700px){
  /* En el telefono la tabla se lee como fichas: tres columnas de texto en
     375 px no se leen. */
  .legal__t, .legal__t tbody, .legal__t tr, .legal__t td{display:block;width:auto}
  .legal__t thead{display:none}
  .legal__t tr{border:1px solid var(--border);border-radius:var(--r-2);margin-bottom:14px;padding:4px 0}
  .legal__t td{border:0;padding:8px 14px}
  .legal__t tbody td:first-child{
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
    white-space:normal;padding-bottom:0;
  }
  /* Cada celda dice de que columna era, que si no se pierde al apilarse. */
  .legal__t td[data-col]::before{content:attr(data-col) ": ";font-weight:700;color:var(--text)}
}
.pie__legal{margin:14px 0 0;font-size:14px}
.pie__legal a{color:#9FBDD1;text-decoration:underline;text-underline-offset:3px}
.pie__legal a:hover{color:#fff}
/* El aviso de datos de la pagina de contacto. Va ARRIBA del formulario, no
   abajo: la ley pide informar antes de recolectar, y abajo del boton no es
   antes. Y en el mismo cuerpo que el resto: en letra chica seria justamente
   lo que esa regla viene a evitar. */
.form__ley{margin:16px 0 0;font-size:15px;line-height:1.6;color:#BFD4E2;max-width:46ch}
.form__ley a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Los renglones del menu que no se nombran. Barras y no texto borroso: un
   texto difuminado invita a acercarse a leerlo, y ademas se lee igual con
   zoom. Una barra no dice nada y se entiende como 'hay mas'. */
.app__link--tapado{pointer-events:none}
.app__link--tapado span{
  display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.13);
}
.app__link--tapado:nth-of-type(odd) span{width:72%}
.app__link--tapado:nth-of-type(even) span{width:58%}

/* Partes del tablero de ejemplo que no tienen que leerse (13/11/2026) */
.difuso{filter:blur(5px);user-select:none;pointer-events:none}
.app__top .difuso{display:inline-block}