/* ==========================================================================
   tylerpets — correcciones movil del clon estatico
   Aditivo: no toca el CSS original, solo corrige lo que se rompe en movil.
   ========================================================================== */

/* 1. Texto justificado -> alineado a la izquierda en movil.
      El justificado abre "rios" de espacio en pantallas estrechas.
      La clase la aplica tp-fixes.js solo a lo que realmente esta justificado. */
.tp-nojustify { text-align: left !important; }

/* 2. Indicador de submenu en el menu movil.
      El tema tiene el icono desactivado (icon-none), asi que "SERVICIOS"
      no parecia desplegable. */
@media (max-width: 767px) {
  .elementskit-menu-container .elementskit-navbar-nav > li.elementskit-dropdown-has > a {
    position: relative;
  }
  .elementskit-menu-container .elementskit-navbar-nav > li.elementskit-dropdown-has > a::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    pointer-events: none;
  }
  /* area tactil comoda en los enlaces del menu */
  .elementskit-menu-container .elementskit-navbar-nav > li > a { min-height: 44px; }
}

/* 3. Blog, categoria y entradas: el tema no imprime cabecera, asi que el
      visitante se quedaba sin navegacion. tp-fixes.js/fix_mobile.py insertan
      esta barra y aqui va su estilo. */
.tp-navbar {
  position: sticky; top: 0; z-index: 999;
  background: #fff;
  border-bottom: 1px solid #ececec;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tp-navbar__inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 18px;
}
.tp-navbar__logo img { display: block; height: 42px; width: auto; }
.tp-navbar__links { display: flex; align-items: center; gap: 22px; }
.tp-navbar__links a {
  color: #111; text-decoration: none; font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 10px 0; display: inline-block;
}
.tp-navbar__links a:hover { color: #D81C29; }
@media (max-width: 767px) {
  .tp-navbar__inner { padding: 8px 14px; gap: 10px; }
  .tp-navbar__logo img { height: 34px; }
  .tp-navbar__links { gap: 14px; }
  .tp-navbar__links a { font-size: 11px; letter-spacing: .04em; }
}

/* 4. Blog y entradas: el tema pinta enlaces en rosa por defecto, fuera de la
      paleta de la marca, y los titulos se salian de ritmo en movil. */
.tp-blog-scope .site-main a { color: #D81C29; }
.tp-blog-scope .site-main .entry-title a,
.tp-blog-scope .site-main h1 a, .tp-blog-scope .site-main h2 a { color: #111; }
.tp-blog-scope .site-main .entry-title a:hover,
.tp-blog-scope .site-main h2 a:hover { color: #D81C29; }
.tp-blog-scope .site-main { max-width: 860px; margin: 0 auto; padding: 28px 18px 48px; }
.tp-blog-scope .site-main img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  .tp-blog-scope .site-main { padding: 20px 16px 36px; }
  .tp-blog-scope .site-main h1, .tp-blog-scope .site-main .entry-title { font-size: 28px; line-height: 1.2; }
  .tp-blog-scope .site-main h2 { font-size: 22px; line-height: 1.25; }
  .tp-blog-scope .site-main p, .tp-blog-scope .site-main li { font-size: 16px; line-height: 1.7; }
}

/* 5. Que nada pueda provocar scroll horizontal en movil. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  img, video, iframe, table { max-width: 100%; }
}

/* 6. El boton flotante de WhatsApp tapaba el ultimo boton/enlace de algunas
      secciones: un poco de aire al final de la pagina en movil. */
@media (max-width: 767px) {
  .tp-legalbar { padding-bottom: 78px; }
}