/* Maccio – Contactos por Departamento
 * Estilos de las tarjetas (replican el HTML original).
 * Se mantiene también la clase .contacto-maccio en el wrapper para heredar
 * los estilos de tipografías Gotham ya cargados por el sitio.
 */

.maccio-contactos{
	--brand:#960000;
	--text:#1a1a1a;
	--muted:#6b7280;
	--bg:#fff;
	--card:#fff;
	--radius:18px;
	max-width:1200px;
	margin:0 auto;
	padding:clamp(16px,4vw,40px);
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
	color:var(--text);
	background:var(--bg);
}

.maccio-contactos .contacto-grid{
	display:grid;
	grid-template-columns:repeat(12,1fr);
	gap:clamp(14px,2.2vw,22px);
}

.maccio-contactos .card{
	grid-column:span 12;
	background:var(--card);
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:0 8px 24px rgba(0,0,0,.08);
	display:flex;
	flex-direction:column;
	transition:transform .2s ease, box-shadow .2s ease;
}
@media(min-width:640px){ .maccio-contactos .card{ grid-column:span 6; } }
@media(min-width:980px){ .maccio-contactos .card{ grid-column:span 4; } }
.maccio-contactos .card:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 28px rgba(0,0,0,.12);
}

.maccio-contactos .photo-wrap{
	aspect-ratio:4/5;
	background:#f3f4f6;
	display:grid;
	place-items:center;
	overflow:hidden;
}
.maccio-contactos .photo{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.maccio-contactos .body{
	padding:16px clamp(14px,2vw,20px);
	display:grid;
	gap:6px;
}
.maccio-contactos .depto{ font-size:.9rem; color:var(--muted); letter-spacing:.2px; }
.maccio-contactos .name{ font-size:clamp(1.05rem,2.3vw,1.25rem); font-weight:700; line-height:1.25; margin-top:2px; }

.maccio-contactos .btns{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-top:12px;
}
.maccio-contactos .btns--single{ grid-template-columns:1fr; }

.maccio-contactos .btn{
	border:2px solid var(--brand);
	color:var(--brand);
	text-decoration:none;
	padding:10px 12px;
	border-radius:999px;
	font-weight:700;
	font-size:.95rem;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	transition:background .15s ease, color .15s ease, transform .06s ease;
	user-select:none;
}
.maccio-contactos .btn:hover{ background:var(--brand); color:#fff; }
.maccio-contactos .btn:active{ transform:translateY(1px); }

/* Íconos vía mask para compatibilidad. */
.maccio-contactos .ico{ width:18px; height:18px; display:inline-block; flex:0 0 18px; }
.maccio-contactos .ico-mail{
	-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 2v.01L12 13 4 6.01V6h16ZM4 18V8.24l7.4 6.17a1 1 0 0 0 1.2 0L20 8.24V18H4Z"/></svg>') center/contain no-repeat;
	mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 2v.01L12 13 4 6.01V6h16ZM4 18V8.24l7.4 6.17a1 1 0 0 0 1.2 0L20 8.24V18H4Z"/></svg>') center/contain no-repeat;
	background:currentColor;
}
.maccio-contactos .ico-wa{
	-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.5 3.5A11 11 0 0 0 3.1 18.9L2 22l3.3-1.1A11 11 0 0 0 22 11a11 11 0 0 0-1.5-7.5ZM11 20a9 9 0 1 1 7.4-3.8l-.3.4.8 2.2-2.3-.8-.4.2A9 9 0 0 1 11 20Zm5-6.3c-.3-.2-1.7-.8-1.9-.9s-.5-.1-.7.2c-.2.3-.8.9-.9 1-.2.1-.3.1-.6 0s-1.2-.5-2.3-1.5c-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.4.2-.6.2-.2.3-.3.4-.5.2-.1.3-.3.4-.5.1-.2 0-.4 0-.6 0-.2-.7-1.8-1-2.5-.3-.7-.5-.6-.7-.6h-.6c-.2 0-.6.1-.9.4s-1.3 1.2-1.3 2.9 1.3 3.3 1.5 3.5c.2.3 2.6 4 6.2 5.5 3.6 1.4 3.6.9 4.3.9.7 0 2.1-.8 2.4-1.7.3-.9.3-1.6.2-1.7-.1-.1-.3-.2-.6-.4Z"/></svg>') center/contain no-repeat;
	mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.5 3.5A11 11 0 0 0 3.1 18.9L2 22l3.3-1.1A11 11 0 0 0 22 11a11 11 0 0 0-1.5-7.5ZM11 20a9 9 0 1 1 7.4-3.8l-.3.4.8 2.2-2.3-.8-.4.2A9 9 0 0 1 11 20Zm5-6.3c-.3-.2-1.7-.8-1.9-.9s-.5-.1-.7.2c-.2.3-.8.9-.9 1-.2.1-.3.1-.6 0s-1.2-.5-2.3-1.5c-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.4.2-.6.2-.2.3-.3.4-.5.2-.1.3-.3.4-.5.1-.2 0-.4 0-.6 0-.2-.7-1.8-1-2.5-.3-.7-.5-.6-.7-.6h-.6c-.2 0-.6.1-.9.4s-1.3 1.2-1.3 2.9 1.3 3.3 1.5 3.5c.2.3 2.6 4 6.2 5.5 3.6 1.4 3.6.9 4.3.9.7 0 2.1-.8 2.4-1.7.3-.9.3-1.6.2-1.7-.1-.1-.3-.2-.6-.4Z"/></svg>') center/contain no-repeat;
	background:currentColor;
}

/* ------------------------------------------------------------------ *
 *  Animación de entrada por scroll
 *  El estado oculto solo se aplica cuando JS agrega .maccio-anim
 *  (con IntersectionObserver disponible y sin prefers-reduced-motion).
 *  Sin JS / sin soporte: las tarjetas se ven normalmente.
 * ------------------------------------------------------------------ */
.maccio-contactos.maccio-anim .card {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s cubic-bezier(.22,.61,.36,1),
	            transform .6s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}

.maccio-contactos.maccio-anim .card.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.maccio-contactos.maccio-anim .card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}