/*
=========================================================
COMPONENTS.CSS
Componentes reutilizables
Maceta y Cortafrío
=========================================================
*/

/*======================================================
BOTONES
======================================================*/

.button{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:.75rem;

	padding:16px 32px;

	font-size:1rem;

	font-weight:600;

	border-radius:var(--radius-md);

	cursor:pointer;

	transition:var(--transition);

	border:none;

	text-decoration:none;

	white-space:nowrap;

}

.button-primary{

	background:var(--color-secondary);

	color:var(--color-dark);

	box-shadow:var(--shadow-sm);

}

.button-primary:hover{

	background:var(--color-secondary-dark);

	transform:translateY(-2px);

	box-shadow:var(--shadow-md);

}

.button-secondary{

	background:transparent;

	color:var(--color-primary);

	border:2px solid var(--color-primary);

}

.button-secondary:hover{

	background:var(--color-primary);

	color:var(--white);

}

/*======================================================
ICONOS — base para el SVG inline (ver myc_get_inline_svg())
======================================================*/

.myc-icon{

	display:inline-block;

	vertical-align:middle;

	width:24px;

	height:24px;

	flex-shrink:0;

}

.button__icon{

	width:18px;

	height:18px;

}

.button-full{

	width:100%;

}

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

.badge{

	display:inline-flex;

	align-items:center;

	padding:.45rem .9rem;

	background:var(--gray-100);

	border-radius:999px;

	font-size:.9rem;

	font-weight:600;

}

.badge-primary{

	background:#eef4ff;

	color:var(--color-primary);

}

.badge-gold{

	background:#fff8e6;

	color:var(--color-gold-text);

}

/*======================================================
CARDS
======================================================*/

.card{

	background:var(--white);

	border-radius:var(--radius-lg);

	border:1px solid var(--gray-200);

	box-shadow:var(--shadow-sm);

	padding:2rem;

	transition:var(--transition);

}

.card:hover{

	transform:translateY(-6px);

	box-shadow:var(--shadow-lg);

}

.card h3{

	margin-bottom:1rem;

}

.card p{

	margin-bottom:0;

}

/*======================================================
ICONOS
======================================================*/

.icon-circle{

	width:64px;

	height:64px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:#eef4ff;

	color:var(--color-primary);

	font-size:1.6rem;

	margin-bottom:1.25rem;

}

.icon-circle--lg{

	width:96px;

	height:96px;

	font-size:2.5rem;

	margin:0 auto 1.5rem;

}

/*======================================================
TÍTULOS DE SECCIÓN
======================================================*/

.section-header{

	max-width:760px;

	margin:0 auto 4rem;

	text-align:center;

}

.section-header h2{

	margin-bottom:1rem;

}

.section-header p{

	font-size:1.1rem;

}

/*======================================================
LISTAS
======================================================*/

.check-list{

	display:grid;

	gap:1rem;

}

.check-list li{

	position:relative;

	padding-left:2rem;

}

.check-list li::before{

	content:"✓";

	position:absolute;

	left:0;

	top:0;

	color:var(--color-success);

	font-weight:bold;

}

/*======================================================
FORMULARIOS
======================================================*/

.form-group{

	margin-bottom:1.5rem;

}

.form-label{

	display:block;

	margin-bottom:.5rem;

	font-weight:600;

	color:var(--heading-color);

}

.form-control{

	width:100%;

	padding:15px 18px;

	border:1px solid var(--gray-300);

	border-radius:var(--radius-md);

	background:#fff;

	transition:var(--transition);

}

.form-control:focus{

	border-color:var(--color-secondary);

	outline:none;

	box-shadow:0 0 0 4px rgba(197,157,47,.15);

}

/*======================================================
TABLAS
======================================================*/

.table{

	width:100%;

	border-collapse:collapse;

}

.table th{

	text-align:left;

	background:var(--gray-100);

	padding:1rem;

}

.table td{

	padding:1rem;

	border-bottom:1px solid var(--gray-200);

}

/*======================================================
CTA
======================================================*/

