/* ==========================================================
   Academia Más Estética · ajustes para móvil y tablet
   ========================================================== */

/* El círculo decorativo del hero (::after) sobresalía 160px: Elementor fija
   .e-con { overflow: var(--overflow) } con más prioridad que .mas-hero. */
.e-con.mas-hero { overflow: hidden; }
/* Red de seguridad: nada puede ensanchar la página. "clip" (a diferencia de
   "hidden") no crea contenedor de scroll, así el header sticky sigue funcionando. */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }

/* Puntos indicadores de los carruseles (los crea mas-interactivo.js) */
.mas-dots { display: none; }

@media (max-width: 767px) {
	/* ---------- Ritmo vertical más compacto ---------- */
	body .elementor .e-con.e-parent:not(.mas-hero) { --padding-top: 56px; --padding-bottom: 56px; }
	.elementor-widget-text-editor p { margin-bottom: .85em; }

	/* ---------- Hero ---------- */
	/* La palabra rotativa más larga ("técnica clínica avanzada") debe caber en una línea. */
	.mas-hero .mas-rotate { display: inline-block; font-size: min(1em, 7.6vw); }
	.mas-hero .elementor-widget-button .elementor-button { padding: 15px 24px; }
	.mas-hero::after { width: 300px; height: 300px; right: -120px; bottom: -140px; }
	.mas-glass { padding: 26px 22px !important; }
	.mas-chip { font-size: 13px; padding: 8px 13px; }

	/* ---------- Fotos de Sol y Luis lado a lado ---------- */
	.e-con.mas-duo { flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; }
	.e-con.mas-duo > .e-con { width: 50% !important; flex: 1 1 0 !important; min-width: 0; }
	.mas-duo .elementor-heading-title { font-size: 14px !important; }
	.mas-duo .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title { font-size: 11px !important; }

	/* ---------- Cifras en cuadrícula 2x2 ---------- */
	.mas-stats .e-con:has(> .elementor-widget-counter) { width: calc(50% - 10px) !important; flex: 0 0 calc(50% - 10px) !important; }
	.mas-stats .e-con:has(> .e-con > .elementor-widget-counter) { flex-wrap: wrap !important; flex-direction: row !important; gap: 26px 20px !important; }
	.mas-stats .elementor-counter-number-wrapper { font-size: 38px !important; }
	.mas-stats .elementor-counter-title { font-size: 13px !important; line-height: 1.4; }

	/* ---------- Carruseles deslizables (categorías, cursos, beneficios) ---------- */
	.mas-cats,
	.mas-grid,
	.e-con:has(> .e-con > .elementor-widget.mas-feature) {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 16px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 18px;
		margin-left: -18px !important;
		margin-right: -18px !important;
		padding: 6px 18px 22px !important;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.mas-cats::-webkit-scrollbar, .mas-grid::-webkit-scrollbar,
	.e-con:has(> .e-con > .elementor-widget.mas-feature)::-webkit-scrollbar { display: none; }
	.mas-cats > .mas-cat,
	.mas-grid > .mas-card,
	.e-con:has(> .e-con > .elementor-widget.mas-feature) > .e-con {
		flex: 0 0 84% !important;
		width: 84% !important;
		max-width: 84% !important;
		scroll-snap-align: start;
	}
	.mas-grid > .mas-card[hidden] { display: none !important; }
	.mas-cat { min-height: 330px; }
	.mas-cat__desc { max-height: none; }
	/* Sin inclinación 3D al deslizar con el dedo */
	.mas-card.is-tilt, .mas-cat.is-tilt, .mas-feature.is-tilt, .mas-step.is-tilt { transform: none; }
	.mas-card:hover, .mas-feature:hover { transform: none; }

	.mas-dots { display: flex; justify-content: center; gap: 8px; margin: -6px 0 6px; }
	body .mas-dots button {
		width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px;
		background: rgba(26, 74, 114, .25);
		transition: width .35s var(--mas-ease), background .35s;
	}
	body .mas-dots button.is-active { width: 26px; background: var(--mas-teal); }
	.mas-dots.is-light button { background: rgba(255, 255, 255, .35) !important; }
	.mas-dots.is-light button.is-active { background: var(--mas-gold) !important; }

	/* ---------- Filtros en una sola fila deslizable ---------- */
	.mas-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin: 0 -18px 22px;
		padding: 4px 18px 10px;
		scrollbar-width: none;
	}
	.mas-filter::-webkit-scrollbar { display: none; }
	body .mas-filter button { flex: 0 0 auto; padding: 10px 18px; font-size: 13.5px; }

	/* ---------- Tarjeta de curso ---------- */
	.mas-card__body { padding: 22px 20px 20px; }
	.mas-card__title { font-size: 19px; }
	.mas-card__price { font-size: 18px; }

	/* ---------- Galería en 2 columnas ---------- */
	.mas-gallery .gallery { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
	.mas-gallery .gallery-item { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
	.mas-gallery .gallery br { display: none; }

	/* ---------- Pasos como línea de tiempo compacta ---------- */
	.mas-steps { grid-template-columns: 1fr; gap: 0; position: relative; }
	.mas-steps::before { display: block; top: 30px; bottom: 30px; left: 30px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--mas-gold) 0 8px, transparent 8px 16px); }
	.mas-step { display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; text-align: left; padding: 14px 0; background: none; box-shadow: none; border-radius: 0; }
	.mas-step:hover { box-shadow: none; }
	.mas-step__icon { grid-row: span 2; width: 60px; height: 60px; margin: 0; font-size: 22px; box-shadow: 0 0 0 6px var(--mas-mist); }
	.mas-step__num { position: static; grid-column: 2; font-size: 12px; letter-spacing: .18em; -webkit-text-stroke: 0; color: var(--mas-gold); opacity: 1; display: none; }
	.mas-step h3 { font-size: 17px; margin: 6px 0 4px; }
	.mas-step p { font-size: 14px; }

	/* ---------- Test y formularios ---------- */
	.mas-quiz__panel h3 { font-size: 21px; }
	body .mas-quiz__opt { padding: 14px 16px; font-size: 14.5px; }
	.mas-form input[type="text"], .mas-form input[type="tel"], .mas-form input[type="email"], .mas-form select, .mas-form textarea { font-size: 16px; } /* evita el zoom automático de iOS */

	/* ---------- Ficha de curso ---------- */
	.mas-info { grid-template-columns: 1fr 1fr; gap: 10px; }
	.mas-info__item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
	.mas-info__item i { flex: 0 0 38px; width: 38px; height: 38px; font-size: 16px; }
	.mas-price { padding: 32px 22px; }
	.mas-price__value { font-size: 38px; }
	.mas-plan-price .elementor-heading-title { font-size: 44px !important; }
	.mas-countdown { gap: 8px; }
	.mas-countdown__unit { min-width: 0; flex: 1 1 0; padding: 12px 4px; }
	.mas-countdown__unit b { font-size: 28px; }
	.mas-countdown__unit small { font-size: 10px; letter-spacing: .1em; }
	.mas-countdown.is-mini .mas-countdown__unit small { font-size: 10px; }

	/* ---------- Áreas táctiles cómodas ---------- */
	.mas-links li { margin-bottom: 2px; }
	.mas-links a { display: inline-block; padding: 9px 0 9px 16px; }
	.mas-footer .elementor-icon-list-item > a, .mas-contact .elementor-icon-list-item > a { padding: 6px 0; }
	.mas-accordion .elementor-tab-title { padding: 18px 18px !important; }

	/* ---------- Flotantes más discretos ---------- */
	body button.mas-wa__btn { width: 54px; height: 54px; font-size: 28px; }
	.mas-wa { right: 14px; bottom: 14px; }
	body button.mas-top { width: 40px; height: 40px; }
	.mas-top { right: 21px; bottom: 80px; }
	.mas-wa__dot { width: 18px; height: 18px; line-height: 18px; font-size: 10px; }

	/* ---------- Barra de anuncio en una línea ---------- */
	.mas-announce__inner { flex-wrap: nowrap; gap: 10px; padding: 9px 44px 9px 12px; }
	.mas-announce__tag { display: none; }
	body a.mas-announce__text { font-size: 13px; min-width: 0; }
	.mas-announce__text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
	body a.mas-announce__cta { flex: 0 0 auto; padding: 7px 13px; font-size: 12.5px; }
}

