.webble-case{--client:#50abc3;--client-mid:#2d748c;--client-dark:#123f52;--client-soft:#eaf7fa}
.webble-case .cucalon-page .hero{background:radial-gradient(circle at 86% 22%,rgba(80,171,195,.2),transparent 29%),linear-gradient(180deg,#edf8fa 0%,#fff 94%)}
.webble-case .cucalon-page h1 em{color:var(--client-mid)}
.webble-case .cucalon-page .eyebrow-dot{background:var(--client);box-shadow:0 0 0 5px rgba(80,171,195,.12)}
.webble-case .cucalon-page .metric strong{color:var(--client-mid)}
.webble-case .cucalon-page .client-logo,.webble-case .cucalon-logo{background-color:#fff;background-image:url("logo-taquillea.webp");background-position:center;background-size:cover;background-repeat:no-repeat}
.webble-case .cucalon-case{background:linear-gradient(145deg,#153e50,#07131f)}
.webble-case .cucalon-case:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000,transparent 82%)}
.webble-case .cucalon-case:after{background:linear-gradient(180deg,transparent 43%,#071320 91%)}
.webble-case .cucalon-showcase{position:absolute;z-index:1;inset:28px 28px 150px;color:#fff}
.webble-case .showcase-brand{display:flex;align-items:center;gap:11px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.11)}
.webble-case .cucalon-logo{width:42px;height:42px;border-radius:11px;flex:0 0 auto}
.webble-case .showcase-brand strong{display:block;font-size:15px;font-weight:500}.webble-case .showcase-brand small{display:block;color:#8fa9b5;font-size:10px;margin-top:3px}.webble-case .live-dot{margin-left:auto;border:1px solid rgba(126,220,190,.22);background:rgba(45,185,139,.11);color:#73d5b5;border-radius:999px;padding:5px 8px;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.webble-case .showcase-title{font-size:18px;font-weight:500;line-height:1.3;max-width:330px;margin:25px 0 22px}
.webble-case .showcase-flow{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr;align-items:center}.webble-case .showcase-flow>i{font-style:normal;text-align:center;color:#6094a7;font-size:14px}
.webble-case .showcase-node{min-height:91px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.055);display:flex;flex-direction:column}.webble-case .showcase-node.active{border-color:rgba(96,199,225,.7);background:linear-gradient(145deg,rgba(80,171,195,.35),rgba(34,92,112,.36));box-shadow:0 10px 28px rgba(0,0,0,.16)}.webble-case .showcase-node>span{font-size:8px;color:#6ec1d5;letter-spacing:.08em}.webble-case .showcase-node strong{font-size:12px;font-weight:500;margin-top:auto}.webble-case .showcase-node small{font-size:8.5px;color:#91a9b4;margin-top:4px;line-height:1.3}.webble-case .showcase-node.active small{color:#c6e6ed}
.webble-case .showcase-signals{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.webble-case .showcase-signals span{font-size:8.5px;color:#a6bac4;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 8px;background:rgba(255,255,255,.04)}
.webble-case .cucalon-page .client-line .client-logo{background-size:cover;border-color:rgba(80,171,195,.48)}
.webble-case .cucalon-page .bar-row.active .bar-track i{background:linear-gradient(90deg,var(--client-mid),#62c2d8)}
.webble-case .cucalon-page .result-card strong{color:#fff}
.webble-case .cucalon-page .tag-dark{color:#8ed2e2;background:rgba(80,171,195,.14)}
.webble-case .cucalon-page .chain-step.chain-final{border-color:#83bdca;background:linear-gradient(180deg,#fff,#eff9fa)}
.webble-case .cucalon-page .chain-final .chain-num,.webble-case .cucalon-page .chain-final .chain-icon{background:var(--client-mid)}
.webble-case .cucalon-page .testimonial-logo{display:block;border-radius:11px}

@media(max-width:980px){
  .webble-case .showcase-title{font-size:17px}.webble-case .cucalon-showcase{inset:25px 25px 145px}
}
@media(max-width:650px){
  .webble-case .cucalon-showcase{inset:21px 20px 132px}.webble-case .showcase-title{font-size:15px;margin:18px 0}.webble-case .showcase-node{min-height:80px;padding:10px 8px}.webble-case .showcase-node strong{font-size:10px}.webble-case .showcase-node small{font-size:7.5px}.webble-case .showcase-signals{display:none}
}


/* ============================================================
   ALINEACION-MOVIL-PEREDA
   Igualar el comportamiento movil al de /casos-de-exito/pereda/.
   ============================================================ */

/* a · Titular del hero. agencia-sem.css define .hero h1{color:#fff}
      sin ambito y en un hero claro queda invisible. Hace falta
      section.hero (0,2,2) para ganarle a .hero.hero h1 (0,2,1). */
.webble-case section.hero h1,
.webble-case section.hero h1 strong{color:var(--ink)}
.webble-case section.hero h1 em{color:var(--blue)}

/* b · La capsula del hero cabe en una sola linea */
@media(max-width:760px){
  .webble-case .hero .eyebrow{
    white-space:nowrap;
    font-size:clamp(8.4px,2.55vw,11px);
    letter-spacing:.055em;
    padding:8px 13px;
    gap:7px;
    margin-bottom:18px;
  }
  .webble-case .hero .eyebrow-dot{width:6px;height:6px;flex:0 0 6px;box-shadow:none}
}

/* c · Banda de metricas: cuadricula 2x2 en tarjetas */
@media(max-width:760px){
  .webble-case .metric-band{border:0;background:transparent;padding:0}
  .webble-case .metric-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:22px 20px 26px;
  }
  .webble-case .metric{
    min-height:0;padding:15px 14px 16px;background:#fff;
    border:1px solid var(--line);border-radius:14px;
    box-shadow:0 2px 10px rgba(10,14,22,.035);
  }
  .webble-case .metric b,
  .webble-case .metric strong{font-size:25px;letter-spacing:-.045em}
  .webble-case .metric span{font-size:11px;line-height:1.4;margin-top:6px;max-width:none}
}
@media(max-width:410px){
  .webble-case .metric-grid{gap:9px;padding:20px 16px 24px}
  .webble-case .metric b,
  .webble-case .metric strong{font-size:23px}
  .webble-case .metric span{font-size:10.5px}
}

/* ============================================================
   AIRE-AUTORIA · ago 2026
   La firma de Manuel se pegaba a la banda de metricas. El componente
   compartido no trae padding propio; en Pereda lo pone pereda.css.
   Va aqui y no en el comun: alli, con la especificidad necesaria,
   pisaba a Pereda y le subia el hueco de 45 a 67 px.
   ============================================================ */
.webble-case .author-line{padding:44px 0 22px}
@media(max-width:760px){
  .webble-case .author-line{padding:30px 0 18px}
}

/* ============================================================
   SOLAPE-HERO · ago 2026
   Mismo fallo que tuvo Pereda: .cucalon-showcase iba en absoluto
   con un hueco fijo reservado abajo (inset 28px 28px 150px) y el
   pie de cliente tambien en absoluto. Al crecer los chips se metian
   dentro del pie: a 834 px se solapaban 46 px.
   Norma: los dos bloques van en flujo dentro de una columna flex.
   ============================================================ */
.webble-case .hero-case{height:auto;min-height:480px;display:flex;flex-direction:column}
.webble-case .hero-case .cucalon-showcase{
  position:relative;inset:auto;z-index:2;flex:1 1 auto;padding:28px 28px 6px}
.webble-case .hero-case .case-overlay{
  position:relative;inset:auto;left:auto;right:auto;bottom:auto;z-index:2;
  margin-top:18px;padding:17px 28px 24px;border-top:1px solid rgba(255,255,255,.11)}
.webble-case .hero-case .showcase-signals{margin-bottom:2px}
@media(max-width:980px){
  .webble-case .hero-case{min-height:0}
  .webble-case .hero-case .cucalon-showcase{padding:24px 25px 6px}
  .webble-case .hero-case .case-overlay{padding:16px 25px 22px}
}
@media(max-width:650px){
  .webble-case .hero-case .cucalon-showcase{padding:20px 20px 4px}
  .webble-case .hero-case .case-overlay{margin-top:15px;padding:15px 20px 20px}
}

/* ============================================================
   LOGO-CLIENTE · ago 2026
   `.client-logo` del CSS comun trae fijado el logo de Piscinas
   Athena, asi que el pie del hero de Taquillea mostraba el logo
   equivocado. Se apunta al suyo, el mismo que ya usa la cabecera
   de la tarjeta.
   ============================================================ */
/* Cualquier .client-logo de la pagina, no solo el del hero: el pie del
   testimonio tambien lo usa y seguia mostrando el de Piscinas. */
.webble-case .client-logo{
  background-color:#0f2b33;
  background-image:url("https://www.webble.es/wp-content/plugins/webble-case-studies/assets/logo-taquillea.webp");
  background-size:78%;
  border-color:rgba(255,255,255,.18);
}
/* ==================================================================
   COLOR DE MARCA · Taquillea · DETALLE COMPLETO
   Replica el sistema de pereda.css: el tono del cliente va en los
   acentos de contenido y en las superficies oscuras. Los botones,
   los .tag y los pasos intermedios de la cadena siguen en azul
   Webble, exactamente igual que en Pereda.
   ================================================================== */
.webble-case .cucalon-page{--client:#50abc3;--client-mid:#327e93;--client-dark:#1d4853;--client-soft:#eef7f9;--client-deep:#215d6e;--client-abyss:#0b2026;--client-panel:#163741;--client-lite:#91cad9;--client-mute:#a3bbc2;--client-line:#97d2e2;--client-glow:#3c96af;--client-num:#b0dce8}

/* --- superficies claras --- */
.webble-case .cucalon-page .hero{background:radial-gradient(circle at 86% 20%,rgba(50,126,147,.20),transparent 30%),linear-gradient(180deg,#eef7f9 0%,#fff 94%)}
.webble-case .cucalon-page h1 em,.webble-case .cucalon-page section.hero h1 em{color:var(--client-mid)}
.webble-case .cucalon-page .eyebrow-dot{background:var(--client-mid);box-shadow:0 0 0 5px rgba(50,126,147,.12)}
.webble-case .cucalon-page .metric strong,.webble-case .cucalon-page .metric b{color:var(--client-mid)}
.webble-case .cucalon-page .icon-box{background:var(--client-soft);color:var(--client-mid)}
.webble-case .cucalon-page .chain-final .chain-num,.webble-case .cucalon-page .chain-final .chain-icon{background:var(--client-mid)}
.webble-case .cucalon-page .intro-text a,.webble-case .cucalon-page .section-head p a,.webble-case .cucalon-page .impact-copy p a{color:var(--client-mid);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.webble-case .cucalon-page .author-line .av{background:var(--client-soft);border:1px solid rgba(50,126,147,.20);box-shadow:0 0 0 4px rgba(50,126,147,.07)}
.webble-case .cucalon-page .author-line .role{color:var(--client-mid);font-weight:600}
.webble-case .cucalon-page .author-line a{color:var(--client-mid);text-decoration:underline;text-underline-offset:2px}
.webble-case .cucalon-page .author-line a.partner-badge{color:var(--ink);text-decoration:none}
.webble-case .cucalon-page .faq-list summary::before{color:var(--client-mid)}

/* --- tarjeta oscura del hero (equivale a .pereda-case) --- */
.webble-case .cucalon-page .cucalon-case{background:linear-gradient(145deg,#215d6e,#0b2026)}
.webble-case .cucalon-page .showcase-node{background:rgba(151,210,226,.055);border-color:rgba(151,210,226,.14)}
.webble-case .cucalon-page .showcase-node.active{background:rgba(151,210,226,.12);border-color:rgba(151,210,226,.26)}
/* ============ FIN COLOR DE MARCA · Taquillea ============ */

/* --- mas detalles con el tono del cliente ------------------------
   Equivalencias con Pereda: .card-ico y .rn hacen de .icon-box,
   .fcard.is-key hace de .funnel-core (borde claro + aro) y .lnk-pend
   es un enlace de cuerpo de texto. Los bloques de "otros casos"
   (.ok, .oa) se dejan en azul Webble porque son de otros clientes. */
.webble-case .cucalon-page .card-ico{background:var(--client-soft);color:var(--client-mid)}
.webble-case .cucalon-page .rn{background:var(--client-soft);color:var(--client-mid)}
.webble-case .cucalon-page .fcard.is-key{border-color:#a4d3e0;box-shadow:0 8px 22px rgba(50,126,147,.12)}
.webble-case .cucalon-page .lnk-pend{color:var(--client-mid)}