.cta-box{

	background:linear-gradient(135deg,#1f2937,#2d3748);

	color:#fff;

	border-radius:var(--radius-xl);

	padding:4rem;

	text-align:center;

}

.cta-box h2{

	color:#fff;

	margin-bottom:1rem;

}

.cta-box p{

	color:rgba(255,255,255,.85);

	margin-bottom:2rem;

}

/*======================================================
UTILIDADES
======================================================*/

.text-center{

	text-align:center;

}

.mb-0{

	margin-bottom:0;

}

.mt-0{

	margin-top:0;

}

.hidden{

	display:none;

}
/*======================================================
BREADCRUMBS
======================================================*/

.breadcrumbs{

	padding:1.25rem 0;

	border-bottom:1px solid var(--gray-200);

	background:#fafafa;

}

.breadcrumbs__list{

	display:flex;

	flex-wrap:wrap;

	align-items:center;

	list-style:none;

	margin:0;

	padding:0;

	font-size:.85rem;

	color:var(--text-light);

}

.breadcrumbs__item{

	display:flex;

	align-items:center;

	gap:.5rem;

}

.breadcrumbs__item a{

	color:var(--text-light);

	text-decoration:none;

}

.breadcrumbs__item a:hover{

	color:var(--color-secondary-dark);

	text-decoration:underline;

}

.breadcrumbs__item [aria-current="page"]{

	color:var(--heading-color);

	font-weight:var(--weight-semibold);

}

.breadcrumbs__separator{

	color:var(--gray-300);

}

/*======================================================
WHATSAPP
======================================================*/

.whatsapp-float{

	position:fixed;

	right:1.5rem;

	bottom:1.5rem;

	width:58px;

	height:58px;

	display:flex;

	align-items:center;

	justify-content:center;

	background:#25d366;

	border-radius:50%;

	box-shadow:var(--shadow-lg);

	z-index:var(--z-fixed, 900);

	transition:var(--transition-fast);

}

.whatsapp-float:hover{

	transform:scale(1.08);

}

.whatsapp-float__icon{

	width:30px;

	height:30px;

	color:#fff;

}

.button-whatsapp{

	display:inline-flex;

	align-items:center;

	gap:.6rem;

	background:#25d366;

	color:var(--color-dark);

	padding:.9rem 1.75rem;

	border-radius:var(--radius-md);

	font-weight:var(--weight-semibold);

	text-decoration:none;

	transition:var(--transition-fast);

}

.button-whatsapp:hover{

	background:#1ebe5b;

}

.button-whatsapp__icon{

	width:20px;

	height:20px;

	color:#fff;

}

@media (max-width:768px){

	.whatsapp-float{

		right:1rem;

		bottom:1rem;

		width:52px;

		height:52px;

	}

}

/*======================================================
MAPA
======================================================*/

.map-embed{

	position:relative;

	width:100%;

	aspect-ratio:16/9;

	border-radius:var(--radius-md);

	overflow:hidden;

	border:1px solid var(--gray-200);

}

.map-embed iframe{

	position:absolute;

	inset:0;

	width:100%;

	height:100%;

	border:0;

}

/*======================================================
SECTION TITLE (componente)
======================================================*/

.section-title{

	max-width:700px;

	margin-bottom:3rem;

}

.section-title--center{

	margin-left:auto;

	margin-right:auto;

	text-align:center;

}

.section-title__eyebrow{

	color:var(--color-gold-text);

	font-weight:var(--weight-semibold);

	text-transform:uppercase;

	letter-spacing:.05em;

	font-size:.85rem;

	margin-bottom:.75rem;

}

.section-title__heading{

	margin-bottom:1rem;

}

.section-title__description p{

	color:var(--text-light);

	font-size:1.05rem;

	margin:0;

}

/*======================================================
CARD (componente myc-card)
======================================================*/

.myc-card{

	background:#fff;

	border:1px solid var(--gray-200);

	border-radius:var(--radius-md);

	padding:2rem;

	height:100%;

}

.myc-card__icon{

	width:56px;

	height:56px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:#eef4ff;

	color:var(--color-primary);

	margin-bottom:1.25rem;

}

.myc-card__icon svg{

	width:26px;

	height:26px;

}

.myc-card__title{

	font-size:1.1rem;

	margin-bottom:.6rem;

}

.myc-card__description p{

	color:var(--text-light);

	font-size:.92rem;

	margin:0;

}

.myc-card__link{

	display:inline-block;

	margin-top:1rem;

	font-weight:var(--weight-semibold);

	color:var(--color-secondary-dark);

}

.map-embed__placeholder{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:.75rem;
	padding:2rem;
	text-align:center;
	background:linear-gradient(135deg,var(--gray-50),var(--gray-100));
}

.map-embed__placeholder p{
	margin:0;
	max-width:42rem;
}

.map-embed__icon{
	color:var(--color-secondary-dark);
}

.map-embed__actions{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.75rem;
	margin-top:.5rem;
}

@media (max-width:600px){
	.map-embed{
		aspect-ratio:4/5;
	}

	.map-embed__actions{
		flex-direction:column;
		width:100%;
	}

	.map-embed__actions .button{
		width:100%;
	}
}