/* ==========================================================================
   hou.digital — adaptación móvil
   Cargado en index.php y en los parciales _header2*.php
   Sólo actúa por debajo de 992px: en escritorio no cambia NADA.
   ========================================================================== */

@media (max-width: 991.98px) {
  /* ---- Contact: quitar posicionamientos absolutos y padding excesivo ---- */
  /* La pastilla del email flota absolute y se monta sobre el logo/burger: pasa
     al flujo, centrada y a un tamaño legible */
  .breadcaump-area > div[style*="absolute"] {
    position: static !important; right: auto !important; top: auto !important;
    text-align: center; margin: 18px auto 0 !important;
  }
  .breadcaump-area h2.heading-h1 {
    font-size: 26px !important; padding: 10px 20px !important; display: inline-block;
  }
  /* El texto del formulario tenía padding-right:25% → líneas de 2 palabras */
  .contact-form.contact-form--2 { padding-right: 0 !important; }
  /* Centrado en móvil dejaba líneas sueltas; a la izquierda se llenan */
  .career .bk_pra { text-align: left !important; }
  /* .career traía padding:50px → el texto quedaba en 190px de ancho */
  /* El bloque "'We' is powerful" se saca de su marco (tarjeta blanca con
     sombra y radio 50): en móvil va suelto, sin recuadro y con poco margen */
  .brook-career-area .career {
    background: transparent !important; box-shadow: none !important;
    border-radius: 0 !important; padding: 0 !important;
  }
  /* Menos margen lateral en la página de contacto */
  .brook-career-area > .container { padding-left: 14px !important; padding-right: 14px !important; }
  .brook-career-area .col-lg-8 { padding-left: 0 !important; padding-right: 0 !important; }
  /* Botones de categoría: en rejilla que envuelve, sin partir «Back-end» */
  .contact-form--2 > div[style*="line-height: 50px"] {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    line-height: 1.4 !important;
  }
  .butfrom { display: inline-block; white-space: nowrap; margin: 0 !important; }
  /* Menos aire vertical en el hero */
  .breadcaump-area { padding-top: 90px !important; padding-bottom: 60px !important; }

  /* Aire sobre el párrafo "We are team of..." en el hero de services (capa
     de Slider Revolution): padding al contenido, sin tocar la caja. */
  #slide-19-layer-4 { padding-top: 40px !important; }


  /* --------------------------------------------------------------
     1. MEDIOS RESPONSIVE
     Los <video> del theme llevan width="850" fijo: en un móvil de
     390px se renderizaban a 850×638 y sólo se veía el 46% izquierdo.
     -------------------------------------------------------------- */
  img, video, iframe, embed, object, canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  video.lrg-16x12,
  video[width] {
    width: 100% !important;
    border-radius: 14px;
  }

  /* Nada debe forzar scroll horizontal */
  html, body { overflow-x: hidden; }

  /* Imágenes con margen negativo horizontal: en escritorio es un
     recurso de composición, pero en móvil las saca de la pantalla.
     Caso real: contact.php usa margin-left:-100px sobre img/callus.png,
     que lleva el texto "Let's create success together" dibujado dentro
     y se quedaba cortado. */
  img[style*="margin-left: -"],
  img[style*="margin-left:-"] {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  /* --------------------------------------------------------------
     2. ⭐ EL ARREGLO IMPORTANTE: contenido invisible
     Medio sitio usa animaciones de scroll (WOW.js) con
     style="opacity: 0" inline y clases .wow / .move-up.
     En móvil esa animación NO se dispara, así que el contenido
     ocupa su altura pero queda INVISIBLE: de ahí los bloques de
     3.000px en negro. Aquí lo forzamos a visible.
     (En escritorio las animaciones siguen funcionando igual.)
     -------------------------------------------------------------- */
  .wow,
  .move-up, .move-down, .move-left, .move-right,
  .animate,
  [style*="opacity: 0"],
  [style*="opacity:0"] {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }
  .wow, .move-up, .move-down, .move-left, .move-right {
    transform: none !important;
  }

  /* --------------------------------------------------------------
     3. SLIDER REVOLUTION — NO TOCAR LA ALTURA
     Sus capas van posicionadas en absoluto y calculadas por JS:
     forzarles height/max-height hace desaparecer los titulares.
     Se deja tal cual a propósito.
     -------------------------------------------------------------- */

  /* --------------------------------------------------------------
     3. ONDAS DECORATIVAS (wavify)
     Los <svg height="100%"> se disparaban a 2.196px de alto.
     -------------------------------------------------------------- */
  .wavify-wrapper {
    height: 120px !important;
    max-height: 120px !important;
    overflow: hidden !important;
  }
  .wavify-wrapper svg,
  svg.wavify-item {
    height: 120px !important;
    max-height: 120px !important;
  }

  /* --------------------------------------------------------------
     4. ESPACIADOS DEL THEME
     Los bloques con padding de 150-200px dejan huecos enormes.
     -------------------------------------------------------------- */
  .bk-padding-top,
  .ptb--150, .pt--150, .pb--150,
  .ptb--200, .pt--200, .pb--200 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .pl--150, .pr--150 { padding-left: 18px !important; padding-right: 18px !important; }
  .mt--100, .mt--150, .mt--200 { margin-top: 40px !important; }
  .mb--100, .mb--150, .mb--200 { margin-bottom: 40px !important; }
  .bkseparator--50, .bkseparator--60, .bkseparator--80 { height: 26px !important; }

  /* Tipografía de titulares: que no se desborde ni resulte gigante */
  .heading-h1, h1 { font-size: 1.9rem !important; line-height: 1.25 !important; word-break: break-word; }
  .heading-h2, h2 { font-size: 1.55rem !important; line-height: 1.3 !important; }
  .heading-h3, h3 { font-size: 1.3rem !important; line-height: 1.35 !important; }

  /* --------------------------------------------------------------
     4b. PORTFOLIO: títulos que sólo salían al pasar el ratón
     En el escritorio el nombre del proyecto y su descripción
     aparecen en un overlay al hacer :hover. En una pantalla táctil
     no hay hover, así que no se veían NUNCA. Los sacamos como pie
     de foto permanente debajo de cada imagen.
     -------------------------------------------------------------- */
  /* La rejilla es masonry (posicionada por JS con alturas calculadas),
     así que el pie NO puede ir debajo: descuadraría todo. Va encima
     de la imagen, con degradado para que se lea sobre cualquier foto. */
  .portfolio .poss_relative { position: relative !important; }
  .portfolio .port-overlay-info,
  .portfolio_style--1 .port-overlay-info {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: auto !important; height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: linear-gradient(to top,
        rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,0) 100%) !important;
    padding: 44px 16px 16px !important;
    text-align: left !important;
    border-radius: 0 0 10px 10px;
  }
  /* El theme anima aparte CADA hijo (el <h3> lleva su propio
     opacity:0), así que hay que forzarlos todos. */
  .portfolio .port-overlay-info .hover-action,
  .portfolio .port-overlay-info * {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* sin los márgenes del theme el título y su descripción
       quedan juntos, pegados abajo */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .portfolio .post-overlay-title,
  .portfolio .post-overlay-title a {
    font-size: 1.1rem !important;
    line-height: 1.28 !important;
    margin: 0 0 4px !important;
    color: #fff !important;
  }
  .portfolio .port-overlay-info .category {
    font-size: .82rem !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,.86) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .portfolio .thumb img { width: 100% !important; border-radius: 10px; }

  /* --------------------------------------------------------------
     5. ACCESIBILIDAD TÁCTIL
     Iconos sociales y enlaces demasiado pequeños para el dedo.
     -------------------------------------------------------------- */
  .social-share a,
  .ft-menu-list a,
  footer .social-share a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* --------------------------------------------------------------
     6. FOOTER
     -------------------------------------------------------------- */
  #bk-footer { padding-left: 16px !important; padding-right: 16px !important; }
  #bk-footer .bk-footer-inner { padding-top: 56px !important; }
  #scrollUp { right: 16px !important; bottom: 16px !important; width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 20px !important; }
}


/* ==========================================================================
   HOME (index.php) — tiene maquetación propia, no usa el theme
   ========================================================================== */
@media (max-width: 991.98px) {

  /* Fondo del hero: la ilustración se montaba sobre el titular.
     La bajamos para que ocupe el hueco que hay debajo del botón. */
  body {
    background-size: 122% auto !important;
    background-position: center 375px !important;
  }

  /* El hueco enorme: margin-bottom:500px inline en la columna del hero.
     Dejamos sólo el espacio que ocupa la ilustración. */
  .project-list .col-xl-7,
  .project-list .col-lg-7,
  .project-list .col-md-8 { margin-bottom: 235px !important; }

  .project-list h1 { font-size: 1.85rem !important; line-height: 1.25 !important; padding: 0 4px; }

  /* Botón "What's hou?" — el chip de la flecha se posicionaba con
     margin-left:171px absoluto y se salía de la pantalla. Lo anclamos
     al borde derecho del propio botón. */
  #whatishou {
    position: relative !important;
    font-size: 1.05rem !important;
    padding: 13px 72px 13px 28px !important;
    margin-top: 14px !important;
    overflow: hidden;
  }
  #whatishou2 {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    margin: 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 50px 50px 0 !important;
  }

  /* Barra de cookies: padding-left:15% + height:60px la rompían */
  aside.cookies {
    padding: 12px 14px !important;
    height: auto !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  }
  aside.cookies .wrap { padding: 0 !important; }
  aside.cookies .cookies__text { display: flex; align-items: center; gap: 9px; padding-right: 132px; }
  aside.cookies .cookies__icon { margin-top: 0 !important; width: 26px; flex: 0 0 auto; }
  aside.cookies p { font-size: 11px !important; line-height: 1.32; margin: 0; }
  aside.cookies .btn--small {
    position: absolute !important; right: 12px !important; top: 50% !important;
    transform: translateY(-50%); margin: 0 !important;
  }

  /* ---- TARJETAS: el texto caía encima de la ilustración de fondo ----
     Velo blanco translúcido: el color de marca y el dibujo siguen ahí,
     pero el texto queda perfectamente legible. */
  .areacard {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 18px;
    overflow: hidden;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .areacard::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, .62);
    pointer-events: none;
  }
  .areacard > * { position: relative; z-index: 1; }
  .areacard .project-preview__text { padding: 26px 20px !important; }
  .areacard h2 { font-size: 1.3rem !important; line-height: 1.3 !important; margin-left: 0 !important; }
  .areacard h2 .brand-logo { font-size: 1.1rem !important; }
  .areacard .brand-logo,
  .areacard .project-category { padding-left: 0 !important; }
  .areacard .logohouwidget { width: 54px !important; }

  /* Iconos de tecnologías dentro de las tarjetas.
     OJO: NO tocar width/height — llevan width="36", width="140"… en el HTML
     y ya son correctos. Sólo se corrige el margin-top negativo del theme. */
  .areacard .project-category { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .areacard .project-category i { font-size: 1.6rem !important; }
  .areacard .project-category img { margin-top: 0 !important; }

  /* Navbar y footer de la home */
  .navbar { padding: 10px 14px !important; }
  /* Al hacer scroll aparece el círculo turquesa: el logo encoge y respira */
  .navbar.short .logohou { width: 78px !important; padding: 10px !important; }
  .logohou { width: 92px !important; margin-top: 0 !important; padding: 8px !important; }
  .footer { padding-left: 16px !important; padding-right: 16px !important; }
  .footer h2 { font-size: 1.5rem !important; }
  .footer .mr-4 { margin-right: .5rem !important; }
  .footer a[class*="mr-"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
}

@media (max-width: 480px) {
  .project-list h1, .areacard h2 { hyphens: auto; }
  .areacard .project-category img { height: 20px; }
}