/* =========================================================
   landing-rotacion — calculadora de ASISTENTE DE 2 PASOS.

   Patron nuevo en el proyecto: hasta ahora cada calculadora (vacaciones, nomina, turnos,
   jornada) es una unica tarjeta que recalcula en vivo con cada tecla. Esta en cambio separa
   la entrada de datos (paso 1) del resultado (paso 2): el calculo solo se dispara al pulsar
   "Calcular" y valida que no falten datos antes de pasar de paso. Todas las clases de este
   patron (.pasos, .bloque/.cuerpo, .campo, .derivado, .pie-datos, .faltan, .kpi, .tarjetas/
   .tj, .barra/.leyenda, .desglose, .sim) son nuevas: no existian en ninguna otra hoja de
   landing-*.css del proyecto.

   Todos los selectores van prefijados con .landing, igual que el resto de calculadoras: ver
   la cabecera de landing-calculadora.css para el porque. La base compartida (.wrap, .hero,
   .tool, .layout, .steps3, .seo-copy, .faq…) viene de landing-calculadora.css, cargada antes
   que esta hoja.
   ========================================================= */
:root {
  /* Paleta pastel de las 5 tarjetas de resultado, coherente con la marca:
     magenta deriva de --brand-violet, celeste de --brand-blue, verde reutiliza el
     verde ya usado en los estados "ok" de landing-calculadora.css (.api-status.okk) y
     arena reutiliza el ambar ya usado en los avisos (.warn). Lavanda es el unico tono
     nuevo, emparentado con el violeta de marca pero mas azulado para distinguirse del
     magenta en la misma pantalla. */
  --p-magenta-bg:#f7e9f3; --p-magenta-txt:#96478c;
  --p-celeste-bg:#e1f3f7; --p-celeste-txt:#226e84;
  --p-arena-bg:#fdf2e3;   --p-arena-txt:#9a6b1e;
  --p-lavanda-bg:#efeafb; --p-lavanda-txt:#6b4aa3;
  --p-verde-bg:#e7f6ee;   --p-verde-txt:#2f7a52;
}

/* Las vistas del asistente y varios bloques usan [hidden]; sin esto un display propio lo anularia. */
.landing [hidden] {display:none !important}

/* ===== Pasos del asistente ===== */
.landing .pasos {list-style:none;display:flex;gap:10px;max-width:640px;margin:0 auto 30px;padding:0;flex-wrap:wrap}
.landing .pasos li {flex:1;min-width:140px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:.84rem;font-weight:700;color:var(--muted);padding:11px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);transition:.2s}
.landing .pasos li span {width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--line);color:#fff;
  display:grid;place-items:center;font-size:.76rem;font-weight:800}
