/* ==========================================================================
   Mariana Moretti — spa & fitness zone
   Tema claro, tipografia Raleway (cuerpo) + Roboto Slab (titulos).
   Primario #1ABC9C · Secundario #2C3E50
   Las Google Fonts se cargan desde head.php ($google_fonts_por_proyecto).
   ========================================================================== */

body {
	font-family: 'Raleway', sans-serif;
	color: #4a4a4a;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: 'Roboto Slab', serif;
	color: #2C3E50;
	font-weight: 400;
}

.lead {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
}

.btn, .nav-link, .navbar-nav .nav-link, input, select, textarea, button {
	font-family: 'Raleway', sans-serif;
}

/* --- Marca / logo --------------------------------------------------------- */

.navbar-brand img {
	width: 190px;
}

.logo-menu-mobile {
	width: 150px;
}

.footer-logo {
	width: 200px;
}

/* --- Barra superior ------------------------------------------------------- */

#divBarraSuperior {
	height: 40px;
}

#divBarraSuperior .container {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
}

.span-turnos .dropdown-menu.show {
	top: 8px !important;
}

/* --- Navegacion ----------------------------------------------------------- */

/* Encabezado siempre blanco (el theme lo pinta con --color-secundario):
   fondo blanco, links e iconos oscuros, hover en el primario. */
.navbar.navbar-bg-color-secundario {
	background: #ffffff !important;
	box-shadow: 0 1px 0 rgba(44, 62, 80, .08);
}

.navbar-dark .navbar-nav .nav-link {
	color: #3c3c3b;
	letter-spacing: .02em;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show {
	color: var(--color-primario);
}

.navbar-dark .navbar-other .nav-link,
.navbar-dark .navbar-other .nav-link i,
.navbar-dark .navbar-toggler,
.navbar-dark .navbar-brand + .navbar-other i {
	color: #3c3c3b !important;
}

.navbar-dark .navbar-other .nav-link:hover,
.navbar-dark .navbar-other .nav-link:hover i {
	color: var(--color-primario) !important;
}

/* En desktop el menu vive dentro de un .offcanvas (fondo #1e2228 del theme):
   transparente para que se vea el blanco del navbar. */
@media (min-width: 992px) {
	.navbar .offcanvas-nav,
	.navbar .offcanvas-nav .offcanvas-body {
		background-color: transparent !important;
	}
}

/* En mobile el offcanvas sigue siendo el panel oscuro del theme: links en blanco. */
@media (max-width: 991.98px) {
	.navbar .offcanvas-nav .nav-link {
		color: #ffffff !important;
	}

	.navbar .offcanvas-nav .nav-link:hover,
	.navbar .offcanvas-nav .nav-link.active {
		color: var(--color-primario) !important;
	}
}

@media (min-width: 992px) {
	.navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}
}

/* --- Portadas / hero ------------------------------------------------------ */

.swiper-hero-con-barra,
.swiper-hero-con-barra .swiper-slide {
	height: calc(100vw / 2.59);
}

.swiper-overlay {
	background-color: rgba(0, 0, 0, .18);
}

#divPortadas .lead {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important;
}

.swiper-hero-con-barra h2,
.swiper-hero-vertical-con-barra h2,
.swiper-hero-con-barra .display-1,
.swiper-hero-vertical-con-barra .display-1 {
	font-family: 'Roboto Slab', serif;
}

