/* ==================================================================
   Pie de página (BC_Pie). Va después de bamze-cotizacion.css.
   Todo cuelga de #footer o de clases bc-pie-, para no tocar nada
   fuera del pie. La estructura y las columnas siguen siendo las de
   Porto: aquí solo cambia el aspecto.
   ================================================================== */

#footer {
	--bc-pie-azul: #01116E;
	--bc-pie-hondo: #000A4A;          /* barra inferior */
	--bc-pie-suave: #B4C0F2;          /* etiquetas: 8,1:1 sobre el azul */
	--bc-pie-linea: rgba(255, 255, 255, .14);
	--bc-pie-verde: #5FD3A6;          /* "copiado" */
}

/* ---------- Iconos de línea compartidos ---------- */
.bc-pie-contacto svg,
.bc-pie-telefonos svg {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Dirección ---------- */
#footer .bc-pie-direccion {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	font-style: normal;
	color: #fff;
	line-height: 1.5;
}
#footer .bc-pie-icono {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--bc-pie-suave);
}
#footer .bc-pie-direccion__texto > span {
	display: block;
}
#footer .bc-pie-mapa {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bc-pie-suave);
	text-decoration: none;
}
#footer .bc-pie-mapa svg {
	width: 13px;
	height: 13px;
	stroke-width: 2.4;
}
#footer .bc-pie-mapa:hover,
#footer .bc-pie-mapa:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Filas de correo y teléfono ---------- */
#footer .bc-pie-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer .bc-pie-fila {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 -10px 2px;
	padding: 0 4px 0 10px;
	border-radius: 10px;
	transition: background-color .15s ease;
}
#footer .bc-pie-fila:hover {
	background: rgba(255, 255, 255, .06);
}
#footer .bc-pie-enlace {
	flex: 1;
	min-width: 0;
	display: block;
	padding: 6px 0;
	color: #fff;
	text-decoration: none;
}
#footer .bc-pie-etiqueta {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bc-pie-suave);
}
#footer .bc-pie-valor {
	display: block;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
#footer .bc-pie-enlace:hover .bc-pie-valor,
#footer .bc-pie-enlace:focus-visible .bc-pie-valor,
#footer .bc-pie-tel:hover .bc-pie-tel__numero {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Botón de copiar: aparece al pasar el cursor; en táctil, siempre. */
#footer .bc-pie-copiar {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--bc-pie-suave);
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
#footer .bc-pie-fila:hover .bc-pie-copiar,
#footer .bc-pie-copiar:focus-visible,
#footer .bc-pie-copiar.is-copiado {
	opacity: 1;
}
#footer .bc-pie-copiar:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
#footer .bc-pie-copiar svg {
	width: 16px;
	height: 16px;
}
#footer .bc-pie-copiar__listo,
#footer .bc-pie-copiar.is-copiado .bc-pie-copiar__copiar {
	display: none;
}
#footer .bc-pie-copiar.is-copiado .bc-pie-copiar__listo {
	display: block;
	stroke-width: 2.6;
}
#footer .bc-pie-copiar.is-copiado {
	color: var(--bc-pie-verde);
}

/* ---------- Teléfonos ---------- */
#footer .bc-pie-grupo + .bc-pie-grupo {
	margin-top: 14px;
}
#footer .bc-pie-area {
	margin: 0 0 2px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bc-pie-suave);
}
#footer .bc-pie-tel {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
#footer .bc-pie-tel__pais {
	font-size: 13px;
	color: var(--bc-pie-suave);
}
#footer .bc-pie-tel__numero {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
}

/* ---------- Libro de Reclamaciones: la imagen oficial, sin cambiarla ---------- */
#footer a[href*="libro-de-reclamaciones"] {
	display: inline-block;
	margin-top: 6px;
	border-radius: 6px;
	line-height: 0;
	transition: transform .15s ease, box-shadow .15s ease;
}
#footer a[href*="libro-de-reclamaciones"] img {
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
#footer a[href*="libro-de-reclamaciones"]:hover,
#footer a[href*="libro-de-reclamaciones"]:focus-visible {
	transform: translateY(-2px);
}
#footer a[href*="libro-de-reclamaciones"]:hover img {
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

/* ---------- Redes: un mismo dibujo para las cinco ----------
   Porto pinta cada red con su color y un icono de su fuente; en esta
   versión TikTok no tiene icono (salía un cuadro negro). Se usa una
   máscara SVG propia para las cinco y el color del texto. */
#footer .share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#footer .share-links a {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .3) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: 0 !important;
	overflow: hidden;
	box-shadow: none !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