@media (max-width: 767px) {
	/* Carruseles: a sangre (el ancho fijo de Elementor anulaba los márgenes negativos) y sin
	   animaciones de entrada en sus tarjetas: mientras están ocultas, el snap salta a otra. */
	.mas-cats, .mas-grid, .e-con:has(> .e-con > .elementor-widget.mas-feature) {
		width: calc(100% + 36px) !important;
		max-width: none !important;
		scroll-snap-type: x proximity;
		/* Con "center", lo que desborda por la izquierda queda fuera del área desplazable. */
		justify-content: flex-start !important;
	}
	.e-con:has(> .e-con > .elementor-widget.mas-feature) > .e-con.elementor-invisible,
	.e-con:has(> .e-con > .elementor-widget.mas-feature) > .e-con.animated {
		visibility: visible !important;
		animation: none !important;
	}
	.mas-grid > .mas-card.mas-reveal, .mas-cats > .mas-cat.mas-reveal { opacity: 1; transform: none; transition: none; }

	/* Botones de texto largo: interlineado cómodo al pasar a dos líneas. */
	.elementor-widget-button .elementor-button { white-space: normal; line-height: 1.3; }
	.elementor-widget-button .elementor-button-text { text-align: center; }

	/* En la ficha del curso la barra fija ya trae WhatsApp: se oculta el botón flotante mientras se ve. */
	body.mas-has-coursebar .mas-wa { opacity: 0; visibility: hidden; transform: translateY(20px); }
}

/* La cinta "Gran novedad" y la insignia de estado no deben superponerse. */
.mas-card.is-new .mas-card__badge { top: 56px; }

@media (max-width: 767px) {
	/* Volver arriba: en móvil estorba sobre el texto; basta el gesto de scroll y el WhatsApp. */
	body button.mas-top { display: none; }

	/* Galería: 6 fotos bastan en móvil. */
	.mas-gallery .gallery-item:nth-child(n+7) { display: none; }
}

@media (max-width: 380px) {
	.mas-info { grid-template-columns: 1fr; }
	.mas-cats > .mas-cat, .mas-grid > .mas-card, .e-con:has(> .e-con > .elementor-widget.mas-feature) > .e-con { flex-basis: 88% !important; width: 88% !important; max-width: 88% !important; }
}