/* ─────────────────────────────────────────────────────────────
   Ajustes para que el diseño de la maqueta funcione en WordPress.
   WordPress añade width y height a cada <img>, y el CSS del template
   no los esperaba: las fotos salían con proporciones raras.
   ───────────────────────────────────────────────────────────── */

/* las imágenes obedecen al contenedor, no a sus atributos
   ⚠️ .service-img-wrap es la de las pestañas de la PORTADA — sin ella, en móvil
   WordPress mantenía el height="570" del atributo mientras el ancho bajaba a
   ~390, y la foto salía estirada a lo alto. (2026-08-10) */
.service-img img,
.service-img-wrap img,
.project-img img,
.blog-img img,
.blog-thumb img,
.clients-inner img,
.hero-video {
  max-width: 100%;
  height: auto;
}

/* los logos de marca no se estiran */
.clients-inner img {
  width: 150px;
  height: auto;
  object-fit: contain;
}

/* el menú que genera WordPress lleva sus propias clases */
.main-menu ul li.menu-item > a { display: block; }

/* ─── El menú que genera WordPress ───────────────────────────
   El CSS del template espera <ul> sin clase y la página activa con .active;
   WordPress pone class="menu" y current-menu-item. Se replican los estilos.  */

.main-menu ul.menu > li > a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  position: relative;
  padding: 38px 0;
  display: inline-block;
}

.main-menu ul.menu > li {
  display: inline-block;
  margin-right: 32px;
  position: relative;
}

.main-menu ul.menu > li:last-child { margin-right: 0; }

/* la línea de debajo: aparece al pasar el ratón y se queda en la página actual */
.main-menu ul.menu > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width .35s ease;
}

.main-menu ul.menu > li > a:hover::before,
.main-menu ul.menu > li.current-menu-item > a::before,
.main-menu ul.menu > li.current_page_item > a::before {
  width: 100%;
}

.main-menu ul.menu > li > a:hover { color: var(--brand, #e0592e); }


/* ═══════════════════════════════════════════════════════════════
   Estilos que en la maqueta vivían en el <style> del HTML.
   Son los que dan al hero su altura y su vídeo a pantalla completa.
   ═══════════════════════════════════════════════════════════════ */

      /* logos de fabricante: en gris para que la fila se vea pareja — vienen en
         rojo, verde y azul — y al pasar el ratón recuperan su color */
      .clients-section .clients-inner img {
        width: 150px;
        opacity: .55;
        filter: grayscale(1);
        transition: opacity .4s ease, filter .4s ease, transform .4s ease;
      }
      .clients-section .clients-inner:hover img {
        opacity: 1;
        filter: grayscale(0);
        transform: translateY(-4px);
      }

      /* El poster daba un parpadeo: se veía la foto, arrancaba el vídeo y
         saltaba. Ahora el vídeo entra con una transición corta en cuanto
         tiene fotogramas, y hasta entonces se ve la imagen de fondo del CSS
         —que es el mismo encuadre— así que no hay salto. */
      #home-1 .hero-video { opacity: 1; transition: opacity .5s ease; }
      #home-1 .hero-video.is-loading { opacity: 0; }
      /* El template fija height:710px. Con un vídeo 16:9 a todo el ancho eso
         recorta un tercio de la imagen por arriba y abajo, así que la altura
         pasa a seguir la pantalla — con un mínimo y un máximo para que no
         quede desproporcionado en monitores muy altos o muy bajos. */
      #home-1 .hero-area-banner {
        height: clamp(600px, 88vh, 900px);
      }
      @media (max-width: 767px) {
        #home-1 .hero-area-banner { height: clamp(480px, 72vh, 620px); }
      }
      /* vídeo de fondo del hero: cubre la caja sin deformarse y se queda
         DETRÁS del contenido. La imagen de fondo del CSS sigue ahí como
         respaldo para navegadores que no lo reproduzcan. */
      #home-1 .hero-area-banner { overflow: hidden; }
      #home-1 .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
      }
      /* El ::after del template va en z-index:-1, pensado para la imagen de
         fondo — con el vídeo por delante deja de hacer efecto. Esta capa va
         ENCIMA del vídeo: oscurece arriba, donde está el menú, y abajo, donde
         cae el texto; el centro se deja limpio para que se vea la casa. */
      #home-1 .hero-area-banner::before {
        position: absolute;
        content: "";
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          linear-gradient(to bottom,
            rgba(0,0,0,.55) 0,
            rgba(0,0,0,.28) 18%,
            rgba(0,0,0,.10) 42%,
            rgba(0,0,0,.30) 78%,
            rgba(0,0,0,.45) 100%);
      }
      #home-1 .hero-area-content { position: relative; z-index: 2; }
      @media (prefers-reduced-motion: reduce) {
        #home-1 .hero-video { display: none; }   /* quien pide menos animación ve la foto */
      }

    
