/* =========================================================================
   ZonaTel — Signup MÓVIL (teléfonos 320px–600px).
   Carga DESPUÉS de zonatel.css; sobrescribe lo necesario para teléfono.
   Complementa las @media existentes (1280/991/720/520) de zonatel.css.
   Todo envuelto en @media (max-width:600px) + extras en (max-width:380px).
   Usa las variables de marca: --zt-navy, --zt-blue, --zt-turq, --zt-green,
   --zt-ink, --zt-muted, --zt-line, --zt-field, --zt-grad.
   ========================================================================= */

@media (max-width:600px){

	/* ---------- Anti-overflow global ----------
	   Evita cualquier desbordamiento horizontal en pantallas estrechas. */
	html, body{ max-width:100%; overflow-x:hidden; }
	*{ min-width:0; }

	/* ---------- Panel de marca (aside): estático, compacto, ARRIBA ----------
	   Ya no es fixed (lo desactivó la @media 991), aquí lo hacemos mínimo:
	   logo + título + 1 línea. Beneficios y prueba social ocultos para que
	   el usuario llegue rápido al formulario. */
	/* En móvil el panel se reduce a una barra con SOLO el logo:
	   el título/subtítulo los lleva la sección (evita duplicación). */
	.zt-aside{
		position:static;
		width:auto; max-width:none;
		padding:16px 18px 12px;
		display:block;
	}
	.zt-aside-logo{ width:138px; max-width:48%; margin-bottom:0; }
	.zt-aside-h,
	.zt-aside-sub{ display:none !important; }

	/* Ocultar bloques que estorban en móvil (beneficios largos, prueba,
	   cita y sello). El resumen del pedido ya cubre los beneficios. */
	.zt-vp,
	.zt-proof,
	.zt-quote,
	.zt-aside-foot,
	.zt-trust,
	.zt-secure{ display:none !important; }

	/* ---------- Tarjeta blanca principal ----------
	   Sin margin-left del 32%; márgenes pequeños, ancho completo. */
	#main.container{
		margin:10px;
		padding:16px 14px 18px;
		border-radius:16px;
	}

	/* ---------- Topbar: stepbar arriba, ayuda centrada debajo ---------- */
	.zt-topbar{
		flex-direction:column;
		align-items:stretch;
		gap:12px;
	}

	/* ---------- Stepbar: scroll horizontal, compacto ----------
	   5 pasos no caben; permitimos scroll-x sin que rompa la página.
	   Mostramos número + label corto; ocultamos subtítulos (i). */
	.zt-stepbar{
		flex-wrap:nowrap;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		gap:4px;
		margin:0 -2px 4px;
		padding:2px 2px 6px;
		scrollbar-width:none;            /* Firefox */
	}
	.zt-stepbar::-webkit-scrollbar{ display:none; } /* WebKit */
	.zt-step{
		flex:0 0 auto;
		gap:7px;
	}
	.zt-step-num{
		flex:0 0 28px; width:28px; height:28px;
		font-size:13px; border-width:2px;
	}
	.zt-step-tx b{ font-size:12.5px; white-space:nowrap; }
	.zt-step-tx i{ display:none; }       /* subtítulo fuera en móvil */
	.zt-step-line{
		min-width:14px; flex:0 0 14px;   /* línea corta y fija, no se estira */
	}

	/* Botón de ayuda WhatsApp: centrado, compacto, no rompe fila. */
	.zt-help{
		align-self:center;
		justify-content:center;
		padding:9px 14px;
		gap:9px;
	}
	.zt-help-ic{ font-size:16px; }
	.zt-help-tx b{ font-size:12.5px; }
	.zt-help-tx{ font-size:11.5px; }

	/* ---------- Grid principal: 1 columna garantizada ---------- */
	.zt-grid{
		grid-template-columns:1fr;
		gap:18px;
	}
	.zt-summary{ position:static; }

	/* ---------- Títulos de sección ---------- */
	.zt-sec-title{ font-size:16px; margin:0 0 14px; gap:9px; }
	.zt-sec-num{ flex:0 0 26px; width:26px; height:26px; font-size:13px; }
	.zt-screen-hint{ font-size:13px; margin:-4px 0 16px; }

	/* ---------- Planes: 1 columna, tarjetas cómodas al tacto ---------- */
	.zt-plans{
		grid-template-columns:1fr;
		gap:11px;
	}
	/* Tarjeta de plan VERTICAL (icono, nombre, descripción, precio, beneficios). */
	.zt-plan{
		padding:18px 16px 16px;
		display:flex; flex-direction:column; align-items:stretch;
	}
	.zt-plan-ic{ margin-bottom:12px; flex:0 0 auto; }
	.zt-plan-name{ margin-bottom:5px; font-size:16px; }
	.zt-plan-tag{ min-height:0; margin-bottom:10px; }
	.zt-plan-price{ text-align:left; }
	.zt-plan-price b{ font-size:24px; }
	.zt-plan-per{ text-align:left; margin-top:1px; }
	.zt-plan-feats{ margin-top:12px; padding-top:12px; }
	.zt-plan-radio{ top:14px; right:14px; }

	/* ---------- Campos de formulario: 1 columna ---------- */
	.zt-grid2,
	.zt-screen #mandatory-fields,
	.zt-screen #card_info{
		grid-template-columns:1fr;
		gap:0;
	}
	.zt-card .form-group{ margin:0 0 14px; }

	/* Inputs: font-size >=16px (evita zoom iOS), alto cómodo ~48px. */
	.zt-card .form-control{
		height:48px;
		font-size:16px;
		padding:12px 14px;
		border-radius:12px;
	}
	.zt-card textarea.form-control{ height:auto; min-height:96px; padding:12px 14px; }
	.zt-card select.form-control{ font-size:16px; padding-right:36px; }

	/* Iconos dentro del campo: realinear con el nuevo alto (48px). */
	.zt-has-icon .zt-fi{ top:24px; }
	.zt-has-icon .form-control{ padding-left:42px; }
	.zt-has-icon select.form-control{ padding-left:42px; }

	/* Mes/Año de tarjeta: lado a lado pero con buen alto táctil. */
	.zt-ccdate{ gap:10px; }

	/* Etiquetas un poco más legibles. */
	.zt-card .control-label{ font-size:13.5px !important; }

	/* Logos de tarjeta (Visa/Mastercard/PayPal): debajo del label, en fila. */
	.zt-cards{ float:none; display:flex; gap:7px; margin-top:7px; }

	/* ---------- Selector de número ----------
	   La barra envuelve: buscador full width arriba; filtro + refresh abajo. */
	.zt-nums-bar{
		gap:10px;
	}
	.zt-nums-search{
		flex:1 1 100%;
	}
	.zt-nums-q{ height:48px; font-size:16px; }
	/* Filtro de área ocupa el espacio restante; refresh fijo a la derecha. */
	.zt-nums-area-wrap{ flex:1 1 auto; }
	.zt-nums-area{
		width:100%;
		height:48px; font-size:16px;
	}
	.zt-nums-refresh{
		width:48px; height:48px; flex:0 0 48px;
	}
	/* Tarjetas de número: 1 columna. */
	.zt-nums-grid{
		grid-template-columns:1fr;
		gap:11px;
	}
	.zt-num{ padding:16px 16px 14px; }
	.zt-num-no{ font-size:16px; }

	/* ---------- Resumen del pedido: full width, legible ---------- */
	.zt-summary{
		padding:20px 18px;
		border-radius:16px;
	}
	.zt-sum-big b{ font-size:27px; }
	.zt-sum-feats li{ font-size:13.5px; }

	/* ---------- Misc: captcha + términos ----------
	   hCaptcha mide ~300px; lo centramos y contenemos para cero overflow. */
	.zt-misc{ overflow:hidden; }
	.zt-misc .h-captcha{
		display:flex;
		justify-content:center;
		margin:10px 0;
		overflow-x:auto;            /* respaldo si el iframe excede ancho */
		-webkit-overflow-scrolling:touch;
	}
	.zt-misc .h-captcha iframe{ max-width:100%; }
	#termstext.form-control{ font-size:13px; height:auto; }
	.zt-misc .checkbox label{ font-size:13.5px; line-height:1.5; }
	.zt-misc h3{ font-size:15px; }

	/* ---------- Navegación: botones apilados, full width, táctiles ----------
	   El base ya hace column-reverse a 520px; aquí garantizamos a 600px,
	   buen alto (>=48px) y "Activar mi servicio"/"Continuar" prominente. */
	.zt-nav{
		flex-direction:column-reverse;
		gap:10px;
		margin-top:22px;
		padding-top:18px;
	}
	.zt-back,
	.zt-next{
		width:100%;
		min-height:50px;
	}
	.zt-back{ padding:14px 22px; font-size:15px; }
	.zt-next.zt-cta-btn,
	.zt-cta-btn{
		padding:15px 22px;
		font-size:16px;
		min-height:50px;
	}
	.zt-cta-note{ font-size:12px; margin-top:10px; }

	/* CTA final (#finish-button / .zt-cta) por si aparece. */
	.zt-cta{ margin-top:20px; padding-top:18px; }
	.zt-cta-btn, #finish-button.btn{ padding:15px 22px; font-size:16px; }

	/* Alertas un poco más compactas. */
	#main .alert{ font-size:13px; }
}

