/*!
 * ASOFRIO — Estilos específicos de "Hazte socio" (pages/hazte-socio.php)
 * Cargado únicamente en esta página (ver functions.php).
 */

/* ============ Tarjeta "qué pasa después" junto al formulario ============ */
.process-card{background:var(--nav); color:#fff; border-radius:var(--r-lg); padding:28px 26px;}
.process-card h3{color:#fff; font-size:16px; margin-bottom:4px;}
.process-card > p{color:#B9C3DC; font-size:13.5px; margin-bottom:20px;}
.process-step{display:flex; gap:14px; padding:14px 0; border-top:1px solid rgba(255,255,255,.14);}
.process-step:first-of-type{border-top:none; padding-top:0;}
.process-step-num{
	width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
	display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0;
}
.process-step strong{display:block; font-size:14px; color:#fff; margin-bottom:2px;}
.process-step span{font-size:13px; color:#B9C3DC; line-height:1.5;}
.process-guarantee{
	display:flex; align-items:center; gap:10px; margin-top:22px; padding-top:20px;
	border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; color:#DCE2F2;
}
.process-guarantee .material-symbols-outlined{color:var(--accent); font-size:20px; flex-shrink:0;}

/* ============ Radios de nivel de asociación dentro del formulario ============ */
.level-picker{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px;}
@media(max-width:600px){.level-picker{grid-template-columns:1fr;}}
.level-option{position:relative;}
.level-option input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer;}
.level-option label{
	display:block; border:1.5px solid var(--border); border-radius:var(--r-md); padding:14px 14px;
	cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.level-option label strong{display:block; font-size:14px; color:var(--text);}
.level-option label span{display:block; font-size:12px; color:var(--text-secondary); margin-top:2px;}
.level-option input:checked + label{border-color:var(--action); background:var(--lavender-bg);}
.level-option input:focus-visible + label{outline:2px solid var(--action); outline-offset:1px;}