@font-face {
  font-family: "Google Font";
  src: url("https://www.webble.es/wp-content/uploads/2026/08/GoogleSans-webble-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --wbh-navy: #07142b;
  --wbh-blue: #2376e8;
  --wbh-blue-hover: #1768d8;
}

html { scroll-padding-top: 78px; }
body { padding-top: 76px; }
body.admin-bar .wb-header { top: 32px; }

body .elementor-location-header,
body [data-elementor-type="header"],
body .pvnav,
body .pvfoot,
body [data-elementor-type="popup"][data-elementor-id="6071"],
body .elementor-popup-modal[data-elementor-id="6071"],
body .elementor-location-popup[data-elementor-id="6071"],
body .elementor-element-6071,
body .elementor-element[data-id="6071"],
body [class*="elementor-6071"],
body [id*="elementor-popup-modal-6071"],
body [class*="legacy-menu"],
body [class*="old-menu"],
body [class*="menu-antiguo"],
body [class*="floating-menu"],
body [class*="menu-flotante"],
body [class*="side-menu"],
body [class*="vertical-menu"],
body [id*="legacy-menu"],
body [id*="old-menu"],
body [id*="menu-antiguo"],
body [id*="floating-menu"],
body [id*="menu-flotante"],
body [id*="side-menu"],
body [id*="vertical-menu"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Astra seguía imprimiendo su cabecera además de la cabecera propia. */
body > #page #masthead,
body #page > #masthead,
body header#masthead.site-header {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html,
body,
body * { cursor: auto !important; }
a, button, [role="button"], summary, input[type="button"], input[type="submit"] { cursor: pointer !important; }
body .cursor,
body .cursor-dot,
body .cursor-circle,
body .cursor-follower,
body .mouse-cursor,
body .mouse-dot,
body .mouse-circle,
body .pointer-dot,
body .pointer-circle,
body [class*="custom-cursor"],
body [class*="cursor-follower"],
body [class*="mouse-follower"],
body [class*="cursor__"],
body [id*="custom-cursor"],
body [id*="cursor-follower"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.wb-header,
.wb-header * { box-sizing: border-box; }

.wb-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9997;
  height: 76px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: var(--wbh-navy);
  color: #fff;
  font-family: "Google Font", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wb-header__inner {
  display: flex;
  width: min(100% - 48px, 1500px);
  height: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.wb-header__brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.wb-header__brand img {
  display: block;
  width: 142px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.wb-header__nav { display: flex; align-items: center; gap: 30px; }

.wb-header__link {
  position: relative;
  color: rgba(255,255,255,.9);
  font-size: 16px;
  font-weight: 480;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.wb-header__link:not(.wb-header__cta)::after {
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #5c9bf1;
  content: "";
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity .18s ease, transform .18s ease;
}

.wb-header__link:hover::after,
.wb-header__link:focus-visible::after { opacity: 1; transform: scaleX(1); }

.wb-header__cta {
  display: inline-flex;
  min-height: 42px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: var(--wbh-blue);
  box-shadow: 0 8px 22px rgba(35,118,232,.2);
}

.wb-header__cta:hover,
.wb-header__cta:focus-visible { background: var(--wbh-blue-hover); }

.wb-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.06);
}

.wb-header__toggle-lines { display: grid; width: 20px; gap: 5px; }
.wb-header__toggle-lines span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.wb-header.is-open .wb-header__toggle-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wb-header.is-open .wb-header__toggle-lines span:nth-child(2) { opacity: 0; }
.wb-header.is-open .wb-header__toggle-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.wb-header__mobile-panel { display: none; }

@media (min-width: 700px) and (max-width: 920px) {
  html { scroll-padding-top: 72px; }
  body { padding-top: 72px; }
  .wb-header { height: 72px; }
  .wb-header__inner { width: calc(100% - 48px); gap: 20px; }
  .wb-header__brand img { width: 128px; max-height: 42px; }
  .wb-header__nav { gap: 18px; }
  .wb-header__link { font-size: 13.5px; }
  .wb-header__cta { min-height: 40px; padding: 0 15px; border-radius: 11px; }
}

@media (max-width: 699px) {
  html { scroll-padding-top: 68px; }
  body { padding-top: 68px; }
  body.admin-bar .wb-header { top: 46px; }
  .wb-header { height: 68px; }
  .wb-header__inner { width: calc(100% - 36px); gap: 18px; }
  .wb-header__brand img { width: 124px; max-height: 40px; }
  .wb-header__nav { display: none; }
  .wb-header__toggle { display: inline-flex; }
  .wb-header__mobile-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 10px 18px 18px;
    border-top: 1px solid rgba(255,255,255,.1);
    background: var(--wbh-navy);
    box-shadow: 0 18px 34px rgba(7,20,43,.25);
  }
  .wb-header.is-open .wb-header__mobile-panel { display: grid; gap: 7px; }
  .wb-header__mobile-link {
    display: flex;
    min-height: 50px;
    padding: 0 14px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    color: #fff;
    background: rgba(255,255,255,.045);
    font-size: 15px;
    font-weight: 520;
    text-decoration: none;
  }
  .wb-header__mobile-link span { color: #76aef8; font-size: 19px; }
  .wb-header__mobile-link--cta { margin-top: 3px; justify-content: center; border-color: var(--wbh-blue); background: var(--wbh-blue); }
}


/* ===== SECCION CASOS DE EXITO · plantilla [webble_casos] =====
   Copia fiel de la cinta original: ancho completo de pantalla,
   misma tipografia, mismas sombras. La diferencia esta en movil,
   donde no corre sola y se arrastra con el dedo.                */
.wbcasos{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#fff;padding:100px 0;--wbc-navy:#0A0E16;--wbc-blue:#1a73e8;--wbc-border:#e5e7eb;--wbc-muted:#6b7280}
.wbcasos *{box-sizing:border-box}
.wbcasos .wbc-head{text-align:center;padding:0 22px;margin:0 0 64px}
.wbcasos .wbc-tag{display:inline-block;font-size:12px;line-height:25.6px;font-weight:500;color:var(--wbc-blue);text-transform:uppercase;letter-spacing:1.2px;background:#e8f0fd;padding:6px 16px;border-radius:20px}
.wbcasos .wbc-head h2{margin:14px 0 0;font-size:38px;line-height:1.2;font-weight:500;color:var(--wbc-navy)}
.wbcasos .wbc-head p{margin:16px auto 0;max-width:660px;font-size:17px;line-height:1.7;color:var(--wbc-muted)}
.wbcasos .wbc-car{position:relative;margin-top:8px;padding:20px 0 48px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%)}
.wbcasos .wbc-car::-webkit-scrollbar{display:none}
.wbcasos .wbc-car.wbc-agarrando{cursor:grabbing;user-select:none}
.wbcasos .wbc-track{display:flex;width:max-content;gap:16px}
.wbcasos .wbc-tile{position:relative;display:block;width:300px;height:300px;flex:0 0 300px;overflow:hidden;border-radius:18px;border:.5px solid var(--wbc-border);box-shadow:0 4px 14px rgba(16,24,40,.06);transition:transform .3s,box-shadow .3s;text-decoration:none;color:inherit;-webkit-user-drag:none}
.wbcasos .wbc-tile::before{content:"";position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transition:transform .5s}
.wbcasos .wbc-tile:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(16,24,40,.16)}
.wbcasos .wbc-tile:hover::before{transform:scale(1.05)}
.wbcasos .wbc-tile:focus-visible{outline:3px solid var(--wbc-blue);outline-offset:3px}
.wbcasos .wbc-arrow{position:absolute;right:14px;bottom:14px;width:34px;height:34px;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.96);color:var(--wbc-navy);box-shadow:0 4px 12px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.wbcasos .wbc-arrow svg{width:15px;height:15px}
.wbcasos .wbc-tile:hover .wbc-arrow{opacity:1;transform:none}
.wbcasos .wbc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wbcasos .wbc-desliza{display:none}
.wbcasos .wbc-pereda::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-pereda.webp)}
.wbcasos .wbc-ineo::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-ineo.webp)}
.wbcasos .wbc-piscinas::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-piscinas.webp)}
.wbcasos .wbc-taquillea::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-taquillea.webp)}
.wbcasos .wbc-kuarere::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-web-kuarere.webp)}
.wbcasos .wbc-aparkate::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/06/exito-sem-aparkate.webp)}
.wbcasos .wbc-bge::before{background-image:url(https://www.webble.es/wp-content/uploads/2026/08/exito-sem-bge.webp)}
@media (max-width:820px){.wbcasos .wbc-tile{width:240px;height:240px;flex-basis:240px}}
@media (max-width:760px){
.wbcasos{padding:64px 0 40px}
.wbcasos .wbc-head{margin-bottom:26px}
.wbcasos .wbc-head h2{font-size:28px}
.wbcasos .wbc-head p{font-size:15.5px}
.wbcasos .wbc-desliza{display:block;text-align:right;padding:0 22px;margin:0 0 -4px;font-size:13px;color:#9ca3af}
.wbcasos .wbc-car{margin-top:10px;padding:14px 0 10px;scroll-snap-type:x mandatory;cursor:default;-webkit-mask-image:none;mask-image:none}
.wbcasos .wbc-track{padding:0 22px;gap:14px}
.wbcasos .wbc-tile{scroll-snap-align:center;width:76vw;height:76vw;flex-basis:76vw;max-width:340px;max-height:340px}
.wbcasos .wbc-dup{display:none}
.wbcasos .wbc-arrow{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.wbcasos .wbc-tile,.wbcasos .wbc-tile::before{transition:none}}
/* ===== FIN SECCION CASOS DE EXITO ===== */


/* ===== MOVIL-25AGO · correcciones de movil ===== */

/* 1 · Carrusel de casos: scroll tactil nativo (el arrastre JS ya es solo raton) */
.wbcasos .wbc-car{
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: 20px;
}
@media (pointer: coarse){
  .wbcasos .wbc-car,
  .wbcasos .wbc-car.wbc-agarrando{ cursor: auto; }
}

/* 2 · Auditoria de la pilar: los dos CTA dejan de ir apretados en una linea */
@media (max-width: 620px){
  body #auditoria .aud-cta{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body #auditoria .aud-cta a{
    flex: 1 1 100% !important;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.25;
  }
}

/* 3 · Intelligence Layer: el panel deja de ser una caja metida dentro
      de la seccion y pasa a ocupar todo el ancho, para que el texto tenga
      el mismo aire que el resto de secciones (350px en un movil de 390) */
@media (max-width: 620px){
  body #intelligence{ padding-left: 0 !important; padding-right: 0 !important; }
  body #intelligence .il-panel{
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 56px 20px !important;
  }
}

/* 4 · CTA final de la home: en movil conservaba el padding lateral de
      escritorio (80px), asi que el contenido se quedaba en 229px de 390.
      Se alinea con el estandar del resto de secciones: 56px 20px */
@media (max-width: 620px){
  body #contacto{ padding: 56px 20px !important; }
}

/* 5 · TARJETA-CLICABLE · tarjetas de servicios de la home
      Antes solo respondia el enlace azul de abajo. Con el enlace estirado
      (::after absoluto que cubre toda la tarjeta) el recuadro entero es
      zona de clic, sin JS y conservando un <a> real: el foco de teclado y
      el rastreo de enlaces siguen funcionando igual.
      IMPORTANTE: .srv-more tiene que quedarse en position:static para que
      su ::after se ancle a .srv-card y no a si mismo. */
.srv-card{ position: relative; cursor: pointer; }
.srv-card .srv-more::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ===== HOME-MOVIL-B · 26 agosto ===== */

/* 6 · Seccion #ia: el diagrama de flujo iba metido en .canvas, que le comia
      28px de padding por lado y lo dejaba en 289px de 390. Se quita la caja
      (fondo, borde, radio y relleno) y el mockup pasa a ocupar los 350px.
      Acotado a body.home porque .canvas tambien existe en /agencia-sem/. */
@media (max-width: 620px){
  body.home #ia .canvas{
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.home #ia .canvas .win{ width: 100% !important; max-width: none !important; }
}

/* 7 · Seccion #intelligence: quedaba blanco alrededor del panel oscuro por
      dos motivos. Uno, la seccion conservaba 40px de padding vertical. Dos,
      la animacion de entrada deja el panel en scale(.985), y un elemento a
      sangre completa que se escala siempre asoma el fondo por los lados
      (3px a cada lado, medidos). Se anula el transform en este panel: a
      sangre completa no puede escalar. */
@media (max-width: 620px){
  body.home #intelligence{ padding: 0 !important; }
  body.home #intelligence .il-panel{
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== ARCHIVO-H1 (28-08-2026) =====
   Titulo de los archivos del blog y de las categorias. Antes no habia h1.
   Para revertir: borrar este bloque y el add_action del PHP del plugin. */
.wb-archive-head{max-width:1160px;margin:0 auto;padding:38px 24px 24px}
.wb-archive-head h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:700;color:#071022}
.wb-archive-desc{margin:0;max-width:70ch;font-size:16.5px;line-height:1.55;color:#5b6675}
.wb-archive-desc p{margin:0}
@media (max-width:640px){.wb-archive-head{padding:24px 20px 16px}}