/* =========================================================
   CMC — contacto.css
   Contact page: contact detail cards + map panel.
   Requires theme.css + site.css.
   .ccard .ic uses the shared "icon badge" component in site.css.
   ========================================================= */

.contact { padding-block: clamp(40px,5vw,80px); }
.contact .wrap { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px,5vw,56px); align-items:start; }

.cards { display:flex; flex-direction:column; gap: 16px; }
.ccard { display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 24px; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.ccard:hover { border-color: var(--cay-ink-300); box-shadow: var(--shadow-sm); }
.ccard .t { font-size: var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--cay-ink-400); font-weight: var(--fw-semibold); }
.ccard .v { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--cay-black-900); margin-top: 4px; display:flex; flex-direction:column; gap: 2px; }
.ccard .v a:hover { color: var(--cay-red-600); }
.ccard .v small { font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--cay-ink-500); }

.socials { display:flex; gap: 12px; margin-top: 4px; }
.socials a { display:inline-flex; align-items:center; gap:8px; font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--cay-ink-700); border:1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 9px 16px; transition: all var(--dur-2); }
.socials a:hover { border-color: var(--cay-black-800); color: var(--cay-black-900); }

.mapwrap { position:relative; border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--color-border); }
.mapwrap .ph { aspect-ratio: 4/5; }
.mapwrap .pin { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); }
.mapwrap .pin .dot { width:18px; height:18px; border-radius:50%; background: var(--cay-red-500); box-shadow: 0 0 0 6px rgba(200,40,28,.3); }
.mapwrap .card { position:absolute; left:18px; right:18px; bottom:18px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.mapwrap .card .a { font-weight: var(--fw-semibold); color: var(--cay-black-900); font-size: var(--fs-sm); }
.mapwrap .card .a span { display:block; font-weight: var(--fw-regular); color: var(--cay-ink-500); }

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