/* Sitio público 2027 (PROJECT_BRIEF §9.web2027). Armado a partir de las maquetas aprobadas por el cliente
   el 2026-10-22: base y ficha privada · lugar · destino con mapa · travesías · ficha de travesía.
   Una sola marca; travesías suma la letra de cartel de ruta y el naranja con más energía. */
@font-face { font-family: "Lato"; font-weight: 300; src: url("/static/fonts/lato-light.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 400; src: url("/static/fonts/lato-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 700; src: url("/static/fonts/lato-bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 900; src: url("/static/fonts/lato-900.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; src: url("/static/fonts/barlow-condensed-800.woff2") format("woff2"); font-display: swap; }

/* === Base y ficha de excursión === */

/* Layout: ficha de dos capas. Arriba lo esencial y la consulta; abajo el relato, las fotos y los detalles.
   En escritorio, columna de contenido + tarjeta de consulta fija a la derecha. Paleta y tipografía = marca actual. */
:root {
  --verde: #6a912d; --verde-oscuro: #4f6e21; --verde-claro: #eef3e6;
  --rojo: #e64e23; --terracota: #b0532b; --arena: #f2ead9; --tierra: #6b5a3e;
  --texto: #2a2a24; --texto-tenue: #5c5c53; --borde: #e0ded4; --fondo: #faf9f5; --superficie: #ffffff;
  --boton: #3f5a19; --boton-texto: #ffffff; --pendiente: #8a6d2f; --pendiente-fondo: #fbf5e6;
  --sombra: 0 1px 2px rgba(42,42,36,.05), 0 10px 28px rgba(42,42,36,.08);
  --f-texto: "Lato", -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --verde: #8ab653; --verde-oscuro: #a9d073; --verde-claro: #26301b;
  --rojo: #ff8560; --terracota: #e08a63; --arena: #2a2620; --tierra: #c9b98f;
  --texto: #efeee6; --texto-tenue: #b3b1a6; --borde: #38362e; --fondo: #17160f; --superficie: #201e17;
  --boton: #a9d073; --boton-texto: #17160f; --pendiente: #e3c27a; --pendiente-fondo: #2b2618;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.35); color-scheme: dark; } }
:root[data-theme="dark"] {
  --verde: #8ab653; --verde-oscuro: #a9d073; --verde-claro: #26301b;
  --rojo: #ff8560; --terracota: #e08a63; --arena: #2a2620; --tierra: #c9b98f;
  --texto: #efeee6; --texto-tenue: #b3b1a6; --borde: #38362e; --fondo: #17160f; --superficie: #201e17;
  --boton: #a9d073; --boton-texto: #17160f; --pendiente: #e3c27a; --pendiente-fondo: #2b2618;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.35); color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f-texto); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1180px) { body { padding-bottom: 0; } }
a { color: var(--verde-oscuro); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
.envoltorio { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Encabezado */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--superficie); }
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera .envoltorio { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 21px; letter-spacing: -.2px; }
.marca img { width: 36px; height: 36px; }
.marca .s1 { color: var(--verde-oscuro); } .marca .s2 { color: var(--rojo); }
.nav { display: none; gap: 4px; margin-left: 12px; }
.nav a, .nav summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--texto); text-decoration: none; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav a:hover, .nav summary:hover { background: var(--verde-claro); }
.nav a[aria-current] { color: var(--verde-oscuro); background: var(--verde-claro); }
.nav a[class^="fam-"][aria-current] { color: var(--f); background: var(--f-claro); box-shadow: inset 0 -3px 0 var(--f); }
.nav details { position: relative; }
.nav .desplegable { position: absolute; top: 48px; left: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; min-width: 200px; display: grid; }
.cab-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.selector { font-size: 15px; font-weight: 700; color: var(--texto-tenue); border: 1px solid var(--borde); border-radius: 10px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; background: transparent; }
.boton-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 12px; background: var(--boton); color: var(--boton-texto); font-weight: 700; font-size: 17px; text-decoration: none; border: 0; }
.boton-wa:hover { filter: brightness(1.08); }
.boton-wa svg { width: 22px; height: 22px; flex: none; }
.cabecera .boton-wa { min-height: 44px; padding: 0 14px; font-size: 16px; }
.cabecera .boton-wa .largo { display: none; }
/* Con «Excursiones tradicionales» el menú completo entra recién desde 1180 px; antes, la barra de secciones de abajo. */
@media (min-width: 1180px) { .nav { display: flex; } }
.nav a, .nav summary { white-space: nowrap; }
@media (max-width: 430px) {
  .cabecera .envoltorio { gap: 10px; }
  .marca { font-size: 19px; gap: 8px; }
  .marca img { width: 32px; height: 32px; }
  .cabecera .boton-wa { width: 44px; padding: 0; }
  .cabecera .boton-wa > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Migas */
.migas { font-size: 15px; color: var(--texto-tenue); padding-block: 14px 10px; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: 6px; color: var(--texto-tenue); }
.migas a { color: var(--texto-tenue); }

/* Portada: carrusel que se desliza con el dedo (sin pasar solo) */
.carrusel { position: relative; border-radius: var(--r); overflow: hidden; background: var(--arena); }
.pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.pista::-webkit-scrollbar { display: none; }
.diapo { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.diapo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%; }
@media (min-width: 640px) { .diapo img { aspect-ratio: 16 / 9; } }
@media (min-width: 900px) { .diapo img { aspect-ratio: 21 / 9; } }
.car-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #1d1c16; font-size: 26px; line-height: 1; cursor: pointer; display: none; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.car-flecha.izq { left: 14px; } .car-flecha.der { right: 14px; }
.car-flecha[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .car-flecha { display: block; } }
.car-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(transparent, rgba(15,14,10,.55)); pointer-events: none; }
.puntos { display: flex; gap: 6px; margin-right: auto; padding-left: 4px; }
.puntos span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .2s, background .2s; }
.puntos span.activo { width: 22px; border-radius: 4px; background: #fff; }
.car-contador { color: #fff; font-size: 15px; font-weight: 700; }
.ver-fotos { pointer-events: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(23,22,15,.72); color: #fff; font: 700 15px var(--f-texto); cursor: pointer; }

/* Confianza breve, arriba */
.confianza-breve { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 16px; color: var(--texto-tenue); text-decoration: none; }
.confianza-breve .pend { padding: 0 8px; border-radius: 6px; font-size: 14px; }
.confianza-breve u { color: var(--verde-oscuro); font-weight: 700; text-decoration-thickness: 1px; }
.cita-breve { margin: 16px 0 0; padding: 16px 18px; border-radius: var(--r); background: var(--arena); display: grid; gap: 6px; }
.cita-breve blockquote { margin: 0; font-size: 18px; font-style: italic; }
.cita-breve figcaption { font-size: 15px; color: var(--texto-tenue); }

/* Rejilla principal */
.rejilla { display: grid; gap: 40px; padding-block: 24px 64px; }
.rejilla > * { min-width: 0; }
@media (min-width: 900px) { .rejilla { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; } }

.titulo-ficha { display: grid; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 700; background: var(--verde-claro); color: var(--verde-oscuro); }
.chip.consulta { background: var(--arena); color: var(--tierra); }
h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 900; letter-spacing: -.5px; }
.bajada { font-size: 20px; color: var(--texto-tenue); max-width: 40ch; }

/* Lo esencial: íconos simples, el dato en texto (nunca solo el ícono) */
.esencial { list-style: none; margin: 24px 0 0; padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie); }
@media (min-width: 640px) { .esencial { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.esencial li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.esencial svg { width: 28px; height: 28px; color: var(--verde-oscuro); }
.esencial strong { display: block; font-size: 18px; line-height: 1.3; }
.esencial span { display: block; font-size: 15px; color: var(--texto-tenue); line-height: 1.35; }
.esencial li.pend { padding: 6px; margin: -6px; border-radius: 8px; }
.esencial li.pend svg { color: var(--pendiente); }
.pend { color: var(--pendiente); background: var(--pendiente-fondo); outline: 1px dashed var(--pendiente); outline-offset: -1px; }
.etiqueta-pend { display: inline-block; font-size: 13px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .4px; color: var(--pendiente); }

.consulta-movil { margin-top: 20px; display: grid; gap: 8px; }
.consulta-movil .boton-wa { width: 100%; min-height: 56px; font-size: 18px; }
.consulta-movil p { font-size: 15px; color: var(--texto-tenue); text-align: center; }
@media (min-width: 900px) { .consulta-movil { display: none; } }

/* Secciones */
.seccion { margin-top: 48px; display: grid; gap: 16px; }
.seccion h2 { font-size: 28px; font-weight: 900; }
.seccion > p { max-width: 65ch; }
.texto-largo { display: grid; gap: 14px; max-width: 65ch; }

/* Programa */
.programa { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.parada { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
.parada .linea { display: grid; justify-items: center; grid-template-rows: 40px 1fr; }
.parada .num { width: 40px; height: 40px; border-radius: 50%; background: var(--verde-oscuro); color: var(--fondo); display: grid; place-items: center; font-weight: 900; font-size: 17px; }
.parada .linea::after { content: ""; width: 2px; background: var(--borde); }
.parada:last-child .linea::after { display: none; }
.parada .cuerpo { padding-bottom: 28px; display: grid; gap: 6px; }
.parada h3 { font-size: 20px; font-weight: 900; padding-top: 7px; }
.parada .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; color: var(--texto-tenue); }
.parada .meta .pend { padding: 0 8px; border-radius: 6px; }
.parada .meta a { font-weight: 700; }

/* Fotos */
.mosaico { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaico button { padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--arena); }
.mosaico button:first-child { grid-column: 1 / -1; }
.mosaico img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.mosaico button:first-child img { aspect-ratio: 16 / 9; }
.mosaico button:hover img { transform: scale(1.03); }
@media (min-width: 640px) { .mosaico { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; } .mosaico button:first-child { grid-column: 1; grid-row: 1 / span 2; } .mosaico button:first-child img { aspect-ratio: auto; height: 100%; } }

/* Incluye */
.incluye { display: grid; gap: 16px; }
@media (min-width: 640px) { .incluye { grid-template-columns: 1fr 1fr; } }
ul.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
ul.lista svg { width: 22px; height: 22px; margin-top: 3px; }
.si svg { color: var(--verde-oscuro); } .no svg { color: var(--terracota); }
.caja { border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--r); padding: 20px; display: grid; gap: 12px; }
.caja h3 { font-size: 19px; font-weight: 900; }

.antes { display: grid; gap: 12px; }
@media (min-width: 640px) { .antes { grid-template-columns: 1fr 1fr; } }
.antes .caja.pend { outline-offset: -1px; }
.antes .caja.pend p { font-style: italic; font-size: 16px; }

/* Reseñas */
.resenas { display: grid; gap: 16px; }
@media (min-width: 640px) { .resenas { grid-template-columns: 1fr 1fr; } }
.resena { margin: 0; display: grid; gap: 12px; }
.resena blockquote { margin: 0; font-size: 18px; }
.resena figcaption { font-size: 15px; color: var(--texto-tenue); }
.resena figcaption strong { color: var(--texto); display: block; font-size: 16px; }
span.estrellas { color: #b7860b; letter-spacing: 2px; font-size: 16px; }
:root[data-theme="dark"] span.estrellas { color: #f0c23a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) span.estrellas { color: #f0c23a; } }

/* Preguntas */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.faq summary { cursor: pointer; padding: 16px 18px; min-height: 56px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--verde-oscuro); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > p { padding: 0 18px 18px; max-width: 65ch; }
.faq .pend { border-radius: 12px; padding: 16px 18px; font-style: italic; font-size: 16px; }

/* Combiná */
.tarjetas { display: grid; gap: 12px; }
@media (min-width: 640px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarjeta { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie); text-decoration: none; color: var(--texto); align-content: start; }
.tarjeta:hover { border-color: var(--verde); }
.tarjeta .tipo { font-size: 14px; font-weight: 700; color: var(--terracota); text-transform: uppercase; letter-spacing: .4px; }
.tarjeta strong { font-size: 19px; line-height: 1.3; }
.tarjeta span:last-child { font-size: 15px; color: var(--texto-tenue); }
.chip-mini { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-oscuro); justify-self: start; }
.chip-mini.ws { background: var(--arena); color: var(--tierra); }

/* Tarjeta lateral */
.lateral { display: none; }
@media (min-width: 900px) { .lateral { display: block; } }
.consulta-fija { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra); padding: 24px; display: grid; gap: 16px; }
.consulta-fija h2 { font-size: 22px; font-weight: 900; }
.consulta-fija p { font-size: 16px; color: var(--texto-tenue); }
.consulta-fija .boton-wa { width: 100%; min-height: 56px; }
.consulta-fija .numero { font-size: 15px; color: var(--texto-tenue); text-align: center; }
.consulta-fija .numero strong { color: var(--texto); user-select: all; }
.confianza { display: grid; gap: 10px; border-top: 1px solid var(--borde); padding-top: 16px; font-size: 15px; }
.confianza div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.confianza svg { width: 20px; height: 20px; color: var(--verde-oscuro); margin-top: 2px; }

.actualizado { margin-top: 40px; font-size: 15px; color: var(--texto-tenue); }

/* Pie */
/* Pie común (hilo conductor 2026-10-26): siempre de noche, la línea del camino une las cuatro familias. */
.pie { background: #14130f; color: #d9d4c6; }
.pie .envoltorio { padding-block: 40px 28px; display: grid; gap: 28px; font-size: 15px; }
.pie-hilo { display: flex; align-items: center; }
.pie-hilo i { flex: 1; height: 3px; border-radius: 2px; background: #4a463b; }
.pie-hilo span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--f-oscuro); outline: 2px dashed var(--f-oscuro); outline-offset: 3px; }
.pie-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (min-width: 900px) { .pie-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pie-t { font-family: var(--f-cartel); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 14px; color: #f3eee2; margin-bottom: 10px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie a { color: #d9d4c6; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie ul a[class^="fam-"]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--f-oscuro); margin-right: 8px; }
.pie .evt { color: #a9a395; border-top: 1px solid #2c2a22; padding-top: 18px; font-size: 14px; }

/* Barra inferior (celular) */
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--superficie); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.barra-inferior ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr; }
.barra-inferior a { display: grid; justify-items: center; gap: 2px; padding: 9px 2px 8px; min-height: 64px; color: var(--texto-tenue); text-decoration: none; font-size: 13px; font-weight: 700; }
.barra-inferior a[aria-current] { color: var(--verde-oscuro); }
.barra-inferior svg { width: 24px; height: 24px; }
@media (min-width: 1180px) { .barra-inferior { display: none; } }

/* Visor */
.visor { border: 0; padding: 0; background: rgba(10,10,8,.94); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visor::backdrop { background: rgba(10,10,8,.94); }
.visor figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 56px 12px 16px; gap: 10px; }
.visor img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.visor figcaption { color: #eee; text-align: center; font-size: 16px; }
.visor .cerrar, .visor .flecha { position: absolute; border: 0; background: rgba(255,255,255,.14); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.visor .cerrar { top: 12px; right: 12px; }
.visor .flecha.izq { left: 12px; top: 50%; } .visor .flecha.der { right: 12px; top: 50%; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* === Página de lugar === */

/* Propio de la página de lugar: informativa (qué es, cómo llegar, cuándo ir) y con salida a las excursiones que lo visitan. */
.respuesta { margin-top: 24px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie); padding: 20px; display: grid; gap: 14px; }
.respuesta h2 { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-tenue); }
.respuesta dl { margin: 0; display: grid; gap: 14px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.respuesta dl > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.respuesta svg { width: 26px; height: 26px; color: var(--verde-oscuro); }
.respuesta dt { font-size: 15px; color: var(--texto-tenue); }
.respuesta dd { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.respuesta dd small { display: block; font-size: 14px; font-weight: 400; color: var(--texto-tenue); }
.respuesta .pend { padding: 6px; margin: -6px; border-radius: 8px; }
.respuesta .pend svg { color: var(--pendiente); }
.fuente { font-size: 14px; color: var(--pendiente); background: var(--pendiente-fondo); border: 1px dashed var(--pendiente); border-radius: 8px; padding: 2px 8px; display: inline-block; }
.excursiones { display: grid; gap: 12px; }
@media (min-width: 640px) { .excursiones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.exc { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie); text-decoration: none; color: var(--texto); align-content: start; }
.exc:hover { border-color: var(--verde); }
.exc .tipo { font-size: 14px; font-weight: 700; color: var(--terracota); text-transform: uppercase; letter-spacing: .4px; }
.exc strong { font-size: 20px; line-height: 1.3; }
.exc .dur { font-size: 16px; color: var(--texto-tenue); }
.exc .chip-mini { margin-top: 2px; }
.cerca { display: flex; flex-wrap: wrap; gap: 10px; }
.cerca a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); text-decoration: none; font-weight: 700; color: var(--texto); }
.cerca a:hover { border-color: var(--verde); }
.consulta-fija .lista-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.consulta-fija .lista-mini a { font-weight: 700; }
.serp { border: 1px solid var(--borde); background: var(--superficie); border-radius: 10px; padding: 14px; display: grid; gap: 2px; font-family: Arial, sans-serif; }
.serp .u { font-size: 13px; color: #4d5156; }
.serp .t { font-size: 19px; color: #1a0dab; }
.serp .d { font-size: 14px; color: #4d5156; }
:root[data-theme="dark"] .serp .t { color: #99c3ff; } :root[data-theme="dark"] .serp .u, :root[data-theme="dark"] .serp .d { color: #bdc1c6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .serp .t { color: #99c3ff; } :root:not([data-theme="light"]) .serp .u, :root:not([data-theme="light"]) .serp .d { color: #bdc1c6; } }

/* === Portada de destino con mapa por regiones === */

/* Portada de destino: el mapa en relieve es la puerta de entrada; al lado (o debajo en el celular) la región elegida. */
.portada-destino { display: grid; gap: 10px; padding-block: 8px 4px; }
.portada-destino h1 { font-size: clamp(36px, 7vw, 56px); }
.portada-destino .bajada { max-width: 52ch; }
.explorar { display: grid; gap: 14px; margin-top: 12px; }
@media (min-width: 900px) { .explorar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px; } .col-mapa { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); } }
.col-panel { display: grid; gap: 14px; min-width: 0; }
[data-mapa-destino] .lienzo { position: relative; overflow: hidden; border-radius: var(--r); background: var(--arena); aspect-ratio: var(--mapa-ancho) / var(--mapa-alto); max-height: 62vh; margin-inline: auto; width: 100%; }
@media (max-width: 899px) { [data-mapa-destino] .lienzo { width: min(100%, calc(62vh * var(--mapa-ancho) / var(--mapa-alto))); } }
[data-mapa-destino] .zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
[data-mapa-destino] .zoom picture img { width: 100%; height: 100%; display: block; }
[data-mapa-destino] .zoom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.reg path { fill: var(--fondo); fill-opacity: 0; stroke: #fff; stroke-opacity: .9; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill-opacity .35s; }
.con-eleccion .reg path { fill-opacity: .62; }
.con-eleccion .reg.activa path { fill-opacity: 0; stroke-width: 3; }
.reg:focus-visible { outline: none; }
.reg:focus-visible path { stroke: var(--terracota); stroke-width: 4; }
.rot-reg { font: 900 46px var(--f-texto); letter-spacing: 2px; fill: #fff; paint-order: stroke; stroke: rgba(30,28,20,.6); stroke-width: 8px; text-anchor: middle; pointer-events: none; text-transform: uppercase; transition: opacity .3s; }
.con-eleccion .rot-reg { opacity: 0; }
.pin { display: none; cursor: pointer; }
.pin.visible { display: inline; }
.pin .toque { fill: transparent; }
.pin circle.punto { fill: var(--rojo); stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pin text { font: 700 var(--tam-pin, 24px) var(--f-texto); fill: #1d1c16; paint-order: stroke; stroke: rgba(255,255,255,.95); stroke-width: 6px; pointer-events: none; }
.pin:focus-visible circle.punto { stroke: var(--terracota); stroke-width: 4; }
.ver-todo { position: absolute; left: 10px; bottom: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(23,22,15,.78); color: #fff; font: 700 15px var(--f-texto); cursor: pointer; }

.pestanas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; scroll-snap-type: x proximity; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { flex: none; scroll-snap-align: start; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: 700 16px var(--f-texto); cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: var(--fondo); }

.regiones { display: grid; }
.region { border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--r); overflow: hidden; display: grid; }
.js .region:not(.activa) { display: none; }
.region img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.region .sin-foto { aspect-ratio: 3 / 1; display: grid; place-items: center; background: var(--pendiente-fondo); color: var(--pendiente); font-size: 15px; border-bottom: 1px dashed var(--pendiente); }
.region .cuerpo-r { padding: 18px; display: grid; gap: 12px; }
.region h2 { font-size: 24px; font-weight: 900; }
.cifras { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.cifras strong { color: var(--texto); font-size: 16px; }
.region ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.region li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-oscuro); text-decoration: none; font-weight: 700; font-size: 16px; }
.region .titulo-lista { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-tenue); }
.region .exc-lista li a { background: var(--arena); color: var(--tierra); }
.region .ir { font-weight: 900; font-size: 17px; }
.mini-regiones { display: grid !important; gap: 10px !important; }
.mini-regiones button { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 16px; min-height: 64px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); color: var(--texto); font: inherit; cursor: pointer; }
.mini-regiones strong { font-size: 18px; }
.mini-regiones span { font-size: 15px; color: var(--texto-tenue); grid-column: 1; }
.mini-regiones em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 22px; color: var(--verde-oscuro); }
.creditos { font-size: 13px; color: var(--texto-tenue); margin-top: 32px; }
@media (max-width: 899px) { .portada-destino .chips { display: none; } .portada-destino h1 { font-size: 40px; } .portada-destino .bajada { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { [data-mapa-destino] .zoom { transition: none; } }

.lugares-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .lugares-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lugar { position: relative; border-radius: 12px; overflow: hidden; background: var(--arena); text-decoration: none; color: #fff; min-height: 160px; display: grid; align-items: end; }
.lugar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lugar span { position: relative; padding: 40px 12px 12px; font-weight: 900; font-size: 17px; background: linear-gradient(transparent, rgba(15,14,10,.7)); }
.lugar.texto { color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); align-items: center; min-height: 64px; }
.lugar.texto span { background: none; padding: 12px 14px; }
.fila-productos { display: grid; gap: 10px; }
@media (min-width: 640px) { .fila-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); text-decoration: none; color: var(--texto); }
.prod strong { font-size: 17px; }
.prod .dur { font-size: 15px; color: var(--texto-tenue); grid-column: 1; }
.prod .chip-mini { grid-row: 1 / span 2; grid-column: 2; }
.tambien { font-size: 13px; font-weight: 700; color: var(--terracota); }

/* === Travesías === */

/* Travesías: misma marca, otro ritmo. Fotos a todo el ancho con gente, letra de cartel de ruta para los títulos,
   naranja de la marca con energía y secciones de noche. La letra de lectura sigue siendo cómoda (18 px). */
:root { --noche: #14130f; --noche-2: #1f1d17; --naranja: #e64e23; --naranja-boton: #b83a14; --crema-noche: #f3eee2; --f-cartel: "Barlow Condensed", "Arial Narrow", sans-serif; }
.cartel { font-family: var(--f-cartel); text-transform: uppercase; letter-spacing: .5px; line-height: .95; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 12px; font: 700 17px var(--f-texto); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn svg { width: 20px; height: 20px; }
.btn-naranja { background: var(--naranja-boton); color: #fff; }
.btn-naranja:hover { filter: brightness(1.08); }
.btn-borde { border-color: currentColor; color: inherit; background: transparent; }
.btn-blanco { background: #fff; color: #1d1c16; }

/* Portada: en el celular la foto arriba (el grupo a la vista) y el texto debajo sobre fondo de noche;
   en computadora, foto a todo el ancho con el texto a la izquierda sobre un degradé. */
.hero { position: relative; color: #fff; background: var(--noche); overflow: hidden; }
.hero .hero-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 35%; }
.hero .dentro { position: relative; z-index: 1; padding-block: 22px 32px; display: grid; gap: 14px; }
@media (min-width: 900px) {
  .hero { min-height: min(84vh, 760px); display: grid; align-items: center; }
  .hero .hero-img img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 80% 40%; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,7,.9) 0%, rgba(10,9,7,.62) 34%, rgba(10,9,7,0) 58%); }
  .hero .dentro { width: 100%; padding-block: 48px; }
  .hero .dentro > * { max-width: 520px; }
}
.hero .migas, .hero .migas a { color: rgba(255,255,255,.85); }
.hero h1 { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(64px, 16vw, 128px); font-weight: 800; line-height: .88; letter-spacing: .5px; }
.hero .bajada { color: #fff; font-size: 20px; max-width: 34ch; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero .cifras-hero { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; font-size: 16px; }
.hero .cifras-hero strong { font-family: var(--f-cartel); font-size: 28px; display: block; line-height: 1; }

/* Qué es una travesía */
.que-es { display: grid; gap: 24px; padding-block: 48px; }
@media (min-width: 900px) { .que-es { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; } }
.que-es h2 { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(38px, 8vw, 60px); line-height: .95; }
.que-es h2 em { font-style: normal; color: var(--naranja); }
.pilares { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pilares li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.pilares svg { width: 40px; height: 40px; color: var(--naranja); }
.pilares strong { display: block; font-size: 19px; }
.pilares span { color: var(--texto-tenue); font-size: 17px; }
.que-es picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; }

/* Filtros */
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-bottom: 18px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--borde); background: var(--superficie); color: var(--texto); font: 700 16px var(--f-texto); cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.titulo-seccion { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(36px, 7vw, 54px); line-height: .95; margin-bottom: 14px; }

/* Tarjetas de travesía */
.lista-trav { display: grid; gap: 28px; }
@media (min-width: 900px) { .lista-trav { grid-template-columns: 1fr 1fr; gap: 32px; } }
.trav { display: grid; background: var(--superficie); border-radius: 18px; overflow: hidden; border: 1px solid var(--borde); }
.trav[hidden] { display: none; }
.trav-foto { position: relative; display: block; }
.trav-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s; }
.trav-foto:hover img { transform: scale(1.03); }
.sello-dias { position: absolute; left: 14px; top: 14px; background: var(--noche); color: #fff; font-family: var(--f-cartel); font-size: 22px; text-transform: uppercase; padding: 6px 12px; border-radius: 8px; }
.sello-3d { position: absolute; right: 14px; top: 14px; background: var(--naranja-boton); color: #fff; font-weight: 700; font-size: 15px; padding: 6px 12px; border-radius: 999px; }
.trav-cuerpo { padding: 20px; display: grid; gap: 12px; }
.trav h3 { font-family: var(--f-cartel); text-transform: uppercase; font-size: 36px; line-height: .95; }
.trav h3 a { color: var(--texto); text-decoration: none; }
.exp { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.exp li { padding: 6px 12px; border-radius: 999px; background: var(--arena); color: var(--tierra); font-weight: 700; font-size: 15px; }
.nivel { font-size: 16px; padding: 8px 12px; border-radius: 10px; }
.botas { letter-spacing: 2px; margin-right: 4px; }
.trav-acciones { display: grid; gap: 10px; }
@media (min-width: 480px) { .trav-acciones { grid-template-columns: auto auto; justify-content: start; } }

/* Sección de noche: la maqueta */
.noche { position: relative; background: var(--noche); color: var(--crema-noche); overflow: hidden; margin-top: 64px; }
.noche .noche-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.noche .dentro { position: relative; padding-block: 56px; display: grid; gap: 20px; }
.noche h2 { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(40px, 9vw, 72px); line-height: .9; color: #fff; }
.noche h2 em { font-style: normal; color: #ff8a5c; }
.noche p { font-size: 19px; max-width: 46ch; }
.noche .captura { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); display: block; }
.noche .captura img { width: 100%; display: block; }

/* Ruta 40 y aviso de fechas */
.proximo { display: grid; gap: 16px; padding-block: 56px 24px; }
@media (min-width: 900px) { .proximo { grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; } }
.tarjeta-ruta { border-radius: 18px; padding: 28px; background: repeating-linear-gradient(135deg, var(--arena) 0 18px, var(--fondo) 18px 36px); border: 2px dashed var(--tierra); display: grid; gap: 10px; }
.tarjeta-ruta .cartel { font-size: clamp(44px, 10vw, 72px); color: var(--tierra); }
.proximo .aviso { border-radius: 18px; padding: 28px; background: var(--noche-2); color: var(--crema-noche); display: grid; gap: 12px; }
.proximo .aviso h3 { font-family: var(--f-cartel); text-transform: uppercase; font-size: 34px; line-height: .95; color: #fff; }

/* Reseñas */
.resenas-trav { display: grid; gap: 16px; padding-block: 32px 8px; }
@media (min-width: 760px) { .resenas-trav { grid-template-columns: 1fr 1fr; } }
.resenas-trav figure { margin: 0; padding: 22px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde); display: grid; gap: 10px; }
.resenas-trav blockquote { margin: 0; font-size: 19px; }
.resenas-trav figcaption { color: var(--texto-tenue); font-size: 15px; }
.resenas-trav figcaption strong { color: var(--texto); display: block; font-size: 16px; }

/* Barra fija de consulta en el celular, encima de la barra de secciones */
.cta-fija { transform: translateY(160%); transition: transform .3s; }
.cta-fija.visible { transform: none; }
.cta-fija { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 24; padding: 8px max(12px, env(safe-area-inset-left, 0px)); background: linear-gradient(transparent, var(--fondo) 30%); }
.cta-fija .btn { width: 100%; }
@media (min-width: 900px) { .cta-fija { display: none; } }
body.con-cta-fija { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body.con-cta-fija { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 1180px) { body.con-cta-fija { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .trav-foto img { transition: none; } }

/* === Ficha de travesía === */

/* Ficha de travesía: arriba lo que decide (30 segundos), después el día por día único,
   el perfil de altura y el mapa plano; el 3D es opcional y a pedido. */
.treinta { display: grid; gap: 18px; padding-block: 32px 8px; }
.treinta h2 { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(30px, 6vw, 44px); line-height: .95; }
.numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.numeros li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.numeros strong { font-family: var(--f-cartel); font-size: 34px; line-height: 1; }
.numeros span { font-size: 16px; color: var(--texto-tenue); }
.numeros .pend strong { font-family: var(--f-texto); font-size: 18px; color: var(--pendiente); }
.numeros .destacado { background: var(--noche); color: #fff; border-color: var(--noche); }
.numeros .destacado span { color: rgba(255,255,255,.8); }
.experiencias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.experiencias li { padding: 8px 14px; border-radius: 999px; background: var(--naranja-boton); color: #fff; font-weight: 700; font-size: 16px; }
.acciones-ficha { display: grid; gap: 10px; }
@media (min-width: 560px) { .acciones-ficha { grid-template-columns: auto auto; justify-content: start; } }

.bloque { padding-block: 48px 8px; display: grid; gap: 18px; }
.bloque > h2 { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(34px, 7vw, 54px); line-height: .95; }
.bloque > p.nota { font-size: 15px; color: var(--texto-tenue); }

article.dia { display: grid; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; overflow: hidden; }
@media (min-width: 900px) { article.dia { grid-template-columns: 480px minmax(0, 1fr); } }
.dia-foto { position: relative; }
.dia-foto img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.sello-dia { position: absolute; left: 14px; bottom: 14px; width: 84px; height: 84px; border-radius: 50%; background: var(--noche); color: #fff; display: grid; place-items: center; align-content: center; font-family: var(--f-cartel); font-size: 40px; line-height: .8; box-shadow: 0 0 0 4px rgba(255,255,255,.85); }
.sello-dia small { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.dia-cuerpo { padding: 20px; display: grid; gap: 12px; align-content: start; }
article.dia h3 { font-family: var(--f-cartel); text-transform: uppercase; font-size: 32px; line-height: .95; }
.paradas-dia { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paradas-dia li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.paradas-dia .num, .lista-paradas .num { width: 30px; height: 30px; border-radius: 50%; background: var(--noche); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.paradas-dia .nom { font-weight: 700; }
.paradas-dia .dato { grid-column: 2; font-size: 15px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.noche-en { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--texto); background: var(--arena); border-radius: 10px; padding: 8px 12px; justify-self: start; }
.noche-en svg { width: 20px; height: 20px; }
.lista-dias { display: grid; gap: 22px; }

div.perfil { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 16px; overflow-x: auto; }
.perfil-svg { width: 100%; min-width: 860px; height: auto; display: block; }
.deslizar { font-size: 15px; color: var(--texto-tenue); }
@media (min-width: 900px) { .deslizar { display: none; } }
.perfil-svg .relleno { fill: var(--naranja); fill-opacity: .16; }
.perfil-svg .linea { fill: none; stroke: var(--naranja-boton); stroke-width: 3; stroke-linejoin: round; }
.perfil-svg .guia { stroke: var(--borde); stroke-width: 1; }
.perfil-svg .eje { fill: var(--texto-tenue); font: 600 17px var(--f-texto); }
.perfil-svg .eje.fuerte { fill: var(--texto); font-weight: 700; }
.perfil-svg .zona-alta { fill: var(--noche); fill-opacity: .07; }
.perfil-svg .marca line { stroke: var(--noche); stroke-opacity: .25; stroke-dasharray: 3 3; }
.perfil-svg .marca circle { fill: var(--noche); stroke: #fff; stroke-width: 2; }
.perfil-svg .marca text { fill: #fff; font: 800 16px var(--f-texto); }
.perfil-resumen { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px; }
.perfil-resumen strong { font-family: var(--f-cartel); font-size: 26px; display: block; line-height: 1; }

.recorrido { display: grid; gap: 18px; }
@media (min-width: 900px) { .recorrido { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.mapa-plano { position: relative; border-radius: 18px; overflow: hidden; background: var(--arena); }
.mapa-plano img { width: 100%; display: block; }
.ver-3d { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.lista-paradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-paradas li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; font-weight: 700; }

.incluye-t { display: grid; gap: 14px; }
@media (min-width: 760px) { .incluye-t { grid-template-columns: 1fr 1fr; } }
.cajita { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.cajita h3 { font-size: 20px; font-weight: 900; }
.cajita ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.cajita.pend p { font-style: italic; font-size: 16px; }

.amanecer { position: relative; margin-top: 56px; color: #fff; background: var(--noche); overflow: hidden; }
.amanecer picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.amanecer .dentro { position: relative; padding-block: 64px; display: grid; gap: 16px; }
.amanecer h2 { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(40px, 9vw, 72px); line-height: .9; }
.amanecer p { font-size: 19px; max-width: 42ch; }

/* === Piezas del sitio real (no estaban en las maquetas) === */
.aviso-vista-previa { background: var(--pendiente-fondo); color: var(--texto); border-bottom: 1px solid var(--borde); font-size: 15px; }
.aviso-vista-previa .envoltorio { padding-block: 10px; }
.selector-idioma { position: relative; }
.selector-idioma summary { list-style: none; cursor: pointer; }
.selector-idioma summary::-webkit-details-marker { display: none; }
.selector-idioma .desplegable { position: absolute; right: 0; top: 52px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; min-width: 170px; display: grid; z-index: 30; }
.selector-idioma .desplegable a, .nav .desplegable a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; color: var(--texto); text-decoration: none; font-weight: 700; font-size: 16px; }
.selector-idioma .desplegable a:hover, .nav .desplegable a:hover { background: var(--verde-claro); }
.selector-idioma .desplegable a[aria-current] { color: var(--verde-oscuro); }
.nav .desplegable { z-index: 30; }
.texto-largo h2 { font-size: 24px; font-weight: 900; margin-top: 12px; }
@media (max-width: 430px) { .selector-idioma .desplegable { right: -60px; } }

/* Portada de destino sin JavaScript: todas las regiones a la vista, sin pestañas ni resumen. */
html:not(.js) .pestanas, html:not(.js) .resumen-regiones, html:not(.js) .ver-todo { display: none; }
html:not(.js) .pin { display: inline; }
html:not(.js) .regiones { gap: 16px; }

/* Travesías en el sitio (2026-10-23): ajustes de las maquetas al pasar a plantillas. */
.btn-borde.en-oscuro { color: #fff; }
.que-es-texto { display: grid; gap: 20px; }
.hero h1.h1-largo { font-size: clamp(48px, 12vw, 104px); }
.mapa-plano .num-mapa { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--noche); color: #fff; font: 800 13px/1 var(--f-texto); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
@media (min-width: 900px) { .mapa-plano .num-mapa { width: 30px; height: 30px; font-size: 15px; } }
article.dia.sin-foto { grid-template-columns: minmax(0, 1fr); }
.sello-dia.chico { position: static; width: 64px; height: 64px; font-size: 30px; box-shadow: none; }
.sello-dia.chico small { font-size: 12px; }
.lista-paradas a, .paradas-dia a { color: inherit; }
.mapa-plano .num-mapa.doble { width: auto; padding: 0 7px; border-radius: 999px; }
.trav-foto.sin-foto { aspect-ratio: 3 / 2; background: var(--arena); }
.trav-cuerpo { align-content: start; }
/* Lema bajo el título, «No incluye» y la caminata (2026-10-23, campos del descriptivo). */
.lema { font-size: 21px; font-weight: 300; color: var(--texto-tenue); margin-top: 4px; }
.hero .lema { color: #fff; font-weight: 700; font-size: 20px; letter-spacing: .3px; }
.lista.no svg { color: var(--terracota); }
.no-incluye-t { font-size: 17px; margin: 18px 0 10px; }
.numeros strong.chico { font-family: var(--f-texto); font-size: 20px; font-weight: 900; line-height: 1.2; }

/* Maqueta 3D de la travesía (2026-10-26): la banda que la anuncia. static/js/maqueta/cargar.js la muestra solo si el
   equipo puede con WebGL; en la computadora ocupa lo mismo que la maqueta, así no salta la página al cargarla. */
.mq-banda { position: relative; isolation: isolate; overflow: hidden; margin-top: 36px; min-height: min(78svh, 620px); display: grid; align-items: end; background: var(--noche); color: #fff; }
@media (pointer: fine) and (min-width: 900px) { .mq-banda { min-height: calc(100svh - var(--alto-cab, 64px)); } }
.mq-banda .mq-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mq-banda::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 19, 15, .1) 0%, rgba(20, 19, 15, .55) 45%, rgba(20, 19, 15, .9) 100%); }
.mq-banda .dentro { width: 100%; padding-block: 40px 44px; display: grid; gap: 12px; justify-items: start; }
.mq-banda .dentro > * { max-width: 620px; }
.mq-banda .mq-rotulo { margin: 0; font: 700 14px var(--f-cartel); text-transform: uppercase; letter-spacing: .12em; color: #f0b45a; }
.mq-banda h2 { font-family: var(--f-cartel); text-transform: uppercase; font-size: clamp(38px, 7vw, 62px); line-height: .95; color: #fff; }
.mq-banda p { margin: 0; color: rgba(255, 255, 255, .9); }
.mq-banda .btn svg { width: 22px; height: 22px; }
.mq-banda.cargando .btn { opacity: .65; cursor: progress; }
.mq-estado:empty { display: none; }
.mq-estado { font-size: 15px; }
.btn-dia-3d { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--borde); background: transparent; color: var(--texto); font: 700 15px var(--f-texto); cursor: pointer; }
.btn-dia-3d svg { width: 20px; height: 20px; color: var(--naranja-boton); }
.btn-dia-3d:hover { border-color: var(--naranja-boton); }


/* === Hilo conductor (maqueta aprobada 2026-10-26, https://claude.ai/artifact/CPRZ2Xbw49QLizJubPHq83) ===
   Cuatro familias con su color, su línea del camino y su sello: privadas (verde, calmo), tradicionales (ocre,
   de horario), travesías (naranja, aventura) y traslados (azul pizarra, directo). Lo común: títulos de cartel,
   el sello redondo con aro punteado, la línea del camino y una sola forma de consultar. */
:root { --fam-priv: #4f6e21; --fam-priv-c: #eef3e6; --fam-trad: #8a5a0f; --fam-trad-c: #f8eed8; --fam-trav: #b83a14; --fam-trav-c: #fbe7df;
  --fam-tras: #2b5770; --fam-tras-c: #e3eef4; --sobre-fam: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fam-priv: #a9d073; --fam-priv-c: #26301b; --fam-trad: #e8b04a; --fam-trad-c: #2e2614;
  --fam-trav: #ff8a5c; --fam-trav-c: #3a2118; --fam-tras: #8fc3e0; --fam-tras-c: #18262e; --sobre-fam: #17160f; } }
:root[data-theme="dark"] { --fam-priv: #a9d073; --fam-priv-c: #26301b; --fam-trad: #e8b04a; --fam-trad-c: #2e2614;
  --fam-trav: #ff8a5c; --fam-trav-c: #3a2118; --fam-tras: #8fc3e0; --fam-tras-c: #18262e; --sobre-fam: #17160f; }
.fam-priv { --f: var(--fam-priv); --f-claro: var(--fam-priv-c); --f-oscuro: #a9d073; }
.fam-trad { --f: var(--fam-trad); --f-claro: var(--fam-trad-c); --f-oscuro: #e8b04a; }
.fam-trav { --f: var(--fam-trav); --f-claro: var(--fam-trav-c); --f-oscuro: #ff8a5c; }
.fam-tras { --f: var(--fam-tras); --f-claro: var(--fam-tras-c); --f-oscuro: #8fc3e0; }
.rotulo { font-family: var(--f-cartel); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 14px; color: var(--texto-tenue); }
.titulo-cartel { font-family: var(--f-cartel); text-transform: uppercase; font-weight: 800; line-height: .95; letter-spacing: .01em; font-size: clamp(36px, 5vw, 54px); }
.btn-fam { background: var(--f); color: var(--sobre-fam); }
.btn-fam:hover { filter: brightness(1.08); }
/* La línea del camino */
.hilo { display: flex; align-items: center; width: 100%; }
.hilo i { flex: 1; height: 4px; border-radius: 2px; background: var(--f); }
.hilo.punteado i { background: repeating-linear-gradient(90deg, var(--f) 0 10px, transparent 10px 17px); }
.hilo b { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); border: 4px solid var(--f); box-sizing: border-box; }
.hilo b.lleno { background: var(--f); }
.hilo .dia-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--f); color: var(--sobre-fam); display: grid; place-items: center; font: 800 16px var(--f-cartel); outline: 2px dashed var(--f); outline-offset: 3px; }
.hilo .punta { flex: none; width: 0; height: 0; border-left: 14px solid var(--f); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
/* El sello de la familia */
.sello-fam { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--f); color: var(--sobre-fam); display: grid; place-items: center; outline: 2px dashed var(--f); outline-offset: 4px; }
.sello-fam svg { width: 28px; height: 28px; }
/* Rasgos con ícono */
.rasgos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; line-height: 1.35; }
.rasgos li { display: flex; gap: 12px; align-items: center; }
.rasgos .ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--f-claro); color: var(--f); display: grid; place-items: center; }
.rasgos .ico svg { width: 22px; height: 22px; }
.hero .rasgos .ico { background: rgba(255, 255, 255, .14); color: var(--f-oscuro); border: 1px solid rgba(255, 255, 255, .3); }

/* Home */
.home-seccion { padding-top: 64px; display: grid; gap: 26px; }
.home-cabeza { display: grid; gap: 10px; }
.puertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.puerta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.puerta > img, .puerta .ruta-ab { width: 100%; height: 200px; object-fit: cover; display: block; }
.puerta .ruta-ab { background: #14130f; color: #f3eee2; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 26px; box-sizing: border-box; }
.puerta .ruta-ab .hilo { --superficie: #14130f; --f: #8fc3e0; }
.puerta .ruta-ab .extremos { display: flex; justify-content: space-between; }
.puerta .ruta-ab .rotulo { color: #f3eee2; }
.puerta .ruta-ab strong { font-family: var(--f-cartel); text-transform: uppercase; font-size: 28px; font-weight: 800; }
.puerta-cuerpo { padding: 0 22px 24px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.puerta-cuerpo .sello-fam { margin-top: -30px; }
.puerta h3 { font-family: var(--f-cartel); text-transform: uppercase; font-weight: 800; font-size: 32px; line-height: .95; }
.puerta-cuerpo .hilo { margin-top: auto; }
.puerta .btn { width: 100%; box-sizing: border-box; }
.destinos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.destino-t { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.destino-t img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; background: var(--arena); display: block; }
.destino-t > div { padding: 28px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.destino-t h3 { font-family: var(--f-cartel); text-transform: uppercase; font-weight: 800; font-size: 44px; line-height: .95; }
.region-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.region-chips span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--borde); font-weight: 700; font-size: 15px; }
.destacada { margin-top: 80px; background: var(--noche); color: var(--crema-noche); }
.destacada .envoltorio { display: grid; grid-template-columns: minmax(0, 1fr); }
.destacada .texto { padding-block: 48px; display: grid; gap: 18px; align-content: center; justify-items: start; }
.destacada .texto .hilo { --superficie: var(--noche); max-width: 420px; }
.destacada h2 { color: #fff; }
.destacada img { width: 100%; height: 300px; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .destacada .envoltorio { grid-template-columns: 1fr 1fr; }
  .destacada .texto { padding: 56px 40px 56px 0; }
  .destacada img { height: 100%; min-height: 440px; }
}
.porque { display: grid; gap: 28px; }
@media (min-width: 900px) { .porque { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.porque h3 { font-family: var(--f-cartel); text-transform: uppercase; font-weight: 800; font-size: 28px; line-height: .95; margin-bottom: 8px; }
.porque p { color: var(--texto-tenue); }
.armamos { margin-top: 72px; background: var(--arena); }
.armamos .envoltorio { display: grid; gap: 0 32px; align-items: center; }
.armamos img { width: 100%; height: 360px; object-fit: cover; object-position: 50% 30%; display: block; }
.armamos .texto { padding-block: 36px 44px; display: grid; gap: 16px; justify-items: start; }
@media (min-width: 900px) { .armamos .envoltorio { grid-template-columns: 1fr 1fr; } .armamos img { height: 440px; } }
.resenas-home { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.resenas-home figure { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 22px; display: grid; gap: 8px; }
.resenas-home blockquote { margin: 0; }
/* Portada de privadas y de destinos */
.familia-lista { display: grid; gap: 24px; }
@media (min-width: 700px) { .familia-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .familia-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.priv-t { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.priv-foto { display: block; aspect-ratio: 3 / 2; background: var(--arena); }
.priv-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.priv-cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.priv-t h3 { font-family: var(--f-cartel); text-transform: uppercase; font-weight: 800; font-size: 28px; line-height: .95; }
.priv-t h3 a { color: inherit; text-decoration: none; }
.priv-t .dato { color: var(--texto-tenue); font-size: 15px; }
.priv-t .lema { font-style: italic; color: var(--texto-tenue); }
.priv-t .btn { margin-top: auto; align-self: flex-start; }
.hero h1.h1-home { font-size: clamp(44px, 6.4vw, 84px); line-height: .92; }
@media (min-width: 900px) { .hero .dentro > h1.h1-home { max-width: 760px; } }
.destinos-lista { align-items: start; }
.cab-derecha .selector { white-space: nowrap; }