body{
  line-height: normal;
}

.header-nav-top .active{
  background-color: inherit  !important;
}
#header .header-top, 
#header .header-nav-features .header-nav-features-search-reveal-container {
  min-height: 20px;
}
#header .header-nav {
  min-height:auto;
}
.social-icons li:hover.social-icons-tiktok a {
  background: var(--black) !important;
}

.social-icons li:hover.social-icons-instagram a {
  background: var(--clr-instagram) !important;
}

b{
  font-weight: bold;
}

.mw-25{ max-width: 25%;}
.mw-30{ max-width: 30%;}
.mw-35{ max-width: 35%;}
.mw-40{ max-width: 40%;}
.mw-45{ max-width: 45%;}
.mw-50{ max-width: 50%;}

@media (max-width: 768px) { 
  .img-float-text {
    float:none !important;
    max-width: 100%;
  }

  #header.header-effect-shrink .header-container {
    min-height: auto;
  }
}

/* ===== Branding Climalem =====
   Tipografía: Montserrat en toda la UI y titulares (legible y profesional).
   Orbitron queda reservado SOLO a .font-brand (claims/branding puntual),
   no en titulares (resultaba poco legible). theme.css usa 'poppins'
   hardcodeado; se sobreescribe aquí (custom.css carga tras theme.css/skins). */
body,
h1, h2, h3, h4, h5, h6, .card-title,
button, input, select, textarea, optgroup,
.nav, .dropdown-menu, .breadcrumb, .btn {
  font-family: 'Montserrat', Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.font-brand {
  font-family: 'Orbitron', 'Montserrat', sans-serif !important;
  letter-spacing: .02em;
  font-weight: 700;
}

/* CTA cálido (ámbar del logo) — alto contraste sobre fondo claro y sobre bg-primary */
.btn-cta,
.home-intro .btn-cta {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #1c2b33 !important;
  font-weight: 700;
}
.btn-cta:hover,
.home-intro .btn-cta:hover {
  background-color: var(--secondary-d2) !important;
  border-color: var(--secondary-d2) !important;
  color: #1c2b33 !important;
}
/* Salvaguarda: ningún botón claro invisible dentro de la banda primaria */
.home-intro .btn-light { color: var(--primary) !important; }

/* Precio = chapa navy con amarillo de marca (máximo contraste, WCAG) */
.precio {
  display: inline-block;
  background-color: var(--primary) !important;
  color: var(--secondary) !important;
  padding: .45rem 1rem;
  border-radius: .4rem;
  line-height: 1.2;
}

/* Cabecera compacta tipo "sticky": logo + navbar en una sola fila, sin topbar */
#header .header-column.justify-content-end .header-row.pt-3 { display: none !important; }
#header .header-nav-top { display: none !important; }
#header .header-logo img { height: 40px !important; width: auto; }
#header .header-logo { padding: 0 !important; }
#header .header-body { padding-top: .5rem !important; padding-bottom: .5rem !important; border-top: 0; }
#header .header-row { align-items: center; }

/* Footer: todo el texto en blanco */
#footer, #footer p, #footer a, #footer span, #footer strong, #footer h5,
#footer .footer-copyright, #footer .footer-copyright a,
#footer .footer-ribbon span { color: #fff !important; }
#footer .fa-angle-right { color: #fff !important; }
/* Iconos de datos de contacto en amarillo de marca */
#footer .contact-details i { color: var(--secondary) !important; }

/* SÍGUENOS: el círculo blanco se mantiene; el icono va en el color de
   cada red social (la regla #footer a{color:#fff} de arriba lo dejaba
   blanco sobre blanco = invisible). Al pasar el ratón, el círculo se
   tiñe del color de la red y el icono pasa a blanco (comportamiento
   nativo de Porto). */
#footer .social-icons li a                        { color: var(--gray-800)    !important; }
#footer .social-icons li.social-icons-facebook a  { color: var(--clr-facebook)  !important; }
#footer .social-icons li.social-icons-twitter a   { color: var(--clr-sky-blue)  !important; }
#footer .social-icons li.social-icons-linkedin a  { color: var(--clr-blue-link) !important; }
#footer .social-icons li.social-icons-instagram a { color: var(--clr-instagram) !important; }
#footer .social-icons li.social-icons-tiktok a    { color: var(--black)        !important; }
#footer .social-icons li:hover a                  { color: #fff               !important; }

/* Franja de marcas global (encima del Kit Digital, en todas las páginas) */
.marcas-strip-global { padding:1.25rem 0; }
.marcas-strip-global .marca-item { display:flex; align-items:center; justify-content:center; min-height:60px; }
.marcas-strip-global .marca-item img { max-height:46px; width:auto; filter:grayscale(1); opacity:.5; transition:filter .25s, opacity .25s; }
.marcas-strip-global .marca-item:hover img { filter:grayscale(0); opacity:1; }
/* La marca centrada del slider se muestra marcada (como en hover) */
.marcas-strip-global .owl-item.center .marca-item img { filter:grayscale(0) !important; opacity:1 !important; }

/* ===== Servicios: tarjeta limpia con icono en "chapa" =====
   Sustituye el círculo azul marino macizo + anillo hover de Porto
   (featured-box-effect-2) por una tarjeta estática y limpia con el
   icono en un recuadro redondeado con tinte azul claro suave.
   No clicable (sin hover engañoso). Ámbito limitado a
   .servicios-cards para no afectar a "Cómo trabajamos",
   "Por qué elegirnos" ni a la página Empresa. */
.servicios-cards .featured-box {
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .12) !important;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .06);
  margin: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.servicios-cards .featured-box .box-content {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  top: 0 !important;
  padding: 2rem 1.6rem;
  flex: 1 1 auto;
}
/* Icono dentro de una "chapa" redondeada con tinte azul claro suave
   (anula el círculo macizo y el anillo del effect-2 de Porto) */
