/* CONOCENOS — el contenido de la ficha que abre "Conocenos" (preview/conocenos.js).
   Usa la paleta de preview/style.css: crema, lino, cuero y tinta. */

/* La cruz queda en una franja fija arriba y el contenido se desplaza debajo,
   así nunca se le superpone (en las fichas de producto la cruz flota). */
#detail[open]:has(.cn){display:flex;flex-direction:column;max-width:640px;padding:12px 0 0;overflow:hidden}
#detail:has(.cn)>.close{position:static;float:none;flex:none;align-self:flex-end;margin:0 14px 2px 0}
.cn{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:22px;padding:0 22px 24px}

.cn h3{font:400 17px/1.3 var(--serif);margin:0}
.cn small{display:block}
.cn svg{fill:currentColor;flex:none}

.cn-head .eyebrow{margin-bottom:6px}
.cn-title{font-size:26px;line-height:1.15;letter-spacing:-.5px;padding:0;margin:0}
.cn-lede{font-size:15px!important;color:var(--ink-2);margin:6px 0 0!important}

/* Visita: WhatsApp manda; dirección con "Cómo llegar" como acción chica. */
.cn-taller{display:grid;gap:10px}
.cn-wsp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--ink);color:var(--cream);transition:background .15s}
.cn-wsp:hover{background:#000}
.cn-wsp>svg{color:#25d366}
.cn-wsp b{display:block;font-size:15px}
.cn-wsp small{font-size:12px;color:var(--linen);margin-top:1px}
.cn-dir{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.cn-dir>svg{color:var(--leather)}
.cn-dir>span{flex:1;display:grid}
.cn-dir b{font-size:14px;color:var(--ink)}
.cn-dir a{flex:none;padding:8px 2px;font-size:13px;font-weight:600;color:var(--leather)}
.cn-dir a:hover{text-decoration:underline}
/* El mapa no captura el dedo ni la rueda: tocarlo abre Google Maps. */
.cn-mapa{display:block;height:150px;border-radius:12px;overflow:hidden;border:1px solid var(--linen);background:var(--cream)}
.cn-mapa iframe{display:block;width:100%;height:100%;border:0;pointer-events:none;filter:sepia(.18) saturate(.85)}

/* Opiniones: la nota, una reseña y el enlace. */
.cn-google{padding:14px;border-radius:12px;background:var(--cream);border:1px solid var(--linen)}
.cn-nota{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.cn-nota b{font:400 22px/1 var(--serif)}
.cn-nota small{font-size:12px;color:var(--ink-3)}
.cn-stars{display:inline-flex;gap:1px;color:#e8a33c}
.cn-google blockquote{margin:10px 0 0}
.cn-google blockquote p{margin:0!important;font-size:13.5px!important;line-height:1.45}
.cn-google cite{display:block;margin-top:5px;font:normal 10px 'IBM Plex Mono',monospace;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.cn-go{display:inline-flex;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--leather)}
.cn-go:hover{text-decoration:underline}

.cn-ig{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--linen);transition:background .15s}
.cn-ig:hover{background:var(--cream)}
.cn-ig b{font-size:14px}
.cn-ig small{font-size:12px;color:var(--ink-3);margin-top:1px}

@media(min-width:760px){
 .cn{padding:0 32px 30px}
 .cn-mapa{height:180px}
}