/* ==========================================================================
   HEC Footer — Industrial Premium Dark
   Flujo: misma paleta que el header  →  navy-slate · charcoal · rojo rico
   #080c1a (bg) · #D90429 (red) · #fbbf24 (amber) · rgba-white (texto)
   ========================================================================== */

/* ── Variables locales ───────────────────────────────────────────────────── */
:root {
	--hf-bg:      #111827;   /* = hec-main-bar start */
	--hf-main-bg: #192038;   /* = hec-main-bar end   */
	--hf-bot-bg:  #0d1525;   /* barra inferior: levemente más oscuro */
	--hf-border:  rgba(255,255,255,.08);
	--hf-text:    rgba(255,255,255,.62);
	--hf-text-h:  #fbbf24;
	--hf-red:     #D90429;
	--hf-amber:   #f59e0b;
}

/* ── 1. WRAPPER RAÍZ — mismo gradiente EXACTO que hec-main-bar ──────────── */
/* Doble selector (clase + ID) + !important → gana contra el tema padre,
   Elementor inline styles y cualquier otra regla. */
#site-footer,
.hec-footer {
	background:
		radial-gradient(ellipse 90% 45% at 50% 0%,   rgba(217,4,41,.1)   0%, transparent 70%),
		radial-gradient(ellipse 55% 35% at 8%  80%,  rgba(217,4,41,.08)  0%, transparent 65%),
		radial-gradient(ellipse 50% 30% at 94% 20%,  rgba(245,158,11,.07) 0%, transparent 60%),
		linear-gradient(155deg,
			#06091a  0%,
			#111827 22%,
			#192038 50%,
			#1c2245 75%,
			#0f1628 100%
		) !important;
	position: relative;
	overflow: hidden;
}

/* Textura diagonal sutil */
.hec-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent          0,
		transparent          32px,
		rgba(255,255,255,.011) 32px,
		rgba(255,255,255,.011) 33px
	);
	pointer-events: none;
}

/* ── 2. BORDE SUPERIOR ANIMADO ───────────────────────────────────────────── */
.hec-footer__top-border {
	height: 4px;
	position: relative;
	z-index: 2;
	background: linear-gradient(
		90deg,
		#6e0114  0%,
		#D90429  20%,
		#f59e0b  50%,
		#D90429  80%,
		#6e0114  100%
	);
	background-size: 200% 100%;
	animation: hf-top-bar 5s linear infinite;
	box-shadow: 0 2px 12px rgba(217,4,41,.45);
}
@keyframes hf-top-bar {
	0%   { background-position: 0%   100%; }
	100% { background-position: 200% 100%; }
}

/* ── 3. GRID PRINCIPAL ───────────────────────────────────────────────────── */
.hec-footer__main {
	padding: 62px 0 50px;
	position: relative;
	z-index: 1;
}

/* Container */
.hec-footer__wrap {
	max-width: 1400px;
	margin:    0 auto;
	padding:   0 28px;
}

/* Grid de 4 columnas */
.hec-footer__wrap:not(.hec-footer__bottom-inner) {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.45fr;
	gap: 0 40px;
	align-items: start;
}

/* Separador vertical entre columnas */
.hec-footer__col {
	padding: 0 0 0 1px;
	position: relative;
}
.hec-footer__col + .hec-footer__col {
	border-left: 1px solid var(--hf-border);
	padding-left: 40px;
}

/* ── 4. TÍTULOS DE SECCIÓN ───────────────────────────────────────────────── */
.hec-footer__col-title {
	font-size:      11px;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	color:          rgba(255,255,255,.92);
	margin:         0 0 24px;
	padding-bottom: 14px;
	position:       relative;
	display:        flex;
	align-items:    center;
	gap:            9px;
}

/* Punto rojo decorativo */
.hec-footer__col-title::before {
	content:       '';
	display:       inline-block;
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--hf-red);
	flex-shrink:   0;
	box-shadow:    0 0 8px rgba(217,4,41,.6);
}

/* Línea rojo-ámbar que se expande al hover */
.hec-footer__col-title::after {
	content:    '';
	position:   absolute;
	bottom:     0; left: 0;
	height:     2px;
	width:      36px;
	background: linear-gradient(90deg, var(--hf-red), var(--hf-amber));
	border-radius: 2px;
	transition: width .4s cubic-bezier(.34,1.2,.64,1);
}
.hec-footer__col:hover .hec-footer__col-title::after {
	width: 64px;
}

