/*
 * JJ Contactos — estilos de front.
 *
 * Reglas de convivencia con el tema Equipo (Enovathemes):
 *  - Todos los selectores empiezan por `.jjc-`. No se estiliza ningún elemento
 *    global (body, a, h1…) ni ninguna clase del tema (`et-*`, `hbe`, `vc_*`).
 *  - No se usa `!important` salvo en las utilidades de visibilidad del botón
 *    flotante, donde es necesario para ganarle a las media queries del tema.
 *  - Las variables `--jjc-*` están acotadas a estos componentes.
 */

.jjc-bloque {
	--jjc-color: #25d366;
	--jjc-texto: inherit;
	box-sizing: border-box;
	max-width: 100%;
}

.jjc-bloque *,
.jjc-float * {
	box-sizing: border-box;
}

.jjc-bloque__titulo {
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 1.3;
}

.jjc-bloque__subtitulo {
	margin: 0 0 18px;
	opacity: .85;
}

.jjc-align-center { text-align: center; }
.jjc-align-right  { text-align: right; }

.jjc-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.jjc-cols-2 .jjc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jjc-cols-3 .jjc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jjc-cols-4 .jjc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.jjc-card {
	--jjc-color: #25d366;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
	border: 1px solid rgba(128, 128, 128, .28);
	border-radius: 10px;
	border-top: 3px solid var(--jjc-color);
	background: rgba(255, 255, 255, .04);
}

.jjc-card--compacta {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	gap: 6px;
}

.jjc-card__titulo {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.jjc-card__datos {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jjc-card__dato {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.5;
}

.jjc-card__dato::before { content: none; }

.jjc-etiqueta {
	font-weight: 600;
	opacity: .8;
}

.jjc-link {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	word-break: break-word;
}

.jjc-link:hover,
.jjc-link:focus {
	border-bottom-color: currentColor;
}

.jjc-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.jjc-svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.jjc-card__titulo .jjc-svg { width: 1.1em; height: 1.1em; }

/* --- Botón --- */

.jjc-btn {
	--jjc-color: #25d366;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 4px;
	padding: 10px 18px;
	border: 2px solid var(--jjc-color);
	border-radius: 999px;
	background: var(--jjc-color);
	color: var(--jjc-texto-boton, #fff);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
	align-self: flex-start;
}

/* Respeta a quien pidió menos animación en el sistema. */
@media (prefers-reduced-motion: reduce) {
	.jjc-btn,
	.jjc-float__boton {
		transition: none;
	}
}

.jjc-align-center .jjc-btn { align-self: center; }
.jjc-align-right  .jjc-btn { align-self: flex-end; }

.jjc-btn:hover,
.jjc-btn:focus {
	color: #fff;
	opacity: .88;
}

.jjc-btn .jjc-svg { width: 1.15em; height: 1.15em; }

.jjc-btn--borde {
	background: transparent;
	color: var(--jjc-color);
}

.jjc-btn--borde:hover,
.jjc-btn--borde:focus {
	background: var(--jjc-color);
	color: #fff;
}

.jjc-btn--chico  { padding: 7px 14px;  font-size: .9em; }
.jjc-btn--grande { padding: 14px 26px; font-size: 1.1em; }

/* --- Botón flotante --- */

.jjc-float {
	--jjc-color: #25d366;
	--jjc-float-lateral: 20px;
	--jjc-float-inferior: 20px;
	position: fixed;
	bottom: var(--jjc-float-inferior);
	/* Deliberadamente por debajo de los 99999+ que usan los menús móviles y el
	   selector de idioma del sitio: este botón nunca debe taparlos. */
	z-index: 9998;
	display: flex;
	/* El HTML emite botón → panel (orden de tabulación correcto); aquí se
	   invierte para que el panel se vea encima del botón. */
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 12px;
	font-size: 15px;
	line-height: 1.35;
}

.jjc-float--right { right: var(--jjc-float-lateral); }
.jjc-float--left  { left: var(--jjc-float-lateral); align-items: flex-start; }

@media (max-width: 767px) {
	.jjc-float--sin-movil { display: none !important; }
}

@media (min-width: 768px) {
	.jjc-float--sin-escritorio { display: none !important; }
}

.jjc-float__boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--jjc-color);
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	transition: transform .2s ease, box-shadow .2s ease;
}

.jjc-float__boton:hover,
.jjc-float__boton:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.jjc-float__boton .jjc-svg { width: 24px; height: 24px; }

@media (max-width: 480px) {
	.jjc-float__etiqueta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.jjc-float__boton { padding: 15px; }
}

/* El atributo `hidden` del panel se refuerza aquí: la regla del navegador
   pierde frente a cualquier regla de autor que fije `display`. */
.jjc-float__panel[hidden] {
	display: none;
}

.jjc-float__panel {
	width: 290px;
	max-width: calc(100vw - 40px);
	padding: 16px;
	border-radius: 14px;
	background: #fff;
	color: #222;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.jjc-float__titulo {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #222;
}

.jjc-float__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jjc-float__item { margin: 0 0 8px; padding: 0; }
.jjc-float__item:last-child { margin-bottom: 0; }
.jjc-float__item::before { content: none; }

.jjc-float__opcion {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .04);
	color: #222;
	text-decoration: none;
	transition: background-color .2s ease;
}

