/* ==========================================================
   STYLE 7 — HEADER
   MédicoEspecialista.com.bo
========================================================== */


/* ==========================================================
   CONTENEDOR PRINCIPAL DEL HEADER
========================================================== */

.style-7-header{
	position:relative;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	overflow:hidden;
	min-height:100dvh;
}


/* ==========================================================
   IMAGEN DE PORTADA
========================================================== */

.company-cover-header img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transform:translateY(0);
	transition:transform .2s ease-out;
	will-change:transform;
}


/* ==========================================================
   OVERLAY DE LA PORTADA
========================================================== */

.company-cover-header::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(
		to bottom,
		rgba(0,0,0,0.10) 0%,
		rgba(0,0,0,0.35) 25%,
		rgba(0,0,0,0.50) 50%,
		rgba(0,0,0,0.35) 75%,
		rgba(0,0,0,0.10) 100%
	);
}


/* ==========================================================
   CONTENIDO CENTRADO
========================================================== */

.style-7-header .row{
	position:absolute;
	inset:0;
	z-index:5;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	margin-left:0 !important;
	margin-right:0 !important;
}


/* ==========================================================
   NOMBRE / TITULO DEL MÉDICO
========================================================== */

.style-7-header h1{
	color:#fff;
	font-size:50px;
	font-weight:800;
	letter-spacing:.4px;
	margin-bottom:14px;
	text-shadow:0 4px 12px rgba(0,0,0,.4);
}


/* ==========================================================
   BADGES
========================================================== */

.company-badges{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:15px;
	margin-top:12px;
}


/* ==========================================================
   BADGE BASE
========================================================== */

.company-badges .badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:16px 32px;
	border-radius:40px;
	font-size:24px;
	font-weight:700;
	text-align:center;
	line-height:1.2;
	backdrop-filter:blur(6px);
	white-space:nowrap;
	box-shadow:0 4px 14px rgba(0,0,0,.25);
}


/* ==========================================================
   BADGE — ESPECIALIDAD
========================================================== */

.badge-specialty{
	background:#030D40;
	color:#0b2a5b;
}


/* ==========================================================
   BADGE — CIUDAD
========================================================== */

.badge-city{
	background:#ffd400;
	color:#0b2a5b;
}


/* ==========================================================
   BOTÓN DEL HEADER
========================================================== */

.style-7-header .btn,
.style-7-header a.btn{
	border-radius:40px;
	padding:12px 22px;
	font-weight:700;
	letter-spacing:.3px;
	background:linear-gradient(135deg,#ffcc00,#ff9900);
	border:none;
	color:#111;
	box-shadow:0 6px 16px rgba(0,0,0,.25);
	transition:all .25s ease;
}


.style-7-header .btn:hover{
	transform:translateY(-3px);
}


/* ==========================================================
   ANIMACIÓN SLIDE UP
========================================================== */

@keyframes slideUpFade{

	0%{
		opacity:0;
		transform:translateY(35px);
	}

	100%{
		opacity:1;
		transform:translateY(0);
	}
}


/* ==========================================================
   ESTADO INICIAL DE ELEMENTOS ANIMADOS
========================================================== */

.company-badges .badge,
.company-actions{
	opacity:0;
	transform:translateY(35px);
}


/* ==========================================================
   ACTIVACIÓN DE LA ANIMACIÓN
========================================================== */

.style-7-header.loaded .company-badges .badge{
	animation:slideUpFade .7s ease forwards;
}


.style-7-header.loaded .company-badges .badge:nth-child(2){
	animation-delay:.15s;
}


.style-7-header.loaded .company-actions{
	animation:slideUpFade .7s ease forwards;
	animation-delay:.35s;
}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media(max-width:992px){

	.style-7-header h1{
		font-size:36px;
	}
}


/* ==========================================================
   RESPONSIVE — TABLET / MÓVIL
========================================================== */

@media(max-width:768px){

	.style-7-header{
		width:100vw !important;
		margin-left:calc(50% - 50vw) !important;
		margin-right:calc(50% - 50vw) !important;
		border-radius:0 !important;
	}

	.style-7-header h1{
		font-size:30px;
	}

	.company-badges .badge{
		font-size:16px;
		padding:12px 16px;
	}

	.btn-reservar{
		font-size:16px;
		padding:11px 22px;
	}
}


/* ==========================================================
   RESPONSIVE — MÓVIL
========================================================== */

@media(max-width:480px){

	.company-badges .badge{
		font-size:14px;
	}

	.btn-reservar{
		width:90%;
		justify-content:center;
		font-size:15px;
	}
}