/* Ajustes solo para móvil. Se carga al final del <head> para ganarle al CSS
   heredado de WordPress; no hay reglas fuera de los @media, así que escritorio
   queda intacto. */

/* El header es fijo (7rem) y el tema solo dejaba 2em: tapaba el inicio de cada página */
@media only screen and (max-width: 815px) {
  main.contenedor {
    margin-top: 9rem !important;
  }
}

@media only screen and (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }

  /* ---------- Menú hamburguesa: el botón azul cortaba su texto ---------- */
  .mobil-header.show .boton-mobile {
    width: calc(100% - 45px);
    height: auto;
    min-height: 50px;
  }
  .mobil-header.show .boton-mobile a {
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
  }

  /* ---------- Home: EduCellca ---------- */
  .tarjeta-educellca__lista li {
    line-height: 1.5;
    padding: 6px 0;
  }

  /* ---------- Home: valores ---------- */
  .componente-iconos {
    width: 100% !important;
    gap: 12px;
  }
  .componente-icono {
    width: 100%;
    height: auto;
    background: none;
  }
  .componente-icono img {
    max-width: 100%;
  }
  .componente-icono p:empty {
    display: none;
  }
  .componente-titulo {
    line-height: 1.3;
  }

  /* ---------- Home: confían en nosotros ---------- */
  .confian-en-nosotros__titulo {
    font-size: 20px;
    line-height: 1.35;
  }
  .confian-en-nosotros__descripcion {
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* ---------- Servicios: tarjetas "por qué elegir" ---------- */
  .dist-carousel-wrapper .dist-carousel-item h3 {
    font-size: 17px !important;
    line-height: 1.3;
  }
  .dist-carousel-wrapper h2 {
    padding: 0 20px;
  }

  /* ---------- Tiendas Costa Rica ---------- */
  .contenedor-titulo-flecha {
    gap: 8px;
  }
  .contenedor-titulo-flecha h2 {
    flex: 1 1 auto;
    font-size: 20px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .contenedor-titulo-flecha > div {
    flex: 0 0 auto;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }
  .tarjetas-tienda {
    padding: 15px 5px 25px;
  }
  .tarjeta-tienda-item {
    width: min(366px, 82vw);
    height: auto;
    min-height: 200px;
    scroll-snap-align: start;
  }
  .tarjeta-tienda-content {
    width: auto;
  }
  .tarjeta-tienda-content h3,
  .tienda-panama-content h3 {
    line-height: 1.3;
  }

  /* ---------- Tiendas Panamá (las tarjetas de 366px desbordaban la pantalla) ---------- */
  .tiendas-panama-wrapper {
    margin: 0;
    padding: 0 20px;
  }
  .tiendas-panama {
    margin: 20px 0;
    gap: 20px;
  }
  .tienda-panama-item {
    width: 100%;
  }
  .tienda-panama-titulo {
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .tienda-panama-content {
    width: 100%;
    height: auto;
    min-height: 200px;
    margin-right: 0;
  }

  /* ---------- Trabaja con nosotros / Nuestra historia ---------- */
  .apartado-formulario-costa h2,
  .apartado-formulario-panama h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  .formulario-container,
  .formulario-panama-container {
    padding: 0 20px;
    width: 100%;
  }
  .formulario-header,
  .formulario-panama-header {
    width: 100%;
  }
  .formulario-form,
  .formulario-panama-form {
    padding: 0;
  }
  .custom-h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 30px;
  }
  .custom-h3 {
    font-size: 19px;
    line-height: 1.3;
    margin: 30px 0 15px;
  }

  /* ---------- Políticas de privacidad ---------- */
  .contenedor-politicas h3 {
    font-size: 15px !important;
    line-height: 1.4;
    margin-bottom: 15px;
  }

  /* ---------- Footer ---------- */
  .footer-separator {
    padding-bottom: 30px;
  }
  .menus-del-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 20px;
    padding: 30px 5px 80px; /* abajo: espacio para el botón flotante de WhatsApp */
  }
  .contenedor-footer .menus-del-footer .menu-footer2 {
    grid-column: 1 / -1;
    order: 3;
  }
  .menus-del-footer .menu-footer2 .sub-menu {
    columns: 2;
    column-gap: 20px;
  }
  .menus-del-footer li {
    break-inside: avoid;
  }
  .contenedor-footer .menus-del-footer li a {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    padding: 5px 0;
  }
  .contenedor-footer .menus-del-footer .menu > li > a {
    font-size: 13px;
    font-weight: 700 !important;
    color: #0070b2;
  }
  .contenedor-footer .menus-del-footer .sub-menu {
    margin-bottom: 18px;
  }
}

/* Carruseles del home: scroll táctil nativo, con ajuste a cada tarjeta */
@media only screen and (max-width: 1150px) {
  .carousel-container,
  .planes-carousel-container {
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }
  .carousel-wrapper,
  .planes-carousel-wrapper {
    min-width: 0;
    max-width: 100%;
  }
}