/* Fajardos Enhancer v3.0 — front-end
   Variables de color inyectadas por PHP en :root  */

.fe-stack[hidden] { display: none; }
.fe-stack.fe-placed { display: block; }

.fe-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.fe-ico { vertical-align: middle; flex: 0 0 auto; }

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

.fe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 3px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.fe-btn:hover { transform: translateY(-1px); }
.fe-btn--lg { padding: 15px 28px; font-size: 16px; }

.fe-btn--wa { background: var(--fe-wa, #4a7c59); color: #fff !important; }
.fe-btn--wa:hover { background: #3d6749; color: #fff !important; }

.fe-btn--outline { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.65); }
.fe-btn--outline:hover { background: #fff; color: var(--fe-navy, #1c2c4c) !important; border-color: #fff; }

/* Secundario: relleno blanco con contorno azul marino.
   Al pasar el cursor invierte a relleno azul con texto blanco. */
.fe-btn--ghost {
	background: #fff;
	color: var(--fe-navy, #1c2c4c) !important;
	border-color: var(--fe-navy, #1c2c4c);
	border-width: 1.5px;
}
.fe-btn--ghost:hover,
.fe-btn--ghost:focus-visible {
	background: var(--fe-navy, #1c2c4c);
	color: #fff !important;
	border-color: var(--fe-navy, #1c2c4c);
}

/* ------------------------------------------------------------------ */
/* Top bar                                                             */
/* ------------------------------------------------------------------ */

.fe-topbar {
	background: var(--fe-navy-dark, #121d33);
	color: #dfe4ec;
	font-size: 13px;
	line-height: 1.4;
}
.fe-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 8px;
}
.fe-topbar__claim { opacity: .85; }
.fe-topbar__contact {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.fe-topbar__contact a {
	color: #fff !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}
.fe-topbar__contact a:hover { color: #ffd9a0 !important; }
.fe-topbar__contact .fe-ico { width: 15px; height: 15px; opacity: .8; }
.fe-topbar__hours { opacity: .7; }

/* v3.5 — redes. Mismo tamaño de icono que el teléfono, sin texto al lado,
   y con un poco menos de separación entre ellas que con los teléfonos. */
.fe-topbar__social {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.fe-topbar__social + .fe-topbar__social { margin-left: -8px; }
.fe-topbar__social .fe-ico { opacity: .7; transition: opacity .18s ease; }
.fe-topbar__social:hover .fe-ico { opacity: 1; }

@media (max-width: 782px) {
	.fe-topbar__claim { display: none; }
	.fe-topbar__inner { justify-content: center; }
	.fe-hide-sm { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.fe-hero {
	position: relative;
	background: linear-gradient(135deg, var(--fe-navy, #1c2c4c) 0%, var(--fe-navy-dark, #121d33) 100%);
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}
.fe-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(18,29,51, calc(var(--fe-overlay, .55) + .2)) 0%,
		rgba(18,29,51, var(--fe-overlay, .55)) 60%,
		rgba(18,29,51, calc(var(--fe-overlay, .55) - .15)) 100%);
}
.fe-hero {
	min-height: var(--fe-hero-mh, 0px);
}
.fe-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: var(--fe-hero-pt, 68px);
	padding-bottom: var(--fe-hero-pb, 68px);
	max-width: var(--fe-hero-w, 780px);
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.fe-hero__eyebrow {
	margin: 0 0 14px;
	font-size: var(--fe-hero-eyebrow, 12px);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #b9c4d6;
	font-weight: 600;
}
.fe-hero__title {
	margin: 0 0 16px;
	font-size: clamp(var(--fe-hero-title-min, 28px), 4.4vw, var(--fe-hero-title-max, 46px));
	line-height: var(--fe-hero-title-lh, 1.15);
	letter-spacing: var(--fe-hero-title-ls, 0px);
	font-weight: 700;
	color: #fff;
}
.fe-hero__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 18px;
	background: var(--fe-accent, #8b1e2d);
}
.fe-hero__text {
	margin: 0 0 28px;
	font-size: var(--fe-hero-text, 17px);
	line-height: 1.6;
	color: #dbe2ee;
	max-width: 620px;
}
.fe-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.fe-hero__inner {
		padding-top: var(--fe-hero-pt-m, 44px);
		padding-bottom: var(--fe-hero-pb-m, 44px);
	}
	.fe-hero__actions .fe-btn { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Trust strip                                                         */
/* ------------------------------------------------------------------ */

.fe-trust {
	background: #fff;
	border-bottom: 1px solid var(--fe-border, #dcdfe4);
}
.fe-trust__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.fe-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 20px 18px;
	border-right: 1px solid var(--fe-border, #dcdfe4);
}
.fe-trust__item:last-child { border-right: 0; }
.fe-trust__icon { color: var(--fe-accent, #8b1e2d); line-height: 0; padding-top: 2px; }
.fe-trust__copy { display: block; }
.fe-trust__copy strong {
	display: block;
	font-size: 14px;
	color: var(--fe-navy, #1c2c4c);
	line-height: 1.3;
}
.fe-trust__copy small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--fe-muted, #6b7280);
}

@media (max-width: 1024px) {
	.fe-trust__grid { grid-template-columns: repeat(2, 1fr); }
	.fe-trust__item { border-bottom: 1px solid var(--fe-border, #dcdfe4); }
	.fe-trust__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
	.fe-trust__grid { grid-template-columns: 1fr; }
	.fe-trust__item { border-right: 0; }
}

/* Reubicada al final en móvil, fuera de la portada.
   Deja de ser una franja de cabecera y pasa a ser un cierre de página. */
.fe-trust--bottom {
	background: var(--fe-bg, #f4f4f4);
	border-top: 1px solid var(--fe-border, #dcdfe4);
	border-bottom: 0;
	margin-top: 34px;
}
.fe-trust--bottom .fe-trust__item:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Colecciones                                                         */
/* ------------------------------------------------------------------ */

.fe-collections {
	background: var(--fe-bg, #f4f4f4);
	padding: 56px 0 60px;
}
.fe-collections__title {
	margin: 0 0 8px;
	text-align: center;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.25;
	color: var(--fe-navy, #1c2c4c);
}
.fe-collections__subtitle {
	margin: 0 auto 38px;
	text-align: center;
	max-width: 640px;
	color: var(--fe-muted, #6b7280);
	font-size: 15.5px;
	line-height: 1.6;
}

.fe-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
@media (max-width: 1024px) { .fe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fe-grid { grid-template-columns: 1fr; } }

.fe-card {
	background: #fff;
	border: 1px solid var(--fe-border, #dcdfe4);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.fe-card:hover {
	box-shadow: 0 10px 26px rgba(18,29,51,.13);
	transform: translateY(-2px);
}
.fe-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #eceef1;
	overflow: hidden;
}
.fe-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.fe-card:hover .fe-card__media img { transform: scale(1.04); }
.fe-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #e7e9ed, #e7e9ed 10px, #eef0f3 10px, #eef0f3 20px);
}
.fe-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--fe-accent, #8b1e2d);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
}
.fe-card__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.fe-card__title {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.25;
}
.fe-card__title a {
	color: var(--fe-navy, #1c2c4c) !important;
	text-decoration: none !important;
}
.fe-card__title a:hover { color: var(--fe-accent, #8b1e2d) !important; }
.fe-card__text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--fe-muted, #6b7280);
	flex: 1 1 auto;
}
.fe-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.fe-card__actions .fe-btn { flex: 1 1 auto; padding: 9px 12px; font-size: 13.5px; }
.fe-card__actions .fe-ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ */
/* Sección Social (v3.4)                                               */
/* La maquetación es nuestra; el contenido lo inyecta el plugin de     */
/* feeds mediante shortcode, así que se estiliza de forma defensiva.   */
/* ------------------------------------------------------------------ */

.fe-social {
	background: var(--fe-bg, #f4f4f4);
	border-top: 1px solid var(--fe-border, #dcdfe4);
	padding: 52px 0 56px;
}

.fe-social__title {
	margin: 0 0 8px;
	text-align: center;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.25;
	color: var(--fe-navy, #1c2c4c);
}
.fe-social__subtitle {
	margin: 0 auto 36px;
	text-align: center;
	max-width: 620px;
	color: var(--fe-muted, #6b7280);
	font-size: 15.5px;
	line-height: 1.6;
}

.fe-social__grid {
	display: grid;
	grid-template-columns: var(--fe-social-cols, 2fr 1fr);
	gap: 28px;
	align-items: start;
}
/* v3.4.1 — sin esto un feed ancho desborda la columna en vez de encogerse:
   los hijos de una retícula tienen min-width:auto por defecto. */
.fe-social__col { min-width: 0; }
.fe-social__col > :first-child { margin-top: 0; }

@media (max-width: 900px) {
	.fe-social__grid { grid-template-columns: 1fr; }
}

/* Cabecera de altura fija: así las dos columnas arrancan a la misma
   altura aunque una tenga enlace «Ver perfil» y la otra no. */
.fe-social__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 34px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--fe-border, #dcdfe4);
}
.fe-social__col-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fe-navy, #1c2c4c);
}
.fe-social__col-title .fe-ico { color: var(--fe-accent, #8b1e2d); }

.fe-social__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fe-accent, #8b1e2d) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.fe-social__link span { transition: transform .18s ease; }
.fe-social__link:hover span { transform: translateX(3px); }

/* El feed llega del plugin externo: solo acotamos su caja. */
.fe-social__feed { max-width: 100%; }
.fe-social__feed img { max-width: 100%; height: auto; }
.fe-social__feed iframe { max-width: 100%; }

/* La columna de Facebook suele traer un post muy alto: la contenemos. */
.fe-social__feed--fb {
	max-height: 620px;
	overflow: hidden;
	position: relative;
	border-radius: var(--fe-card-radius, 4px);
}
.fe-social__feed--fb::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60px;
	background: linear-gradient(to bottom, rgba(244,244,244,0), var(--fe-bg, #f4f4f4));
	pointer-events: none;
}

.fe-social__map { margin-top: 40px; }
.fe-social__map .fe-social__col-title { margin-bottom: 14px; }
.fe-social__map iframe {
	display: block;
	width: 100%;
	height: var(--fe-social-map-h, 340px);
	border: 0;
	border-radius: var(--fe-card-radius, 4px);
}

/* ------------------------------------------------------------------ */
/* WooCommerce                                                         */
/* ------------------------------------------------------------------ */

/* El botón del listado gana especificidad sobre el CSS de WooCommerce,
   que impone su propio fondo a .button en varios temas. */
.woocommerce ul.products li.product a.fe-btn--loop,
.fe-btn--loop {
	width: 100%;
	margin-top: 8px !important;
	box-sizing: border-box;
	gap: 6px;
	background: #fff !important;
	color: var(--fe-navy, #1c2c4c) !important;
	border: 1.5px solid var(--fe-navy, #1c2c4c) !important;
}
.woocommerce ul.products li.product a.fe-btn--loop:hover,
.fe-btn--loop:hover,
.fe-btn--loop:focus-visible {
	background: var(--fe-navy, #1c2c4c) !important;
	color: #fff !important;
	border-color: var(--fe-navy, #1c2c4c) !important;
}
.fe-loop-arrow { transition: transform .18s ease; }
.fe-btn--loop:hover .fe-loop-arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* CTA de categoría (v3.6)                                             */
/* Un solo botón de cotización por listado, en lugar de uno por        */
/* producto. El verde solo aparece donde abre una conversación real.   */
/* ------------------------------------------------------------------ */

.fe-cat-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	background: var(--fe-bg, #f4f4f4);
	border-left: 3px solid var(--fe-accent, #8b1e2d);
	border-radius: var(--fe-card-radius, 4px);
	padding: 22px 26px;
	margin: 0 0 30px;
}
.fe-cat-cta__body { flex: 1 1 320px; min-width: 0; }
.fe-cat-cta__title {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 1.3;
	color: var(--fe-navy, #1c2c4c);
}
.fe-cat-cta__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--fe-muted, #6b7280);
}
.fe-cat-cta__btn { flex: 0 0 auto; }

@media (max-width: 640px) {
	.fe-cat-cta { padding: 20px; }
	.fe-cat-cta__btn { width: 100%; }
}
.fe-loop-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fe-muted, #6b7280);
}
.fe-single-cta {
	margin: 22px 0 8px;
	padding: 18px;
	background: var(--fe-bg, #f4f4f4);
	border-left: 3px solid var(--fe-accent, #8b1e2d);
	border-radius: 3px;
}
.fe-single-cta .fe-btn { width: 100%; box-sizing: border-box; }
.fe-single-cta__note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fe-muted, #6b7280);
}

/* ------------------------------------------------------------------ */
/* Barra fija                                                          */
/* ------------------------------------------------------------------ */

.fe-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--fe-wa, #4a7c59);
	color: #fff !important;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: 0 -2px 12px rgba(0,0,0,.16);
}
.fe-sticky:hover { background: #3d6749; color: #fff !important; }
.fe-sticky--mobile { display: none; }
@media (max-width: 782px) {
	.fe-sticky--mobile { display: flex; }
	body { padding-bottom: 56px; }
	.joinchat { bottom: 62px !important; }
}

/* ---------------------------------------------------------------
   Bloque «Cómo trabajamos» — shortcode [fajardos_proceso]
   --------------------------------------------------------------- */
.fe-proceso{
	--fep-navy:#1c2c4c;
	--fep-red:#8b1e2d;
	--fep-line:#dcdfe4;
	--fep-muted:#6b7280;
	--fep-bg:#f7f8f9;
	background:#fff;
	border:1px solid var(--fep-line);
	border-radius:6px;
	padding:20px;
	margin:0 0 24px;
	font-size:14px;
	line-height:1.5;
}
.fe-proceso__title{
	margin:0 0 2px;
	font-size:16px;
	line-height:1.3;
	color:var(--fep-navy);
	letter-spacing:-.2px;
}
.fe-proceso__kicker{
	margin:0 0 16px;
	font-size:12.5px;
	color:var(--fep-muted);
}
.fe-proceso__list{
	list-style:none;
	margin:0;
	padding:0;
	counter-reset:none;
}
.fe-proceso__step{
	display:flex;
	gap:12px;
	padding:0 0 14px;
	margin:0;
	position:relative;
}
.fe-proceso__step:last-child{padding-bottom:0}
.fe-proceso__num{
	flex:0 0 auto;
	width:26px;
	height:26px;
	border-radius:50%;
	background:var(--fep-bg);
	border:1px solid var(--fep-line);
	color:var(--fep-red);
	font-size:11px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
	letter-spacing:.3px;
}
.fe-proceso__step:not(:last-child)::before{
	content:"";
	position:absolute;
	left:13px;
	top:28px;
	bottom:6px;
	width:1px;
	background:var(--fep-line);
}
.fe-proceso__body{display:block}
.fe-proceso__step-title{
	display:block;
	font-weight:600;
	color:var(--fep-navy);
	font-size:14px;
	margin-bottom:2px;
}
.fe-proceso__step-desc{
	display:block;
	color:#4a5057;
	font-size:13px;
}
.fe-proceso__foot{
	margin:16px 0 0;
	padding-top:14px;
	border-top:1px solid var(--fep-line);
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:center;
}
.fe-proceso__link{
	font-size:13px;
	color:var(--fep-navy);
	text-decoration:underline;
	text-underline-offset:2px;
}
.fe-proceso__link:hover{color:var(--fep-red)}
.fe-proceso__cta{flex:0 0 auto}

/* Variante ancha: los cuatro pasos en fila. */
@media (min-width:782px){
	.fe-proceso--ancho{padding:28px 32px}
	.fe-proceso--ancho .fe-proceso__title{font-size:22px}
	.fe-proceso--ancho .fe-proceso__kicker{margin-bottom:22px}
	.fe-proceso--ancho .fe-proceso__list{
		display:grid;
		grid-template-columns:repeat(4,1fr);
		gap:24px;
	}
	.fe-proceso--ancho .fe-proceso__step{
		display:block;
		padding:0;
	}
	.fe-proceso--ancho .fe-proceso__step::before{display:none}
	.fe-proceso--ancho .fe-proceso__num{margin-bottom:10px}
	.fe-proceso--ancho .fe-proceso__foot{justify-content:center}
}

/* ===================================================================
   Movimiento
   Criterio: skill «movimiento-fajardos».
   Solo transform y opacity. Nada por encima de 300 ms. Hover restringido
   a punteros finos. Las tres preferencias del sistema van aquí mismo.
   =================================================================== */

.fe-btn,
.fe-card,
.fe-grid {
	--fe-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Pulsación: la señal se da al presionar, no al soltar. */
.fe-btn { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s var(--fe-ease-out); }
.fe-btn:active { transform: scale(.97); }

.fe-card__media img { transition: transform .28s var(--fe-ease-out); }
.fe-card { transition: box-shadow .2s ease, transform .2s var(--fe-ease-out); }

/* El hover solo existe donde hay puntero real: en táctil dispara falsos
   positivos al tocar y la tarjeta se queda levantada tras el toque. */
@media (hover: hover) and (pointer: fine) {
	.fe-card:hover { box-shadow: 0 10px 26px rgba(18, 29, 51, .13); transform: translateY(-2px); }
	.fe-card:hover .fe-card__media img { transform: scale(1.04); }
}
@media not all and (hover: hover) {
	.fe-card:hover { box-shadow: none; transform: none; }
	.fe-card:hover .fe-card__media img { transform: none; }
}
.fe-card:active { transform: scale(.99); }

/* Entrada escalonada de la retícula. La clase la pone JavaScript, así que
   sin él los mosaicos se ven igual: nunca se ocultan por CSS a secas. */
.fe-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .28s var(--fe-ease-out) var(--fe-delay, 0ms),
	            transform .28s var(--fe-ease-out) var(--fe-delay, 0ms);
}
.fe-reveal--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	/* Menos y más suave, no cero: se queda el fundido, se va el desplazamiento. */
	.fe-reveal { opacity: 1; transform: none; transition: none; }
	.fe-btn:active,
	.fe-card:active { transform: none; }
	.fe-card:hover { transform: none; }
	.fe-card:hover .fe-card__media img { transform: none; }
}