/* =========================================================================
   Extra fino para teléfonos muy estrechos (<=380px tipo iPhone SE/mini).
   ========================================================================= */
@media (max-width:380px){

	#main.container{
		margin:8px;
		padding:14px 12px 16px;
	}
	.zt-aside{ padding:18px 14px 4px; }
	.zt-aside-logo{ width:124px; }
	.zt-aside-h{ font-size:19px; }
	.zt-aside-sub{ font-size:13px; }

	/* Stepbar aún más compacto: solo número + label corto. */
	.zt-step-num{ flex:0 0 26px; width:26px; height:26px; font-size:12px; }
	.zt-step-tx b{ font-size:12px; }
	.zt-step{ gap:6px; }
	.zt-step-line{ min-width:10px; flex:0 0 10px; }

	/* Plan: si el precio no cabe junto al nombre, que baje en su propia fila. */
	.zt-plan-price{ flex:0 0 100%; text-align:left; }
	.zt-plan-price b{ font-size:20px; }
	.zt-plan-per{ text-align:left; }

	/* hCaptcha en 320–360px: escalar ligeramente para no forzar scroll.
	   El widget mide ~300px; con un pequeño scale entra holgado en 320px. */
	.zt-misc .h-captcha{
		transform:scale(.95);
		transform-origin:center top;
	}

	.zt-sum-big b{ font-size:25px; }
	.zt-num-no{ font-size:15px; }
}