/*
 * Landings: lectura en celular y QR para PC. Hoja única para las ocho plantillas
 * (vws_landing/template/001…008); la agrega Landing::setMovil con un filtro de salida,
 * así llega también a las copias de cada landing sin presionar Actualizar.
 *
 * Bajo 768 px lleva !important a propósito: cada plantilla nombra sus textos a su manera y
 * la 002 usa Tailwind, que se inyecta después de esta hoja. Desde 768 px no se aplica nada.
 */

@media (max-width: 767.98px) {

	/* ---------- Títulos: no se cortan ---------- */
	h1, h2, h3 { overflow-wrap: break-word; }
	h1 { font-size: clamp(32px, 9.4vw, 36px) !important; line-height: 1.15 !important; }
	h2 { font-size: clamp(26px, 7.4vw, 28px) !important; line-height: 1.2 !important; }
	h3 { font-size: clamp(21px, 6vw, 23px) !important; line-height: 1.25 !important; }

	/* ---------- Párrafos ---------- */
	.feature-description, .spec-card-description, .benefit-description, .additional-description,
	.section-intro, .bloque-intro, .footer-description, .footer-tagline, .pie-descripcion, .hero-descripcion,
	.faq-answer, .faq-respuesta, .accordion-body, .text-gray-600,
	p, li, blockquote, .rich-text, .block-intro, .hero-description, .section-description,
	.content-gallery-description, .video-description, .video-gallery-description,
	.bloque-texto, .tarjeta-texto, .galeria-info, .review-quote, .testimonial-card {
		font-size: 16.5px !important;
		line-height: 1.6 !important;
	}
	p + p { margin-top: .75em !important; }
	/* Título de tarjeta y lo que sigue: sin pegarse (el margen colapsa, no suma al que ya tenga) */
	h3:not(.accordion-header) + p, h3:not(.accordion-header) + div, .item-subtitle { margin-top: .4em !important; }
	h3:not(.accordion-header) + div, .item-subtitle + div { font-size: 16.5px !important; line-height: 1.6 !important; }

	/* ---------- Bajadas ---------- */
	.spec-card-bajada, .service-card-bajada, .video-bajada,
	.hero-lead, .hero-lead p, .hero-bajada, .hero-bajada p, .subtitle, .subtitle p,
	section.relative .rich-text.text-lg, section.relative .rich-text.text-lg p,
	.section-lead, .section-subtitle, .block-subtitle, .bloque-bajada, .feature-bajada,
	.item-bajada, .item-subtitle, .confianza-bajada, .tarjeta-bajada, .content-gallery-bajada,
	p.text-lg.font-semibold, p.text-primary.font-semibold {
		font-size: 17.5px !important;
		line-height: 1.5 !important;
	}

	/* ---------- Etiquetas, notas y letra chica ---------- */
	.spec-card-etiqueta, .spec-card-chip, .spec-chip, .chip, .etiqueta, .block-kicker,
	.top-bar, .top-bar p, .top-bar span, .top-banner, .top-banner p, .top-banner span, .franja p,
	.bg-secondary > .container > p.text-sm, .autor-datos span,
	label, .hero-label, .section-label, .section-kicker, .additional-kicker, .logo-tagline,
	.motivational-quote, .feature-index, .content-gallery-number, .gallery-number,
	.gallery-item-number, .video-number, .bloque-numero, .tarjeta-media .tarjeta-numero,
	.review-cargo, .author-cargo, .testimonio-autor span, .resena-autor span:not(.resena-inicial),
	.form-ayuda, .form-nota, .form-disclaimer, .form-privacy, .form-notice,
	.creditos, .creditos a, .footer-credits, .footer-copyright, .pie-copyright, .copyright {
		font-size: 13.5px !important;
		line-height: 1.5 !important;
	}

	/* ---------- Preguntas frecuentes: son una lista, no títulos de sección ---------- */
	.faq-item h3, .faq-question, .faq-question span, .accordion-button, .faq-item button > span:not([class]) {
		font-size: 17px !important;
		line-height: 1.4 !important;
	}

	/* ---------- Contraste: grises que quedaban claros (no se tocan los colores de marca) ---------- */
	.form-disclaimer { color: #5b6573 !important; }
	.creditos.text-gray-500 { color: #cbd5e1 !important; }
	.creditos a { color: inherit !important; }
	section.relative .rich-text { color: rgba(255, 255, 255, .92) !important; }

	/* ---------- Botones ---------- */
	.cta-button, .btn, .boton, .btn-primary, .btn-secondary, .btn-submit, .submit-button,
	.form-btn, .choose-room-btn, .video-boton, a[href="#formulario"], a[href="#contacto"],
	button[type="submit"] {
		font-size: 16.5px !important;
	}

	/* ---------- Campos: con 16 px el iPhone no acerca la pantalla al escribir ---------- */
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
		font-size: 16px !important;
	}

	/* ---------- La imagen o el video del hero va antes del texto ---------- */
	.hero-grid > .hero-media, .hero-layout > .hero-media, .hero > .hero-media,
	.hero-image, .md\:grid-cols-2 > .relative { order: -1; }
}

/* ---------- PC: QR para seguir la landing en el celular ---------- */
.lnd-qr { display: none; }

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.lnd-qr {
		display: block;
		position: fixed;
		right: 20px;
		bottom: 96px; /* sobre el botón flotante de WhatsApp */
		z-index: 2147481000;
		width: 124px;
		padding: 10px;
		box-sizing: border-box;
		background: #fff;
		color: #1f2937;
		border: 1px solid #e4e8ec;
		border-radius: 12px;
		box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
		text-align: center;
		font-size: 13px;
		line-height: 1.35;
	}
	.lnd-qr img { display: block; width: 100%; height: auto; margin: 0 0 8px; }
	.lnd-qr strong { display: block; font-size: 13px; font-weight: 700; color: #1f2937; }
	.lnd-qr span { display: block; margin-top: 2px; font-size: 12px; color: #4b5563; }
	.lnd-qr button {
		position: absolute;
		top: -9px;
		left: -9px;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 1px solid #e4e8ec;
		border-radius: 50%;
		background: #fff;
		color: #4b5563;
		font-size: 15px;
		line-height: 1;
		cursor: pointer;
	}
}