/**
 * rider-planner.css — estilos del wrapper de la página
 * La app en sí tiene sus propios estilos dentro del iframe
 */

/* Párrafo SEO encima del iframe */
.rider-seo-intro {
  padding: 14px 0 10px;
}
.rider-seo-intro .container {
  padding-top: 0;
  padding-bottom: 0;
}
.seo-intro__text {
  font-size:   0.875rem;
  color:       var(--text-dim);
  max-width:   860px;
  margin:      0 auto;
  line-height: 1.6;
}
.seo-intro__text strong {
  color: var(--text);
}

/* Wrapper del iframe: ancho completo, sin bordes del sitio */
.rider-iframe-wrap {
  width:      100%;
  background: #0B0E13;  /* grafito Luena: evita flash blanco mientras carga */
  display:    block;
  line-height: 0;       /* evita el espacio de 4px debajo del inline-block */
}

/* El iframe ocupa todo el ancho, la altura la pone JS */
.rider-iframe-wrap iframe {
  width:      100%;
  height:     600px;    /* fallback hasta que JS calcule la altura real */
  border:     none;
  display:    block;
}

/* Responsive: en móvil al menos 80vh */
@media (max-width: 767px) {
  .rider-iframe-wrap iframe {
    height: 80vh;
    min-height: 500px;
  }
  .seo-intro__text {
    font-size: 0.8125rem;
  }
}