/* ==========================================================================
   "¿Quieres un modelo diferente?"

   Bloque compartido: sale en la portada, en los archivos de producto, en la
   ficha y en favoritos. Por eso vive en su propia hoja y no en home.css, que
   solo se carga en la portada.
   ========================================================================== */

/* --- ¿Quieres un modelo diferente? ----------------------------------------- */
.personalizar__wrapper {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Hueco arriba para que el perro sobresalga por encima de la tarjeta. */
	padding-block: 110px 70px;
}

/* La tarjeta ocupa todo el ancho: el mismo fondo corre tambien tras el perro.
   Recorta a sus hijos (el circulo verde), pero no al perro, que es hermano y
   por eso puede asomar por arriba. */
.personalizar__tarjeta {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 56px 60px;
	border-radius: 32px;
	background-color: var(--bg-terracota);
	overflow: hidden;
}

/* El texto no invade la mitad donde esta el perro. */
.personalizar__tarjeta > * { max-width: 58%; }

.personalizar__titulo {
	display: flex;
	flex-direction: column;
}

.personalizar__titulo-suave {
	font-family: var(--f-titulo);
	font-size: var(--fz-h2);
	font-weight: 400;
	line-height: 1.1;
	color: var(--c-negro);
}

.personalizar__titulo-fuerte {
	font-family: var(--f-titulo);
	font-size: 58px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-terracota);
}

.personalizar__bajada {
	margin-top: 22px;
	font-size: var(--fz-texto);
	line-height: 1.5;
	color: var(--c-texto);
}

.personalizar__boton { margin-top: 30px; }

.personalizar__glosario {
	display: block;
	margin-top: 28px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--f-texto);
	font-size: 14px;
	color: var(--c-texto);
}
.personalizar__glosario:hover { color: var(--c-terracota); text-decoration: underline; }

/* --- El perro, a la derecha y asomando por encima de la tarjeta ------------ */
.personalizar__media {
	position: absolute;
	right: var(--wrapper-pad);
	bottom: 70px;
	z-index: 2;
	width: 42%;
	max-width: 480px;
}

.personalizar__foto {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	display: block;
}

/* Circulo verde detras del perro, recortado por la tarjeta. */
.personalizar__circulo {
	position: absolute;
	right: -90px;
	bottom: -54%;
	z-index: 0;
	width: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--bg-terracota-20);
	pointer-events: none;
}

/* Vineta sobre el perro: aparece al pasar el raton por encima. */
.personalizar__nota {
	position: absolute;
	left: 18%;
	bottom: 26%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: 210px;
	padding: 12px 16px;
	border: 2px solid var(--c-terracota);
	border-radius: 20px 20px 20px 4px;
	background-color: var(--c-blanco);
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	line-height: 1.3;
	color: var(--c-negro);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}

.personalizar__media:hover .personalizar__nota,
.personalizar__media:focus-within .personalizar__nota {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.personalizar__emoji {
	width: 30px;
	height: auto;
	flex: 0 0 auto;
}

@media (max-width: 1024px) {
	.personalizar__tarjeta { padding: 44px 40px; }
	.personalizar__tarjeta > * { max-width: 62%; }
	.personalizar__titulo-fuerte { font-size: 46px; }
	.personalizar__media { width: 46%; bottom: 60px; }
	.personalizar__circulo { width: 34%; }
	.personalizar__nota { left: 10%; max-width: 180px; font-size: 14px; padding: 10px 14px; }
}

@media (max-width: 767px) {
	/* Apilado: la tarjeta a lo ancho y el perro encima, centrado. */
	.personalizar__wrapper { padding-block: 40px; }

	.personalizar__tarjeta {
		padding: 30px 24px;
		border-radius: var(--radio-card);
	}
	.personalizar__tarjeta > * { max-width: none; }
	.personalizar__titulo-fuerte { font-size: var(--fz-h3); }

	.personalizar__circulo { display: none; }

	.personalizar__media {
		position: static;
		width: 100%;
		max-width: 320px;
		margin: 24px auto 0;
	}
	.personalizar__nota {
		left: 50%;
		bottom: 8%;
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
	}
}

/* El apilado de movil, que antes compartia regla con el hero de la portada. */
@media (max-width: 767px) {
	.personalizar__wrapper { grid-template-columns: 1fr; padding-block: 40px; }
}