.servicios-cards .icon-featured {
  position: static !important;
  top: 0 !important;
  width: 66px !important;
  height: 66px !important;
  line-height: 66px !important;
  margin: 0 0 1.1rem !important;
  border-radius: 16px !important;
  background-color: rgba(var(--primary-rgb), .09) !important;
  color: var(--primary) !important;
  font-size: 1.7em !important;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.servicios-cards .icon-featured:after { display: none !important; }
.servicios-cards .featured-box h4 { color: var(--primary) !important; }
.servicios-cards .featured-box p { color: #5a6b73; }

/* Hover moderno: la card se eleva y el icono se rellena con el
   amarillo de los botones (var(--secondary)). Sin convertirla en
   clicable. */
.servicios-cards .featured-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(var(--secondary-rgb), .22);
  border-color: var(--secondary) !important;
}
.servicios-cards .featured-box:hover .icon-featured {
  background-color: var(--secondary) !important;
  color: #1c2b33 !important;
  transform: scale(1.06);
}

/* ===== Marcas: tarjetas limpias clicables (misma estética que servicios) =====
   Sustituye la franja gris (bg-light) + logos sueltos por tarjetas
   blancas clicables a la web del fabricante. Ámbito: .marcas-cards. */
.marcas-cards .marca-card {
  display: flex;
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .06);
  padding: 1.6rem 1.5rem;
  text-decoration: none !important;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.marcas-cards a.marca-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(var(--primary-rgb), .16);
  border-color: var(--primary);
}
.marcas-cards .marca-logo { width: 140px; padding-right: 1.5rem; }
.marcas-cards .marca-logo img { max-height: 64px; width: auto; }
.marcas-cards .marca-card h4 { color: var(--primary) !important; }
.marcas-cards .marca-card .text-3 { color: #5a6b73; }
.marcas-cards .marca-mas {
  display: inline-block;
  color: var(--primary);
  letter-spacing: .04em;
  transition: color .25s ease;
}
.marcas-cards a.marca-card:hover .marca-mas { color: var(--secondary-d2); }
.marcas-cards .marca-mas .fa-angle-right { transition: transform .25s ease; }
.marcas-cards a.marca-card:hover .marca-mas .fa-angle-right { transform: translateX(4px); }

/* Variante compacta en la home: solo logo + nombre, en color */
.marcas-cards-logos .marca-card-logo { padding: 1.4rem 1rem; min-height: 124px; }
.marcas-cards-logos .marca-card-logo img { max-height: 50px; width: auto; }
.marcas-cards-logos .marca-card-name {
  display: block;
  margin-top: .7rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
}

@media (max-width: 575px) {
  .marcas-cards .marca-card { flex-direction: column; text-align: center; }
  .marcas-cards .marca-logo { width: auto; padding: 0 0 1rem; }
}

/* ===== Secciones en zebra: gris ↔ blanco =====
   En vez de tapar el hueco blanco, se da sentido al color: el page-header
   (título de página + breadcrumb) es gris y, a partir de ahí, las secciones
   alternan BLANCO / GRIS. Cada bloque se distingue por su propio color, no
   por un espacio en blanco. Los bloques van a ras: el cambio de color es la
   separación.

   El page-header es el 1er <section> hijo de .main; las secciones de
   contenido vienen después. Por eso:
     · nth-of-type(odd)  → gris   → page-header (1ª) + secciones 3ª, 5ª…
     · nth-of-type(even) → blanco → secciones 2ª, 4ª…
   El CTA azul (.home-intro/.bg-primary), el footer y las tarjetas blancas
   llevan color propio y quedan fuera de la alternancia. */

/* Bloques a ras: delimita el color, no la franja en blanco */
section.section { margin: 0 !important; }
.page-header    { margin-bottom: 0 !important; }
.home-intro     { margin-bottom: 0 !important; }

/* Alternancia gris/blanco de las secciones dentro de .main */
.main > section:nth-of-type(odd) {
  background-color: var(--gray-50) !important;  /* gris (igual que el page-header) */
  border-top: 0 !important;
}
.main > section:nth-of-type(even) {
  background-color: #fff !important;            /* blanco */
  border-top: 0 !important;
}

/* ===== Pingüino marca de agua + host del viento Canvas =====
   El VIENTO lo genera el componente Canvas 2D themes/porto/js/wind.js
   en modo SCOPED (un canvas dentro de cada zona, ver footer.tpl):
   .page-header (títulos), .home-intro (banda CTA azul) y .home-servicios
   (sección Servicios de la home) — las mismas zonas que tenía el viento
   CSS. wind.js pone el host en position:relative + overflow:hidden y el
   canvas en z-index:0; aquí solo subimos el contenido por encima.
   El pingüino marca de agua sigue en .page-header (azul) y .home-intro
   (blanco). Contenido siempre encima (capas z-index:0, contenido z-index:1). */

/* Anfitriones (pingüino marca de agua y/o viento Canvas).
   Incluye TODAS las zonas grises de páginas internas (zebra
   .main>section:nth-of-type(odd), salvo el page-header que va aparte). */
.page-header,
.home-intro,
.home-servicios,
.cl-wind,
.main > section:nth-of-type(odd):not(.page-header) { position: relative; }

/* El contenido real va por encima de las capas decorativas */
.page-header > .container,
.page-header > .container-fluid,
.home-intro > .container,
.home-servicios > .container,
.cl-wind > .container,
.main > section:nth-of-type(odd):not(.page-header) > .container,
.main > section:nth-of-type(odd):not(.page-header) > .container-fluid {
  position: relative;
  z-index: 1;
}

/* (El pingüino marca de agua de la cabecera de páginas internas
   —.page-header— se retiró a petición del cliente; allí solo queda
   el viento Canvas.) */

/* Pingüino marca de agua en la banda CTA azul (blanco, sin aire) */
.home-intro::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: 3%; top: 50%;
  width: 118px; height: 118px;
  transform: translateY(-50%);
  -webkit-mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
          mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
  background-color: #fff;
  opacity: 0;   /* oculto hasta que el banner entra en pantalla */
}
/* Al entrar el banner en pantalla al hacer scroll (.wind-seen): el
   pingüino entra desde la izquierda y recorre TODO el banner (1 vez). */
