/* Landing · la sección «Precios» (js/precios.js) y el modal «Contratar plan Empresa» (js/empresa_contrato.js).
   Mismos tokens que css/landing.css (--gold, --hair, --mut…) y el modal sobre .co-ov/.co-modal; móvil primero:
   una columna y el modal con su propio scroll hasta en un móvil de 360 px. */
.precios{width:100%;max-width:1200px;margin:0 auto;padding:8px clamp(16px,5vw,40px) 56px}
.precios[hidden]{display:none}
.pr-cab h2{font-size:clamp(24px,3vw,32px);font-weight:400;margin:0 0 6px}
.pr-cab p{color:var(--mut);margin:0 0 22px;font-size:15px;line-height:1.5}
.pr-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:420px}
.pr-card{display:flex;flex-direction:column;gap:8px;padding:22px 20px;border-radius:16px;border:1px solid var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 18px 46px rgba(11,17,16,.06);background:#fff}
.pr-tag{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:3px 9px}
.pr-card h3{margin:4px 0 0;font-size:18px;font-weight:500}
.pr-precio{display:flex;align-items:baseline;gap:4px}
.pr-precio b{font-size:40px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.pr-precio span{font-size:14px;color:var(--mut)}
.pr-igi{margin:-4px 0 0;font-size:12.5px;color:var(--mut)}
.pr-card ul{margin:6px 0 10px;padding-left:18px;color:var(--ink);font-size:14px;line-height:1.7}
.pr-card ul small{color:var(--mut)}
.pr-nota{margin:14px 0 0;max-width:620px;font-size:12.5px;line-height:1.55;color:var(--mut)}
@media (min-width:720px){.pr-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));max-width:none}}

/* Modal «Contratar plan Empresa»: más ancho que los de acceso y con scroll propio */
#emp-ov{padding:10px;align-items:flex-start;overflow-y:auto}
.emp-modal{max-width:560px;max-height:none;overflow:visible;margin:auto 0;padding:22px 18px}
.emp-grid{display:grid;grid-template-columns:1fr;gap:0 12px}
.emp-grid>div{min-width:0}
.emp-full{grid-column:1/-1}
.emp-modal select{width:100%;padding:11px 12px;border:1px solid var(--hair);border-radius:0;font-size:14px;font-family:'Roboto',sans-serif;color:var(--ink);background:#fff}
.emp-modal select:focus{outline:none;border-color:var(--gold)}
.emp-req{color:#c0392b}
.emp-users{display:flex;align-items:center;gap:6px}
.emp-users button{flex:none;width:42px;height:42px;border:1px solid var(--hair);background:var(--gold-dim);color:var(--gold);font-size:20px;line-height:1;cursor:pointer;font-family:'Roboto',sans-serif}
.emp-users button:hover{border-color:var(--gold)}
.co-modal .emp-users input{flex:1;min-width:0;text-align:center}
.emp-price{background:var(--gold-dim);border:1px solid var(--gold-bd);padding:12px 14px;margin:14px 0 2px;font-size:13px;line-height:1.7;color:var(--ink)}
.emp-price small{color:var(--mut)}
.emp-fila{display:flex;justify-content:space-between;gap:10px}
.emp-dto{color:#1f7a4d}
.emp-tot{margin-top:4px;padding-top:6px;border-top:1px solid var(--gold-bd)}
.emp-tot .tot{font-size:20px;font-weight:700}
.emp-tot small{display:block;color:var(--mut);line-height:1.4}
.emp-check{display:flex;gap:9px;align-items:flex-start;margin:16px 0 4px}
.co-modal .emp-check input{flex:none;width:18px;height:18px;margin:1px 0 0;padding:0;accent-color:var(--gold)}
.co-modal .emp-check label{margin:0;font-family:'Roboto',sans-serif;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.45}
.emp-check a{color:var(--gold)}
.emp-aviso{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(192,57,43,.35);background:rgba(192,57,43,.06);color:#9b2c20;font-size:12.5px;line-height:1.5}
.emp-done{margin:14px 0 0;padding:12px 14px;border:1px solid var(--gold-bd);background:var(--gold-dim);color:var(--ink);font-size:14px;line-height:1.55}
.emp-acts{display:flex;flex-direction:column-reverse;gap:8px;margin-top:16px}
.emp-acts[hidden]{display:none}
.emp-acts .co-btn{margin-top:0}
.emp-cancel{padding:12px;border:1px solid var(--gold-bd);background:transparent;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:'Roboto',sans-serif}
@media (min-width:560px){
  #emp-ov{padding:20px}
  .emp-modal{padding:26px 24px}
  .emp-grid{grid-template-columns:1fr 1fr}
  .emp-acts{flex-direction:row;justify-content:flex-end;align-items:center}
  .emp-acts .co-btn{width:auto;padding:13px 22px}
  .emp-acts .emp-cancel{padding:13px 18px}
}