/* Hero mobile: 100vh incluye el chrome del navegador y la imagen se sale de pantalla. */
@media (max-width: 575.98px) {
	.swiper-hero-vertical-con-barra,
	.swiper-hero-vertical-con-barra .swiper-slide {
		height: calc(100svh - 110px) !important;
	}

	/* Las fotos verticales son oscuras: velo + texto en blanco para que se lea. */
	.swiper-hero-vertical-con-barra .swiper-slide::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, .10) 60%);
		z-index: 1;
		pointer-events: none;
	}

	.swiper-hero-vertical-con-barra .swiper-content {
		position: relative;
		z-index: 2;
	}

	.swiper-hero-vertical-con-barra p.lead,
	.swiper-hero-vertical-con-barra .portada-texto-grande,
	.swiper-hero-vertical-con-barra .portada-texto-normal {
		color: #ffffff !important;
		text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
	}

	/* El contenido del slide se pasa del viewport y corta la última palabra de cada línea. */
	.swiper-hero-vertical-con-barra .swiper-content,
	.swiper-hero-vertical-con-barra .swiper-content .row {
		max-width: 100vw;
		overflow: hidden;
	}

	.swiper-hero-vertical-con-barra .swiper-content [class*="col-"] {
		padding-right: 1.75rem;
	}

	/* El theme deja el texto del slide en una sola linea y la ultima palabra queda cortada. */
	.swiper-hero-vertical-con-barra .swiper-content p {
		max-width: 84vw;
		white-space: normal !important;
		overflow-wrap: break-word;
	}

	#swiperPortadasVertical .swiper-content p.portada-texto-normal {
		font-size: 1rem !important;
		line-height: 1.4 !important;
	}

	#swiperPortadasVertical .swiper-content [class*="col-"] {
		padding-right: 2rem !important;
	}
}

/* --- Botones -------------------------------------------------------------- */

/* Mayusculas solo en los CTA de las portadas; el resto de los botones va tal cual se escribe. */
.swiper-hero-con-barra .btn-primary,
.swiper-hero-vertical-con-barra .btn-primary {
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .78rem;
	font-weight: 600;
}

.btn {
	text-transform: none;
}

/* --- Bloques -------------------------------------------------------------- */

#divBanners {
	background: #F7FBFA !important;
}

.bg-gray, .bg-light {
	background-color: #F7FBFA !important;
}

/* Nombre de la categoria superpuesto sobre la foto */
#divBloqueCategorias .project.item,
#divBloqueCategorias .swiper-slide {
	position: relative;
}

#divBloqueCategorias figure.card-img-top::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

#divBloqueCategorias h4,
#divBloqueCategorias h4 a {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	margin: 0;
	padding: 1rem 1.25rem;
	color: #ffffff !important;
	font-family: 'Roboto Slab', serif;
	font-size: 1.05rem;
	opacity: .92;
}

/* El pie es blanco y el theme lo trata como oscuro (.text-inverse + .social-white):
   iconos sociales y textos sueltos quedaban blancos sobre blanco. */
footer .nav.social a,
footer .nav.social a i {
	color: #3c3c3b !important;
}

footer p {
	color: #4a4a4a;
}

footer .nav.social a:hover,
footer .nav.social a:hover i {
	color: var(--color-primario) !important;
}

/* --- Newsletter (mismo tratamiento que 3dproductos: card con gradiente) ---- */

#divBloqueNewsletter .card {
	background-image: linear-gradient(90deg, #2C3E50, #1ABC9C) !important;
}

#divBloqueNewsletter h2 {
	color: #ffffff !important;
}

#divBloqueNewsletter p {
	text-align: center;
	font-size: .9rem !important;
}

/* --- Alertas y detalles --------------------------------------------------- */

.alert-success {
	background-color: #E6F7F3;
}

.alert-success, .alert-success a {
	color: #12866f !important;
}

.link-inverse, .text-inverse, .text-inverse a:not(.btn) {
	color: #2C3E50;
}

.link-dark {
	color: #4a4a4a;
}

.follow-link:hover {
	color: var(--color-primario);
}

.pie-pagina {
	color: #4a4a4a;
}

.texto-slide-pedidos, .texto-slide-pedidos h4 {
	color: #2C3E50;
}

/* --- Precios y fichas ----------------------------------------------------- */

.amount, ins, .price {
	color: var(--color-primario);
}

.card {
	border-radius: .5rem;
}