/* Inicio, precios y Trabaje con nosotros: los mismos colores y letras que la página de cada empresa (pagina.html).
   Sencillo: texto claro, una tabla cuando hace falta, pocos colores. Sin tarjetas que giran ni animaciones. */
:root {
  --fondo: #f6f4ef; --papel: #ffffff; --tinta: #1a1d24; --suave: #5e6470; --linea: #e2ded5; --fila: #faf8f4;
  --azul: #2346c4; --azul-suave: #e8ecfb; --verde: #19704c; --verde-suave: #e3f3ea; --rojo: #b9402b; --rojo-suave: #f9e5e1;
  --ambar: #93590b; --ambar-suave: #fbefd9; --amarillo: #ffc83d; --amarillo-suave: #fff4d6; --sobre-azul: #ffffff;
  --display: "Familjen Grotesk", "Arial Narrow", system-ui, sans-serif;
  --texto: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cifras: "DM Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --fondo: #13151a; --papel: #1b1e25; --tinta: #eceef2; --suave: #a2a8b4; --linea: #2c3039; --fila: #20232b;
  --azul: #8199ff; --azul-suave: #1f2747; --verde: #55c995; --verde-suave: #15301f; --rojo: #f08b75; --rojo-suave: #3a1e18;
  --ambar: #e6b261; --ambar-suave: #352812; --amarillo-suave: #3a3017; --sobre-azul: #11141c; color-scheme: dark } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.55 var(--texto); }
a { color: var(--azul); }
.marco { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Barra de arriba */
.barra { border-bottom: 1px solid var(--linea); background: var(--papel); }
.barra .marco { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 8px; font: 700 18px var(--display); color: var(--tinta); text-decoration: none; }
.marca svg { width: 26px; height: 26px; }
.barra nav { display: flex; gap: 18px; font-size: 15px; flex-wrap: wrap; }
.barra nav a { color: var(--suave); text-decoration: none; }
.barra nav a:hover, .barra nav a[aria-current="page"] { color: var(--azul); }

/* Títulos y texto */
h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(30px, 5vw, 46px); max-width: 22ch; }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 18px; }
.lead { font-size: 19px; color: var(--suave); max-width: 60ch; margin: 12px 0 0; }
.nota { color: var(--suave); font-size: 14px; margin: 0; }
section { padding: 36px 0; }
section + section { border-top: 1px solid var(--linea); }

/* Botones */
.boton { display: inline-block; background: var(--azul); color: var(--sobre-azul); text-decoration: none; padding: 10px 18px; border-radius: 10px;
  font: 600 16px var(--texto); border: 0; cursor: pointer; }
.boton.claro { background: var(--papel); color: var(--azul); border: 1px solid var(--azul); }
.boton:disabled { opacity: .6; cursor: default; }

/* Formularios */
form.nit, .paso-correo form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; max-width: 560px; }
input[type=email], input[type=text], input[type=tel], input[type=number], input:not([type]), select {
  font: 16px var(--texto); padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); color: var(--tinta); min-width: 0; }
form.nit input { flex: 1 1 220px; }
.paso-correo { margin-top: 12px; max-width: 560px; }
.paso-correo form { flex-direction: column; margin-top: 0; }
.acepto { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.aviso { font-size: 13px; color: var(--suave); margin: 0; }
.listo { background: var(--verde-suave); color: var(--verde); border-radius: 10px; padding: 12px 14px; margin: 0; }
.error-form { color: var(--rojo); font-size: 14px; margin: 0; }

/* Las 6 preguntas: una lista, no tarjetas */
.preguntas { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 0; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }
.preguntas li { display: grid; grid-template-columns: 220px 1fr auto; gap: 14px; align-items: baseline; padding: 14px 18px; }
.preguntas li + li { border-top: 1px solid var(--linea); }
.preguntas b { font-family: var(--display); font-size: 18px; }
.plan-tag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.plan-tag.gratis { background: var(--verde-suave); color: var(--verde); }
.plan-tag.radar { background: var(--azul-suave); color: var(--azul); }
.plan-tag.ia { background: var(--ambar-suave); color: var(--ambar); }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pasos li { border-left: 3px solid var(--azul); padding: 2px 0 2px 14px; }
.pasos b { display: block; font-family: var(--display); font-size: 18px; }

/* Precios: tres columnas */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.plan { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.plan.destacado { border: 2px solid var(--azul); }
.precio { font: 600 30px var(--display); }
.precio small { font: 400 15px var(--texto); color: var(--suave); }
.plan ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; }
.plan .nota { font-size: 13px; }
.pronto { background: var(--fila); border: 1px dashed var(--linea); border-radius: 14px; padding: 18px 20px; margin-top: 16px; display: grid; gap: 8px; }
details { border-top: 1px solid var(--linea); padding: 12px 0; }
details summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 0; color: var(--suave); }

