/*
 * Arreglo para el sitio rescatado (sin los scripts del constructor Hostinger/Zyro).
 *
 * El CSS original oculta (opacity:0) todo elemento con animación de entrada
 * hasta que un script le agrega data-animation-state="active" al entrar en
 * pantalla. Ese script ya no existe: las imágenes de escritorio quedaron
 * guardadas con el atributo puesto, pero las versiones móviles (< 920px) no,
 * así que desaparecían al achicar la pantalla.
 *
 * Se fuerza el estado final de la animación (visible, sin desplazamiento),
 * que es el mismo que ya se ve en escritorio.
 */
.transition [data-animation-role="image"],
.transition [data-animation-role="block-element"],
.transition:not(.transition--root-hidden) {
	opacity: 1 !important;
	transform: none !important;
}

/* Red de seguridad: ninguna imagen más ancha que su contenedor en pantallas chicas */
@media screen and (max-width: 920px) {
	img,
	video,
	svg {
		max-width: 100%;
	}
}

/*
 * Alto real de la pantalla en el celular.
 * El CSS original fija html y body a height:100%, o sea al alto de la pantalla
 * con la barra del navegador visible. Al esconderse la barra la página no se
 * reajustaba. Se deja que midan lo que mide el contenido y el sitio toma como
 * mínimo el alto real de la pantalla (100dvh se actualiza con la barra).
 */
html,
body {
	height: auto;
}

.page {
	min-height: 100vh; /* navegadores sin soporte de dvh */
	min-height: 100dvh;
}

/* El botón de WhatsApp tampoco debe quedar detrás de la barra del sistema */
.whats-app-bubble {
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/*
 * Portada (index.html): proporción y aire de la pirámide.
 * Compu: pirámide más chica (de 812x466 a 576x330, misma proporción).
 * Celular y tableta: más aire entre la frase de apoyo y la punta de la pirámide.
 */
@media screen and (min-width: 921px) {
	#hero-image-1.image-wrapper {
		max-height: 332px;
	}

	#hero-image-1 .image-wrapper--desktop {
		width: 576px;
		max-width: 100%;
		height: 330px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 920px) {
	[data-qa="layout-element-wrapper:hero-image-1"] {
		margin-top: 24px;
	}
}

/* Frase de apoyo de la portada: si ocupa dos renglones, quedan parejos */
#hero-subtitle p {
	text-wrap: balance;
}

/*
 * Separación mínima entre bloques en el celular: estos textos quedaban pegados
 * a la imagen que tienen arriba (sin fila de separación en la grilla).
 */
@media screen and (max-width: 920px) {
	[data-qa="layout-element-wrapper:zj2vlh"],
	[data-qa="layout-element-wrapper:zlryrd"] {
		margin-top: 20px;
	}
}

/*
 * Pie de página: sus reglas (colores blancos, ® en superíndice, bajada pegada a la marca,
 * línea superior y margen de seguridad inferior) están en el bloque <style id="footer-critical">
 * del <head> de cada página, para que se vean igual aunque el navegador tenga esta hoja en caché.
 */