/* =========================================================
   SOTUR — páginas internas (Transporte de pasajeros, SOTUR Cargas)
   Se apoya en styles.css (tokens, header, botones, galería, contacto, footer).
   ========================================================= */

/* ---------- Hero de página ---------- */
.phero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 20% 10%, #3a3a3d 0%, var(--charcoal) 45%, #1d1d1f 100%);
  padding: calc(var(--header-h) + clamp(40px, 7vw, 90px)) 0 0;
}
.phero .topo-bg { background-image: url("../assets/svg/topo-pattern-light.svg"); opacity: .12; }
.phero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.phero__copy { padding-bottom: clamp(60px, 8vw, 110px); }
.phero__crumb { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.phero__crumb a:hover { color: #fff; }
.phero__crumb .ico { width: 14px; height: 14px; transform: rotate(180deg); color: var(--red); }
.phero h1 { margin: 22px 0 0; font-size: clamp(3rem, 7vw, 6.6rem); max-width: 12ch; }
.phero__lead { max-width: 520px; margin: 22px 0 32px; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.phero__media { position: relative; align-self: end; }
.phero__media img { width: 100%; height: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.phero__tag { position: absolute; left: -18px; bottom: 28px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .85rem; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.phero__tag .ico-badge { width: 40px; height: 40px; box-shadow: none; }
.phero__tag .ico-badge .ico { width: 20px; height: 20px; }
.phero__mtn { position: absolute; z-index: 1; left: -4%; right: -4%; bottom: -2px; color: var(--crimson); opacity: .8; pointer-events: none; }

/* ---------- Unidades (filas alternadas) ---------- */
.units { padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); background: var(--paper); }
.units__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px 40px; align-items: end; margin-bottom: clamp(40px, 6vw, 70px); }
.units__head .lead { margin: 0; }
.unit { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 70px); align-items: center; padding: clamp(30px, 4vw, 50px) 0; border-top: 1px solid var(--line); }
.unit--rev .unit__media { order: 2; }
.unit__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #e4e3df; aspect-ratio: 4 / 3; }
.unit__media img { width: 100%; height: 100%; object-fit: cover; }
.unit__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.unit h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: .92; margin: 10px 0 14px; }
.unit h3 em { font-style: normal; color: var(--red); display: block; }
.unit p { margin: 0 0 18px; color: #45454a; }
.unit__specs { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.unit__specs li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .82rem; font-weight: 600; }
.unit__specs .ico { width: 18px; height: 18px; color: var(--red); }
.btn--line { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: #fff; --fg: #fff; }

/* Dato o foto pendiente de confirmar con el cliente (solo en el prototipo) */
.tbd { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff3d9; color: #8a5a00; font-size: .72rem; font-weight: 700; letter-spacing: .04em; box-shadow: inset 0 0 0 1px #f2d193; }
.tbd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f2a516; }
.unit__media--empty { display: grid; place-items: center; text-align: center; color: var(--grey); background: repeating-linear-gradient(-45deg, #ecebe7 0 14px, #e4e3df 14px 28px); }
.unit__media--empty .ico { width: 56px; height: 56px; margin: 0 auto 12px; color: #b6b5b1; }

/* ---------- Usos (tarjetas oscuras) ---------- */
.uses { position: relative; padding: clamp(80px, 10vw, 130px) 0; background: var(--ink); color: #fff; overflow: hidden; }
.uses .topo-bg { background-image: url("../assets/svg/topo-pattern-light.svg"); opacity: .1; }
.uses .wrap { position: relative; z-index: 1; }
.uses__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.use { padding: 28px 24px; border-radius: var(--radius); background: var(--charcoal-2); transition: transform .5s var(--ease), background .5s; }
.use:hover { transform: translateY(-6px); background: #444447; }
.use h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; line-height: 1; margin: 22px 0 10px; }
.use p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.72); }
.use a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fd0ea; }
.use a .ico { width: 16px; height: 16px; }
.uses__note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px; margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: .9rem; }
.uses__note b { color: #fff; }

/* ---------- Galería en página interna ---------- */
.pgallery { padding: clamp(80px, 10vw, 130px) 0; background: var(--paper); }
.pgallery .gallery__head { margin-bottom: 40px; }

/* ---------- SOTUR Cargas ---------- */
.cargas-brand { display: flex; width: fit-content; align-items: center; gap: 14px; margin-top: 26px; }
.cargas-brand img { height: 40px; width: auto; }
.cargas-brand span { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; letter-spacing: .04em; color: #f2a516; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.2); }
.soon { display: inline-flex; align-self: center; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #f2a516; color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.cserv { padding: clamp(80px, 10vw, 140px) 0; background: var(--paper); }
.cserv__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.csvc { position: relative; padding: 30px 24px; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.csvc:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.3); }
.csvc h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; line-height: 1; margin: 22px 0 10px; }
.csvc p { margin: 0; font-size: .88rem; color: #55555a; }
.cwhy { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 70px); align-items: center; margin-top: clamp(60px, 8vw, 100px); }
.cwhy__media { border-radius: var(--radius-lg); overflow: hidden; }
.cwhy__media img { width: 100%; height: auto; }
.cwhy ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.cwhy li { display: flex; gap: 12px; color: #45454a; }
.cwhy li .ico { flex: none; color: var(--red); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .uses__grid, .cserv__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .phero__grid, .units__head, .unit, .cwhy { grid-template-columns: 1fr; }
  .unit--rev .unit__media { order: 0; }
  .phero__copy { padding-bottom: 10px; }
  .phero__tag { left: 12px; }
}
@media (max-width: 640px) {
  .uses__grid, .cserv__grid { grid-template-columns: 1fr; }
  .cargas-brand { gap: 10px; }
  .cargas-brand img { height: 24px; }
  .cargas-brand span { font-size: 1.8rem; padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .soon i { animation: none; }
}