/**
 * El bloque para instalar la aplicación, dentro de una página del sitio.
 *
 * No inventa un lenguaje visual: usa el que ya tiene Dharma. Los títulos
 * en Fredoka y los botones en píldora color carbón salen del sitio real,
 * medidos sobre la página en producción, no de una paleta imaginada. El
 * verde que había antes era un color provisional que no aparece en ningún
 * otro sitio, y por eso el bloque se veía pegado.
 *
 * Enseña el icono de verdad de la aplicación a propósito: es la forma más
 * corta de explicar qué va a pasar. Lo que se ve aquí es lo que va a
 * quedar en la pantalla del teléfono.
 */

.dharma-pwa-fija {
	/* Neutro teñido hacia el carbón de la marca. Un gris puro al lado de
	   una página cálida se ve sucio. */
	background: oklch(0.972 0.004 250);
	border-radius: 1.75rem;
	padding: clamp(1.25rem, 4vw, 2rem);
	margin: 2.5rem auto;
	max-width: 46rem;

	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 1.75rem);

	font-family: "Open Sans", Arial, sans-serif;
	line-height: 1.7;
}

.dharma-pwa-fija[hidden] {
	display: none;
}

/* El icono, con el redondeo de un icono de iOS. Se lee como una app antes
   de leer una sola palabra. */
.dharma-pwa-fija__icono {
	width: 4.5rem;
	height: 4.5rem;
	flex: 0 0 auto;
	border-radius: 22.5%;
	box-shadow: 0 6px 18px oklch(0.42 0.015 250 / 0.18);
	display: block;
}

.dharma-pwa-fija__texto {
	flex: 1 1 16rem;
	min-width: 0;
}

.dharma-pwa-fija__titulo {
	font-family: Fredoka, Helvetica, Arial, Lucida, sans-serif;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.25;
	color: oklch(0.42 0.015 250);
	margin: 0 0 0.35rem;
}

.dharma-pwa-fija__detalle {
	font-size: 0.95rem;
	color: oklch(0.56 0.006 250);
	margin: 0;
	max-width: 46ch;
}

.dharma-pwa-fija__detalle strong {
	color: oklch(0.42 0.015 250);
	font-weight: 700;
}

.dharma-pwa-fija__detalle small {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 0.82rem;
	opacity: 0.75;
}

/**
 * Los pasos de iOS.
 *
 * Se estilan aquí, y no dentro del JavaScript, porque los usan los dos
 * sitios: el bloque de la página y el panel flotante. Esta hoja se carga
 * siempre que la PWA está encendida, así que a los dos les llega.
 *
 * Numerados y separados a propósito: son tres o cuatro toques que hay que
 * dar con el teléfono en la mano, y una frase seguida con varios "y luego"
 * no se sigue mirando la pantalla.
 */
.dharma-pwa-pasos {
	margin: 0;
	counter-reset: dharma-paso;
	font-size: 0.95rem;
	color: oklch(0.42 0.015 250);
}

/**
 * El único !important del plugin, y pelea contra una regla concreta.
 *
 * Divi impone `.et-l--body ol { list-style-type: decimal;
 * list-style-position: inside; padding: 0 0 23px }`, que tiene más
 * especificidad que una sola clase nuestra. Sin esto salen DOS números por
 * paso: el marcador que devuelve Divi y el círculo que dibujamos nosotros.
 *
 * Se podría ganar repitiendo la clase (.dharma-pwa-pasos.dharma-pwa-pasos),
 * pero eso es un truco que nadie entiende al leerlo dentro de un año.
 * Prefiero decir en voz alta contra qué se está peleando.
 */
.dharma-pwa-pasos,
.dharma-pwa-pasos li {
	list-style: none !important;
	list-style-type: none !important;
}

.dharma-pwa-pasos {
	padding: 0 !important;
}

.dharma-pwa-pasos li {
	counter-increment: dharma-paso;
	position: relative;
	padding-left: 2rem;
	margin: 0 0 0.5rem;
	line-height: 1.5;
}

.dharma-pwa-pasos li:last-child {
	margin-bottom: 0;
	font-weight: 700;
}

.dharma-pwa-pasos li::before {
	content: counter(dharma-paso);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: oklch(0.42 0.015 250);
	color: oklch(0.98 0 0);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4rem;
	text-align: center;
}

.dharma-pwa-pasos__aviso {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: oklch(0.56 0.006 250);
}

/* La misma píldora que el resto de botones del sitio. */
.dharma-pwa-fija__boton {
	flex: 0 0 auto;
	background: oklch(0.42 0.015 250);
	color: oklch(0.98 0 0);
	border: 0;
	border-radius: 30px;
	padding: 0.85rem 1.9rem;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dharma-pwa-fija__boton:hover {
	background: oklch(0.35 0.018 250);
	transform: translateY(-1px);
}

.dharma-pwa-fija__boton:active {
	transform: translateY(0);
}

.dharma-pwa-fija__boton:focus-visible {
	outline: 2px solid oklch(0.42 0.015 250);
	outline-offset: 3px;
}

/* En móvil se apila y el botón ocupa el ancho: es la única acción que hay
   y el pulgar no debería tener que buscarla. */
@media (max-width: 34rem) {
	.dharma-pwa-fija {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	/* En columna, flex-basis fija el ALTO, no el ancho: el 16rem que da el
	   ancho mínimo en fila se convertía aquí en 256px de alto vacío debajo
	   del texto. Medido, no supuesto. */
	.dharma-pwa-fija__texto {
		flex: 0 0 auto;
		width: 100%;
	}

	.dharma-pwa-fija__boton {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dharma-pwa-fija__boton {
		transition: none;
	}

	.dharma-pwa-fija__boton:hover {
		transform: none;
	}
}