#footer .share-links a::before {
	content: "" !important;
	position: static !important;
	display: block !important;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	font-family: inherit !important;
	background-color: currentColor;
	-webkit-mask: var(--bc-red) center / contain no-repeat;
	mask: var(--bc-red) center / contain no-repeat;
}
#footer .share-links a::after {
	display: none !important;
}
#footer .share-links a:hover,
#footer .share-links a:focus-visible {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--bc-pie-azul) !important;
	transform: translateY(-2px);
}
#footer .share-links a.share-facebook {
	--bc-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8.2h2.8l.4-3.2h-3.2V8.5c0-.9.3-1.6 1.6-1.6h1.7V4.1c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.3H7.3v3.2h2.8V22z'/%3E%3C/svg%3E");
}
#footer .share-links a.share-youtube {
	--bc-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M21.6 7.2a2.6 2.6 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.6 2.6 0 0 0 2.4 7.2 27 27 0 0 0 2 12a27 27 0 0 0 .4 4.8 2.6 2.6 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.6 2.6 0 0 0 1.8-1.8A27 27 0 0 0 22 12a27 27 0 0 0-.4-4.8zM10 15V9l5.2 3z'/%3E%3C/svg%3E");
}
#footer .share-links a.share-instagram {
	--bc-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
}
#footer .share-links a.share-linkedin {
	--bc-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='4' height='12'/%3E%3Ccircle cx='5' cy='5' r='2.2'/%3E%3Cpath d='M10 9h3.8v1.7c.6-1 1.9-2 3.9-2 3.3 0 4.3 2 4.3 5.3V21h-4v-6.2c0-1.5-.3-2.8-1.9-2.8s-2.1 1.2-2.1 2.8V21h-4z'/%3E%3C/svg%3E");
}
#footer .share-links a.share-tiktok {
	--bc-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 3c.3 2.2 1.7 3.7 4 3.9v3.3a7.4 7.4 0 0 1-4-1.3v6.4a5.7 5.7 0 1 1-5.7-5.7l.9.1v3.4a2.4 2.4 0 1 0 1.6 2.2V3z'/%3E%3C/svg%3E");
}

/* ---------- Barra inferior: derechos | enlaces, en una fila ---------- */
#footer .footer-bottom {
	background: var(--bc-pie-hondo);
	border-top: 0;
	font-size: 13px;
}
#footer .footer-bottom,
#footer .footer-copyright {
	color: var(--bc-pie-suave);
}
/* La clase del body la pone BC_Pie solo cuando armó la barra. */
.bc-pie-con-barra #footer .footer-bottom .footer-center {
	display: block;
	width: 100%;
	text-align: left;
}
.bc-pie-con-barra #footer .footer-copyright {
	display: block;
}
#footer .bc-pie-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 32px;
}
#footer .bc-pie-barra__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
}
#footer .footer-copyright a {
	color: #fff;
	text-decoration: none;
}
#footer .bc-pie-barra__enlaces a {
	color: var(--bc-pie-suave);
}
#footer .bc-pie-barra__enlaces a.bc-pie-personal {
	opacity: .75;
}
#footer .footer-copyright a:hover,
#footer .footer-copyright a:focus-visible {
	color: #fff;
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La franja aparte de BC_Acceso: con la barra armada ya no se imprime
   (filtro bc_acceso_franja); si sale, que tenga el mismo fondo. */
.bc-acceso-pie {
	background: #000A4A;
	border-top: 0;
	padding-top: 0;
	padding-bottom: 14px;
}

/* ---------- Foco visible con teclado ---------- */
#footer .bc-pie-enlace:focus-visible,
#footer .bc-pie-copiar:focus-visible,
#footer .bc-pie-mapa:focus-visible,
#footer .share-links a:focus-visible,
#footer a[href*="libro-de-reclamaciones"]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------- Celular y táctil ---------- */
@media (hover: none), (max-width: 767px) {
	#footer .bc-pie-copiar {
		opacity: 1;
	}
}
@media (max-width: 767px) {
	#footer .bc-pie-enlace {
		padding: 9px 0; /* zona de toque de 44 px o más */
	}
	/* En el celular, uno debajo del otro y alineados a la izquierda. */
	#footer .bc-pie-barra {
		flex-direction: column;
		align-items: flex-start;
	}
	/* Deja libre la esquina de los botones flotantes del carrito y WhatsApp. */
	.bc-pie-con-barra #footer .footer-bottom,
	.bc-acceso-pie {
		padding-bottom: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#footer .bc-pie-fila,
	#footer .share-links a,
	#footer a[href*="libro-de-reclamaciones"] {
		transition: none;
	}
}