.home-intro.wind-seen::after {
  animation: cl-pin-vuela 4s cubic-bezier(.22,.61,.36,1) .3s 1 both;
}
/* Vuelo NATURAL del pingüino del banner: una sola transición continua
   A→B (sin fases). La desaceleración la da el cubic-bezier. */
@keyframes cl-pin-vuela {
  0%   { opacity: 0;   transform: translate(-90vw, -50%); }
  18%  { opacity: .14; }
  100% { opacity: .14; transform: translate(0, -50%); }
}
@media (max-width: 991px) {
  .home-intro::after { display: none; }   /* banda estrecha en móvil */
}
@media (prefers-reduced-motion: reduce) {
  /* sin vuelo: el pingüino aparece ya en su sitio cuando el banner se ve.
     wind.js (que respeta esta preferencia) sigue añadiendo .wind-seen. */
  .home-intro.wind-seen::after { animation: none; opacity: .14; }
}

/* Footer: copyright «© Copyright AAAA / PiensaNet» centrado
   (la columna vacía de la izquierda se colapsa y el bloque va al centro) */
#footer .footer-copyright .row > [class*="col-lg-5"] { display: none; }
#footer .footer-copyright .row > [class*="col-lg-7"] {
  flex: 0 0 100%;
  max-width: 100%;
  justify-content: center !important;
  text-align: center;
}

/* Pingüino mascota (a color) junto a "Quiénes somos" y en la 404 */
.pinguino-deco { width: 88px; height: auto; }
.pinguino-deco-lg { width: 150px; height: auto; }

/* Botón "volver arriba" = mini-pingüino de marca */
.scroll-to-top { background: var(--primary) !important; }
.scroll-to-top i { opacity: 0 !important; }
.scroll-to-top::after {
  content: "";
  position: absolute;
  inset: 16% 18%;
  -webkit-mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
          mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
  background-color: #fff;
  transition: background-color .2s ease;
}
.scroll-to-top:hover::after { background-color: var(--secondary); }

/* ===== Hover de los desplegables del menú =====
   El hover por defecto era gris clarísimo (texto casi ilegible).
   Ahora: fondo gris sólido + texto blanco. */
#header .dropdown-menu .dropdown-item:hover,
#header .dropdown-menu .dropdown-item:focus,
#header .dropdown-menu .dropdown-item.active,
#header .dropdown-menu li:hover > .dropdown-item {
  background-color: var(--gray-700) !important;
  color: #fff !important;
}

/* Logo de X (Twitter) en el footer: FA 6.4.0 no trae fa-x-twitter,
   se usa un <svg> inline; que herede tamaño/color como el resto. */
#footer .social-icons-twitter a svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}