/* ============================================================
   Ajustes de mobile. Se carga último: pisa a site.css / nuevo.css / tabs.css.
   ============================================================ */
@media (max-width: 700px) {

  /* --- aire: en desktop 5.5rem entre secciones está bien, en el celular
         deja huecos muertos de casi 200 px --- */
  .sec { padding: 3.2rem 0 }
  .sec-sm { padding: 2.4rem 0 }
  .mapa-sec { padding: 2.8rem 0 3rem }
  .sec-head { margin-bottom: 1.9rem }
  .hero.banner { padding: 3.2rem 0 3rem }
  .feat + .feat { margin-top: 2.4rem; padding-top: 2.4rem }
  .tab-panel .feat { gap: 1.8rem }

  /* --- header: el CTA se comía el ancho del logo --- */
  .hdr .in { gap: .75rem }
  .hdr img { height: 32px }
  .hdr .btn { padding: .6rem .9rem; font-size: .86rem }

  /* --- tabs: 5 pastillas envueltas quedaban en 4 filas desparejas.
         Pasan a una tira de una sola línea que se desliza. --- */
  .tabs-nav {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: -1.25rem; padding: .15rem 1.25rem .55rem;
    scrollbar-width: none;
  }
  .tabs-nav::-webkit-scrollbar { display: none }
  .tabs-nav [role=tab] { flex: none; scroll-snap-align: center }

  /* --- items: con el título grande partían en tres líneas --- */
  .kv { gap: .45rem }
  .kv .box { padding: .7rem .8rem }
  .kv b { font-size: 1.02rem; line-height: 1.25 }
  .kv .box span { font-size: .74rem }

  /* --- tabla de horarios: a 375 px se estrujaba y partía "17:30 a 19:30".
         Cada fila pasa a ser una tarjeta con sus etiquetas. --- */
  .tabla-wrap { overflow: visible }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100% }
  .tabla { border: 0; background: none }
  .tabla thead { display: none }
  .tabla tr {
    background: #fff; border: 1px solid var(--linea); border-radius: 12px;
    padding: .9rem 1rem; margin-bottom: .6rem;
  }
  .tabla td { border: 0; padding: 0 }
  .tabla td + td {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--linea);
    font-size: .88rem;
  }
  .tabla td + td::before {
    content: attr(data-label);
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta-3); font-weight: 700;
  }
  .tabla td:first-child { font-size: 1rem }

  /* --- precios: las tarjetas ya van apiladas, pero el número gigante
         empujaba el resto --- */
  .price-main, .price-cuota b { font-size: 2.1rem }
  .tier { padding: 1.5rem 1.25rem 1.2rem }

  /* --- hero de la landing de idioma --- */
  .hero .cta { flex-direction: column; align-items: stretch }
  .hero .cta .btn { width: 100% }

  /* el carrusel toma todo el ancho de la columna; la foto se achata un poco
     para que la tarjeta no se coma la pantalla antes del CTA */
  .cr { max-width: none }
  .cr-fotos { aspect-ratio: 3 / 2 }
  .cr-pie { padding: .75rem .9rem; gap: .6rem }
  .cr-t b { font-size: .93rem }
  .cr-t span { font-size: .78rem }
  .cr-dots button { padding: 0 .2rem }

  /* --- migas: a 390 px "Inicio » Cursos » Alemán" entra justo --- */
  .cu-hero .crumb { padding: .1rem 0 1rem }

  /* --- preguntas frecuentes y más cursos --- */
  .cu-faqs { padding: 2.6rem 0 3rem }
  .cu-faq > button { padding: .9rem 1rem; font-size: .93rem; gap: .7rem }
  .cu-faq .cuerpo p { padding: 0 1rem 1rem }
  .cu-otros { padding: 2.6rem 0 3rem }
  /* apiladas, 16/10 dejaba la sección larguísima: cinco tarjetas de scroll */
  /* la tarjeta siguiente asoma: es lo que le dice al dedo que hay más */
  .oc-card { flex-basis: 78% }
  .oc-txt { padding: .85rem .95rem .95rem }
  .cu-otros .sec-head { flex-direction: column; align-items: flex-start; gap: .9rem }
  .cu-otros .sec-head > div:first-child { max-width: none }
  /* las flechas no aportan en touch: se scrollea con el dedo */
  .oc-nav { display: none }

  /* --- desfile de prueba social: la tarjeta no puede pasarse del ancho --- */
  .cu-resena { width: min(300px, 84vw) }
  .cu-resenas { padding: 2.8rem 0 3rem }

  /* --- el formulario del wizard se queda en dos columnas: Vencimiento y CVV
         son cortos y apilarlos empujaba el checkbox de términos fuera de vista.
         Los campos largos ya spanean con .full --- */
  .fields { gap: .7rem }
  .wz-body { padding: 1.2rem 1rem 1.1rem }
}

/* el banner centrado se lee mejor con el texto un poco más contenido */
@media (max-width: 480px) {
  .hero.banner h1 { font-size: 1.85rem }
  .hero.banner p { font-size: .95rem }
  .grid { grid-template-columns: 1fr 1fr }
  .pick { padding: .75rem .7rem; font-size: .86rem; gap: .5rem }
  .pick img { width: 20px; height: 15px }
}

/* ---------- área táctil de los controles chicos ----------
   Auditando a 390 px varios controles quedaban por debajo de lo que el dedo
   acierta cómodo: las migas de pan medían 16 px de alto, el desplegable de
   cuotas 24 y los puntos del carrusel 13 de ancho. Se les agrega área sin
   cambiar cómo se ven. */
@media (max-width: 700px) {
  .crumb { padding-block: .55rem }
  .crumb a { display: inline-block; padding-block: .45rem }

  /* el desplegable de cuotas de cada tarjeta de precio */
  .acc-btn { min-height: 44px }

  /* los puntos del carrusel del hero: el alto ya estaba, faltaba el ancho */
  .cr-dots button { padding: 0 .5rem }

  /* el logo de la barra oficial es un enlace a la home del sitio */
  .of-marca { display: flex; align-items: center; min-height: 40px }

  /* los enlaces del pie son una lista de navegación, no texto corrido:
     medían 16 px de alto y son difíciles de acertar */
  .ftr ul a, .ftr-contacto a { display: inline-block; padding-block: .4rem }
  .ftr .bot a { display: inline-flex; align-items: center; min-height: 40px }

  /* la casilla de los legales: el label ya es grande, pero la casilla en sí
     conviene que también lo sea */
  .cs-legal input, .wz .legal input { width: 22px; height: 22px }
}