/* CSS propio de drupper.html (sitio «origen»). Lo edita solo quien porta esa página: docs/sitio-2026/09-origen.md, «Receta para portar una página». */

/* «Conviértete en Drupper»: página transversal del lado de la oferta. No tiene línea de producto:
   su línea es la navy del sistema (la tinta; en oscuro se invierte a claro, «Diagrama invertible»).
   Los componentes son los del sistema (apertura de línea, andén fijo, paradas, preguntas, cierre)
   y lo propio va aquí: el andén de la app, las estaciones de los servicios, los beneficios, los
   pasos con capturas de la app, las salidas a documentos y los QR del cierre.
   transportistas.css repite las piezas que comparten (andén de la app, documentos, cierre). */

.pagina-oferta { --l: var(--tinta); --lb: var(--navy); --lt: #ffffff; }
html[data-theme="dark"] .pagina-oferta { --lb: #f3f5fb; --lt: #1a2044; }

/* ================= Andén de la app =================
   La banda (6 px) del andén fijo recibe la línea que baja de la foto. Debajo, el tablero navy con la
   descarga y la pantalla: una captura real de la app del prestador sobre el papel alterno. */
.anden--app { grid-template-areas: "tablero" "pantalla"; }
.anden--app .anden__tablero {
  grid-template-rows: none; align-content: start; gap: 0;
  padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 44px) clamp(26px, 3vw, 40px);
  border-radius: 0;
}
.anden--app .anden__pantalla {
  justify-items: center; align-content: center;
  padding: clamp(28px, 3.4vw, 48px) 16px clamp(22px, 2.6vw, 34px);
  background: var(--fondo-2); border: 1px solid var(--borde); border-top: 0;
  border-radius: 0 0 14px 14px;
}
/* La leyenda de la captura se ve: la regla del andén la deja solo para lectores (en las líneas la
   dice la barra del navegador); un teléfono no tiene barra. */
.anden--app .telefono .captura__leyenda {
  position: static !important; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
}
/* El teléfono no se estira por su leyenda: la columna del marco cede y la leyenda puede partirse */
.pagina-oferta .telefono { grid-template-columns: minmax(0, 1fr); }
.pagina-oferta .telefono .captura__real--pie { white-space: normal; }
.anden-app__titulo {
  max-width: 22ch; color: #ffffff;
  font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.5rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.022em;
}
.anden-app__texto { margin-top: 16px; max-width: 40rem; color: var(--tablero-tinta-2); font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); }
/* Las funciones de la app: estaciones de una vía sobre el tablero (.lista-via--tablero, paginas.css) */
.anden-app__vias-app { margin-top: clamp(24px, 2.6vw, 34px); }

