/* Janua — el alta de una empresa (janua.es/alta/ y /alta/hecho/). Sobre
   estilo.css y contacto.css: la misma página que el soporte (a la izquierda,
   el titular; a la derecha, la tarjeta), con lo que es solo del alta: el
   bloque de la izquierda con los precios, los tres pasos, los planes y los
   estados de la tarjeta. Como zetein.es/registro, con la estética de Janua. */

/* ── A la izquierda ──────────────────────────────────────────── */
.alta-promesa { display:flex; align-items:flex-start; gap:18px; max-width:30em; margin:38px 0 32px; padding-top:28px;
                border-top:1px solid var(--line); }
.alta-promesa > span { flex:none; font-size:40px; line-height:1; color:var(--accent); }
.alta-promesa h2 { margin:0 0 6px; font-size:22px; font-weight:500; line-height:1.3; letter-spacing:-.03em; }
.alta-promesa p { margin:0; font-size:15px; line-height:1.6; color:var(--muted); }
.alta-precios { display:grid; grid-template-columns:repeat(2,max-content); gap:10px 52px; }
.alta-precios div { display:flex; flex-direction:column; gap:4px; }
.alta-precios strong { font-size:34px; font-weight:500; line-height:1.1; letter-spacing:-.05em; }
.alta-precios span { font-size:13px; color:var(--muted); }
.alta-precios p { grid-column:1 / -1; margin:8px 0 0; font-size:15px; color:var(--muted); }
.contacto .alta-presupuesto { display:inline-flex; align-items:center; gap:14px; margin-top:30px; padding:8px 0;
                              font-size:15px; border-bottom:1px solid currentColor; }
.alta-presupuesto i, .alta-cuenta i { font-style:normal; transition:transform .2s; }
.alta-presupuesto:hover i, .alta-cuenta a:hover i { transform:translate(2px,-2px); }

/* ── La tarjeta: los pasos ───────────────────────────────────── */
.alta-cargando { margin:0; font-size:17px; color:var(--muted); }
.alta-pasos { display:flex; justify-content:space-between; gap:12px; list-style:none; margin:0 0 30px; padding:0 0 20px;
              border-bottom:1px solid var(--line); }