/* ── 5. COLUMNA BRAND ────────────────────────────────────────────────────── */
.hec-footer__logo-link {
	display:         inline-block;
	text-decoration: none;
	margin-bottom:   20px;
}
.hec-footer__logo {
	display:     block;
	max-width:   160px;
	max-height:  54px;
	width:       auto;
	object-fit:  contain;
	filter:
		drop-shadow(0 0 10px rgba(217,4,41,.52))
		drop-shadow(0 3px 18px rgba(0,0,0,.58));
	transition:  filter .28s ease, transform .28s ease;
}
.hec-footer__logo-link:hover .hec-footer__logo {
	filter:
		drop-shadow(0 0 16px rgba(217,4,41,.75))
		drop-shadow(0 5px 22px rgba(0,0,0,.65));
	transform: scale(1.04);
}
.hec-footer__logo-text {
	font-size:     22px;
	font-weight:   800;
	color:         var(--hf-red);
	letter-spacing: -.5px;
	display:       block;
	margin-bottom: 18px;
}
.hec-footer__tagline {
	font-size:   13.5px;
	color:       var(--hf-text);
	line-height: 1.68;
	margin:      0 0 28px;
	max-width:   250px;
}

/* ── Social icons ────────────────────────────────────────────────────────── */
.hec-footer__social {
	display:   flex;
	gap:       8px;
	flex-wrap: wrap;
}
.hec-footer__social-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      rgba(255,255,255,.08);
	color:           rgba(255,255,255,.68);
	text-decoration: none;
	border:          1px solid rgba(255,255,255,.08);
	transition:
		background  .22s ease,
		color       .22s ease,
		transform   .22s ease,
		box-shadow  .22s ease,
		border-color .22s ease;
	flex-shrink: 0;
	position: relative;
}
.hec-footer__social-icon:hover {
	color:      #fff;
	transform:  translateY(-3px);
	text-decoration: none;
}
.hec-footer__social-icon.hec-social-icon--facebook:hover  { background: #1877F2; border-color: #1877F2; box-shadow: 0 5px 16px rgba(24,119,242,.48); }
.hec-footer__social-icon.hec-social-icon--instagram:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #dc2743; box-shadow: 0 5px 16px rgba(220,39,67,.42); }
.hec-footer__social-icon.hec-social-icon--linkedin:hover  { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 5px 16px rgba(10,102,194,.48); }
.hec-footer__social-icon.hec-social-icon--youtube:hover   { background: #FF0000; border-color: #FF0000; box-shadow: 0 5px 16px rgba(255,0,0,.42); }
.hec-footer__social-icon.hec-social-icon--tiktok:hover    { background: #010101; border-color: #69c9d0; box-shadow: 0 5px 16px rgba(105,201,208,.38); }
.hec-footer__social-icon.hec-social-icon--whatsapp:hover  { background: #25D366; border-color: #25D366; box-shadow: 0 5px 16px rgba(37,211,102,.42); }

/* ── Pulse consecutivo social icons footer ───────────────────────── */
/* Redefinir keyframe aquí para no depender del orden de carga de header.css */
@keyframes hec-pulse-ring {
	0%        { box-shadow: 0 0 0 0    rgba(255,255,255,.6); }
	13%       { box-shadow: 0 0 0 9px  rgba(255,255,255,0);  }
	14%, 100% { box-shadow: 0 0 0 0    rgba(255,255,255,0);  }
}
/* overflow:visible aísla el icono del overflow:hidden del .hec-footer padre */
.hec-footer__social-icon {
	overflow: visible;
}
.hec-footer__social-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: hec-pulse-ring 4.5s ease-out infinite;
	pointer-events: none;
}
.hec-footer__social .hec-footer__social-icon:nth-child(1)::after { animation-delay: 0.00s; }
.hec-footer__social .hec-footer__social-icon:nth-child(2)::after { animation-delay: 0.75s; }
.hec-footer__social .hec-footer__social-icon:nth-child(3)::after { animation-delay: 1.50s; }
.hec-footer__social .hec-footer__social-icon:nth-child(4)::after { animation-delay: 2.25s; }
.hec-footer__social .hec-footer__social-icon:nth-child(5)::after { animation-delay: 3.00s; }
.hec-footer__social .hec-footer__social-icon:nth-child(6)::after { animation-delay: 3.75s; }
.hec-footer__social-icon:hover::after { animation-play-state: paused; opacity: 0; }

/* ── 6. LISTAS DE NAVEGACIÓN ─────────────────────────────────────────────── */
.hec-footer__nav-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        2px;
}
.hec-footer__nav-list li a,
.hec-footer__nav-list > li > a {
	display:         flex;
	align-items:     center;
	gap:             9px;
	padding:         7px 0;
	color:           var(--hf-text);
	font-size:       13.5px;
	text-decoration: none;
	transition:      color .2s ease, transform .2s ease;
	position:        relative;
	border-bottom:   1px solid transparent;
}

/* Punto rojo que aparece al hover */
.hec-footer__nav-list li a::before,
.hec-footer__nav-list > li > a::before {
	content:       '';
	width:         4px;
	height:        4px;
	border-radius: 50%;
	background:    var(--hf-red);
	opacity:       0;
	flex-shrink:   0;
	transition:    opacity .2s ease, transform .22s cubic-bezier(.34,1.4,.64,1);
	transform:     scale(0);
}
.hec-footer__nav-list li a:hover,
.hec-footer__nav-list > li > a:hover {
	color:           var(--hf-text-h);
	transform:       translateX(8px);
	text-decoration: none;
}
.hec-footer__nav-list li a:hover::before,
.hec-footer__nav-list > li > a:hover::before {
	opacity:   1;
	transform: scale(1);
}

/* ── 7. LISTA DE CONTACTO ────────────────────────────────────────────────── */
.hec-footer__contact-list {
	list-style: none;
	margin:     0 0 24px;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        14px;
}
.hec-footer__contact-item {
	display:     flex;
	align-items: flex-start;
	gap:         12px;
}
.hec-footer__contact-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           30px;
	height:          30px;
	border-radius:   8px;
	background:      rgba(217,4,41,.12);
	border:          1px solid rgba(217,4,41,.2);
	color:           var(--hf-red);
	flex-shrink:     0;
	transition:      background .22s, box-shadow .22s;
}
.hec-footer__contact-item:hover .hec-footer__contact-icon {
	background: rgba(217,4,41,.22);
	box-shadow: 0 2px 10px rgba(217,4,41,.28);
}
.hec-footer__contact-item a {
	color:           var(--hf-text);
	text-decoration: none;
	font-size:       13.5px;
	line-height:     1.5;
	padding-top:     6px;
	transition:      color .2s ease;
}
.hec-footer__contact-item a:hover { color: var(--hf-text-h); }

/* ── Botón WhatsApp ──────────────────────────────────────────────────────── */
.hec-footer__whatsapp-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	padding:         12px 22px;
	background:      linear-gradient(135deg, #0e7a6c 0%, #128c7e 40%, #25d366 100%);
	color:           #fff;
	font-size:       13px;
	font-weight:     700;
	border-radius:   10px;
	text-decoration: none;
	box-shadow:      0 4px 20px rgba(37,211,102,.32);
	transition:      opacity .2s ease, transform .22s ease, box-shadow .22s ease;
	letter-spacing:  .3px;
	white-space:     nowrap;
	animation:       hf-wa-pulse 2.8s ease-out infinite;
}
.hec-footer__whatsapp-btn:hover {
	opacity:          .9;
	transform:        translateY(-3px);
	box-shadow:       0 8px 26px rgba(37,211,102,.52);
	text-decoration:  none;
	color:            #fff;
	animation-play-state: paused;
}
@keyframes hf-wa-pulse {
	0%   { box-shadow: 0 4px 20px rgba(37,211,102,.32), 0 0 0 0   rgba(37,211,102,.38); }
	65%  { box-shadow: 0 4px 20px rgba(37,211,102,.32), 0 0 0 12px rgba(37,211,102,0);  }
	100% { box-shadow: 0 4px 20px rgba(37,211,102,.32), 0 0 0 12px rgba(37,211,102,0);  }
}

/* ── ELEMENTOR section data-id="1b23de61" ───────────────────────────────── */
.elementor-element-1b23de61,
[data-id="1b23de61"] {
	background: linear-gradient(180deg, #111827 0%, #192038 100%) !important;
	background-color: #111827 !important;
}

/* ── 8. BARRA INFERIOR — ligeramente más oscura para diferenciarla ──────── */
.hec-footer__bottom {
	background: #0d1525 !important;
	position:   relative;
	z-index:    1;
}
/* Línea gradiente rojo-ámbar antes de la barra */
.hec-footer__bottom::before {
	content:  '';
	position: absolute;
	top: -1px; left: 0; right: 0;
	height:   1px;
	background: linear-gradient(90deg, transparent, rgba(217,4,41,.45) 30%, rgba(245,158,11,.55) 50%, rgba(217,4,41,.45) 70%, transparent);
}

.hec-footer__bottom-inner {
	display:         flex !important;
	align-items:     center;
	justify-content: space-between;
	padding-top:     20px;
	padding-bottom:  20px;
	gap:             16px;
	flex-wrap:       wrap;
}

/* Copyright */
.hec-footer__copy {
	font-size:   12.5px;
	color:       rgba(255,255,255,.38);
	margin:      0;
	line-height: 1.5;
}
.hec-footer__copy a {
	color:           rgba(255,255,255,.55);
	text-decoration: none;
	transition:      color .18s;
}
.hec-footer__copy a:hover { color: var(--hf-text-h); }

/* Lado derecho: menú legal + back-to-top */
.hec-footer__bottom-right {
	display:     flex;
	align-items: center;
	gap:         20px;
}

/* Menú legal */
.hec-footer__legal-menu {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	gap:        18px;
	flex-wrap:  wrap;
}
.hec-footer__legal-menu li a {
	font-size:       12px;
	color:           rgba(255,255,255,.34);
	text-decoration: none;
	transition:      color .18s;
	white-space:     nowrap;
}
.hec-footer__legal-menu li a:hover { color: rgba(255,255,255,.72); }

/* Botón back-to-top */
.hec-footer__back-top {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	background:      rgba(217,4,41,.14);
	border:          1px solid rgba(217,4,41,.28);
	border-radius:   50%;
	color:           var(--hf-red);
	text-decoration: none;
	flex-shrink:     0;
	transition:
		background   .22s ease,
		border-color .22s ease,
		transform    .3s  cubic-bezier(.34,1.3,.64,1),
		box-shadow   .22s ease;
}
.hec-footer__back-top:hover {
	background:   var(--hf-red);
	border-color: var(--hf-red);
	color:        #fff;
	transform:    translateY(-4px);
	box-shadow:   0 6px 20px rgba(217,4,41,.44);
	text-decoration: none;
}

/* ── 9. STAGGER DE ENTRADA ───────────────────────────────────────────────── */
@keyframes hf-col-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0);    }
}
.hec-footer__col                   { animation: hf-col-in .5s ease both; }
.hec-footer__col:nth-child(1)      { animation-delay: .06s; }
.hec-footer__col:nth-child(2)      { animation-delay: .14s; }
.hec-footer__col:nth-child(3)      { animation-delay: .22s; }
.hec-footer__col:nth-child(4)      { animation-delay: .30s; }

