/*
	Paginas de servicio — hoja propia.

	Existe porque estas paginas se veian como una portada recortada: mismo hero, mismos titulos,
	misma tabla de precios y mismas tarjetas. Quien llegaba desde Google a "uñas de softgel" veia
	lo mismo que en la home y no encontraba ni un motivo nuevo para reservar.

	Lo que aportan las piezas de aqui, y por que cada una:

	- La FICHA (duracion / precio / donde) va pegada al hero porque son las tres preguntas que se
	  hacen antes que ninguna otra. Salen del catalogo, no escritas a mano, para que no puedan
	  desactualizarse. Es el mismo motivo por el que se borro landing_pricing_items.
	- Los PASOS existen para quitar incertidumbre. En un servicio que no se ha probado nunca, lo
	  que frena no es el precio: es no saber que va a pasar ni cuanto se va a tardar.
	- Los DISEÑOS convierten un precio unico en un rango que la clienta controla. Ver "desde 32 €"
	  y debajo lo que cuesta cada acabado hace el importe predecible, y un importe predecible es
	  el que no hace abandonar.
	- El BANNER cierra sobre una foto real a ancho completo. Es lo unico de la pagina que no se
	  parece a nada de la portada, y va justo donde la decision ya esta tomada.

	La paleta y las fuentes SI son las del sitio: la pagina tiene que tener personalidad propia,
	no parecer de otra marca.
*/

.morita-servicio {
	--servicio-crema: #faf6f7;
	--servicio-rosa: #cb2d77;
	--servicio-tinta: #373b4d;
	--servicio-linea: rgba(55, 59, 77, 0.12);
}

/* ============================================================
   FICHA — duracion, precio y sitio, en una tira bajo el hero
   ============================================================ */

.servicio-ficha {
	margin-top: -42px;
	position: relative;
	z-index: 3;
}

/*
	La tarjeta monta sobre la onda blanca del hero. Ese solape es lo que la ata al hero en vez
	de dejarla flotando como una seccion mas, y de paso corta la sensacion de "otra franja".
*/
.servicio-ficha__caja {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(55, 59, 77, 0.13);
	overflow: hidden;
}

.servicio-ficha__dato {
	padding: 26px 20px;
	text-align: center;
	border-right: 1px solid var(--servicio-linea);
}

.servicio-ficha__dato:last-child { border-right: 0; }

.servicio-ficha__etiqueta {
	display: block;
	margin-bottom: 6px;
	color: #9aa0a6;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.servicio-ficha__valor {
	margin: 0;
	color: var(--servicio-tinta);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

/* En movil tres columnas dejan cada dato en dos palabras por linea: mejor una debajo de otra. */
@media (max-width: 575.98px) {
	.servicio-ficha { margin-top: -26px; }
	.servicio-ficha__caja { grid-template-columns: 1fr; }
	.servicio-ficha__dato {
		border-right: 0;
		border-bottom: 1px solid var(--servicio-linea);
		padding: 18px 16px;
	}
	.servicio-ficha__dato:last-child { border-bottom: 0; }
}

/* ============================================================
   PASOS — que va a pasar en la cita
   ============================================================ */

.servicio-pasos { background: var(--servicio-crema); }

.servicio-pasos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991.98px) { .servicio-pasos__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .servicio-pasos__lista { grid-template-columns: 1fr; gap: 22px; } }

.servicio-pasos__paso { position: relative; padding-top: 8px; }

/*
	El numero va grande y en rosa palido DETRAS del titulo, no en un circulo delante. Asi se lee
	el orden de un vistazo sin que el adorno le robe sitio al texto, que es lo que informa.
*/
.servicio-pasos__numero {
	position: absolute;
	top: -18px;
	left: -6px;
	z-index: 0;
	color: #eeb4c7;
	font-family: 'Lora', Georgia, serif;
	font-size: 4.5rem;
	line-height: 1;
	opacity: 0.55;
	pointer-events: none;
}

.servicio-pasos__titulo,
.servicio-pasos__texto { position: relative; z-index: 1; }

.servicio-pasos__titulo {
	margin-bottom: 8px;
	color: var(--servicio-tinta);
	font-size: 1.1rem;
	font-weight: 700;
}

.servicio-pasos__texto {
	margin: 0;
	color: #5b6070;
	font-size: 0.98rem;
	line-height: 1.6;
}

/* ============================================================
   DISEÑOS — el acabado y lo que suma cada uno
   ============================================================ */

.servicio-disenos__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.servicio-disenos__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--servicio-linea);
	border-radius: 999px;
	background: #fff;
}

.servicio-disenos__nombre {
	color: var(--servicio-tinta);
	font-size: 0.95rem;
	font-weight: 600;
}

.servicio-disenos__precio {
	color: var(--servicio-rosa);
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
}

.servicio-disenos__nota {
	margin: 26px 0 0;
	color: #8a8f9c;
	font-size: 0.9rem;
	text-align: center;
}

/* ============================================================
   BANNER DE CIERRE — foto real a ancho completo
   ============================================================ */

.servicio-banner {
	position: relative;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/*
	El velo no es estetico: sobre una foto de uñas —claras, con marmol de fondo— el texto blanco
	no se lee. Va en degradado y no plano para que la foto siga viendose en la parte de arriba.
*/
.servicio-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(35, 25, 32, 0.42) 0%, rgba(35, 25, 32, 0.78) 100%);
}

.servicio-banner__txt {
	position: relative;
	z-index: 1;
	padding: 96px 0;
	text-align: center;
	color: #fff;
}

.servicio-banner__id {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}

.servicio-banner__titulo {
	margin-bottom: 14px;
	color: #fff;
	font-size: 2.75rem;
	line-height: 1.15;
}

.servicio-banner__texto {
	max-width: 30rem;
	margin: 0 auto 30px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.05rem;
	line-height: 1.6;
}

.servicio-banner__nota {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
}

@media (max-width: 767.98px) {
	.servicio-banner__txt { padding: 64px 0; }
	.servicio-banner__titulo { font-size: 2rem; }
}

/* ============================================================
   OTROS SERVICIOS — tarjetas con foto, no una lista de precios
   ============================================================ */

.servicio-otros__lista {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991.98px) { .servicio-otros__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .servicio-otros__lista { grid-template-columns: 1fr; } }

.servicio-otros__tarjeta {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 26px rgba(55, 59, 77, 0.10);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.servicio-otros__tarjeta:hover,
.servicio-otros__tarjeta:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(55, 59, 77, 0.16);
}

/* aspect-ratio y no una altura fija: las fotos vienen de citas reales y no todas miden igual. */
.servicio-otros__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.servicio-otros__cuerpo { padding: 20px 22px 24px; }

.servicio-otros__nombre {
	margin: 0 0 6px;
	color: var(--servicio-tinta);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
}

.servicio-otros__texto {
	margin: 0 0 12px;
	color: #5b6070;
	font-size: 0.95rem;
	line-height: 1.55;
}

.servicio-otros__precio {
	color: var(--servicio-rosa);
	font-size: 0.95rem;
	font-weight: 700;
}