.jjc-float__opcion:hover,
.jjc-float__opcion:focus {
	background: rgba(0, 0, 0, .09);
	color: #222;
}

.jjc-float__opcion .jjc-ico {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--jjc-color);
	color: #fff;
}

.jjc-float__opcion .jjc-svg { width: 19px; height: 19px; }

.jjc-float__opcion-texto { display: flex; flex-direction: column; }
.jjc-float__opcion-texto strong { font-size: 14px; }
.jjc-float__opcion-texto small { font-size: 12px; opacity: .7; }

/* Widget en columnas de footer oscuras: hereda el color del contenedor. */
.jjc-widget .jjc-card { border-color: rgba(255, 255, 255, .18); }


/* Legibilidad en cualquier contexto (footer oscuro incluido).
   `.jjc-bloque X` = especificidad 0,2,0, que gana a `.et-footer a` (0,1,1)
   del tema, sin usar !important. Todo hereda el color del contenedor. */
.jjc-bloque .jjc-card__titulo,
.jjc-bloque .jjc-etiqueta,
.jjc-bloque .jjc-link,
.jjc-bloque .jjc-dato,
.jjc-widget .jjc-card__titulo,
.jjc-widget .jjc-link,
.jjc-widget .jjc-dato {
	color: inherit;
}

.jjc-bloque .jjc-link,
.jjc-widget .jjc-link {
	text-decoration: none;
}

.jjc-bloque .jjc-link:hover,
.jjc-bloque .jjc-link:focus,
.jjc-widget .jjc-link:hover,
.jjc-widget .jjc-link:focus {
	text-decoration: underline;
}

/* Enlaces del módulo dentro del header del tema (barra superior oscura):
   heredan el gris claro del tema para mantener el contraste, y blanco al pasar.
   Se usa el ancestro del tema sólo como contexto; se estiliza únicamente
   nuestra propia clase `.jjc-link`, no elementos del tema. */
.header .jjc-link,
.et-header .jjc-link {
	color: #bdbdbd;
}

.header .jjc-link:hover,
.header .jjc-link:focus,
.et-header .jjc-link:hover,
.et-header .jjc-link:focus {
	color: #ffffff;
}

/* Footer oscuro del tema Equipo: el color heredado es un gris casi negro
   (bajo contraste). Aquí el módulo usa colores claros explícitos y de alto
   contraste. Sólo aplica dentro del footer del tema; en páginas de fondo
   claro (home, contacto) el módulo mantiene el color heredado oscuro. */
.et-footer .jjc-card__titulo,
.footer .jjc-card__titulo {
	color: #ffffff;
}

.et-footer .jjc-card__dato,
.et-footer .jjc-etiqueta,
.et-footer .jjc-dato,
.footer .jjc-card__dato,
.footer .jjc-etiqueta,
.footer .jjc-dato {
	color: #e6e6e6;
}

.et-footer .jjc-link,
.footer .jjc-link {
	color: #f0f0f0;
}

.et-footer .jjc-link:hover,
.et-footer .jjc-link:focus,
.footer .jjc-link:hover,
.footer .jjc-link:focus {
	color: #ffffff;
}

/* Legibilidad del texto propio del tema en el footer oscuro (dirección y
   horario, clase `.footer-text`). Es una excepción consciente a "no estilar
   clases del tema": mejora de contraste pedida por el dueño, acotada al footer
   y sólo al color del texto. No cambia tamaños, tipografía ni maquetación. */
.et-footer .footer-text,
.et-footer .footer-text p,
.footer .footer-text,
.footer .footer-text p {
	color: #d6d6d6;
}

.et-footer .footer-text a,
.footer .footer-text a {
	color: #eeeeee;
}

.et-footer .footer-text a:hover,
.et-footer .footer-text a:focus,
.footer .footer-text a:hover,
.footer .footer-text a:focus {
	color: #ffffff;
}