/* ============================================================
   Plataforma de Diagnóstico y Auditoría Empresarial — B1
   Identidad PROVISIONAL (PT-02 pendiente). Móvil primero.
   ============================================================ */

:root{
  --azul-oscuro:#12314e;
  --azul:#1d4e7e;
  --acento:#e8a13c;
  --tinta:#22303c;
  --tinta-suave:#5b6b7a;
  --fondo:#f7f9fb;
  --fondo-alterno:#eef3f7;
  --blanco:#ffffff;
  --verde:#2e7d32;
  --ambar:#b26a00;
  --rojo:#c62828;
  --borde:#d9e2ea;
  --radio:12px;
  --sombra:0 2px 10px rgba(18,49,78,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--tinta);
  background:var(--fondo);
  line-height:1.55;
}
.contenedor{max-width:920px;margin:0 auto;padding:0 1.1rem}
img{max-width:100%}

/* ---- Banner de versión de trabajo (retirar al publicar) ---- */
.banner-dev{
  background:#fff3cd;color:#7a5c00;border-bottom:1px solid #eadb9a;
  font-size:.8rem;text-align:center;padding:.4rem .8rem;
}

/* ---- Marcador de texto provisional ---- */
.prov{border-bottom:2px dotted var(--acento);cursor:help}

/* ---- Cabecera ---- */
.cabecera{background:var(--azul-oscuro);color:var(--blanco);padding:1rem 0}
.marca{display:flex;flex-direction:column;gap:.15rem}
.marca-nombre{font-size:1.25rem;font-weight:700;letter-spacing:.2px}
.marca-tag{font-size:.85rem;opacity:.85}
.marca-lel{font-size:.75rem;color:var(--acento)}

/* ---- Hero ---- */
.hero{background:linear-gradient(160deg,var(--azul-oscuro),var(--azul));color:var(--blanco);padding:2.6rem 0 3rem;text-align:center}
.hero h1{font-size:1.65rem;line-height:1.25;margin-bottom:.9rem}
.hero-sub{font-size:1rem;opacity:.92;max-width:560px;margin:0 auto 1.4rem}
.hero-nota{font-size:.8rem;opacity:.8;margin-top:.8rem}