.landing .pasos li.activo {color:var(--teal-deep);border-color:var(--teal);background:#eef7f9}
.landing .pasos li.activo span {background:var(--grad-brand)}

/* ===== Paso 1: datos ===== */
.landing .datos-grid {display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.landing .bloque {background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}
/* Cabecera igual que .card .head de styles.css (degradado suave, filete inferior y el trazo de
   marca), que es la de las demas calculadoras. Antes llevaba fondos pastel por tono. */
.landing .bloque h3 {position:relative;margin:0;padding:1.1rem 1.4rem .95rem;font-family:"Manrope",sans-serif;font-weight:700;
  font-size:1.02rem;letter-spacing:-.015em;color:var(--ink-900);background:linear-gradient(180deg,var(--ink-50),#fff);
  border-bottom:1px solid var(--ink-200)}
.landing .bloque h3::after {content:"";position:absolute;left:1.4rem;bottom:-1px;width:2.25rem;height:2px;border-radius:2px;background:var(--brand-gradient)}
.landing .cuerpo {padding:20px}

.landing .campo {margin-bottom:15px}
.landing .campo label {display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.landing .campo label .u {text-transform:none;font-weight:400;color:#9aacae;font-size:.72rem;letter-spacing:0}
.landing .campo input, .landing .campo select {width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:.95rem;background:#fbfdfd;color:var(--ink);transition:.15s;font-family:inherit}
.landing .campo input:focus, .landing .campo select:focus {outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(58,165,190,.18);background:#fff}
.landing .campo input.falta, .landing .campo select.falta,
.landing select.falta, .landing input.falta {border-color:#f44336;background:#fff6f5}
.landing .ayuda {font-size:.74rem;color:var(--muted);line-height:1.45;margin-top:5px}
.landing .aviso-ej {font-size:.8rem;color:var(--muted);background:#eef7f9;border-radius:9px;padding:10px 12px;margin-bottom:16px;line-height:1.5}
.landing .dos {display:grid;grid-template-columns:1fr 1fr;gap:14px}

.landing .derivado {display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px dashed var(--line);margin-top:4px;font-size:.88rem}
.landing .derivado span {color:var(--muted)}
.landing .derivado b {font-size:1rem;color:var(--ink);font-weight:700}

.landing .pie-datos {display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:24px;flex-wrap:wrap}
.landing .faltan {font-size:.82rem;color:#c0392b;background:#fdecea;border-radius:9px;padding:9px 14px;display:none;flex:1;min-width:220px;line-height:1.5}
.landing .faltan.ver {display:block}
.landing .btn-calcular {white-space:nowrap}

/* ===== Paso 2: resultados ===== */
.landing .barra-volver {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.landing .resumen-datos {font-size:.86rem;color:var(--muted)}

.landing .seccion {margin-top:28px}
.landing .seccion:first-child {margin-top:0}
.landing .antetitulo {font-size:.76rem;text-transform:uppercase;letter-spacing:.6px;color:var(--teal-deep);font-weight:700;margin-bottom:6px}
.landing .seccion h2 {font-size:1.3rem;font-weight:800;margin-bottom:16px;text-align:left}

.landing .alerta {font-size:.84rem;color:#c0392b;background:#fdecea;border-radius:10px;padding:11px 14px;margin-bottom:16px;line-height:1.5;display:none}
.landing .alerta.ver {display:block}

.landing .kpi {background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:28px;text-align:center;margin-bottom:20px}
.landing .kpi .etq {font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.landing .kpi .num {font-size:2.8rem;font-weight:800;line-height:1.1;display:inline-block;margin-top:8px}
.landing .kpi .num.grad {background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.landing .kpi .expl {font-size:.92rem;color:var(--ink);margin-top:12px;line-height:1.55;max-width:520px;margin-left:auto;margin-right:auto}
.landing .kpi .proy {font-size:.82rem;color:var(--muted);margin-top:8px}

.landing .tarjetas {display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.landing .tarjetas.tres {grid-template-columns:repeat(3,1fr)}
.landing .tj {border-radius:16px;padding:18px;background:#f4f8f8}
.landing .tj .etq {font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700;display:block;margin-bottom:6px}
.landing .tj .num {font-size:1.55rem;font-weight:800}
.landing .tj p {font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.5}
.landing .tj.t-magenta {background:var(--p-magenta-bg)}
.landing .tj.t-magenta .etq {color:var(--p-magenta-txt)}
.landing .tj.t-celeste {background:var(--p-celeste-bg)}
.landing .tj.t-celeste .etq {color:var(--p-celeste-txt)}
.landing .tj.t-arena {background:var(--p-arena-bg)}
.landing .tj.t-arena .etq {color:var(--p-arena-txt)}
.landing .tj.t-lavanda {background:var(--p-lavanda-bg)}
.landing .tj.t-lavanda .etq {color:var(--p-lavanda-txt)}
.landing .tj.t-verde {background:var(--p-verde-bg)}
.landing .tj.t-verde .etq {color:var(--p-verde-txt)}

.landing .barra {display:flex;height:16px;border-radius:8px;overflow:hidden;background:#eef3f3;margin-bottom:10px}
.landing .barra > div {transition:flex .3s}
.landing .leyenda {display:flex;flex-wrap:wrap;gap:16px;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.landing .leyenda span {display:inline-flex;align-items:center;gap:6px}
.landing .leyenda i {width:12px;height:12px;border-radius:3px;display:inline-block}

.landing table.desglose {width:100%;border-collapse:collapse;font-size:.88rem;margin-top:4px}
.landing table.desglose td {padding:8px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.landing table.desglose td:last-child {text-align:right;white-space:nowrap;font-weight:600;padding-left:10px}
.landing table.desglose tr.grupo td {font-weight:700;color:var(--teal-deep);border-bottom:none;padding-top:14px}
.landing table.desglose tr.grupo:first-child td {padding-top:0}
.landing table.desglose tr.linea td {padding-left:14px;font-weight:400;color:var(--muted)}
.landing table.desglose tr.linea td:last-child {color:var(--ink);font-weight:600}
.landing table.desglose tr.tot td {border-top:2px solid var(--line);border-bottom:none;font-weight:800;font-size:.95rem;padding-top:12px;color:var(--ink)}
.landing .det {display:block;font-size:.74rem;color:#9aacae;font-weight:400;margin-top:2px}
.landing .nota-calc {font-size:.78rem;color:var(--muted);line-height:1.6;margin-top:16px}

.landing .tj.sim {margin-top:6px}
.landing .sim-fila {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.landing .sim-fila label {font-size:.86rem;color:var(--ink);font-weight:600}
.landing .sim-fila select {padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:.85rem;background:#fff;font-family:inherit}

.landing .legal {font-size:.74rem;color:#9aacae;line-height:1.65;margin-top:20px}

/* Boton deshabilitado (Descargar imagen, antes de calcular). El sitio no define un estado
   disabled para .btn porque nunca lo necesita; aqui si. */
.landing .btn:disabled {opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* =========================================================
   RESPONSIVE - 3 tramos: escritorio (por defecto), tablet y movil
   ========================================================= */
@media(max-width:1024px) {
  .landing .datos-grid {grid-template-columns:1fr}
  .landing .tarjetas.tres {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px) {
  .landing .dos {grid-template-columns:1fr}
  .landing .tarjetas, .landing .tarjetas.tres {grid-template-columns:1fr}
  .landing .pasos li {min-width:100%}
  .landing .pie-datos {justify-content:stretch}
  .landing .btn-calcular {width:100%}
}