/* MarcalBus - capa de turismo internacional (EN/ES). Reutiliza variables y componentes de marcalbus.css */

.lang-switch { display: inline-flex !important; align-items: center; padding: 7px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: var(--text); font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.lang-switch:hover { border-color: var(--cyan); color: var(--cyan); }

/* Rutas */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.route-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.045); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.route-card:hover { transform: translateY(-7px); border-color: rgba(87,232,255,.38); box-shadow: 0 26px 70px rgba(47,128,255,.16); }
.route-media { position: relative; min-height: 190px; display: flex; align-items: flex-end; padding: 18px; background: var(--route-bg, linear-gradient(135deg, #0b3b8f, #0a1f44)); overflow: hidden; }
.route-media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.22), transparent 38%); }
.route-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(3,7,18,.72)); }
.route-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.route-media > * { position: relative; z-index: 2; }
.route-time { position: absolute !important; top: 14px; right: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(3,7,18,.7); border: 1px solid rgba(255,255,255,.18); font-size: .74rem; font-weight: 800; backdrop-filter: blur(8px); }
.route-path-label { font-size: 1.12rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.25; }
.route-body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.route-body p { margin: 0 0 14px; color: var(--muted); font-size: .94rem; }
.route-body ul { display: grid; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; color: var(--muted-2); font-size: .85rem; font-weight: 700; }
.route-body li::before { content: "\2713"; margin-right: 8px; color: var(--green); font-weight: 900; }
.route-body .btn { margin-top: auto; align-self: flex-start; }
.r1 { --route-bg: linear-gradient(135deg, #0e6ba8, #e0b25a 140%); }
.r2 { --route-bg: linear-gradient(135deg, #8a4b12, #e0a43a 130%); }
.r3 { --route-bg: linear-gradient(135deg, #5b2a86, #d6683c 130%); }
.r4 { --route-bg: linear-gradient(135deg, #7a1f2b, #e6894a 130%); }
.r5 { --route-bg: linear-gradient(135deg, #0a6e7c, #2f80ff 130%); }
.r6 { --route-bg: linear-gradient(135deg, #1b4f8f, #9bd3f0 130%); }
.r7 { --route-bg: linear-gradient(135deg, #12304f, #20e3b2 160%); }

/* Flota */
.fleet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 42px; }
.unit-card { padding: 22px 18px; border-radius: 22px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.045); text-align: center; transition: transform .25s ease, border-color .25s ease; }
.unit-card:hover { transform: translateY(-5px); border-color: rgba(87,232,255,.38); }
.unit-card svg { width: 100%; height: 62px; margin-bottom: 14px; color: var(--cyan); }
.unit-pax { display: block; font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; background: linear-gradient(90deg, var(--cyan), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.unit-card h3 { margin: 2px 0 8px; font-size: 1rem; }
.unit-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.fleet-note { margin-top: 26px; text-align: center; color: var(--muted); font-size: .95rem; }
.fleet-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.fleet-photos figure { margin: 0; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: var(--surface); }
.fleet-photos img { width: 100%; height: 320px; object-fit: cover; filter: saturate(.95) contrast(1.04) brightness(.85); }
.fleet-photos figcaption { padding: 12px 16px 15px; color: var(--muted-2); font-size: .82rem; }

/* Formulario */
.contact-form .unit-hint { margin: -4px 0 12px; min-height: 1.2em; color: var(--green); font-size: .82rem; font-weight: 800; }
.form-row.three { grid-template-columns: minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, 1.25fr); align-items: end; }
.form-row.three input, .form-row.three select { height: 52px; padding-inline: 12px; text-overflow: ellipsis; }

@media (max-width: 1060px) { .fleet-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .route-grid { grid-template-columns: repeat(2, 1fr); } .fleet-photos { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .route-grid { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row.three { grid-template-columns: minmax(0, 1fr); }
  .fleet-photos img { height: 240px; }
  .nav-links .lang-switch { padding: 6px 10px; margin-right: 8px; }
}
@media (max-width: 420px) { .fleet-grid { grid-template-columns: 1fr; } }

/* Evita que selects con texto largo ensanchen la grilla del CTA en movil */
.cta-box > *, .contact-form, .form-row > .field { min-width: 0; }
.contact-form select, .contact-form input, .contact-form textarea { max-width: 100%; min-width: 0; }

/* Fotos de destino dentro de .route-media (el degradado queda como respaldo) */
.route-media > picture { position: absolute; inset: 0; z-index: 0; display: block; }
.route-media:has(> picture)::before { display: none; }
.route-media::after { z-index: 1; }
.route-media::after { background: linear-gradient(180deg, transparent 28%, rgba(3,7,18,.8)); }
.r1 img { object-position: 30% 40%; }
.r2 img { object-position: 50% 78%; }
.r3 img { object-position: 50% 35%; }

/* Landing Cusco - Ollantaytambo: grilla de 4 y enlaces secundarios */
.seo-grid-4 { grid-template-columns: repeat(4, 1fr); }
.seo-grid-4 .card-inner { flex-direction: column; }
.seo-grid-4 .feature-card p + p { margin-top: 12px; }
.route-link { color: var(--cyan); font-size: .9rem; font-weight: 800; }
.route-link:hover { text-decoration: underline; }
.route-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; }
.route-actions .btn { margin-top: 0; }
@media (max-width: 1060px) { .seo-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .seo-grid-4 { grid-template-columns: 1fr; } }

/* Enlaces internos: "See all routes" en la landing y "Popular routes" en el pie */
.extend-more { margin-top: 26px; }
.footer-routes { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: .9rem; }
.footer-routes strong { color: var(--text); }
.footer-routes a { font-weight: 800; }
.footer-routes a:hover { color: var(--cyan); }