/* Alta, pago y confirmación. Se carga después de web.css. */

.alta-pagina { padding: clamp(7.5rem, 13vw, 9.5rem) 0 clamp(4rem, 8vw, 6rem); }
.alta-pagina .titular { font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 18ch; }
.alta-pagina .entradilla { margin-top: 1.2rem; }

.pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0; margin: 2rem 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--tinta-3); }
.pasos li { display: flex; align-items: center; gap: 0.5rem; }
.pasos li::before { content: attr(data-n); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; font-size: 0.7rem; }
.pasos li[aria-current="step"] { color: var(--tinta); font-weight: 500; }
.pasos li[aria-current="step"]::before { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.pasos li.hecho { color: var(--petroleo-2); }
.pasos li.hecho::before { content: "✓"; border-color: var(--petroleo-2); }

.alta-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(2.4rem, 5vw, 3.4rem); align-items: start; }
@media (max-width: 900px) { .alta-rejilla { grid-template-columns: 1fr; } }

.tarjeta-alta { background: var(--blanco); border: 1px solid rgba(20, 24, 29, 0.08); border-radius: 18px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.tarjeta-alta h2 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.tarjeta-alta > p { margin: 0 0 1.4rem; color: var(--tinta-2); font-size: 0.95rem; }

.elige-plan { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.elige-plan legend { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.6rem; padding: 0; }
.opcion-plan { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(20, 24, 29, 0.14); background: var(--blanco); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.opcion-plan:hover { border-color: rgba(20, 24, 29, 0.35); }
.opcion-plan input { appearance: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--tinta-3); margin: 0; display: grid; place-items: center; }
.opcion-plan input:checked { border-color: var(--tinta); }
.opcion-plan input:checked::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tinta); }
.opcion-plan:has(input:checked) { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.opcion-plan input:focus-visible { outline: 2px solid var(--granate-2); outline-offset: 3px; }
.opcion-plan b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--tinta); }
.opcion-plan > span > span { font-size: 0.84rem; color: var(--tinta-3); }
.opcion-plan .opcion-precio { text-align: right; font-family: var(--serif); font-size: 1.3rem; white-space: nowrap; }
.opcion-plan .opcion-precio small { display: block; font-family: var(--sans); font-size: 0.74rem; color: var(--tinta-3); }

.alta-pagina .periodo { margin-top: 0; margin-bottom: 1.2rem; }

.resumen { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(20, 24, 29, 0.1); display: grid; gap: 0.45rem; font-size: 0.92rem; }
.resumen div { display: flex; justify-content: space-between; gap: 1rem; }
.resumen dt { color: var(--tinta-2); }
.resumen dd { margin: 0; font-variant-numeric: tabular-nums; }
.resumen .resumen-total { font-weight: 600; font-size: 1rem; padding-top: 0.45rem; border-top: 1px dashed rgba(20, 24, 29, 0.16); }
.resumen .resumen-descuento dd { color: var(--petroleo-2); }
.resumen-nota { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--tinta-3); line-height: 1.5; }

.formulario { display: grid; gap: 1rem; }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .formulario .fila { grid-template-columns: 1fr; } }
.campo-alta { display: grid; gap: 0.35rem; }
.campo-alta label { font-weight: 600; font-size: 0.86rem; }
.campo-alta label .opcional { font-weight: 400; color: var(--tinta-3); }
.campo-alta input, .campo-alta select { font: inherit; font-size: 1rem; padding: 0.75rem 0.9rem; border-radius: 10px; border: 1px solid rgba(20, 24, 29, 0.2); background: var(--blanco); color: var(--tinta); width: 100%; box-sizing: border-box; }
.campo-alta input:focus, .campo-alta select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(142, 50, 54, 0.15); }
.campo-alta input[aria-invalid="true"] { border-color: var(--granate-2); }
.campo-alta .ayuda { font-size: 0.78rem; color: var(--tinta-3); line-height: 1.45; }
.marca-casilla { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; cursor: pointer; }
.marca-casilla input { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--tinta); flex: none; }
.colegiado { display: grid; gap: 1rem; padding: 1rem; border-radius: 12px; background: var(--papel); }
.colegiado[hidden] { display: none; }

.formulario .boton { justify-content: center; width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.formulario .boton[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.alta-pie { font-size: 0.86rem; color: var(--tinta-2); margin: 1.2rem 0 0; }
.alta-pie a, .enlace-boton { color: var(--granate); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.aviso { padding: 0.85rem 1rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.45; background: var(--granate-claro); color: var(--granate); }
.aviso.bien { background: var(--petroleo-claro); color: var(--petroleo); }
.aviso[hidden] { display: none; }

.garantias { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0.7rem; font-size: 0.9rem; color: var(--tinta-2); }
.garantias li { display: flex; gap: 0.6rem; align-items: flex-start; }
.garantias li::before { content: ""; flex: none; width: 0.9rem; height: 2px; margin-top: 0.62rem; background: var(--granate-2); border-radius: 2px; }

.estado-alta { text-align: left; max-width: 38rem; }
.estado-alta .botones { margin-top: 1.8rem; }
.estado-alta .icono-estado { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--petroleo-claro); color: var(--petroleo); font-size: 1.4rem; margin-bottom: 1.2rem; }
.estado-alta .icono-estado.espera { background: var(--papel-2); color: var(--tinta-2); }
.giro { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: giro 0.9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation-duration: 3s; } }

[data-vista][hidden] { display: none !important; }