/* Landing de Rutas: todos los selectores quedan dentro de la página. */
.dt-routes {
  --routes-blue: #123b79;
  --routes-deep: #102b5d;
  --routes-link: #1555ae;
  --routes-muted: #586d86;
  --routes-border: #dce6f1;
  --routes-cream: #fcfbf7;
  color: var(--routes-deep);
  background: var(--routes-cream);
  padding-bottom: 58px;
}
.dt-routes h1,
.dt-routes h2,
.dt-routes h3,
.dt-routes p { margin-top: 0; }
.dt-routes h1,
.dt-routes h2,
.dt-routes h3 { color: var(--routes-deep); font-family: Georgia, 'Times New Roman', serif; }
.dt-routes a:focus-visible { outline: 3px solid #1555ae; outline-offset: 4px; }
.dt-routes__small-label,
.dt-routes__eyebrow { color: #3565a2; font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }

/* Una fotografía documental enmarcada por los azules del portal. */
.dt-routes__hero { position: relative; min-height: clamp(360px, 34vw, 460px); overflow: hidden; isolation: isolate; background: #b4cdd8; }
.dt-routes__hero-media,
.dt-routes__hero-tint { position: absolute; inset: 0; }
.dt-routes__hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.dt-routes__hero-tint { background: linear-gradient(90deg, rgba(254,253,248,.98) 0%, rgba(254,253,248,.94) 24%, rgba(254,253,248,.67) 44%, rgba(254,253,248,.11) 69%, rgba(10,36,77,.08) 100%); }
.dt-routes__hero:before { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 13px; content: ''; background: repeating-linear-gradient(180deg, #1c4d91 0 9px, #f7f8f4 9px 11px, #85afd4 11px 15px, #f7f8f4 15px 17px); }
.dt-routes__hero-inner { position: relative; z-index: 3; display: flex; min-height: inherit; align-items: center; justify-content: space-between; }
.dt-routes__hero-copy { max-width: 620px; padding: 38px 0 46px; }
.dt-routes__hero-copy .dt-routes__eyebrow { margin-bottom: 15px; }
.dt-routes__hero h1 { margin: 0 0 13px; font-size: clamp(42px, 5.5vw, 73px); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.dt-routes__hero-copy > p:not(.dt-routes__eyebrow) { max-width: 430px; margin-bottom: 21px; color: #385371; font: 17px/1.5 Georgia, serif; }
.dt-routes__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.dt2-body .dt-routes .dt-routes__button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 15px; padding: 10px 19px; border: 1px solid var(--routes-link); border-radius: 4px; font: 700 12px/1.2 Arial, sans-serif; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
body.dt2-body .dt-routes .dt-routes__button:hover { transform: translateY(-2px); }
body.dt2-body .dt-routes .dt-routes__button--primary { color: #fff; background: var(--routes-link); }
body.dt2-body .dt-routes .dt-routes__button--primary:hover { background: #0e3775; }
body.dt2-body .dt-routes .dt-routes__button--outline { color: var(--routes-link); background: rgba(255,255,255,.82); }
body.dt2-body .dt-routes .dt-routes__button--outline:hover { background: #fff; }
.dt-routes__hero-note { align-self: flex-start; margin: 42px 10px 0 0; color: #1b4c8b; font: italic 25px/1.05 'Segoe Script', 'Brush Script MT', cursive; text-align: center; transform: rotate(-7deg); text-shadow: 0 1px 5px #fff; }
.dt-routes__archive-label { position: absolute; right: 18px; bottom: 12px; z-index: 3; padding: 4px 7px; color: #163c6c; background: rgba(255,255,255,.88); border-radius: 2px; font: 10px/1.2 Arial, sans-serif; }
.dt-routes__ceramic-rule { height: 12px; border-top: 2px solid #1d5698; border-bottom: 2px solid #1d5698; background: repeating-linear-gradient(90deg, #fff 0 8px, #83a9cc 8px 11px, #fff 11px 16px, #1d5698 16px 20px, #fff 20px 28px); }

/* Acceso temático y tarjetas. */
.dt-routes__chooser { padding: 30px 0 28px; text-align: center; }
.dt-routes__chooser .dt-routes__small-label { margin: 0 0 4px; }
.dt-routes__chooser h2 { margin: 0 0 18px; font-size: clamp(23px, 2.6vw, 31px); line-height: 1.05; }
.dt-routes__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
body.dt2-body .dt-routes .dt-routes__chips a { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 7px 15px; color: var(--routes-blue); background: #eef4fa; border: 1px solid #d8e6f3; border-radius: 999px; font: 700 12px/1.1 Arial, sans-serif; }
body.dt2-body .dt-routes .dt-routes__chips a:hover { color: #fff; background: var(--routes-link); border-color: var(--routes-link); }
.dt-routes__featured { padding: 8px 0 22px; }
.dt-routes__section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.dt-routes__section-heading .dt-routes__small-label { margin-bottom: 4px; }
.dt-routes__section-heading h2 { margin: 0 0 3px; font-size: clamp(30px, 3vw, 38px); line-height: 1.05; letter-spacing: -.025em; }
.dt-routes__section-heading p:not(.dt-routes__small-label) { margin: 0; color: var(--routes-muted); font: 13px/1.4 Georgia, serif; }
body.dt2-body .dt-routes .dt-routes__text-link { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--routes-link); font: 700 12px/1.3 Arial, sans-serif; }
body.dt2-body .dt-routes .dt-routes__text-link:hover,
body.dt2-body .dt-routes .dt-routes__card-footer a:hover,
body.dt2-body .dt-routes .dt-routes__river-copy a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dt-routes__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dt-routes__card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--routes-border); border-radius: 5px; box-shadow: 0 6px 18px rgba(16,43,93,.055); }
.dt-routes__card-image { position: relative; display: block; height: 190px; overflow: hidden; background: #dce8ef; }
.dt-routes__card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.dt-routes__card-image:hover img { transform: scale(1.035); }
.dt-routes__card-content { display: flex; flex: 1; flex-direction: column; padding: 15px 17px 14px; }
.dt-routes__card-kind { margin: 0 0 5px; color: #315f99; font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.dt-routes__card h3 { margin: 0 0 5px; font: 700 clamp(21px, 2.1vw, 27px)/1.06 Georgia, serif; letter-spacing: -.03em; }
body.dt2-body .dt-routes .dt-routes__card h3 a:hover { color: var(--routes-link); }
.dt-routes__card-summary { margin: 0 0 19px; color: var(--routes-muted); font: 13px/1.4 Georgia, serif; }
.dt-routes__card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; margin-top: auto; border-top: 1px solid #e7edf5; }
.dt-routes__card-footer span:first-child { color: #718197; font: 10px/1.2 Arial, sans-serif; }
body.dt2-body .dt-routes .dt-routes__card-footer a { flex: none; color: var(--routes-link); font: 700 11px/1.2 Arial, sans-serif; }

.dt-routes__stops { padding: 6px 0 18px; }
.dt-routes__stops-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--routes-border); }
.dt-routes__stops-heading h2 { margin: 0; font-size: 23px; line-height: 1.1; }
.dt-routes__stops-heading p { max-width: 490px; margin: 0; color: var(--routes-muted); font: 12px/1.35 Georgia, serif; }
.dt-routes__stops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 12px; }
.dt-routes__stop-card { padding: 16px 18px 15px; background: #fff; border: 1px solid var(--routes-border); border-top: 3px solid #4583ba; border-radius: 3px; scroll-margin-top: 16px; }
.dt-routes__stop-card:target { border-color: var(--routes-link); box-shadow: 0 0 0 3px rgba(21,85,174,.12); }
.dt-routes__stop-card .dt-routes__small-label { margin: 0 0 4px; font-size: 9px; }
.dt-routes__stop-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.1; }
.dt-routes__stop-card ul { display: grid; gap: 6px; padding: 0 0 0 16px; margin: 0 0 12px; color: #415a79; font: 12px/1.25 Arial, sans-serif; }
.dt-routes__stop-card li::marker { color: var(--routes-link); }
body.dt2-body .dt-routes .dt-routes__stop-card a { color: var(--routes-link); font: 700 11px/1.2 Arial, sans-serif; }
body.dt2-body .dt-routes .dt-routes__stop-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dt-routes__safety-note { padding: 9px 12px; margin: 11px 0 0; color: #3d5878; background: #eef4fa; border-left: 3px solid var(--routes-link); font: 11px/1.35 Arial, sans-serif; }

/* Recordatorios útiles, sin prometer accesibilidad o tiempos no comprobados. */
.dt-routes__practical { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 12px; padding: 17px 19px; margin-top: 12px; margin-bottom: 40px; background: #eaf2fa; border: 1px solid #cddfed; border-radius: 6px; }
.dt-routes__practical-title { display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; align-items: center; }
.dt-routes__asterisk { grid-row: span 2; color: var(--routes-link); font: 30px/1 Georgia, serif; }
.dt-routes__practical h2 { margin: 0; font-size: 17px; line-height: 1.1; }
.dt-routes__practical p { margin: 3px 0 0; color: var(--routes-muted); font: 11px/1.25 Arial, sans-serif; }
.dt-routes__practical ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; }
.dt-routes__practical li { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-left: 1px solid #c4d7ea; color: var(--routes-blue); font: 700 11px/1.2 Arial, sans-serif; }
.dt-routes__practical li span { display: grid; flex: none; width: 25px; height: 25px; place-items: center; color: #fff; background: var(--routes-link); border-radius: 50%; font: 700 10px/1 Arial, sans-serif; }

/* Un dibujo ligero evoca la ciudad sin presentarse como plano ni trazado. */
.dt-routes__story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(0, .95fr); gap: 19px; align-items: stretch; padding: 0 0 39px; }
.dt-routes__story-copy { padding: 16px 2px 12px 0; }
.dt-routes__story-copy .dt-routes__small-label { margin-bottom: 7px; }
.dt-routes__story-copy h2 { margin: 0 0 10px; font-size: clamp(30px, 3vw, 38px); line-height: 1.02; letter-spacing: -.03em; }
.dt-routes__story-copy > p:not(.dt-routes__small-label) { margin: 0 0 17px; color: var(--routes-muted); font: 14px/1.55 Georgia, serif; }
.dt-routes__story-art { position: relative; display: grid; min-height: 265px; place-items: center; overflow: hidden; background: #f3f7f6; border: 1px solid #e2e9ea; border-radius: 5px; }
.dt-routes__story-art svg { width: min(95%, 460px); height: auto; }
.dt-routes__story-art span { position: absolute; right: 20px; bottom: 16px; color: #2d5a92; font: italic 20px/1 'Segoe Script', 'Brush Script MT', cursive; transform: rotate(-5deg); }
.dt-routes__river-card { overflow: hidden; background: #fff; border: 1px solid var(--routes-border); border-radius: 5px; }
.dt-routes__river-photo { height: 126px; overflow: hidden; background: #dce8ef; }
.dt-routes__river-photo img { width: 100%; height: 100%; object-fit: cover; }
.dt-routes__river-copy { padding: 12px 14px 13px; }
.dt-routes__river-copy .dt-routes__small-label { margin-bottom: 4px; font-size: 9px; }
.dt-routes__river-copy h3 { margin: 0 0 5px; font-size: 20px; line-height: 1.06; }
.dt-routes__river-copy p:not(.dt-routes__small-label) { margin: 0 0 9px; color: var(--routes-muted); font: 11px/1.35 Georgia, serif; }
body.dt2-body .dt-routes .dt-routes__river-copy a { color: var(--routes-link); font: 700 10px/1.2 Arial, sans-serif; }

/* Cierre editorial con otra pieza de la misma biblioteca fotográfica. */
.dt-routes__closing { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 206px; overflow: hidden; background: #eaf2fa; border: 1px solid #d0deed; border-radius: 6px; }
.dt-routes__closing-photo { min-height: 206px; overflow: hidden; }
.dt-routes__closing-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.dt-routes__closing-copy { position: relative; z-index: 1; align-self: center; max-width: 520px; padding: 28px 58px 28px 36px; }
.dt-routes__closing-copy .dt-routes__small-label { margin-bottom: 5px; }
.dt-routes__closing-copy h2 { margin: 0 0 8px; font-size: clamp(25px, 2.7vw, 36px); line-height: 1.03; letter-spacing: -.025em; }
.dt-routes__closing-copy > p:not(.dt-routes__small-label) { margin: 0 0 14px; color: var(--routes-muted); font: 13px/1.45 Georgia, serif; }
.dt-routes__closing-mark { position: absolute; right: 14px; top: 8px; color: #91b3d4; font: 72px/1 Georgia, serif; opacity: .55; }

/* El tema base da height:auto a todas las imágenes; estas llenan sus marcos. */
body.dt2-body .dt-routes__hero-media img,
body.dt2-body .dt-routes__card-image img,
body.dt2-body .dt-routes__river-photo img,
body.dt2-body .dt-routes__closing-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 950px) {
  .dt-routes__hero-copy { max-width: 58%; }
  .dt-routes__hero h1 { font-size: clamp(40px, 5.7vw, 58px); }
  .dt-routes__hero-note { margin-top: 26px; font-size: 21px; }
  .dt-routes__stops-heading { display: block; }
  .dt-routes__stops-heading p { margin-top: 5px; }
  .dt-routes__practical { grid-template-columns: 1fr; }
  .dt-routes__practical ul { padding-top: 11px; border-top: 1px solid #c4d7ea; }
  .dt-routes__practical li:first-child { border-left: 0; padding-left: 0; }
  .dt-routes__story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .dt-routes__river-card { display: grid; grid-template-columns: 38% 1fr; grid-column: 1 / -1; }
  .dt-routes__river-photo { height: 100%; min-height: 150px; }
  .dt-routes__river-copy { align-self: center; padding: 20px; }
}
@media (max-width: 700px) {
  .dt-routes { padding-bottom: 35px; }
  .dt-routes__hero { min-height: 495px; }
  .dt-routes__hero-media img { object-position: 63% center; }
  .dt-routes__hero-tint { background: linear-gradient(180deg, rgba(254,253,248,.98) 0%, rgba(254,253,248,.9) 38%, rgba(254,253,248,.55) 68%, rgba(8,35,80,.09) 100%); }
  .dt-routes__hero:before { width: 8px; }
  .dt-routes__hero-inner { display: block; min-height: 495px; }
  .dt-routes__hero-copy { max-width: 560px; padding: 38px 0 80px; }
  .dt-routes__hero h1 { font-size: clamp(41px, 8vw, 56px); }
  .dt-routes__hero-copy > p:not(.dt-routes__eyebrow) { max-width: 400px; font-size: 15px; }
  .dt-routes__hero-note { position: absolute; right: 2px; bottom: 62px; margin: 0; font-size: 19px; }
  .dt-routes__archive-label { right: 9px; bottom: 6px; max-width: calc(100% - 30px); font-size: 9px; }
  .dt-routes__chooser { padding: 25px 0; }
  .dt-routes__section-heading { align-items: start; flex-direction: column; gap: 9px; }
  .dt-routes__cards { grid-template-columns: 1fr; gap: 13px; }
  .dt-routes__stops-grid { gap: 9px; }
  .dt-routes__stop-card { padding: 12px; }
  .dt-routes__stop-card h3 { font-size: 16px; }
  .dt-routes__stop-card ul { font-size: 11px; }
  .dt-routes__card { display: grid; grid-template-columns: 38% 1fr; }
  .dt-routes__card-image { height: 100%; min-height: 174px; }
  .dt-routes__card h3 { font-size: 23px; }
  .dt-routes__practical { margin-bottom: 29px; }
  .dt-routes__practical ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 0; }
  .dt-routes__practical li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .dt-routes__story { display: block; }
  .dt-routes__story-copy { padding: 0 0 18px; }
  .dt-routes__story-art { min-height: 190px; margin-bottom: 12px; }
  .dt-routes__river-card { display: grid; grid-template-columns: 40% 1fr; }
  .dt-routes__closing { grid-template-columns: 38% 1fr; }
  .dt-routes__closing-copy { padding: 23px 20px; }
  .dt-routes__closing-mark { display: none; }
}
@media (max-width: 480px) {
  .dt-routes__hero { min-height: 495px; }
  .dt-routes__hero h1 { font-size: clamp(39px, 10vw, 47px); }
  .dt-routes__hero-actions { gap: 8px; }
  body.dt2-body .dt-routes .dt-routes__button { min-height: 40px; padding: 9px 12px; font-size: 11px; }
  .dt-routes__hero-note { display: none; }
  .dt-routes__chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0 14px 8px; margin: 0 -14px; scrollbar-width: thin; }
  body.dt2-body .dt-routes .dt-routes__chips a { flex: none; }
  .dt-routes__card { display: block; }
  .dt-routes__card-image { height: 172px; min-height: 0; }
  .dt-routes__card-content { padding: 13px 15px; }
  .dt-routes__card-summary { margin-bottom: 13px; }
  .dt-routes__stops-grid { grid-template-columns: 1fr; }
  .dt-routes__stop-card { padding: 15px; }
  .dt-routes__stop-card h3 { font-size: 19px; }
  .dt-routes__stop-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 11px; }
  .dt-routes__practical { padding: 15px; }
  .dt-routes__practical ul { grid-template-columns: 1fr 1fr; }
  .dt-routes__practical li { gap: 5px; padding-right: 5px; font-size: 10px; }
  .dt-routes__practical li span { width: 21px; height: 21px; font-size: 9px; }
  .dt-routes__river-card { display: block; }
  .dt-routes__river-photo { height: 146px; min-height: 0; }
  .dt-routes__closing { display: block; }
  .dt-routes__closing-photo { height: 160px; min-height: 0; }
  .dt-routes__closing-copy { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-routes__card-image img,
  body.dt2-body .dt-routes .dt-routes__button { transition: none; }
}