/* Trabaje con nosotros */
.form-largo { display: grid; gap: 14px; max-width: 640px; margin-top: 18px; }
.form-largo label { display: grid; gap: 4px; font-size: 15px; }
.form-largo .fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-largo fieldset { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.form-largo legend { font-weight: 600; padding: 0 6px; }
.form-largo .acepto { display: flex; gap: 8px; align-items: flex-start; }   /* la casilla al lado de su texto, no encima */
.opciones { display: flex; gap: 14px; flex-wrap: wrap; }
.opciones label { display: flex; gap: 6px; align-items: center; }
.recuadro { background: var(--azul-suave); border-radius: 12px; padding: 14px 16px; }

/* --- Lo que hace que se vea bonito (inicio, precios, trabaje); la página de datos se queda simple --- */
.resaltado { background: linear-gradient(transparent 58%, var(--amarillo) 58%, var(--amarillo) 88%, transparent 88%); padding: 0 .1em; }
.mano { font-family: "Caveat", cursive; font-weight: 700; color: var(--azul); font-size: 24px; }
.heroe { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; align-items: center; padding: 40px 0 34px; }
.ilustra svg { width: 100%; height: auto; display: block; }
.barrido { transform-origin: 300px 205px; animation: gira 6s linear infinite; }
.punto-vivo { transform-box: fill-box; transform-origin: center; animation: late 2.2s ease-out infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes late { 0% { opacity: 1; } 70% { opacity: .35; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .barrido, .punto-vivo { animation: none; } }
.garantia { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.garantia span { font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: var(--verde-suave); color: var(--verde); }
.ver-mas { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--tinta); text-decoration: none; }
.ver-mas .play { width: 38px; height: 38px; border-radius: 50%; background: var(--azul); display: grid; place-items: center; }
.ver-mas .play svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.ver-mas small { display: block; color: var(--suave); }
.preguntas.con-ico li { grid-template-columns: 34px 200px 1fr auto; }
.ico-q { width: 30px; height: 30px; color: var(--azul); }
.pasos.con-ico { grid-template-columns: repeat(5, 1fr); }
.pasos.con-ico li { border-left: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.pasos.con-ico .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--azul-suave); display: grid; place-items: center; }
.pasos.con-ico .ico svg { width: 30px; height: 30px; }
.honesto { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 26px 24px; margin: 30px 0; }
.honesto .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 14px; }
.honesto b { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 4px; }
.final { background: var(--azul); color: var(--sobre-azul); border-radius: 22px; padding: 34px 28px; margin: 10px 0 34px; }
.final h2 { color: var(--sobre-azul); }
.final .nota, .final .aviso, .final .lead { color: #dfe5ff; }
.final .boton { background: var(--amarillo); color: var(--tinta); }
.final a { color: var(--sobre-azul); }
/* Precios */
.plan .ico { width: 52px; height: 52px; }
.plan { position: relative; }
.pega { position: absolute; top: -12px; right: 16px; background: var(--amarillo); color: var(--tinta); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.contable { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: var(--ambar-suave); border-radius: 22px; padding: 28px; margin-top: 28px; align-items: center; }
.contable .precio small { font-size: 15px; }
.contable ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.contable .ilus { width: 120px; height: auto; }
.boton.amarillo { background: var(--amarillo); color: var(--tinta); }
/* Trabaje con nosotros */
.cabeza-trabaje { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; }
.cabeza-trabaje svg { width: 100%; max-width: 320px; height: auto; justify-self: center; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 22px 0 36px; color: var(--suave); font-size: 14px; }
.pie a { color: var(--suave); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .preguntas li { grid-template-columns: 1fr auto; }
  .preguntas li span:not(.plan-tag) { grid-column: 1 / -1; }
  .pasos, .planes { grid-template-columns: 1fr; }
  .form-largo .fila2 { grid-template-columns: 1fr; }
  .heroe, .cabeza-trabaje, .contable { grid-template-columns: 1fr; }
  .ilustra { max-width: 360px; margin: 0 auto; }
  .preguntas.con-ico li { grid-template-columns: 30px 1fr auto; }
  .pasos.con-ico, .honesto .tres { grid-template-columns: 1fr; }
  .pasos.con-ico li { grid-template-columns: 52px 1fr; align-items: center; }
}