/* ============================================================================
   Go PetiA Shell — pantalla principal.

   Todo se resuelve reordenando y ajustando lo que el tema ya renderiza. No hay
   marcado nuevo: `.gp-agent__welcome` es un contenedor con cinco hijos, así que
   con `order` se cambia la secuencia sin editar plantillas.

   El objetivo: que se pueda escribir sin hacer scroll en un teléfono.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. El hero deja de gastar la pantalla en presentarse.

   Antes: marca, kicker, titular a tres líneas, consejo y selector de país
   ocupaban la primera pantalla completa, y el campo de escribir quedaba abajo,
   fuera de vista y tapado por el aviso de instalación.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-agent__welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px 16px 10px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	min-height: 0;
	text-align: center;
}

/* Secuencia nueva: marca, titular, atajos y al final el consejo. */
body.has-gpshell.gpshell-hero .gp-agent__brandmark {
	order: 1;
	width: auto;
	max-width: 176px;
	height: auto;
	margin: 0;
}

body.has-gpshell.gpshell-hero .gp-kicker {
	order: 2;
	margin: 0;
	font-size: .68rem;
	letter-spacing: .1em;
	opacity: .72;
}

body.has-gpshell.gpshell-hero #petia-heading {
	order: 3;
	margin: 2px 0 0;
	font-size: clamp(1.5rem, 4.4vw, 2.15rem);
	line-height: 1.14;
	letter-spacing: -.015em;
	max-width: 22ch;
}

body.has-gpshell.gpshell-hero .gp-ai-starters {
	order: 4;
	margin: 4px 0 0;
}

/* El consejo baja: informa, pero no debe empujar la acción fuera de pantalla. */
body.has-gpshell.gpshell-hero .gp-agent__daily-tip {
	order: 5;
	margin: 2px 0 0;
	font-size: .82rem;
	opacity: .78;
	max-width: 52ch;
}

/* El selector de país ya vive en el header; aquí sólo robaba el centro. */
body.has-gpshell.gpshell-hero .gp-agent__welcome .gp-region-pill {
	display: none;
}

/* ---------------------------------------------------------------------------
   2. Atajos: de categorías internas a botones que invitan.

   Siguen siendo los del tema, sólo mejor presentados. Cambiar su texto por
   frases reales requiere tocar el tema y se explica en el README.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-ai-starters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0;
	list-style: none;
}

body.has-gpshell.gpshell-hero .gp-ai-starters > * {
	margin: 0;
}

body.has-gpshell.gpshell-hero .gp-ai-starters button,
body.has-gpshell.gpshell-hero .gp-ai-starters a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid var(--gps-line);
	background: #fff;
	color: var(--gps-ink);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(26, 22, 37, .04);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.has-gpshell.gpshell-hero .gp-ai-starters button:hover,
body.has-gpshell.gpshell-hero .gp-ai-starters a:hover {
	border-color: var(--gps-purple);
	box-shadow: 0 6px 18px rgba(91, 63, 165, .14);
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   3. El campo de escribir gana presencia.

   Es la única acción de la pantalla y estaba pegada al borde inferior con el
   mismo peso visual que el resto.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-chat__composer-zone {
	padding-top: 4px;
}

body.has-gpshell.gpshell-hero .gp-chat__composer-zone form {
	box-shadow: 0 14px 40px rgba(26, 22, 37, .13);
}

/* ---------------------------------------------------------------------------
   4. Móvil: que se pueda escribir sin un solo scroll.

   Aquí cada píxel vertical es una decisión. El saludo con el nombre es lo
   primero que se va: ocupa una línea entera para decir algo que la persona ya
   sabe, y deja el titular en una sola línea legible.
   ------------------------------------------------------------------------ */

@media (max-width: 720px) {
	body.has-gpshell.gpshell-hero .gp-agent__welcome {
		gap: 9px;
		padding: 12px 14px 6px;
	}

	body.has-gpshell.gpshell-hero .gp-agent__brandmark {
		max-width: 132px;
	}

	body.has-gpshell.gpshell-hero .gp-kicker {
		display: none;
	}

	body.has-gpshell.gpshell-hero #petia-heading [data-petia-greeting] {
		display: none;
	}

	body.has-gpshell.gpshell-hero #petia-heading {
		font-size: clamp(1.35rem, 6vw, 1.7rem);
		max-width: 20ch;
	}

	/* Los atajos pasan a una fila deslizable en vez de tres tarjetas apiladas. */
	body.has-gpshell.gpshell-hero .gp-ai-starters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		width: 100%;
		padding: 2px 0 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.has-gpshell.gpshell-hero .gp-ai-starters::-webkit-scrollbar {
		display: none;
	}

	body.has-gpshell.gpshell-hero .gp-ai-starters button,
	body.has-gpshell.gpshell-hero .gp-ai-starters a {
		white-space: nowrap;
		flex: 0 0 auto;
	}

	/* El consejo estorba en la primera pantalla de un teléfono. */
	body.has-gpshell.gpshell-hero .gp-agent__daily-tip {
		display: none;
	}
}

/* Pantallas muy bajas: se retira también la marca escrita. */
@media (max-height: 700px) and (max-width: 720px) {
	body.has-gpshell.gpshell-hero .gp-agent__brandmark {
		max-width: 108px;
	}
}

/* ---------------------------------------------------------------------------
   5. El aviso de instalar la app deja de tapar la acción.

   Estaba fijo abajo, justo donde vive el campo de escribir. En un teléfono eso
   significa que la única acción posible queda cubierta por una promoción de
   algo que la persona todavía no sabe si quiere.

   Se reubica arriba, donde no hay nada crítico, y se compacta.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-tamebanner .gp-pwa-banner {
	max-width: 380px;
	padding: 12px 14px;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(26, 22, 37, .16);
	gap: 12px;
	align-items: center;
}

body.has-gpshell.gpshell-tamebanner .gp-pwa-banner__body small {
	display: block;
	max-width: 34ch;
	line-height: 1.4;
	font-size: .76rem;
	opacity: .78;
}

body.has-gpshell.gpshell-tamebanner .gp-pwa-install {
	white-space: nowrap;
}

@media (max-width: 720px) {
	body.has-gpshell.gpshell-tamebanner .gp-pwa-banner {
		position: fixed;
		inset: auto 10px auto 10px;
		top: calc(var(--gps-h) + 10px + env(safe-area-inset-top));
		bottom: auto;
		max-width: none;
		z-index: 38;
	}

	/* La descripción larga sobra en un banner de teléfono. */
	body.has-gpshell.gpshell-tamebanner .gp-pwa-banner__body small {
		display: none;
	}
}

/* En la app instalada no tiene sentido invitar a instalarla. */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
	body.has-gpshell.gpshell-tamebanner .gp-pwa-banner {
		display: none;
	}
}

body.has-gpshell.gpshell-tamebanner.is-standalone .gp-pwa-banner {
	display: none;
}

/* ---------------------------------------------------------------------------
   6. Superficies de marca: el hero sobre morado u oscuro necesita contraste.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-ai-starters button,
body.has-gpshell.gpshell-hero .gp-ai-starters a {
	border-color: rgba(26, 22, 37, .10);
}

@media (prefers-reduced-motion: reduce) {
	body.has-gpshell.gpshell-hero .gp-ai-starters button,
	body.has-gpshell.gpshell-hero .gp-ai-starters a {
		transition: none;
	}

	body.has-gpshell.gpshell-hero .gp-ai-starters button:hover,
	body.has-gpshell.gpshell-hero .gp-ai-starters a:hover {
		transform: none;
	}
}