/* Croquis de llegada · usa los tokens de css/estilo.css. Vive sobre fondo papel. */
.croquis { display: grid; gap: 16px; color: var(--tinta); }
.cq-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cq-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cq-tabs button {
  font: 500 12px/1 var(--f-dato); letter-spacing: .08em; text-transform: uppercase;
  color: #4a463f; background: var(--papel); border: 1px solid var(--linea-papel);
  padding: 11px 14px; cursor: pointer; transition: border-color .3s, color .3s, background .3s;
}
.cq-tabs button:hover { border-color: #9a9387; }
.cq-tabs button[aria-selected="true"] { border-color: var(--tinta); color: var(--tinta); background: #fff; }
.cq-lectura { font: 500 13px/1 var(--f-dato); letter-spacing: .06em; color: var(--cobre); font-variant-numeric: tabular-nums; }
.cq-lienzo { background: var(--papel); box-shadow: 0 0 0 1px var(--linea-papel); overflow: hidden; }
.cq-svg { display: block; width: 100%; height: auto; }
.cq-fondo { fill: var(--papel); }
.cq-reticula { stroke: #e6e1d7; stroke-width: 1; }
.cq-sierra { fill: #ddd6c9; }
.cq-sierra--cerca { fill: #e5dfd3; }
.cq-rio { fill: none; stroke: #c9d3d4; stroke-width: 7; stroke-linecap: round; }
.cq-federal { fill: none; stroke: #c9c3b8; stroke-width: 5; stroke-linecap: round; }
.cq-carretera-borde { fill: none; stroke: #c9c3b8; stroke-width: 9; stroke-linecap: round; }
.cq-carretera { fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round; }
.cq-recorrido { fill: none; stroke: var(--cobre); stroke-width: 3; stroke-linecap: round; }
.cq-km circle { fill: #fff; stroke: #8d877d; stroke-width: 1; }
.cq-km text, .cq-rotulo, .cq-lugar .cq-sub { font: 500 10px var(--f-dato); letter-spacing: .08em; fill: #8d877d; text-anchor: middle; }
.cq-rotulo { text-anchor: start; }
.cq-rotulo--rio { font-style: italic; fill: #8fa3a6; }
.cq-rotulo--via { fill: #7a7469; text-transform: uppercase; }
.cq-lugar circle { fill: #fff; stroke: var(--tinta); stroke-width: 1.4; }
.cq-lugar .cq-punto { fill: var(--tinta); stroke: none; }
.cq-lugar text { font: 500 17px var(--f-display); fill: var(--tinta); }
.cq-lugar .cq-sub { font-size: 9.5px; text-anchor: start; }
.cq-lugar .cq-der { text-anchor: end; }
.cq-destileria { cursor: pointer; outline: none; }
.cq-pin { fill: var(--tinta); stroke: var(--cobre-claro); stroke-width: 1.4; }
.cq-pin-8 { font: 600 14px var(--f-display); fill: var(--hueso); text-anchor: middle; }
.cq-halo { transform-origin: center; animation: cq-latido 2.4s ease-in-out infinite; }
.cq-ficha { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; pointer-events: none; }
.cq-ficha path { fill: var(--tinta); }
.cq-ficha-titulo { font: 500 15px var(--f-display); fill: var(--hueso); text-anchor: middle; }
.cq-ficha-dato { font: 500 10px var(--f-dato); letter-spacing: .08em; fill: var(--cobre-claro); text-anchor: middle; }
.cq-llego .cq-ficha, .cq-ficha-abierta .cq-ficha, .cq-destileria:hover .cq-ficha, .cq-destileria:focus-visible .cq-ficha {
  opacity: 1; transform: none;
}
.cq-destileria:focus-visible .cq-pin { stroke: var(--cobre); stroke-width: 3; }
.cq-auto { fill: var(--cobre); stroke: #fff; stroke-width: 2; }
.cq-rosa circle { fill: none; stroke: #c9c3b8; }
.cq-rosa path { fill: var(--tinta); }
.cq-rosa text { font: 500 10px var(--f-dato); fill: #7a7469; text-anchor: middle; }
.cq-pasos { margin: 0; padding: 0; list-style: none; counter-reset: cq; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea-papel); }
.cq-pasos li { counter-increment: cq; padding: 14px 16px 4px 0; font-size: 15px; line-height: 1.55; color: #4a463f; display: grid; gap: 6px; }
.cq-pasos li::before { content: "0" counter(cq); font: 500 11px var(--f-dato); letter-spacing: .1em; color: #9a9387; }
.cq-nota { font-size: 13px; color: #7a7469; }
@keyframes cq-latido { 0%, 100% { transform: scale(.75); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
@media (max-width: 720px) {
  .cq-lienzo { overflow-x: auto; }
  .cq-svg { min-width: 680px; }
  .cq-lienzo::after { content: attr(data-desliza); display: block; position: sticky; left: 0; padding: 8px 12px; font: 500 10.5px var(--f-dato); letter-spacing: .08em; color: #7a7469; }
  .cq-pasos { grid-template-columns: 1fr; }
  .cq-pasos li { padding: 12px 0; border-bottom: 1px solid var(--linea-papel); }
}
@media (prefers-reduced-motion: reduce) { .cq-halo { animation: none; } .cq-ficha { transition: none; } }

/* Lugares interactivos, camino de acceso y ficha informativa */
.cq-interactivo { cursor: pointer; outline: none; }
.cq-toque { fill: none; stroke: transparent; stroke-width: 22; }
.cq-lugar.cq-interactivo:hover circle:first-child, .cq-lugar.cq-interactivo:focus-visible circle:first-child,
.cq-lugar.cq-activo circle:first-child { stroke: var(--cobre); stroke-width: 2.4; }
.cq-interactivo:hover .cq-rio, .cq-activo .cq-rio { stroke: #a9bcbf; }
.cq-interactivo:hover .cq-federal, .cq-activo .cq-federal { stroke: #a9a296; }
.cq-interactivo:focus-visible .cq-rotulo, .cq-activo .cq-rotulo { fill: var(--cobre); }
.cq-acceso-borde { fill: none; stroke: #c9c3b8; stroke-width: 6; stroke-linecap: round; }
.cq-acceso { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 4; }
.cq-rotulo--acceso { font-style: italic; fill: #7a7469; }
.cq-info { min-height: 92px; padding: 16px 18px; background: #fff; box-shadow: 0 0 0 1px var(--linea-papel); display: grid; gap: 6px; align-content: start; }
.cq-info h3 { font-size: 22px; line-height: 1.15; }
.cq-info p { color: #4a463f; font-size: 15px; max-width: 70ch; }
.cq-info-dato { font: 500 10.5px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--cobre); }
.cq-info-vacio { color: #7a7469; font-style: italic; }
.cq-acciones { margin-top: 4px; }

/* ---------- croquis v3: trazo real y paisaje ---------- */
.cq-fondo { fill: #f6f2ea; }
.cq-reticula { stroke: #ebe5d9; }
.cq-sierra { fill: #e2dacb; }
.cq-sierra--lejos { fill: #ece5d8; }
.cq-curva-nivel { fill: none; stroke: #d6cdbc; stroke-width: .8; stroke-dasharray: 2 3; }
.cq-rotulo--sierra { font-style: italic; letter-spacing: .14em; fill: #9a9081; text-transform: uppercase; }
.cq-cardon path { fill: none; stroke: #7f8a6e; stroke-linecap: round; stroke-linejoin: round; }
.cq-cardon .cq-cardon-luz { stroke: #a9b394; stroke-width: 1; }
.cq-agave path { fill: none; stroke: #8f9a87; stroke-width: 1.6; stroke-linecap: round; }
.cq-arbusto { fill: #c9c6a8; opacity: .8; }
.cq-casa { fill: #fff; stroke: #8d877d; stroke-width: .9; stroke-linejoin: round; }
.cq-cupula { fill: var(--cobre-claro); stroke: var(--tinta); stroke-width: 1; }
.cq-carretera-borde { stroke-width: 10; }
.cq-carretera { stroke-width: 6.5; }
.cq-carretera-centro { fill: none; stroke: #e2c9a6; stroke-width: 1; stroke-dasharray: 5 6; }
.cq-recorrido { stroke-width: 3.2; }
.cq-km rect { fill: #fff; stroke: #8d877d; stroke-width: .9; }
.cq-km path { stroke: #8d877d; stroke-width: 1; }
.cq-km text { font: 600 7px var(--f-dato); fill: var(--tinta); text-anchor: middle; letter-spacing: 0; }
.cq-pueblo text { font: 500 10.5px var(--f-dato); fill: #6f685e; text-anchor: middle; letter-spacing: .04em; }
.cq-ciudad .cq-nombre { font: 500 19px var(--f-display); fill: var(--tinta); text-anchor: middle; }
.cq-ciudad .cq-sub { font: 500 9.5px var(--f-dato); fill: #8d877d; text-anchor: middle; letter-spacing: .08em; }
.cq-ciudad .cq-punto { fill: var(--tinta); }
.cq-entrada { stroke: #c9c3b8; stroke-width: 4; stroke-linecap: round; }
.cq-rosa-sur { fill: #c9c3b8; }
.cq-rosa text { font: 600 11px var(--f-dato); fill: var(--tinta); }
.cq-ficha path { fill: var(--tinta); }
.cq-ficha-titulo, .cq-ficha-dato { text-anchor: middle; }
.cq-pueblo:hover text, .cq-pueblo:focus-visible text, .cq-pueblo.cq-activo text { fill: var(--cobre); }
.cq-pueblo:hover .cq-casa, .cq-pueblo.cq-activo .cq-casa { stroke: var(--cobre); }
.cq-ciudad:hover .cq-nombre, .cq-ciudad:focus-visible .cq-nombre, .cq-ciudad.cq-activo .cq-nombre { fill: var(--cobre); }
@media (max-width: 720px) { .cq-svg { min-width: 760px; } }
.cq-pueblo text.cq-izq { text-anchor: start; }
.cq-rotulo--fin { text-anchor: end; }
.cq-ficha-titulo, .cq-ficha-dato { text-anchor: middle; }

/* ---------- croquis v4: invitación a tocar ---------- */
.cq-lienzo { position: relative; }
.cq-pista {
  position: absolute; left: 14px; bottom: 14px; margin: 0; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 13px; background: var(--tinta); color: var(--hueso); font: 500 11.5px/1 var(--f-dato);
  letter-spacing: .06em; box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.cq-pista-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--cobre-claro); box-shadow: 0 0 0 0 rgba(212,154,106,.6); animation: cq-pista 1.8s ease-out infinite; }
.cq-usado .cq-pista { opacity: 0; transform: translateY(6px); }
@keyframes cq-pista { 0% { box-shadow: 0 0 0 0 rgba(212,154,106,.6); } 100% { box-shadow: 0 0 0 10px rgba(212,154,106,0); } }
.cq-pulso { fill: none; stroke: var(--cobre); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cq-pulso 2s ease-out infinite; pointer-events: none; }
@keyframes cq-pulso { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.cq-lugar.cq-ciudad .cq-cta { font: 600 10.5px var(--f-dato); letter-spacing: .08em; text-transform: uppercase; fill: var(--cobre); text-anchor: middle; }
.cq-ciudad { cursor: pointer; }
.cq-lugar.cq-ciudad:hover .cq-cta, .cq-lugar.cq-ciudad:focus-visible .cq-cta { fill: var(--tinta); text-decoration: underline; }
.cq-ciudad.cq-activo .cq-pulso { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cq-pulso, .cq-pista-punto { animation: none; } }
@media (max-width: 720px) { .cq-pista { position: sticky; left: 12px; bottom: auto; margin: 10px 0 0 12px; } }

.cq-info--foto { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: center; }
.cq-info-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.cq-info-texto { display: grid; gap: 6px; }
@media (max-width: 560px) { .cq-info--foto { grid-template-columns: 1fr; } }