/* ============================================================
   Sitioideal — Diseño «Brújula» (tours, excursiones, guías de turistas, ecoturismo y agencias de viajes) · paso 7.z.58a
   Va encima de sitio.css. De aventura, como un mapa de ruta: papel cálido con curvas de nivel en el color del negocio,
   la tinta oscura del mapa (el color principal oscurecido) y el acento en la ruta punteada, los números de parada y
   los puntos de salida. Letra de cartel de parque para los títulos (Bitter) y una letra clara para el texto (Sofia Sans).
   La portada lleva la foto en el marco de un mapa (filete de tramos claros y oscuros, coordenadas, la ruta punteada
   hasta el punto de salida y la cartela con «Salidas desde» y la escala) y la rosa de los vientos, que se mece
   despacio; los tours, fichas de ruta con su número, el recorrido con la duración y el precio por persona; la galería,
   las paradas del recorrido unidas por la ruta. Cada título lleva abajo un tramo de ruta punteada con su punto de salida.
   Las curvas de nivel son una máscara (un SVG que se repite sin costura) pintada con el color del negocio.
   Los textos usan el color principal oscurecido para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/brujula/
   ============================================================ */

.diseno-brujula {
    --br-titulo: "Bitter", "Rockwell", Georgia, serif;
    --br-letra: "Sofia Sans", "Segoe UI", system-ui, sans-serif;
    --br-papel: color-mix(in srgb, var(--c-fondo) 35%, #F5EFE2);                    /* el papel del mapa */
    --br-papel-2: color-mix(in srgb, var(--c-primario) 7%, #EEE6D4);
    --br-blanco: #FFFDF8;
    --br-tinta: color-mix(in srgb, var(--c-primario) 26%, #1B1E17);
    --br-tinta-suave: color-mix(in srgb, var(--br-tinta) 76%, transparent);
    --br-principal: color-mix(in srgb, var(--c-primario) 86%, #000);
    --br-principal-oscuro: color-mix(in srgb, var(--br-principal) 72%, #000);
    --br-acento: var(--c-acento);
    --br-acento-texto: color-mix(in srgb, var(--c-acento) 62%, #2A1206);           /* el acento, para leerse en lo claro */
    --br-suave: color-mix(in srgb, var(--c-primario) 10%, var(--br-blanco));
    --br-curvas: color-mix(in srgb, var(--c-primario) 15%, transparent);            /* las curvas de nivel */
    --br-linea: color-mix(in srgb, var(--br-tinta) 14%, transparent);
    --br-linea-fuerte: color-mix(in srgb, var(--br-tinta) 28%, transparent);
    --br-sombra: 0 16px 32px -24px rgba(35, 30, 15, .55), 0 1px 2px rgba(35, 30, 15, .08);
    --br-radio: 12px;
    --br-topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480' fill='none' stroke='%23000'%3E%3Cpath stroke-width='1.1' d='M429 85C434 83 445 80 450 74C455 69 458 60 458 52C458 44 452 32 449 27C446 21 443 21 440 20C437 18 433 17 428 17C424 17 419 18 415 20C411 22 407 25 404 28C401 32 398 36 396 40C395 44 393 50 393 55C393 60 395 65 396 68C398 72 400 75 403 78C406 80 411 83 415 84C419 85 423 87 429 85ZM405 0C401 2 391 8 385 13C380 19 378 21 370 33C362 46 342 78 337 88C331 99 335 94 335 97C335 99 335 101 338 105C342 109 347 114 355 120C364 126 377 133 387 138C396 143 405 147 413 149C421 152 429 153 435 154C441 154 444 153 448 152C452 150 453 152 458 145C464 138 476 115 480 109M480 41C478 36 474 22 469 15C465 8 456 2 453 0M0 109C1 104 5 90 5 78C5 67 1 47 0 41M306 287C310 286 312 283 312 280C313 277 311 272 309 270C306 268 302 266 298 265C295 265 290 266 288 268C286 269 286 273 286 275C286 277 287 281 290 283C293 285 302 287 306 287ZM453 480C449 479 438 474 430 474C422 474 409 479 405 480M387 0C378 10 353 44 333 59C314 74 281 83 269 90C257 97 262 96 261 98C260 101 259 103 261 105C262 107 260 108 268 111C277 114 299 119 312 124C324 129 330 131 345 140C360 149 384 166 402 177C419 187 439 195 452 204C465 213 475 226 480 231M480 16 469 0M0 231C3 233 11 242 17 245C22 248 28 249 33 248C39 247 45 244 49 240C52 236 54 229 55 223C55 218 55 217 51 207C46 196 33 182 28 162C23 142 25 111 20 87C15 62 3 28 0 16M314 307C320 306 324 303 328 300C332 297 335 292 337 288C339 284 340 279 339 275C338 271 337 266 333 261C330 257 326 253 320 250C314 247 307 244 300 242C293 241 286 240 280 240C274 240 270 242 267 245C263 247 262 250 261 253C260 257 258 259 260 265C261 271 265 285 270 292C275 299 283 304 290 306C297 309 308 308 314 307ZM469 480C466 478 458 471 452 469C445 466 439 465 432 465C424 465 416 466 408 469C401 471 391 478 387 480M0 257C4 258 15 265 23 266C32 267 43 264 50 261C57 257 64 250 68 243C72 236 74 226 74 218C75 211 76 215 71 198C67 181 57 146 47 117C37 87 20 41 12 22C4 2 3 4 1 0M373 0C367 6 346 30 337 38C328 47 326 47 318 51C311 55 306 57 293 60C280 63 252 67 240 70C228 73 235 67 222 78C210 89 178 125 168 137C157 148 162 144 162 148C161 152 161 156 162 160C164 164 167 168 171 172C175 175 179 178 185 182C192 185 205 191 212 193C219 195 224 196 228 196C232 195 231 197 235 191C239 185 245 166 250 158C254 151 256 150 262 147C267 144 275 141 283 141C292 141 303 142 312 145C321 147 325 148 338 157C351 165 372 184 389 195C406 206 425 212 440 222C455 232 473 251 480 257M310 320C320 319 328 316 335 312C342 308 348 303 351 297C355 291 357 284 357 277C357 270 355 261 352 255C349 249 345 246 340 242C334 238 332 236 320 232C308 227 277 219 265 216C253 214 251 214 247 216C243 218 242 221 241 227C241 233 241 244 241 252C242 260 244 268 246 275C249 282 250 287 255 293C260 300 269 311 278 315C288 320 301 321 310 320ZM480 479C477 476 468 466 460 462C452 458 443 456 433 456C424 456 412 459 402 463C392 467 378 477 373 480M1 480 0 479M138 0C138 4 134 13 136 23C137 34 146 56 149 65C151 74 151 74 149 80C146 86 141 94 135 99C129 103 120 107 112 107C104 106 96 104 87 98C78 92 64 80 57 71C49 62 46 57 40 45C35 33 25 8 22 0M347 0C341 5 323 23 310 29C297 35 280 37 270 38C260 39 256 37 250 35C244 34 241 35 233 29C226 23 209 5 204 0M0 292C6 291 25 291 37 288C48 285 61 279 70 273C79 268 82 264 90 253C97 242 108 217 113 208C119 200 120 202 123 201C127 199 128 198 135 199C142 200 158 203 168 207C179 212 190 219 197 226C204 232 203 231 210 245C218 259 232 297 240 311C248 325 251 324 257 328C263 333 268 337 278 339C288 340 303 342 317 339C330 337 350 329 361 323C372 318 376 315 383 307C390 298 398 278 403 270C408 263 409 264 413 263C418 263 421 262 428 266C436 269 451 281 460 286C469 290 477 291 480 292M480 451C475 449 462 441 452 439C441 437 430 438 418 440C406 443 392 448 380 455C368 462 353 476 347 480M22 480 0 451M204 480C201 478 193 468 187 465C181 462 174 461 168 461C162 461 155 463 150 466C145 469 140 478 138 480M121 0C121 10 121 50 119 62C118 74 116 69 113 72C110 74 105 76 100 76C95 75 87 74 80 70C73 66 66 60 60 54C54 48 51 42 47 33C42 24 36 6 33 0M333 0C329 3 315 15 305 20C295 24 285 26 275 26C265 26 255 24 247 20C238 16 226 3 222 0M0 308C7 306 31 300 43 296C56 291 66 286 75 281C84 276 87 273 95 263C103 254 115 232 123 224C132 216 138 216 145 216C152 215 161 218 168 221C176 225 184 231 190 237C195 242 194 240 202 254C209 268 225 306 233 320C241 334 245 334 251 338C258 343 265 346 272 348C279 350 286 351 293 351C301 351 307 351 318 348C330 346 347 341 364 335C381 329 402 315 422 310C441 306 470 308 480 308M480 437C475 435 460 428 448 427C437 426 424 428 412 432C399 436 385 442 372 450C359 458 340 475 333 480M33 480C31 476 25 461 19 453C14 446 3 439 0 437M222 480C218 476 206 460 197 455C188 449 176 448 168 447C161 446 157 448 152 449C146 451 141 454 137 456C132 459 129 463 127 467C124 471 122 478 121 480M104 0C103 6 99 28 98 35C96 42 95 40 93 42C91 44 88 45 85 45C82 45 77 44 73 42C70 40 68 40 63 33C59 26 50 5 47 0M317 0C314 2 303 8 297 11C290 13 283 14 277 14C270 14 263 13 257 10C251 8 243 2 240 0M0 325C14 319 66 296 83 287C100 278 94 280 102 272C109 264 122 245 130 239C138 232 144 232 150 232C156 231 161 233 167 236C172 238 172 231 182 247C191 263 215 313 225 330C235 346 237 344 243 348C250 353 255 357 265 359C275 361 282 363 303 361C324 358 369 345 392 343C415 340 427 347 442 344C456 341 474 328 480 325M480 421C475 419 461 412 450 412C439 412 429 414 415 419C401 424 381 433 365 443C349 453 325 474 317 480M47 480C44 474 38 455 30 445C22 435 5 425 0 421M240 480C235 474 213 451 205 444C197 437 196 439 190 437C184 436 179 435 172 435C164 435 154 436 147 438C139 440 131 444 125 448C119 452 114 456 111 462C107 467 105 477 104 480M290 463C284 465 279 465 273 463C268 462 266 464 258 455C251 446 236 417 230 408C224 400 233 403 223 403C214 403 194 405 172 409C150 413 109 424 92 427C74 429 75 427 67 424C58 421 49 415 42 409C34 403 26 396 22 390C17 384 15 379 15 373C14 368 15 362 17 357C19 351 24 344 29 338C35 333 31 334 49 323C68 313 122 284 140 276C158 268 152 273 157 275C162 278 158 269 170 289C182 309 216 379 230 396C244 414 237 398 257 395C276 392 330 380 348 378C367 375 363 377 368 379C374 380 378 383 380 386C382 389 383 393 381 397C380 401 382 401 370 410C358 419 324 444 311 453C298 462 296 462 290 463ZM107 408C93 410 86 409 77 407C68 404 58 400 52 394C45 389 39 382 36 375C34 368 34 361 36 355C38 349 42 344 48 338C54 333 61 328 73 323C86 317 110 309 122 306C134 303 139 303 145 305C151 306 153 309 158 315C163 321 171 334 175 342C179 350 182 357 184 363C185 369 184 374 183 378C181 382 179 385 175 388C171 391 173 392 162 395C150 398 121 407 107 408ZM293 430C291 430 288 428 288 427C288 425 288 422 292 420C295 419 307 416 309 417C311 417 307 423 305 425C302 427 296 430 293 430ZM108 392C100 393 93 392 87 391C80 389 73 386 68 383C63 379 59 374 57 370C55 366 55 361 56 357C58 352 61 347 65 343C70 339 76 335 83 332C90 329 99 327 107 326C114 325 121 326 127 327C132 328 135 330 138 333C142 336 145 339 148 343C150 347 153 352 153 357C154 361 155 364 153 368C151 373 146 379 139 383C131 387 117 391 108 392Z'/%3E%3Cpath stroke-width='2' d='M426 112C433 111 440 109 445 107C450 104 455 101 459 97C463 93 466 87 468 82C470 76 472 70 472 63C472 56 471 47 469 40C468 33 465 27 461 22C458 17 453 12 448 9C443 6 438 5 432 4C425 4 417 6 410 8C403 11 397 16 392 22C386 28 381 37 378 45C375 53 373 64 372 72C372 79 373 84 375 89C377 94 381 98 386 102C391 105 398 108 405 110C412 112 419 112 426 112ZM0 275C3 276 12 279 18 279C25 280 32 279 38 277C45 275 52 273 58 269C64 266 68 264 73 257C78 250 84 242 88 227C92 212 97 180 97 167C98 153 101 163 91 147C82 130 53 91 39 67C26 42 16 11 12 0M360 0C356 4 341 20 333 26C326 33 322 36 315 39C308 43 300 45 292 47C283 49 276 51 263 50C251 50 228 46 218 44C209 41 212 41 206 35C200 29 189 12 183 6C178 1 177 2 173 2C170 2 166 3 163 4C161 6 159 8 158 12C157 15 154 16 158 23C162 31 176 49 180 58C183 68 183 72 181 80C179 88 177 93 167 103C158 114 133 135 125 143C117 151 121 149 121 152C120 154 119 156 121 160C124 164 126 168 137 175C149 182 180 197 192 204C204 212 205 213 210 218C215 223 215 221 221 235C227 249 239 286 246 300C253 314 256 313 262 318C267 323 274 326 280 328C286 330 293 331 300 331C307 331 314 330 322 328C329 326 337 323 343 320C350 317 355 314 360 308C365 302 372 296 374 283C377 271 373 244 374 235C375 226 375 228 380 227C385 226 394 227 402 228C409 230 412 228 425 236C438 244 471 269 480 275M347 212C341 212 328 212 318 210C309 208 298 205 292 201C285 197 280 193 278 188C276 184 276 178 278 174C281 170 288 165 295 164C302 164 313 166 322 171C330 176 342 189 347 195C352 201 351 204 351 207C351 209 352 211 347 212ZM480 464C476 462 464 453 455 450C446 447 436 447 425 448C414 450 401 454 390 459C379 464 365 476 360 480M12 480 0 464M288 0 270 0M0 349C4 345 11 334 26 325C41 316 73 304 92 292C110 280 125 262 136 255C146 248 148 250 153 250C158 249 161 251 165 253C169 256 168 250 176 263C184 277 203 319 212 335C221 351 224 351 230 357C236 363 238 366 247 369C256 372 261 376 283 374C305 373 359 362 379 360C399 358 396 362 402 365C409 368 416 373 419 377C422 381 424 384 422 388C421 393 421 395 410 403C398 412 370 427 353 439C337 450 321 464 310 471C299 478 292 478 288 480M480 399C478 397 472 392 470 388C468 385 465 385 466 378C468 372 478 354 480 349M270 480C267 478 259 478 250 470C240 462 224 439 213 432C203 424 196 424 187 423C178 422 168 423 158 424C148 426 136 429 127 432C117 435 111 438 103 443C95 449 84 460 78 463C73 467 78 470 72 464C65 459 51 441 39 430C27 419 7 404 0 399'/%3E%3C/svg%3E");

    /* Superficies (sitio.css) */
    --s-fondo: var(--br-papel);
    --s-alterna: var(--br-papel-2);
    --s-tarjeta: var(--br-blanco);
    --s-tarjeta-alterna: var(--br-blanco);
    --s-encabezado: var(--br-papel);
    --s-texto: var(--br-tinta);
    --s-titulo: var(--br-tinta);
    --s-linea: var(--br-linea);
    --s-linea-fuerte: var(--br-linea-fuerte);

    background: var(--br-papel);
    font-family: var(--br-letra);
    font-size: 1.06rem;
}

/* Donde el navegador puede, cada color se ajusta solo lo necesario para leerse sobre el papel */
@supports (color: oklch(from red l c h)) {
    .diseno-brujula {
        --br-principal: oklch(from var(--c-primario) min(l, .46) c h);
        --br-tinta: oklch(from color-mix(in srgb, var(--c-primario) 26%, #1B1E17) min(l, .26) c h);
        --br-acento-texto: oklch(from var(--c-acento) min(l, .47) c h);   /* .47: también sobre el papel alterno */
    }
}

/* Títulos de cartel de parque */
.diseno-brujula h1,
.diseno-brujula h2,
.diseno-brujula h3,
.diseno-brujula h4,
.diseno-brujula .logo__nombre,
.diseno-brujula .especial__titulo,
.diseno-brujula .equipo__titulo,
.diseno-brujula .persona__nombre,
.diseno-brujula .promocion__titulo,
.diseno-brujula .servicio__nombre,
.diseno-brujula .sucursal__nombre,
.diseno-brujula .redes__titulo {
    font-family: var(--br-titulo);
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

/* Las curvas de nivel: una capa detrás de la sección, pintada con el color del negocio y recortada con la máscara */
.br-portada,
.diseno-brujula .seccion--alterna,
.diseno-brujula .pie { position: relative; isolation: isolate; }
.br-portada::before,
.diseno-brujula .seccion--alterna::before,
.diseno-brujula .pie::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--br-curvas);
    -webkit-mask: var(--br-topo) 0 0 / 480px 480px repeat;
    mask: var(--br-topo) 0 0 / 480px 480px repeat;
    pointer-events: none;
}
.diseno-brujula .seccion--alterna::before { --br-curvas: color-mix(in srgb, var(--c-primario) 9%, transparent); -webkit-mask-position: 160px 90px; mask-position: 160px 90px; }
.diseno-brujula .pie::before { --br-curvas: rgba(255, 255, 255, .07); }

/* ---------- Encabezado: el papel ---------- */
.diseno-brujula .encabezado {
    border-bottom: 1px solid var(--br-linea);
    background: color-mix(in srgb, var(--br-papel) 92%, transparent);
    backdrop-filter: saturate(1.1) blur(10px);
}
.diseno-brujula .logo__nombre { color: var(--br-tinta); font-size: 1.45rem; font-weight: 800; }
.diseno-brujula .menu a { color: var(--br-tinta); font-size: .98rem; font-weight: 600; }
.diseno-brujula .menu a:hover { color: var(--br-principal); }

/* ---------- Botones: firmes, como letreros de sendero ---------- */
.diseno-brujula .boton {
    border-radius: 10px;
    font-family: var(--br-titulo);
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: 0;
}
.diseno-brujula .boton--principal { border: 0; background: var(--br-principal); color: #FFFFFF; box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--br-principal) 85%, transparent); }
.diseno-brujula .boton--principal:hover { background: var(--br-principal-oscuro); }
.diseno-brujula .boton--secundario { border: 1.5px solid var(--br-tinta); background: transparent; color: var(--br-tinta); }
.diseno-brujula .boton--secundario:hover { background: var(--br-tinta); color: var(--br-papel); }
.diseno-brujula .boton-chico { border-radius: 8px; }

/* ---------- Portada: el mapa de ruta ---------- */
.br-portada {
    padding-top: clamp(36px, 5vw, 76px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--br-papel), color-mix(in srgb, var(--br-suave) 55%, var(--br-papel)));
    color: var(--br-tinta);
}
.br-portada__rejilla {
    position: relative;
    display: grid;
    gap: 40px;
    padding-bottom: clamp(52px, 6vw, 88px);
}
@media (min-width: 900px) {
    .br-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 60px; }
}

/* El giro en un letrero de sendero (con su punta de flecha) */
.br-giro {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 8px 30px 8px 12px;
    background: var(--br-tinta);
    color: var(--br-papel);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    font-family: var(--br-titulo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.25;
    text-transform: uppercase;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.br-giro .icono { flex: none; width: 22px; height: 22px; color: var(--br-acento); }
.br-portada__nombre {
    margin: 0 0 16px;
    color: var(--br-tinta);
    font-size: clamp(2.8rem, 1.4rem + 4.2vw, 5rem);
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1;
    overflow-wrap: anywhere;
}
.br-portada__nombre--medio { font-size: clamp(2.5rem, 1.3rem + 3.5vw, 4.2rem); }
.br-portada__nombre--largo { font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.5rem); }
.br-portada__eslogan {
    max-width: 42ch;
    margin: 0 0 26px;
    color: var(--br-tinta-suave);
    font-size: clamp(1.1rem, 1rem + .3vw, 1.28rem);
    line-height: 1.55;
}
.br-portada__botones { margin-bottom: 22px; }
.diseno-brujula .estado-ahora--claro { border-color: var(--br-linea-fuerte); border-radius: 8px; background: var(--br-blanco); box-shadow: none; }

/* El mapa: papel con su filete de tramos claros y oscuros, las coordenadas arriba y la cartela abajo */
.br-portada__visual { position: relative; justify-self: center; width: min(100%, 470px); padding: 26px 26px 0 0; box-sizing: border-box; }
.br-mapa {
    position: relative;
    padding: 30px 18px 0;
    border: 1px solid var(--br-tinta);
    background: var(--br-blanco);
    box-shadow: 0 30px 50px -32px rgba(40, 30, 10, .65);
    transform: rotate(-1.2deg);
}
/* El filete del mapa */
.br-mapa::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--br-tinta);
    background:
        repeating-linear-gradient(90deg, var(--br-tinta) 0 22px, transparent 22px 44px) top / 100% 5px no-repeat,
        repeating-linear-gradient(90deg, var(--br-tinta) 0 22px, transparent 22px 44px) bottom / 100% 5px no-repeat,
        repeating-linear-gradient(180deg, var(--br-tinta) 0 22px, transparent 22px 44px) left / 5px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--br-tinta) 0 22px, transparent 22px 44px) right / 5px 100% no-repeat;
    pointer-events: none;
}
.br-mapa__coordenadas {
    position: absolute;
    top: 10px;
    left: 22px;
    z-index: 1;
    margin: 0;
    padding: 0 6px;
    background: var(--br-blanco);
    color: var(--br-tinta);
    font-family: var(--br-titulo);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.br-mapa__foto { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; background: var(--br-suave); }
.br-mapa__foto picture,
.br-mapa__foto picture img { display: block; width: 100%; height: 100%; }
.br-mapa__foto picture img { object-fit: cover; }
/* La nota de IA arriba a la izquierda (la ruta va abajo y la rosa en la esquina de la derecha) */
.br-mapa__foto > .marca-ia--foto { top: 10px; bottom: auto; left: 10px; transform: none; }

/* Sin foto: montañas y sol con los colores del negocio */
.br-mapa__foto--dibujo { background: linear-gradient(180deg, color-mix(in srgb, var(--c-acento) 22%, #FFF8EA), color-mix(in srgb, var(--c-primario) 10%, #FFF8EA)); }
.br-paisaje { position: absolute; inset: 0; }
.br-paisaje__sol { position: absolute; top: 16%; left: 58%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--br-acento); opacity: .9; }
.br-paisaje__lejos,
.br-paisaje__cerca { position: absolute; right: 0; bottom: 0; left: 0; }
.br-paisaje__lejos { height: 62%; background: color-mix(in srgb, var(--c-primario) 45%, #FFFFFF); clip-path: polygon(0 52%, 18% 20%, 32% 46%, 52% 4%, 70% 40%, 84% 22%, 100% 48%, 100% 100%, 0 100%); }
.br-paisaje__cerca { height: 44%; background: var(--br-principal); clip-path: polygon(0 38%, 22% 70%, 42% 18%, 60% 56%, 78% 30%, 100% 64%, 100% 100%, 0 100%); }

/* La ruta punteada hasta el punto de salida */
/* Solo en la mitad de abajo de la foto: arriba a la izquierda va la nota de IA */
.br-ruta { position: absolute; top: 50%; right: 0; bottom: 0; left: 0; width: 100%; height: 50%; overflow: visible; pointer-events: none; }
.br-ruta path { fill: none; stroke-linecap: round; }
.br-ruta__fondo { stroke: rgba(255, 255, 255, .78); stroke-width: 7px; }
.br-ruta__linea { stroke: var(--br-acento); stroke-width: 3.5px; stroke-dasharray: 2 9; }
.br-ruta__inicio {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 14px;
    height: 14px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: var(--br-acento);
    transform: translate(-50%, 50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.br-ruta__llegada {
    position: absolute;
    top: 70%;
    left: 84%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50% 50% 50% 0;
    background: var(--br-acento);
    color: var(--c-sobre-acento);
    transform: translate(-50%, -100%) rotate(-45deg);
    box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .5);
}
.br-ruta__llegada .icono { width: 20px; height: 20px; transform: rotate(45deg); stroke-width: 2.4; }

/* La cartela del mapa: «Salidas desde» y la escala */
.br-mapa__cartela {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    min-height: 30px;
    padding: 12px 4px 20px;
}
.br-salida { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--br-tinta); line-height: 1.2; }
.br-salida .icono { flex: none; width: 22px; height: 22px; color: var(--br-acento-texto); }
.br-salida small { display: block; color: var(--br-tinta-suave); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.br-salida strong { display: block; font-family: var(--br-titulo); font-size: 1.12rem; font-weight: 800; overflow-wrap: anywhere; }
.br-escala { position: relative; display: grid; grid-template-columns: auto auto; justify-content: space-between; width: 92px; margin-left: auto; padding-top: 9px; color: var(--br-tinta-suave); font-size: .68rem; font-weight: 700; }
.br-escala__barra {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    border: 1px solid var(--br-tinta);
    background: repeating-linear-gradient(90deg, var(--br-tinta) 0 25%, transparent 25% 50%);
}

/* La rosa de los vientos, en la esquina del mapa; su carta se mece despacio */
.br-rosa {
    position: absolute;
    top: -8px;
    right: -10px;
    z-index: 2;
    width: clamp(104px, 9vw + 30px, 138px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 10px 14px rgba(40, 30, 10, .3));
}
.br-rosa__caja { fill: var(--br-blanco); stroke: var(--br-tinta); stroke-width: 1.5; }
.br-rosa__anillo { fill: none; stroke: var(--br-tinta); stroke-width: 1.4; }
.br-rosa__marcas { fill: none; stroke: var(--br-tinta); stroke-width: 6; stroke-dasharray: 1.1 3.2633; opacity: .7; }
.br-rosa__carta { transform-origin: 80px 80px; animation: br-mecer 7s ease-in-out infinite; }
.br-rosa__cortas path { fill: var(--br-principal); }
.br-rosa__largas path { fill: var(--br-tinta); }
.br-rosa path.br-rosa__luz { fill: color-mix(in srgb, var(--br-principal) 30%, #FFFFFF); }
.br-rosa .br-rosa__norte { fill: var(--br-acento); }
.br-rosa .br-rosa__norte.br-rosa__luz { fill: color-mix(in srgb, var(--br-acento) 55%, #FFFFFF); }
.br-rosa__centro { fill: var(--br-blanco); stroke: var(--br-tinta); stroke-width: 2; }
.br-rosa__letras text { fill: var(--br-tinta); font-family: var(--br-titulo); font-size: 15px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
@keyframes br-mecer {
    0%, 100% { transform: rotate(-7deg); }
    50%      { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .br-rosa__carta { animation: none; }
}

@media (max-width: 899.98px) {
    .br-portada__visual { width: min(100%, 440px); }
}
@media (max-width: 599.98px) {
    .br-portada__visual { width: min(100%, 360px); padding: 22px 16px 0 0; }
    .br-mapa { padding: 26px 14px 0; }
    .br-mapa__coordenadas { left: 18px; font-size: .66rem; }
    .br-rosa { top: -6px; right: -4px; width: 88px; }
    .br-ruta__llegada { width: 32px; height: 32px; }
    .br-ruta__llegada .icono { width: 17px; height: 17px; }
    .br-salida strong { font-size: 1rem; }
    .br-escala { width: 72px; }
}

/* ---------- Títulos de sección: con su tramo de ruta punteada ---------- */
.diseno-brujula .seccion h2 {
    color: var(--br-tinta);
    font-size: clamp(2.2rem, 1.6rem + 1.9vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
}
.diseno-brujula .seccion h2::after {
    content: "";
    display: block;
    width: 96px;
    height: 12px;
    margin-top: 14px;
    background:
        radial-gradient(circle, var(--br-acento) 4.5px, transparent 5px) left center / 12px 12px no-repeat,
        repeating-linear-gradient(90deg, var(--br-acento) 0 7px, transparent 7px 13px) 18px center / calc(100% - 18px) 3px no-repeat;
}
.diseno-brujula .seccion [style*="text-align: center"] h2::after,
.diseno-brujula .seccion .centrado h2::after { margin-inline: auto; }

.br-cabeza { margin-bottom: 30px; }
.br-cabeza h2 { margin: 0 !important; }
.br-antetitulo {
    margin: 0 0 6px;
    color: var(--br-acento-texto);
    font-family: var(--br-titulo);
    font-size: .95rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
}

/* ---------- Tours: fichas de ruta ---------- */
.diseno-brujula .catalogo__indice a {
    border: 1.5px solid var(--br-linea-fuerte);
    border-radius: 8px;
    background: var(--br-blanco);
    color: var(--br-tinta);
    font-weight: 600;
    white-space: nowrap;
}
.diseno-brujula .catalogo__indice a:hover { border-color: var(--br-principal); color: var(--br-principal); }

.br-grupo + .br-grupo { margin-top: 56px; }
.br-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    color: var(--br-tinta);
    font-size: clamp(1.45rem, 1.25rem + .7vw, 1.85rem);
    line-height: 1.15;
}
/* La marca de sendero de cada grupo: círculo, cuadro, triángulo y rombo */
.br-marca { flex: none; width: 26px; height: 26px; border: 3px solid var(--br-blanco); background: var(--br-acento); box-shadow: 0 0 0 1.5px var(--br-tinta); box-sizing: border-box; }
.br-marca--circulo { border-radius: 50%; }
.br-marca--cuadro { border-radius: 3px; background: var(--br-principal); }
.br-marca--triangulo { border: 0; box-shadow: none; background: var(--br-acento); clip-path: polygon(50% 4%, 98% 92%, 2% 92%); }
.br-marca--rombo { border-radius: 3px; background: var(--br-principal); transform: rotate(45deg) scale(.82); }
.br-grupo__nombre .icono { flex: none; width: 26px; height: 26px; color: var(--br-principal); stroke-width: 1.8; }
.br-grupo__descripcion { max-width: 64ch; margin: 0 0 4px 38px; color: var(--br-tinta-suave); }

.br-fichas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 600px) {
    .br-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
}
@media (min-width: 1000px) {
    .br-fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
}

.br-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--br-linea);
    border-radius: var(--br-radio);
    background: var(--br-blanco);
    box-shadow: var(--br-sombra);
    color: var(--br-tinta);
}
.br-ficha--favorito { border-color: color-mix(in srgb, var(--c-acento) 60%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-acento) 50%, transparent), var(--br-sombra); }

.br-ficha__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--br-suave); }
.br-ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
/* La nota de IA arriba a la derecha (a la izquierda va el número y abajo «Favorito de los viajeros») */
.br-ficha__foto > .marca-ia--foto { top: 10px; right: 10px; bottom: auto; left: auto; max-width: calc(100% - 70px); transform: none; }
/* Sin foto: las curvas de nivel y el dibujo del grupo */
.br-ficha__foto--dibujo { display: grid; place-items: center; isolation: isolate; }
.br-ficha__foto--dibujo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: currentColor;
    opacity: .16;
    -webkit-mask: var(--br-topo) 0 0 / 360px 360px repeat;
    mask: var(--br-topo) 0 0 / 360px 360px repeat;
}
.br-ficha__foto--1 { background: color-mix(in srgb, var(--c-primario) 14%, #FFFDF8); color: var(--br-principal); }
.br-ficha__foto--2 { background: color-mix(in srgb, var(--c-acento) 18%, #FFFDF8); color: var(--br-acento-texto); }
.br-ficha__foto--3 { background: color-mix(in srgb, var(--br-tinta) 8%, #FFFDF8); color: var(--br-tinta); }
.br-ficha__dibujo { display: grid; place-items: center; width: 84px; height: 84px; border: 2px dashed currentColor; border-radius: 50%; background: var(--br-blanco); }
.br-ficha__dibujo .icono { width: 42px; height: 42px; stroke-width: 1.7; }

/* El número de parada */
.br-ficha__numero {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border: 3px solid #FFFFFF;
    border-radius: 999px;
    background: var(--br-tinta);
    color: #FFFFFF;
    font-family: var(--br-titulo);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5);
    box-sizing: border-box;
}
/* «Favorito de los viajeros» */
.br-ficha__favorito {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 5px 12px 5px 9px;
    border-radius: 6px;
    background: var(--br-acento);
    color: var(--c-sobre-acento);
    font-family: var(--br-titulo);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5);
    box-sizing: border-box;
}
.br-ficha__favorito .icono { flex: none; width: 15px; height: 15px; fill: currentColor; }

.br-ficha__cuerpo { flex: 1; padding: 16px 18px 0; }
/* El recorrido: el punto de salida, la ruta punteada con la duración en medio y la bandera de llegada */
.br-recorrido { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--br-acento-texto); }
.br-recorrido__inicio { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--br-acento); }
.br-recorrido__tramo { flex: 1; min-width: 12px; height: 3px; background: repeating-linear-gradient(90deg, var(--br-acento) 0 5px, transparent 5px 10px); }
.br-recorrido__duracion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 70%;
    padding: 4px 11px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-family: var(--br-titulo);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}
.br-recorrido__duracion .icono { flex: none; width: 15px; height: 15px; }
.br-recorrido > .icono { flex: none; width: 20px; height: 20px; color: var(--br-tinta); }

.br-ficha__nombre { margin: 0 0 6px; color: var(--br-tinta); font-size: 1.3rem; font-weight: 800; line-height: 1.18; overflow-wrap: anywhere; }
.br-ficha__descripcion { margin: 0; color: var(--br-tinta-suave); font-size: .98rem; line-height: 1.5; }
.br-ficha__datos { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.br-ficha__datos li { display: flex; align-items: flex-start; gap: 7px; color: var(--br-tinta); font-size: .92rem; font-weight: 600; line-height: 1.35; }
.br-ficha__datos .icono { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--br-principal); }
.br-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 7px; margin: 14px 0 0; color: var(--br-tinta); line-height: 1.1; }
.br-precio small { color: var(--br-tinta-suave); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.br-precio strong { font-family: var(--br-titulo); font-size: 1.6rem; font-weight: 800; white-space: nowrap; font-variant-numeric: lining-nums; }
.br-precio span { color: var(--br-tinta-suave); font-size: .92rem; font-weight: 600; }
.diseno-brujula .br-ficha .ficha-ver { margin-top: 10px; color: var(--br-principal); }

.br-reservar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 14px 14px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--br-principal);
    color: #FFFFFF;
    font-family: var(--br-titulo);
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.br-reservar .icono { flex: none; width: 18px; height: 18px; }
.br-reservar:hover { background: var(--br-principal-oscuro); }

@media (max-width: 599.98px) {
    .br-ficha__cuerpo { padding: 14px 14px 0; }
    .br-ficha__nombre { font-size: 1.18rem; }
    .br-grupo__descripcion { margin-left: 0; }
}

/* ---------- Galería: las paradas del recorrido ---------- */
.br-paradas {
    --br-hueco: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px var(--br-hueco);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 1000px) {
    .br-paradas { --br-hueco: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.galeria__mas > .br-paradas { margin-top: 26px; }
.br-parada { position: relative; padding-top: 44px; }
/* La ruta punteada hasta la siguiente parada (la última de cada renglón no sigue) */
.br-parada::before {
    content: "";
    position: absolute;
    top: 16px;
    right: calc(-1 * var(--br-hueco));
    left: 40px;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--br-acento) 0 7px, transparent 7px 13px);
}
.br-parada:last-child::before,
.br-parada:nth-child(2n)::before { right: 8px; }
@media (min-width: 1000px) {
    .br-parada:nth-child(2n)::before { right: calc(-1 * var(--br-hueco)); }
    .br-parada:nth-child(3n)::before,
    .br-parada:last-child::before { right: 8px; }
}
/* La última parada: la ruta termina en su punto */
.br-paradas:not(.br-paradas--demas) .br-parada:last-child::after,
.br-paradas--demas .br-parada:last-child::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--br-acento);
}
.br-parada__numero {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 3px solid var(--br-blanco);
    border-radius: 50%;
    background: var(--br-tinta);
    color: #FFFFFF;
    font-family: var(--br-titulo);
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1.5px var(--br-tinta);
}
.br-parada:first-child .br-parada__numero { background: var(--br-acento); color: var(--c-sobre-acento); box-shadow: 0 0 0 1.5px var(--br-acento-texto); }

.diseno-brujula .br-parada__enlace {
    position: relative;
    display: block;
    padding: 7px 7px 0;
    border: 1px solid var(--br-linea);
    border-radius: 4px;
    background: var(--br-blanco);
    color: var(--br-tinta);
    text-decoration: none;
    box-shadow: var(--br-sombra);
}
.diseno-brujula .br-parada__enlace img { aspect-ratio: auto; transform: none; }
.br-parada__imagen { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.br-parada__imagen img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s ease; }
.br-parada__enlace:hover .br-parada__imagen img { scale: 1.04; }
.br-parada__pie {
    display: block;
    padding: 9px 3px 10px;
    color: var(--br-tinta);
    font-family: var(--br-titulo);
    font-size: .92rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.br-parada__enlace:not(:has(.br-parada__pie)) { padding-bottom: 7px; }
@media (max-width: 599.98px) {
    .br-paradas { --br-hueco: 12px; row-gap: 20px; }
    .br-parada { padding-top: 40px; }
    .br-parada__pie { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .br-parada__imagen img { transition: none; }
    .br-parada__enlace:hover .br-parada__imagen img { scale: none; }
}
.diseno-brujula .galeria__ver-mas { border-radius: 8px; }

/* ---------- Lo demás: tarjetas de papel ---------- */
.diseno-brujula .testimonio,
.diseno-brujula .promocion,
.diseno-brujula .pregunta,
.diseno-brujula .contacto__item,
.diseno-brujula .sucursal,
.diseno-brujula .especial__punto,
.diseno-brujula .persona,
.diseno-brujula .servicio,
.diseno-brujula .destacado-tarjeta { border-color: var(--br-linea); border-radius: var(--br-radio); box-shadow: var(--br-sombra); }
.diseno-brujula .promocion__foto { border-radius: 8px; }
.diseno-brujula .promocion__hoy { border-radius: 6px; background: var(--c-acento); color: var(--c-sobre-acento); }
.diseno-brujula .testimonio > .icono { color: var(--br-acento); opacity: .45; }
.diseno-brujula .testimonio__iniciales,
.diseno-brujula .contacto__icono,
.diseno-brujula .especial__marca,
.diseno-brujula .persona__foto--iniciales,
.diseno-brujula .pregunta__signo { background: var(--br-suave); color: var(--br-principal); }
.diseno-brujula .nosotros__foto img { border: 7px solid var(--br-blanco); border-radius: 4px; box-shadow: var(--br-sombra); }
.diseno-brujula .nosotros__desde { border: 1px solid var(--br-linea); border-radius: 8px; background: var(--br-blanco); color: var(--br-tinta); }
.diseno-brujula .nosotros__desde strong,
.diseno-brujula .nosotros__desde .icono { color: var(--br-principal); }
.diseno-brujula .mapa { border: 1px solid var(--br-tinta); border-radius: 4px; box-shadow: var(--br-sombra); }
.diseno-brujula .red { border-color: var(--br-linea-fuerte); border-radius: 8px; }
.diseno-brujula .red:hover { background: var(--br-papel-2); }

/* El horario en una tarjeta, con el día de hoy marcado */
.diseno-brujula .horario__tabla { overflow: hidden; border: 1px solid var(--br-linea); border-collapse: separate; border-spacing: 0; border-radius: var(--br-radio); background: var(--br-blanco); }
.diseno-brujula .horario__tabla th,
.diseno-brujula .horario__tabla td { padding-inline: 18px; border-bottom-color: var(--br-linea); }
.diseno-brujula .horario__tabla td { font-variant-numeric: tabular-nums; }
.diseno-brujula .horario__tabla tr:last-child th,
.diseno-brujula .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-brujula .horario__hoy th,
.diseno-brujula .horario__hoy td { background: var(--br-papel-2); }
.diseno-brujula .horario__etiqueta { border-radius: 5px; background: var(--br-principal); color: #FFFFFF; }

/* ---------- Pie oscuro con sus curvas de nivel, y barra del celular ---------- */
.diseno-brujula .pie { border-top: 6px solid var(--br-acento); background: var(--br-tinta); color: rgba(255, 255, 255, .84); }
.diseno-brujula .barra-acciones { background: color-mix(in srgb, var(--br-papel) 96%, transparent); backdrop-filter: blur(10px); }
.diseno-brujula .barra-acciones__boton--principal { border-radius: 10px; font-family: var(--br-titulo); font-weight: 700; }