/* Insignias de las tiendas (imágenes oficiales, en inglés como en sta) */
.tiendas-app { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(26px, 2.8vw, 36px); }
.tiendas-app a { display: block; border-radius: 9px; transition: transform 0.18s var(--ease); }
.tiendas-app a:hover { transform: translateY(-1px); }
.tiendas-app img { width: auto; height: 50px; }
@media (max-width: 479px) { .tiendas-app img { height: 44px; } }
.anden--app :focus-visible, .cierre :focus-visible { outline-color: #5fd4bf; }

@media (min-width: 1000px) {
  .anden--app { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "tablero pantalla"; align-items: stretch; }
  .anden--app .anden__tablero { border-radius: 0 0 0 14px; align-content: center; }
  .anden--app .anden__pantalla { border-radius: 0 0 14px 0; border-left: 0; }
}
/* Entre 1000 y 1199 px el andén va a todo el contenedor: a 10 de 12 el tablero apretaba las
   funciones en dos columnas de palabras sueltas. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .pagina-oferta .apertura-linea__anden { grid-column: 1 / -1; }
}

/* ================= Los servicios: estaciones de una misma línea =================
   Una sola verificación y cuatro tipos de servicio: el trazo de 10 px con sus estaciones de anillo.
   En horizontal desde 1000 px; en vertical debajo, como los mapas de tira. */
.estaciones { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding-left: 60px; }
.estaciones::before {
  content: ""; position: absolute; z-index: -1; left: 12px; top: 12px; bottom: 12px; width: 10px; border-radius: 5px; background: var(--l);
}
.estaciones__parada { position: relative; }
.estaciones__parada::before {
  content: ""; position: absolute; left: -60px; top: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 5px var(--estacion-trazo);
}
.estaciones h3 { font-size: 1.32rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; padding-top: 2px; }
.estaciones p { margin-top: 8px; max-width: 30rem; color: var(--tinta-2); }
.estaciones__enlace { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.estaciones__enlace span, .estaciones__enlace:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.estaciones__enlace .icono { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.estaciones__enlace:hover .icono { transform: translate(3px, -3px); }
.movimiento-listo .estaciones::before { transition: clip-path 0.9s var(--ease); }
.movimiento-listo .estaciones:not(.is-visible)::before { clip-path: inset(0 0 100% 0 round 5px); }
.movimiento-listo .estaciones .estaciones__parada::before { transition: transform 0.45s var(--ease), opacity 0.45s var(--ease); transition-delay: calc(0.15s + var(--k, 0) * 0.1s); }
.movimiento-listo .estaciones:not(.is-visible) .estaciones__parada::before { transform: scale(0.3); opacity: 0; }
@media (min-width: 1000px) {
  .estaciones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); padding: 48px 0 0; }
  .estaciones::before { top: 12px; bottom: auto; left: 14px; right: 14px; width: auto; height: 10px; }
  .estaciones__parada::before { left: 0; top: -48px; }
  .movimiento-listo .estaciones:not(.is-visible)::before { clip-path: inset(0 100% 0 0 round 5px); }
}

/* Beneficios: tres estaciones de una vía bajo los cuatro servicios (.lista-via, paginas.css) */
.beneficios-via { margin-top: clamp(52px, 5.6vw, 84px); }

/* ================= Cómo funciona: cuatro pasos y la app =================
   «Discontinuo es antes»: el tramo punteado de arriba llega a la primera estación (todavía fuera
   de la red); la línea llena une los cuatro pasos y el cuarto es la estación terminal. */
.pasos-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.pagina-oferta .pasos-app__paradas { padding-top: 40px; }
.pagina-oferta .pasos-app__paradas::before {
  content: ""; position: absolute; z-index: -1; left: 13px; top: 0; width: 10px; height: 44px;
  background: repeating-linear-gradient(180deg, var(--l) 0 8px, transparent 8px 14px);
}
main.pagina-oferta .pasos-app__paradas .parada::after {
  content: ""; position: absolute; z-index: -1; left: 13px; top: 18px; bottom: -18px; width: 10px; background: var(--l);
}
main.pagina-oferta .pasos-app__paradas .parada:last-child { padding-bottom: 0; }
main.pagina-oferta .pasos-app__paradas .parada:last-child::after { content: none; }
main.pagina-oferta .pasos-app__paradas .parada:last-child::before {
  left: -1px; top: -1px; width: 38px; height: 38px; box-shadow: none;
  background: radial-gradient(circle, var(--estacion-trazo) 0 8px, var(--estacion-relleno) 8.5px 13px, var(--estacion-trazo) 13.5px);
}
.movimiento-listo .pagina-oferta .pasos-app__paradas::before { transition: clip-path 0.6s var(--ease); }
.movimiento-listo .pagina-oferta .pasos-app__paradas:not(.is-visible)::before { clip-path: inset(0 0 100% 0); }
.pasos-app__telefonos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: center; }
.pasos-app__telefonos .telefono__marco.app-movil { width: min(250px, 100%); }
@media (min-width: 600px) {
  .pasos-app__telefonos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .pasos-app__telefonos .telefono:nth-child(2) { margin-top: 56px; }
}
@media (min-width: 961px) {
  .pasos-app { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}
@media (min-width: 1200px) {
  .pasos-app { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ================= Documentos y ayuda ================= */
.documentos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.documento-salida {
  position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--borde-fuerte); border-radius: 12px; background: var(--superficie);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.documento-salida:hover { border-color: var(--tinta); transform: translateY(-2px); }
.documento-salida:has(a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.documento-salida__titulo { font-size: clamp(1.18rem, 1.06rem + 0.4vw, 1.4rem); line-height: 1.25; font-weight: 700; }
.documento-salida__titulo a { color: inherit; text-decoration: none; }
.documento-salida__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.documento-salida__titulo a:focus-visible { outline: none; }
.documento-salida__texto { color: var(--tinta-2); line-height: 1.55; }
.documento-salida__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 650 0.92rem/1.2 var(--f-display); font-stretch: 104%; color: var(--tinta); }
.documento-salida__ver .icono { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.documento-salida:hover .documento-salida__ver .icono, .documento-salida:focus-within .documento-salida__ver .icono { transform: translate(3px, -3px); }
@media (min-width: 720px) { .documentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= Cierre: la descarga =================
   Sobre el navy del cierre el botón secundario y las insignias van claros. Los QR son para quien
   lee en un computador: en un celular se descarga con la insignia. */
.cierre .tiendas-app { margin-top: 32px; }
.qr-app__par { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.qr-app__codigo { display: grid; justify-items: start; gap: 10px; }
.qr-app__codigo img { width: 156px; height: 156px; padding: 10px; border-radius: 12px; background: #ffffff; }
.qr-app__codigo figcaption { font: 650 0.92rem/1.2 var(--f-display); font-stretch: 104%; color: #ffffff; }
@media (max-width: 719px) { .qr-app { display: none; } }