/* ─── Cursor ────────────────────────────────────────────────
   El template ocultaba el puntero del sistema para pintar el suyo. Se quitó,
   pero .tp-cursor-point-area quedó en `cursor: default` y eso hace que sobre
   los enlaces salga la flecha en vez de la mano.                            */
.tp-cursor-point-area a,
.tp-cursor-point-area button,
.tp-cursor-point-area [role="button"],
.tp-cursor-point-area .nav-tabs a,
a, button, [role="button"], label[for], summary {
  cursor: pointer;
}

/* el texto seleccionable mantiene su cursor de texto */
p, h1, h2, h3, h4, h5, h6, span, li { cursor: auto; }
a p, a h1, a h2, a h3, a h4, a h5, a h6, a span, a li,
button span, .nav-tabs a span { cursor: pointer; }

/* ─── El menú, siempre en claro ──────────────────────────────
   El template sólo pone el texto blanco bajo .absolute-header, que ahora es
   exclusiva de la portada. En las interiores la barra es oscura igual, así que
   el texto tiene que ser claro también.                                      */
.main-menu ul > li > a,
.main-menu ul.menu > li > a { color: #fff; }

.main-menu ul > li > a:hover,
.main-menu ul.menu > li > a:hover,
.main-menu ul.menu > li.current-menu-item > a,
.main-menu ul.menu > li.current_page_item > a { color: var(--brand, #e0592e); }

/* la línea de debajo, blanca en todas */
.main-menu ul > li > a::before,
.main-menu ul.menu > li > a::before { background: #fff; }

/* los iconos de la cabecera */
.header-area .search-trigger i,
.header-area .sidebar-icon i { color: #fff; }

/* ─── La ventana del vídeo ───────────────────────────────────
   Magnific Popup deja el iframe a 900px como mucho. Para un recorrido por una
   casa se queda corto: se lleva al 90% del ancho, con tope de 1400.          */
.mfp-iframe-holder .mfp-content {
  max-width: 1400px;
  width: 90%;
}
.mfp-iframe-scaler iframe { box-shadow: 0 0 40px rgba(0,0,0,.6); }

/* ── Páginas de texto sin plantilla propia (avisos legales) ─────────────────
   ⚠️ El sitio de contratista DESCARGA el CSS base del theme, así que estas
   páginas se quedaban sin ninguna regla: texto pegado al borde izquierdo,
   listas sin viñetas y títulos sin separación. Aquí va SÓLO lo que hace falta
   para que un texto largo se lea — el ancho lo da .container-custom.
   (Detectado en la política de privacidad, 2026-08-09.)                      */
.sw-page-contratista .entry { max-width: 820px; }

.sw-page-contratista > .container > h1 {
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--dark);
  margin-bottom: 10px;
}

.sw-page-contratista .entry h2 {
  font-size: 28px;
  line-height: 1.3;
  color: var(--dark);
  margin: 45px 0 12px;
}

.sw-page-contratista .entry h3 {
  font-size: 21px;
  line-height: 1.35;
  color: var(--dark);
  margin: 30px 0 10px;
}

.sw-page-contratista .entry p { margin-bottom: 18px; }

/* ⛔ Las viñetas venían del CSS base; sin ellas la lista parecía párrafos
   sueltos, que es como salía "What we do not do".                           */
.sw-page-contratista .entry ul,
.sw-page-contratista .entry ol {
  margin: 0 0 22px;
  padding-left: 22px;
  list-style: disc outside;
}
.sw-page-contratista .entry ol { list-style: decimal outside; }
.sw-page-contratista .entry li { margin-bottom: 8px; }

.sw-page-contratista .entry a { text-decoration: underline; }

.sw-page-contratista .entry blockquote {
  margin: 25px 0;
  padding-left: 20px;
  border-left: 3px solid var(--gold);
  font-style: italic;
}

.sw-page-contratista .entry img { max-width: 100%; height: auto; }

.sw-page-contratista .entry table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
}
.sw-page-contratista .entry th,
.sw-page-contratista .entry td {
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  text-align: left;
}

@media (max-width: 767px) {
  .sw-page-contratista > .container > h1 { font-size: 34px; }
  .sw-page-contratista .entry h2 { font-size: 24px; margin-top: 35px; }
}

/* ── La hamburguesa del móvil ────────────────────────────────────────────────
   ⚠️ El theme la pinta negra por defecto y sólo la pone blanca con
   `.absolute-header`, que aquí sólo lleva la portada. Pero el header de ESTE
   sitio es oscuro en TODAS las páginas (`.header-area .container` va con
   #262020), así que en las interiores quedaba negra sobre negro: el menú se
   abría bien, pero no se veía dónde pulsar. (2026-08-10)                      */
#hamburger i {
  color: #fff;
}