.alta-pasos li { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
.alta-pasos li > span { display:grid; place-items:center; flex:none; width:24px; height:24px; border:1px solid var(--line);
                        border-radius:50%; font-size:12px; }
.alta-pasos li.activo, .alta-pasos li.hecho { color:var(--ink); }
.alta-pasos li.activo > span { border-color:var(--accent); background:var(--accent); color:var(--accent-text); }
.alta-pasos li.hecho > span { border-color:var(--accent); color:var(--accent); }
.alta-top h2 { margin:0; font-size:30px; line-height:1.15; letter-spacing:-.035em; }
.alta-top h2:focus, .alta-estado h2:focus { outline:none; }
.alta-top p { margin:8px 0 6px; font-size:14px; color:var(--muted); }
/* Código postal y población: el primero, corto. */
.contacto-fila.alta-fila-cp { grid-template-columns:10rem minmax(0,1fr); }
/* Con 50 o más, sin el NIF: la razón social, a todo el ancho. */
.contacto-fila.alta-fila-empresa:has(> [hidden]) { grid-template-columns:minmax(0,1fr); }
.contacto-form select:invalid { color:#8b93a1; }
.contacto-form select option { color:var(--ink); }

/* Los dos planes, como tarjetas; el elegido, en azul. */
.alta-planes { min-width:0; margin:24px 0 0; padding:0; border:0; }
.alta-oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.alta-opciones { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contacto-form .alta-plan { display:flex; flex-direction:column; gap:3px; margin:0; padding:20px 18px 18px; border:1px solid var(--line);
                            border-radius:18px; background:var(--white); font-weight:400; cursor:pointer;
                            transition:border-color .15s, background .15s; }
.alta-plan:hover { border-color:#8ca7ff; }
.alta-plan:has(input:checked) { border-color:var(--accent); background:var(--soft); box-shadow:inset 0 0 0 1px var(--accent); }
.alta-plan-top { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:15px; font-weight:600; }
.alta-plan strong { font-size:52px; font-weight:500; line-height:1.02; letter-spacing:-.06em; }
.alta-plan strong span { font-size:24px; letter-spacing:-.02em; }
.alta-plan-periodo { font-size:13px; color:var(--muted); }
.alta-plan small { margin-top:6px; font-size:12px; color:var(--muted); }
.alta-plan-detalle { margin-top:10px; font-size:13px; line-height:1.5; color:var(--accent); }
.contacto-form .alta-plan input, .contacto-form .alta-acepto input {
  flex:none; width:18px; height:18px; margin:0; padding:0; border:0; border-radius:0; accent-color:var(--accent);
}
/* El foco de los campos de texto (contacto.css) no es para la casilla ni los planes: el suyo, con el teclado. */
.contacto-form .alta-plan input:focus, .contacto-form .alta-acepto input:focus { outline:none; }
.contacto-form .alta-plan input:focus-visible, .contacto-form .alta-acepto input:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
.alta-pista { margin:14px 0 0; font-size:13px; line-height:1.6; color:var(--muted); }
.alta-nota { margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.contacto-form .alta-acepto { display:flex; gap:12px; align-items:flex-start; margin:22px 0 0; font-weight:400; font-size:15px;
                              line-height:1.55; cursor:pointer; }
.contacto-form .alta-acepto input { margin-top:2px; }
.alta-acepto a { border-bottom:1px solid currentColor; }
/* El aviso, encima de los planes o de la casilla. */
.alta-form .contacto-mal + .alta-planes, .alta-form .contacto-mal + .alta-acepto { margin-top:16px; }

/* Atrás, a la izquierda; seguir, el botón azul. */
.alta-acciones { display:flex; align-items:center; gap:18px; margin-top:28px; }
.alta-acciones .contacto-boton { flex:1; margin-top:0; }
.alta-atras { display:inline-flex; align-items:center; gap:8px; padding:12px 2px; border:0; background:none; color:var(--muted);
              font:inherit; font-size:15px; cursor:pointer; }
.alta-atras i { font-style:normal; }
.alta-atras:hover { color:var(--ink); }
.alta-cuenta { margin:22px 0 0; font-size:14px; color:var(--muted); }
.contacto .alta-cuenta a { display:inline-flex; gap:8px; border-bottom:1px solid currentColor; }

/* ── La tarjeta: lo que sale después ─────────────────────────── */
.alta-marca { display:grid; place-items:center; width:64px; height:64px; margin-bottom:26px; border-radius:50%;
              background:var(--soft); color:var(--accent); }
.alta-estado h2 { margin:0 0 14px; font-size:34px; line-height:1.15; letter-spacing:-.04em; }
.alta-estado p { margin:0; font-size:17px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.alta-estado b { font-weight:600; color:var(--ink); }
.contacto a.contacto-boton { color:var(--accent-text); text-decoration:none; }
.alta-datos { margin:22px 0 0; border-top:1px solid var(--line); }
.alta-datos > div { display:grid; grid-template-columns:10rem minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.alta-datos dt { font-size:14px; line-height:1.5; color:var(--muted); }
.alta-datos dd { margin:0; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
#pago-mal { margin:22px 0 -6px; }

@media (max-width:560px) {
  .alta-promesa { margin:30px 0 26px; padding-top:22px; }
  .alta-precios strong { font-size:30px; }
  .alta-pasos { gap:8px; margin-bottom:26px; }
  .alta-pasos li { gap:6px; font-size:12px; }
  .alta-pasos li > span { width:22px; height:22px; font-size:11px; }
  .alta-top h2 { font-size:27px; }
  .contacto-fila.alta-fila-cp { grid-template-columns:7.5rem minmax(0,1fr); gap:0 12px; }
  .alta-opciones { gap:10px; }
  .contacto-form .alta-plan { padding:16px 13px 14px; border-radius:16px; }
  .alta-plan-top { margin-bottom:14px; font-size:14px; }
  .alta-plan strong { font-size:40px; }
  .alta-plan strong span { font-size:20px; }
  .alta-plan small { font-size:11px; }
  .alta-plan-detalle { font-size:12px; }
  .alta-acciones { gap:12px; }
  .alta-estado h2 { font-size:29px; }
  .alta-datos > div { grid-template-columns:1fr; gap:2px; }
}