/* ---- Botones ---- */
.boton{
  display:inline-block;padding:.85rem 1.6rem;border-radius:999px;
  font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;
  transition:transform .08s ease,box-shadow .12s ease;
}
.boton:active{transform:scale(.98)}
.boton-principal{background:var(--acento);color:#3a2a06;box-shadow:var(--sombra)}
.boton-secundario{background:var(--blanco);color:var(--azul);border:2px solid var(--azul)}
.boton-whatsapp{background:#25d366;color:#0b3d1f}
.boton[disabled]{opacity:.45;cursor:not-allowed}

/* ---- Secciones ---- */
.seccion{padding:2.4rem 0}
.seccion-alterna{background:var(--fondo-alterno)}
.seccion h2{font-size:1.35rem;color:var(--azul-oscuro);margin-bottom:1.2rem;text-align:center}
.centrado{text-align:center;margin-top:1.4rem}

/* ---- Tarjetas de dolores ---- */
.tarjetas{display:grid;grid-template-columns:1fr;gap:.8rem}
.tarjeta{
  background:var(--blanco);border:1px solid var(--borde);border-left:4px solid var(--acento);
  border-radius:var(--radio);padding:1rem 1.1rem;font-style:italic;color:var(--tinta-suave);
  box-shadow:var(--sombra);
}

/* ---- Pasos ---- */
.pasos{list-style:none;display:grid;gap:1rem;max-width:560px;margin:0 auto}
.pasos li{display:flex;gap:.9rem;align-items:flex-start;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:1rem;box-shadow:var(--sombra)}
.paso-num{
  flex:0 0 2.1rem;height:2.1rem;border-radius:50%;background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}

/* ---- Lista con palomitas ---- */
.lista-check{list-style:none;max-width:560px;margin:0 auto;display:grid;gap:.55rem}
.lista-check li{padding-left:1.7rem;position:relative}
.lista-check li::before{content:"✔";position:absolute;left:0;color:var(--verde);font-weight:700}
.nota-legal{font-size:.8rem;color:var(--tinta-suave);text-align:center;margin-top:1.2rem}

/* ---- Planes ---- */
.planes{display:grid;grid-template-columns:1fr;gap:1rem;max-width:760px;margin:0 auto}
.plan{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:1.3rem;box-shadow:var(--sombra)}
.plan-destacado{border:2px solid var(--azul)}
.plan h3{color:var(--azul-oscuro);margin-bottom:.3rem}
.plan-precio{font-size:1.3rem;font-weight:700;color:var(--azul);margin-bottom:.7rem;display:inline-block}
.precio-lista{text-decoration:line-through;color:var(--tinta-suave);font-weight:600;font-size:1rem;margin-right:.35rem}
.precio-nota{display:block;font-size:.75rem;color:var(--tinta-suave);font-weight:400;margin-top:.15rem}
.plan ul{list-style:none;display:grid;gap:.4rem;font-size:.92rem}
.plan ul li{padding-left:1.4rem;position:relative}
.plan ul li::before{content:"•";position:absolute;left:.3rem;color:var(--acento);font-weight:700}
.nota-plan{font-size:.85rem;color:var(--tinta-suave);max-width:660px;margin:1.1rem auto 0;text-align:center}

/* ---- Pie ---- */
.pie{background:var(--azul-oscuro);color:#cfdce8;font-size:.8rem;padding:1.4rem 0;text-align:center;margin-top:2rem}
.pie a{color:var(--acento)}

/* ============================================================
   Flujo del diagnóstico (diagnostico.html)
   ============================================================ */

.flujo{max-width:620px;margin:0 auto;padding:1.4rem 1.1rem 3rem}
.paso-titulo{font-size:1.3rem;color:var(--azul-oscuro);margin-bottom:.4rem}
.paso-descr{color:var(--tinta-suave);font-size:.92rem;margin-bottom:1.3rem}

/* Formulario de registro (PA-02) */
.formulario{display:grid;gap:1rem}
.campo label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--borde);border-radius:8px;
  font-size:1rem;font-family:inherit;background:var(--blanco);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.campo .error{color:var(--rojo);font-size:.8rem;display:none;margin-top:.25rem}
.campo.invalido input,.campo.invalido select{border-color:var(--rojo)}
.campo.invalido .error{display:block}
.opcional{font-weight:400;color:var(--tinta-suave);font-size:.8rem}
.hp{position:absolute !important;left:-9999px;height:1px;overflow:hidden}

/* Barra de progreso (PA-03) */
.progreso{margin-bottom:1.3rem}
.progreso-texto{font-size:.8rem;color:var(--tinta-suave);margin-bottom:.35rem}
.progreso-barra{height:8px;background:var(--borde);border-radius:99px;overflow:hidden}
.progreso-relleno{height:100%;background:var(--acento);border-radius:99px;transition:width .25s ease}

/* Pregunta */
.pregunta-texto{font-size:1.12rem;font-weight:700;color:var(--azul-oscuro);margin-bottom:1rem;line-height:1.4}
.opciones{display:grid;gap:.55rem}
.opcion{
  display:flex;align-items:center;gap:.65rem;background:var(--blanco);
  border:1.5px solid var(--borde);border-radius:10px;padding:.75rem .9rem;cursor:pointer;
  font-size:.97rem;transition:border-color .1s ease,background .1s ease;
}
.opcion:hover{border-color:var(--azul)}
.opcion input{accent-color:var(--azul);width:1.1rem;height:1.1rem;flex:0 0 auto}
.opcion.elegida{border-color:var(--azul);background:#eaf2fa}
.pregunta-error{color:var(--rojo);font-size:.85rem;display:none;margin-top:.7rem}

.nav-botones{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.5rem}

/* Resultado (PA-04) */
.aviso-ejemplo{
  background:#fdebd2;border:1px solid #eecf9e;color:#7a4b00;border-radius:10px;
  padding:.7rem .9rem;font-size:.85rem;margin-bottom:1.2rem;
}
.res-bloque{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:1.1rem 1.2rem;margin-bottom:1rem;box-shadow:var(--sombra)}
.res-bloque h3{font-size:.95rem;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.4px;margin-bottom:.5rem}
.res-nivel{font-size:1.5rem;font-weight:800;color:var(--azul-oscuro)}
.res-nivel-riesgo{color:var(--rojo)}
.res-alerta{background:#fdecea;border:1px solid #f4b9b3;color:#8c1d18;border-radius:8px;padding:.55rem .8rem;font-size:.85rem;margin-top:.6rem}
.semaforo{display:grid;gap:.45rem}
.sem-fila{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.92rem}
.chip{font-size:.75rem;font-weight:700;padding:.2rem .65rem;border-radius:99px;white-space:nowrap}
.chip-bien{background:#e5f3e6;color:var(--verde)}
.chip-atencion{background:#fdf3d7;color:var(--ambar)}
.chip-riesgo{background:#fdecea;color:var(--rojo)}
.riesgo-item{border-left:4px solid var(--rojo);padding:.2rem 0 .2rem .8rem;margin-bottom:.9rem}
.riesgo-item.prioridad-alta{border-color:var(--ambar)}
.riesgo-item h4{font-size:1rem;color:var(--azul-oscuro);margin-bottom:.25rem}
.riesgo-item p{font-size:.9rem;color:var(--tinta);margin-bottom:.3rem}
.riesgo-item .etiqueta{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--rojo)}
.riesgo-item.prioridad-alta .etiqueta{color:var(--ambar)}
.riesgo-item.prioridad-media{border-color:var(--azul)}
.riesgo-item.prioridad-media .etiqueta{color:var(--azul)}
.txt-verde{color:var(--verde)!important}
.txt-ambar{color:var(--ambar)!important}
.txt-rojo{color:var(--rojo)!important}
.res-positivo{background:#e9f6ec;border:1px solid #bfe3c8;border-radius:8px;padding:.8rem .9rem;font-size:.95rem;color:#1e5b2a}
.recomendacion{background:#eef7ef;border-radius:8px;padding:.6rem .8rem;font-size:.88rem;margin-top:.4rem}
.candados{display:grid;gap:.5rem}
.candado{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--tinta-suave)}
.candado::before{content:"🔒"}
.acciones-finales{display:grid;gap:.7rem;margin-top:1.4rem}
.acciones-finales .boton{text-align:center}

/* ---- Pantallas del flujo ---- */
.vista{display:none}
.vista.activa{display:block}

/* ============================================================
   Escritorio
   ============================================================ */
@media (min-width:700px){
  .hero h1{font-size:2.2rem}
  .tarjetas{grid-template-columns:1fr 1fr}
  .planes{grid-template-columns:1fr 1fr}
  .marca{flex-direction:row;align-items:baseline;gap:.8rem}
  .acciones-finales{grid-template-columns:1fr 1fr 1fr}
}