/* ── 10. TABLET ≤ 1024px ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hec-footer__wrap:not(.hec-footer__bottom-inner) {
		grid-template-columns: 1.6fr 1fr 1fr;
		gap: 0 28px;
	}
	.hec-footer__col--contact {
		grid-column: 1 / -1;
		border-left: none !important;
		border-top: 1px solid var(--hf-border);
		padding-left: 0 !important;
		padding-top: 36px;
		margin-top: 8px;
	}
	.hec-footer__col--contact .hec-footer__whatsapp-btn { display: inline-flex; }
	.hec-footer__tagline { max-width: 100%; }
}

/* ── 11. MOBILE ≤ 767px ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.hec-footer__main { padding: 40px 0 32px; }
	.hec-footer__wrap { padding: 0 18px; }

	.hec-footer__wrap:not(.hec-footer__bottom-inner) {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Todas las columnas con separador top */
	.hec-footer__col + .hec-footer__col {
		border-left:   none;
		padding-left:  0;
		border-top:    1px solid var(--hf-border);
		padding-top:   28px;
		margin-top:    28px;
	}
	.hec-footer__col--contact {
		border-left:   none !important;
		padding-left:  0   !important;
		border-top:    1px solid var(--hf-border) !important;
		padding-top:   28px !important;
		margin-top:    28px !important;
	}

	.hec-footer__tagline  { max-width: 100%; }
	.hec-footer__whatsapp-btn { width: 100%; justify-content: center; }

	.hec-footer__bottom-inner {
		flex-direction: column;
		align-items:    flex-start;
		gap:            12px;
	}
	.hec-footer__bottom-right {
		width: 100%;
		justify-content: space-between;
	}
	.hec-footer__legal-menu { gap: 12px; }

	/* Sin stagger en mobile */
	.hec-footer__col { animation-delay: 0s !important; }
}

/* ── 12. REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.hec-footer__top-border   { animation: none !important; }
	.hec-footer__whatsapp-btn { animation: none !important; box-shadow: 0 4px 20px rgba(37,211,102,.32) !important; }
	.hec-footer__col          { animation: none !important; opacity: 1 !important; transform: none !important; }
}
