.contacto-panel { --bs-offcanvas-width: 460px; background: var(--ml-paper); border-left: 0 !important; }
.contacto-portada { background: radial-gradient(ellipse at top right, #694733, transparent 75%), var(--ml-ink); color: #fff; padding: 2.7rem 1.5rem 1.7rem; position: relative; }
.contacto-marca { align-items: center; display: flex; gap: 1rem; }
.contacto-marca img { background: var(--ml-paper); border-radius: 50%; flex-shrink: 0; height: 76px; object-fit: contain; padding: .35rem; width: 76px; }
.contacto-antetitulo { color: #e9d9b4; display: block; font-size: .6875rem; letter-spacing: .07em; margin-bottom: .4rem; }
.contacto-portada h2 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.04em; }
.contacto-portada p { color: #e2d8ce; font-size: .72rem; margin: .3rem 0 0; }
.contacto-cerrar { align-items: center; background: #ffffff14; border: 1px solid #ffffff28; border-radius: 50%; color: #fff; display: inline-flex; height: 36px; justify-content: center; position: absolute; right: 1rem; top: .8rem; width: 36px; }
.contacto-cerrar:hover { background: #ffffff28; }
.contacto-cuerpo { min-height: 0; padding: 0; }
.contacto-contenido { display: grid; gap: 1.5rem; padding: 1.5rem; }
.contacto-seccion-titulo { align-items: flex-start; display: flex; gap: .75rem; margin-bottom: 1rem; }
.contacto-simbolo { align-items: center; background: #ece4d7; border-radius: 12px; color: var(--ml-wine); display: inline-flex; flex-shrink: 0; height: 38px; justify-content: center; width: 38px; }
.contacto-cuerpo h3 { font-size: .82rem; font-weight: 700; margin: .15rem 0 .3rem; }
.contacto-cuerpo p { color: #766b60; font-size: .75rem; line-height: 1.65; margin: 0; }
.contacto-telefonos { display: grid; gap: .65rem; }
.contacto-tarjeta { align-items: center; background: #fffdf9; border: 1px solid #e7dfd3; border-radius: 14px; display: flex; gap: .7rem; justify-content: space-between; padding: .85rem; }
.contacto-numero { display: grid; gap: .25rem; }
.contacto-numero > span { color: #817364; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.contacto-numero > a { color: var(--ml-ink); font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.contacto-acciones { align-items: center; display: flex; gap: .4rem; }
.contacto-acciones a { align-items: center; border-radius: 9px; display: inline-flex; font-size: .65rem; gap: .35rem; justify-content: center; min-height: 38px; padding: .5rem .65rem; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.contacto-llamar { background: #eee9e0; color: var(--ml-ink); }
.contacto-llamar span { display: none; }
.contacto-whatsapp { background: #e5f2e6; color: #25623d; font-weight: 600; }
.contacto-whatsapp i { font-size: 1rem; }
.contacto-acciones a:hover { filter: brightness(.96); transform: translateY(-1px); }
.contacto-ubicacion { align-items: flex-start; background: #eee7dc; border-radius: 16px; display: flex; gap: .75rem; padding: 1.1rem; }
.contacto-ubicacion .contacto-simbolo { background: #ffffff85; }
.contacto-ubicacion a { color: var(--ml-wine); display: inline-flex; font-size: .72rem; font-weight: 700; gap: .4rem; margin-top: .7rem; text-decoration: none; }
.contacto-redes { border-top: 1px solid #e4dcd0; flex: 0 0 auto; padding: 1rem 1.5rem max(1.25rem, env(safe-area-inset-bottom)); }
.contacto-redes h3 { color: #766b60; font-size: .68rem; font-weight: 500; margin: 0 0 .8rem; }
.contacto-redes-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.contacto-redes-lista a { align-items: center; background: #eee9e0; border-radius: 9px; color: var(--ml-ink); display: inline-flex; font-size: .67rem; gap: .45rem; min-height: 38px; padding: .55rem .7rem; text-decoration: none; }
.contacto-redes-lista a:hover { background: #e4dacb; }

@media (max-width: 360px) { .contacto-contenido { padding: 1.1rem; } .contacto-redes, .contacto-portada { padding-inline: 1.1rem; } .contacto-marca { gap: .7rem; } .contacto-marca img { height: 60px; width: 60px; } .contacto-tarjeta { padding: .7rem; gap: .4rem; } .contacto-numero > a { font-size: .75rem; } .contacto-acciones a { padding-inline: .5rem; } }