/* =========================================================
   KABUKU BETA — solo index-beta.html
   Simetría ref: "referencia simetria.png"
   Carril centrado: misma línea IZQ y DER en toda la página
   ========================================================= */

/* —— Tokens —— */
body.kabuku-prototype.kabuku-v3 {
  --k-rail: 1140px;                         /* ancho del contenido (entre las 2 líneas verdes) */
  --k-pad: clamp(20px, 4vw, 32px);          /* margen lateral del carril */
  --k-title-gap: 40px;                      /* espacio título → contenido */
  --k-surface: #f8f8fa;
  --k-black: #0D0D0D;
  --k-red: #E8312A;
  --k-surface-grid: none;                   /* sin cuadritos en fondos claros */

  --color-bg-1: var(--k-surface);
  --color-bg-2: var(--k-surface);
  --color-bg-3: var(--k-surface);
  --color-bg-5: var(--k-surface);
  --kabuku-cream: var(--k-surface);
  --kabuku-surface-bg: var(--k-surface);
  --footer-bg: var(--k-surface);

  background-color: var(--k-surface) !important;
}

body.kabuku-prototype.kabuku-v3.home-bg {
  background: var(--k-surface) !important;
}

/* =========================================================
   1) CARRIL SIMÉTRICO (el corazón de la referencia)
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .container {
  width: 100% !important;
  max-width: calc(var(--k-rail) + var(--k-pad) * 2) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--k-pad) !important;
  padding-right: var(--k-pad) !important;
  box-sizing: border-box !important;
}

/* Header: logo izq · menú centro · botón der (extremos, sin solape) */
body.kabuku-prototype.kabuku-v3 .header-style-one > .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: clamp(20px, 3vw, 48px) !important;
  padding-right: clamp(20px, 3vw, 48px) !important;
}

body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  gap: clamp(12px, 1.5vw, 24px) !important;
  min-height: 72px !important;
}

/* Logo a la izquierda — extremo */
body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper .left-area {
  grid-column: 1 !important;
  justify-self: start !important;
  flex: none !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  z-index: 2;
}

/* Menú al centro */
body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area {
  grid-column: 2 !important;
  justify-self: center !important;
  flex: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area ul.wpr-desktop-menu,
body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(20px, 2.2vw, 40px) !important;
  column-gap: clamp(20px, 2.2vw, 40px) !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area ul li {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area ul li a.main-element,
body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area ul li a {
  padding: 8px 4px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

/* Botón a la derecha — extremo */
body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper .button-area-start {
  grid-column: 3 !important;
  justify-self: end !important;
  flex: none !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
}

@media (min-width: 1400px) {
  body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area ul.wpr-desktop-menu,
  body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area ul {
    gap: 44px !important;
    column-gap: 44px !important;
  }
}

/* —— Mobile / tablet header —— */
@media (max-width: 1099px) {
  body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 64px !important;
  }

  body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper .left-area {
    grid-column: auto !important;
    flex: 0 0 auto !important;
    padding: 10px 0 !important;
  }

  body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper .left-area .logo img,
  body.kabuku-prototype.kabuku-v3 .header-style-one .kabuku-logo-img img {
    max-height: 36px !important;
    width: auto !important;
  }

  /* Ocultar menú desktop; queda el hamburger */
  body.kabuku-prototype.kabuku-v3 .header-style-one .main-nav-area {
    display: none !important;
  }

  body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper .button-area-start {
    grid-column: auto !important;
    flex: 0 0 auto !important;
    padding: 8px 0 !important;
    gap: 10px !important;
  }

  /* CTA del header oculto en mobile; hamburger visible */
  body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper .button-area-start > .wpr-btn {
    display: none !important;
  }

  body.kabuku-prototype.kabuku-v3 .header-style-one .header-style-one-wrapper .button-area-start .menu-btn {
    display: flex !important;
  }
}

/* Hero home: apilar en mobile */
@media (max-width: 1199px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__main {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 20px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__aside {
    justify-self: start !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__proof {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
}

@media (max-width: 767px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__top > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__title {
    font-size: clamp(40px, 12vw, 56px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__badge {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 12px !important;
    transform: rotate(-2deg) !important;
    white-space: normal !important;
    display: inline-flex !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__headline-wrap {
    padding-bottom: 8px !important;
  }

  /* Portfolio: 1 col */
  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-grid {
    grid-template-columns: 1fr !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-filters {
    justify-content: flex-start !important;
    gap: 10px 14px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item,
  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item--reveal {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 10px 12px !important;
    padding: 18px 8px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-desc {
    grid-column: 1 / -1 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .section-inner,
  body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .kabuku-contact-shell {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 0 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-contact-title {
    font-size: clamp(26px, 8vw, 34px) !important;
  }
}

/* Contenido interior a 100% del carril, SIN padding horizontal extra */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-services-shell--list,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .section-inner,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .section-inner,
body.kabuku-prototype.kabuku-v3 #auditoria .section-inner,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-top-area,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-title-area,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-grid,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-grid--interactive,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-timeline,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .section-title-area,
body.kabuku-prototype.kabuku-v3 #auditoria .section-top-area,
body.kabuku-prototype.kabuku-v3 #auditoria .section-title-area,
body.kabuku-prototype.kabuku-v3 #auditoria .section-mid-area,
body.kabuku-prototype.kabuku-v3 #auditoria .pricing-inner,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-header,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .section-content-area,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-one,
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-top,
body.kabuku-prototype.kabuku-v3 .kabuku-services-list,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-header,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-filters,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   2) FONDOS CLAROS (sin cuadritos)
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .container,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-inner,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-area,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-area .container,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-area,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .container,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2,
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__top,
body.kabuku-prototype.kabuku-v3 .bg-white {
  background-color: var(--k-surface) !important;
  background-image: none !important;
}

/* FAQ: foto de fondo + negro al 85% (la foto se ve ~15%) */
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area {
  position: relative !important;
  isolation: isolate !important;
  background-color: #0D0D0D !important;
  background-image: url("../images/kabuku/team-kabuku-hero-web.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  /* 85% negro → foto al ~15% */
  background: rgba(0, 0, 0, 0.85) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area > .container,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .section-inner,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .section-content-area {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  background-image: none !important;
}

/* Título y acordeón legibles sobre fondo oscuro */
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .kabuku-faq-header .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .section-title {
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-item,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-button,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-body {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-button {
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-button:not(.collapsed) {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-body p,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-body .desc {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .accordion-button::after {
  background: rgba(232, 49, 42, 0.2) !important;
  color: #E8312A !important;
}

/* Hero: layout propio — más ancho y más aire izq/der (no usa el carril 1140 de las demás) */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__top > .container {
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(24px, 3.5vw, 48px) !important;
  padding-right: clamp(24px, 3.5vw, 48px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__main {
  display: grid !important;
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
  row-gap: 24px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__aside {
  justify-self: start !important;
  max-width: none !important;
  width: 100% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__proof {
  width: 100% !important;
}

@media (min-width: 1200px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__main {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) !important;
    column-gap: clamp(56px, 6vw, 96px) !important;
    row-gap: 40px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v2__aside {
    justify-self: end !important;
    max-width: 340px !important;
    width: auto !important;
  }
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-form-card,
body.kabuku-prototype.kabuku-v3 .contact-form-area,
body.kabuku-prototype.kabuku-v3 .accordion-item,
body.kabuku-prototype.kabuku-v3 .accordion-button,
body.kabuku-prototype.kabuku-v3 .accordion-body,
body.kabuku-prototype.kabuku-v3 #auditoria .pricing-wrapper,
body.kabuku-prototype.kabuku-v3 .pricing-wrapper,
body.kabuku-prototype.kabuku-v3 .single-input input,
body.kabuku-prototype.kabuku-v3 .single-input textarea,
body.kabuku-prototype.kabuku-v3 .single-input select,
body.kabuku-prototype.kabuku-v3 .accordion-button:not(.collapsed),
body.kabuku-prototype.kabuku-v3 .accordion-button:focus {
  background: var(--k-surface) !important;
  background-color: var(--k-surface) !important;
  box-shadow: none !important;
}

/* =========================================================
   3) TÍTULOS (estilo «Qué hacemos» + pegados a línea IZQ del carril)
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .section-title,
body.kabuku-prototype.kabuku-v3 #auditoria .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-title,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-header .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-title,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-title {
  margin: 0 !important;
  font-family: var(--font-primary, "Poppins", sans-serif) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  text-align: left !important;
  width: 100% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-title,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-title {
  color: var(--k-black) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-title,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .section-title,
body.kabuku-prototype.kabuku-v3 #auditoria .section-title {
  color: #ffffff !important;
}

/* Acento rojo bajo título, siempre a la izquierda del carril */
body.kabuku-prototype.kabuku-v3 .kabuku-title-accent,
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-accent {
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  margin: 12px 0 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  background: var(--k-red) !important;
  border-radius: 999px !important;
}

/* Headers alineados a la izquierda del carril */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-top-area,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .section-title-area,
body.kabuku-prototype.kabuku-v3 #auditoria .section-top-area,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-header,
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-heading,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-intro {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .section-title-area,
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-heading {
  display: flex !important;
  flex-direction: column !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-lead,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .kabuku-cta-lead,
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .kabuku-cta-btns {
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

/* =========================================================
   4) ESPACIO TÍTULO → CONTENIDO (igual en todas)
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-top-area {
  padding-top: clamp(48px, 6vw, 72px) !important;
  /* más cerca del título que el gap global */
  padding-bottom: 18px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-grid--interactive {
  padding-top: 0 !important;
  margin-top: 0 !important;
  /* base: el hueco de citas se define más abajo (sección 7 / seq) */
  padding-bottom: clamp(28px, 4vw, 48px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-top {
  margin-bottom: var(--k-title-gap) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header {
  padding-top: clamp(48px, 6vw, 72px) !important;
  margin-bottom: var(--k-title-gap) !important;
  gap: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header .kabuku-title-accent {
  margin-bottom: 16px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-lead {
  margin: 0 !important;
  max-width: 36em !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .kabuku-title-accent {
  margin-bottom: var(--k-title-gap) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .kabuku-cta-lead {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

body.kabuku-prototype.kabuku-v3 #auditoria .section-top-area {
  padding-top: clamp(48px, 6vw, 72px) !important;
  padding-bottom: var(--k-title-gap) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-contact-intro .kabuku-title-accent {
  margin-bottom: var(--k-title-gap) !important;
}

/* Título contacto: “gratis” en rojo; sin lead */
body.kabuku-prototype.kabuku-v3 .kabuku-contact-title .kabuku-text-red {
  color: var(--k-red) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-contact-lead {
  display: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-contact-intro .kabuku-title-accent {
  margin-bottom: 28px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-header {
  padding-top: clamp(48px, 6vw, 72px) !important;
  padding-bottom: var(--k-title-gap) !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   5) CINTA BAJO HERO (full-bleed negro + logo neg + marquee loop)
   ========================================================= */
@keyframes kabuku-brand-marquee-loop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* Contenido duplicado 50/50 → -50% = bucle sin corte */
    transform: translate3d(-50%, 0, 0);
  }
}

body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band,
body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner,
body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .left-text,
body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .right-marquee-area,
body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .brand-wrapper,
body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .brand-inner {
  background: var(--k-black) !important;
  background-color: var(--k-black) !important;
  background-image: none !important;
  border: none !important;
}

body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner {
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .left-text {
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #0D0D0D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 240px !important;
  max-width: 320px !important;
  height: auto !important;
  min-height: 88px !important;
  padding: 18px 24px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-brand-band-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  line-height: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-brand-band-logo img {
  display: block !important;
  max-height: 44px !important;
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Marquee: overflow + bucle continuo (duplicado en HTML) */
body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .right-marquee-area {
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .brand-inner.kabuku-brand-marquee,
body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .right-marquee-area .brand-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: max-content !important;
  will-change: transform;
  animation: kabuku-brand-marquee-loop 40s linear infinite !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-brand-item__label,
body.kabuku-prototype.kabuku-v3 .kabuku-brand-item__line {
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-brand-item__icon {
  filter: brightness(0) invert(1) !important;
  opacity: 0.92 !important;
}

/* Franja logo + marquee compacta en mobile (después de reglas base) */
@media (max-width: 767px) {
  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    min-height: 52px !important;
    height: 52px !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .left-text {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 80px !important;
    max-width: 96px !important;
    min-height: 0 !important;
    height: 52px !important;
    padding: 6px 8px !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .kabuku-brand-band-logo img {
    max-height: 20px !important;
    height: 20px !important;
    max-width: 70px !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .right-marquee-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 52px !important;
    align-items: center !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .right-marquee-area .brand-wrapper.kabuku-brand-item {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 52px !important;
    flex: 0 0 150px !important;
    padding: 6px 8px !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .right-marquee-area .brand-wrapper.kabuku-brand-item--long {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex: 0 0 180px !important;
    height: 52px !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .kabuku-brand-item__icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .kabuku-brand-item__line {
    font-size: 10px !important;
    letter-spacing: 0.01em !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .kabuku-brand-item__inner {
    gap: 8px !important;
  }

  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .brand-inner.kabuku-brand-marquee,
  body.kabuku-prototype.kabuku-v3 .wpr-brand-area.kabuku-brand-band .section-inner .right-marquee-area .brand-inner {
    animation-duration: 28s !important;
    height: 52px !important;
  }
}

/* =========================================================
   6) FRANJA ROJA (full-bleed; texto dentro del carril)
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area {
  overflow: visible !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-area > .container .section-inner {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-area > .container {
  margin-bottom: 0 !important;
  /* más aire entre tarjetas (desplegadas) y franja roja */
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-cierre-wrap--red {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--k-red) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  border: none !important;
  position: relative !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-cierre-wrap--red > .container {
  max-width: calc(var(--k-rail) + var(--k-pad) * 2) !important;
  padding-left: var(--k-pad) !important;
  padding-right: var(--k-pad) !important;
  background: transparent !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-cierre--redband {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-cierre--redband .kabuku-problema-cierre-one {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  font-family: var(--font-primary, "Poppins", sans-serif) !important;
  font-size: clamp(16px, 1.9vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  color: #ffffff !important;
}

/* =========================================================
   7) TARJETAS «¿TE SUENA FAMILIAR?»
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-shell,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-inner {
  overflow: visible !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-grid--interactive {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 22px) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-top: 0 !important;
  /* cuerpo de tarjeta igual de alto en las 4 (títulos 2–3 líneas) */
  min-height: 210px !important;
  height: 100% !important;
  padding: 22px 22px 20px !important;
  cursor: pointer !important;
  border: 1px solid rgba(13, 13, 13, 0.08) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(13, 13, 13, 0.06) !important;
  overflow: visible !important;
  transform: translateY(0) !important;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.25s ease !important;
}

/* Iconos rojos */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-icon {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 14px !important;
  background: var(--k-red) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  z-index: 2;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-icon i {
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-icon::after {
  display: none !important;
  content: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-text {
  padding: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Títulos negros — bloque de alto fijo para alinear el fondo de las 4 */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-title,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-title .kabuku-text-red {
  font-size: clamp(16px, 1.6vw, 19px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--k-black) !important;
  margin: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-title {
  min-height: 3.9em !important; /* ~3 líneas → misma base antes del desplegable */
}

/* Cita se despliega POR FUERA (absolute) — más fluido / suave */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-feel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% - 2px) !important;
  z-index: 8 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 22px !important;
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(13, 13, 13, 0.08) !important;
  border-top: none !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 16px 28px rgba(13, 13, 13, 0.12) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(13, 13, 13, 0.62) !important;
  font-style: italic !important;
  box-sizing: border-box !important;
  transition:
    height 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.55s ease,
    padding 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert:hover,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert:focus-visible,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open {
  transform: translateY(-3px) !important;
  border-color: rgba(13, 13, 13, 0.12) !important;
  box-shadow: 0 14px 32px rgba(13, 13, 13, 0.1) !important;
  outline: none !important;
  z-index: 9 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert:hover .kabuku-problema-icon,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert:focus-visible .kabuku-problema-icon,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open .kabuku-problema-icon,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card:hover .kabuku-problema-icon {
  background: var(--k-red) !important;
  transform: scale(1.05) !important;
}

/* Solo se despliega con .is-open (secuencia JS); se queda abierto — alto fijo = bordes inferiores alineados */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open .kabuku-problema-feel {
  height: 112px !important;
  max-height: 112px !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 12px 22px 18px !important;
}

/* Hover suave en icono sin depender de abrir/cerrar texto */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert:hover .kabuku-problema-icon,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open .kabuku-problema-icon {
  background: #E8312A !important;
  transform: scale(1.05) !important;
}

/* =========================================================
   8) SERVICIOS (lista negra a todo el carril)
   ========================================================= */
body.kabuku-prototype.kabuku-v3 section.kabuku-services-area.kabuku-services-area--list,
body.kabuku-prototype.kabuku-v3 section.kabuku-services-area.kabuku-services-area--list .container,
body.kabuku-prototype.kabuku-v3 .kabuku-services-shell--list {
  background: var(--k-black) !important;
  background-image: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-shell--list {
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 80px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-top {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) !important;
  gap: clamp(24px, 4vw, 56px) !important;
  align-items: start !important;
  margin-bottom: var(--k-title-gap) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-heading {
  gap: 12px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-lead {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: none !important;
}

/* Lead principal quitado */
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-lead-main {
  display: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-lead-sub {
  margin: 0 !important;
  font-size: clamp(14px, 1.35vw, 16px) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Animación filas de servicios (se repite al re-entrar al viewport) */
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item--reveal {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease,
    padding-left 0.25s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item--reveal.is-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-lead-brand {
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list {
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56px minmax(140px, 0.95fr) minmax(0, 1.15fr) 48px !important;
  gap: clamp(14px, 2.2vw, 28px) !important;
  align-items: center !important;
  width: 100% !important;
  padding: clamp(20px, 2.4vw, 28px) 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: transparent !important;
  text-decoration: none !important;
  color: #fff !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
  transition:
    background 0.35s ease,
    padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease !important;
}

/* Barra roja lateral al hover */
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18% !important;
  bottom: 18% !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: var(--k-red) !important;
  opacity: 0 !important;
  transform: scaleY(0.4) !important;
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1 !important;
}

/* Flash suave al entrar el mouse */
body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(232, 49, 42, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    transparent 100%
  ) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  padding-left: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(232, 49, 42, 0.12) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover::after {
  animation: kabuku-services-row-flash 0.55s ease-out 1 !important;
}

@keyframes kabuku-services-row-flash {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item > * {
  position: relative !important;
  z-index: 1 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-num {
  color: var(--k-red) !important;
  font-weight: 700 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.35s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover .kabuku-services-list-num {
  transform: scale(1.08) !important;
  letter-spacing: 0.04em !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-name {
  margin: 0 !important;
  font-size: clamp(16px, 1.7vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  min-height: 2.4em;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover .kabuku-services-list-name {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-desc {
  margin: 0 !important;
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.52) !important;
  transition: color 0.3s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover .kabuku-services-list-desc {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--k-red) !important;
  color: #fff !important;
  justify-self: end !important;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease,
    box-shadow 0.35s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover .kabuku-services-list-arrow {
  transform: scale(1.1) rotate(-8deg) !important;
  background: #ff3d35 !important;
  box-shadow: 0 8px 22px rgba(232, 49, 42, 0.4) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-services-list-arrow svg path {
  stroke: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item:hover::after {
    animation: none !important;
  }
}

/* =========================================================
   9) PROTOCOLO BUKI
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-timeline {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-node-icon {
  background: var(--k-red) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 5px var(--k-surface) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-node-icon i {
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-step-intent,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step .kabuku-step-intent {
  color: rgba(13, 13, 13, 0.55) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Reveal secuencial — más fluido */
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center top;
  will-change: opacity, transform;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal.is-in:hover {
  transform: translateY(-3px) scale(1.03);
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal.is-in:hover .kabuku-protocolo-node-icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 5px var(--k-surface),
    0 10px 24px rgba(232, 49, 42, 0.28) !important;
}

/* =========================================================
   10) AUDITORÍA — 2 cards al ancho del carril
   ========================================================= */
body.kabuku-prototype.kabuku-v3 #auditoria .section-mid-area .pricing-inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  width: 100% !important;
}

/* =========================================================
   11) FIXES VISUALES (chequeo Playwright / capturas)
   ========================================================= */

/* Títulos claros: negro sólido (FAQ va blanco sobre foto oscura) */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-title,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-title,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-area h2,
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header h2 {
  color: #0D0D0D !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .kabuku-faq-header .section-title,
body.kabuku-prototype.kabuku-v3 .kabuku-faq-area .section-title {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   PORTAFOLIO / TRABAJOS (ref negra → versión fondo blanco)
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-area,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-area .container,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-shell {
  background-color: #ffffff !important;
  background-image: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-shell {
  padding-top: clamp(56px, 8vw, 96px) !important;
  padding-bottom: clamp(56px, 8vw, 96px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin-bottom: clamp(28px, 4vw, 40px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-header .kabuku-title-accent {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-filters {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px 32px !important;
  margin: 0 0 clamp(36px, 5vw, 52px) !important;
  list-style: none !important;
  width: 100% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-filter {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 2px !important;
  margin: 0 !important;
  font-family: var(--font-primary, "Poppins", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(13, 13, 13, 0.38) !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  line-height: 1.2 !important;
  flex: 0 0 auto !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-filter:hover {
  color: rgba(13, 13, 13, 0.7) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-filter.is-active {
  color: var(--k-red) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.5vw, 32px) clamp(18px, 2vw, 28px) !important;
  align-items: start !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card {
  margin: 0 !important;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card.is-in {
  opacity: 1;
  transform: translateY(0);
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card.is-hidden {
  display: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #f0f0f2 !important;
  margin-bottom: 16px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-link:hover .kabuku-portfolio-card-media img {
  transform: scale(1.05) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-title {
  margin: 0 0 6px !important;
  font-family: var(--font-primary, "Poppins", sans-serif) !important;
  font-size: clamp(16px, 1.5vw, 20px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--k-black) !important;
}

/* Casos: solo título en tarjeta (sin descripción) */
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-meta {
  display: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-link:hover .kabuku-portfolio-card-title {
  color: var(--k-red) !important;
}

/* Card es <button> — reset de estilo de botón del tema */
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-link {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
  font: inherit !important;
  color: inherit !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-media--logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f4f6 !important;
  padding: 28px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-media--logo img {
  width: auto !important;
  height: auto !important;
  max-width: 72% !important;
  max-height: 72% !important;
  object-fit: contain !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-card-media--logo-dark {
  background: #0D0D0D !important;
}

/* Ver más (solo en Todos, cards extra) */
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-more-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: clamp(28px, 4vw, 40px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-more {
  appearance: none !important;
  border: 1px solid rgba(13, 13, 13, 0.14) !important;
  background: #ffffff !important;
  color: var(--k-black) !important;
  font-family: var(--font-primary, "Poppins", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-more:hover {
  border-color: var(--k-red) !important;
  color: var(--k-red) !important;
  transform: translateY(-1px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-more[hidden] {
  display: none !important;
}

/* Popup proyecto */
body.kabuku-prototype.kabuku-v3.kabuku-portfolio-modal-open {
  overflow: hidden !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal[hidden] {
  display: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(13, 13, 13, 0.55) !important;
  backdrop-filter: blur(4px);
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(920px, 100%) !important;
  max-height: min(88vh, 860px) !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 80px rgba(13, 13, 13, 0.28) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: none !important;
  background: rgba(13, 13, 13, 0.08) !important;
  color: var(--k-black) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-close:hover {
  background: var(--k-red) !important;
  color: #fff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-media {
  min-height: 280px !important;
  background: #f0f0f2 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-body {
  padding: clamp(24px, 3vw, 36px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-meta {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--k-red) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-title {
  margin: 0 !important;
  font-family: var(--font-primary, "Poppins", sans-serif) !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--k-black) !important;
  text-transform: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-text {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(13, 13, 13, 0.68) !important;
  flex: 1 1 auto !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-text p {
  margin: 0 0 12px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-text ul {
  margin: 0 0 12px !important;
  padding-left: 1.15em !important;
}

body.kabuku-portfolio-modal-text li,
body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-text li {
  margin-bottom: 6px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

@media (max-width: 767px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-dialog {
    grid-template-columns: 1fr !important;
    max-height: 90vh !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-media {
    min-height: 200px !important;
    max-height: 220px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-modal-media img {
    min-height: 200px !important;
    max-height: 220px !important;
  }
}

/*
  Tarjetas problema: entran una a una (is-in), se despliegan (is-open) y se quedan.
  Espacio inferior del grid reserva el desplegable absoluto + margen extra a la franja.
*/
body.kabuku-prototype.kabuku-v3 .kabuku-problema-grid--interactive {
  /* hueco para citas absolutas (112px) + aire extra abajo de las tarjetas */
  padding-bottom: 176px !important;
  overflow: visible !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card.kabuku-problema-reveal {
  opacity: 0;
  visibility: visible !important;
  animation: none !important;
  transform: translateY(22px) scale(0.98) !important;
  background: #ffffff !important;
  border: 1px solid rgba(13, 13, 13, 0.1) !important;
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.06) !important;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.35s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-in,
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open {
  transform: translateY(0) scale(1) !important;
  z-index: 5 !important;
}

/* Cuando ya están abiertas, hover no cierra ni desmonta el texto */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open:hover {
  transform: translateY(-2px) scale(1) !important;
}

/* Iconos problema: rojo sólido, no rosa lavado */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-icon {
  background: #E8312A !important;
  background-color: #E8312A !important;
  opacity: 1 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-icon i {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-title {
  color: #0D0D0D !important;
  opacity: 1 !important;
}

/* =========================================================
   ¿TE SUENA FAMILIAR? — rotador de frase única en bucle
   Desktop: título a un lado, frase al otro. Mobile: apilado y centrado.
   Se desvanece y aparece la siguiente, en bucle continuo.
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-rotator {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 8px 16px 0 !important;
  box-sizing: border-box !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-rotator-track {
  position: relative !important;
  min-height: clamp(140px, 15vw, 180px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 4vw, 48px) !important;
  text-align: left !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.65s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide .kabuku-problema-title {
  flex: 0 0 auto !important;
  width: clamp(160px, 20vw, 230px) !important;
  text-align: right !important;
  padding-right: clamp(24px, 3vw, 40px) !important;
  border-right: 2px solid rgba(13, 13, 13, 0.14) !important;
  font-size: clamp(13px, 1.1vw, 15px) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: rgba(13, 13, 13, 0.5) !important;
  max-width: none !important;
  margin: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide .kabuku-problema-title .kabuku-text-red {
  color: var(--k-red, #E8312A) !important;
  font-weight: 700 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide .kabuku-problema-feel {
  position: static !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 420px !important;
  max-width: 560px !important;
  text-align: left !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.35 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: rgba(13, 13, 13, 0.68) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 20px 0 4px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-dot {
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(13, 13, 13, 0.16) !important;
  cursor: pointer !important;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-dot:hover {
  background: rgba(13, 13, 13, 0.3) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-dot.is-active {
  width: 22px !important;
  border-radius: 5px !important;
  background: var(--k-red, #E8312A) !important;
}

@media (max-width: 991px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-problema-rotator-track {
    min-height: clamp(260px, 58vw, 320px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide .kabuku-problema-title {
    width: auto !important;
    max-width: 560px !important;
    text-align: center !important;
    padding-right: 0 !important;
    border-right: none !important;
    margin: 0 auto !important;
    font-size: clamp(12px, 3vw, 14px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide .kabuku-problema-feel {
    flex: none !important;
    max-width: 560px !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: clamp(21px, 5.4vw, 28px) !important;
  }
}

@media (max-width: 575px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-problema-rotator-track {
    min-height: clamp(240px, 68vw, 300px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide {
    gap: 12px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide .kabuku-problema-title {
    font-size: 11.5px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide .kabuku-problema-feel {
    font-size: clamp(19px, 6.4vw, 23px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kabuku-prototype.kabuku-v3 .kabuku-problema-slide {
    transition: opacity 0.01s linear !important;
    transform: none !important;
  }
}

/* =========================================================
   CONTACTO «Conversemos»: sin caja exterior; solo card en el form
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .section-inner,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .kabuku-contact-shell {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: clamp(48px, 6vw, 80px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 64px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-contact-intro {
  max-width: 520px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-contact-eyebrow {
  display: none !important;
}

/* Solo el formulario lleva contenedor/card */
body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .contact-form-area,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-form-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 48px rgba(13, 13, 13, 0.08) !important;
  border: 1px solid rgba(13, 13, 13, 0.06) !important;
  padding: clamp(28px, 3.5vw, 36px) clamp(24px, 3vw, 32px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-contact-form-card .single-input input,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-form-card .single-input textarea,
body.kabuku-prototype.kabuku-v3 .kabuku-contact-form-card .single-input select {
  background: #f8f8fa !important;
  background-color: #f8f8fa !important;
}

/* Protocolo: entrada fluida (reset al salir del viewport) */
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal {
  opacity: 0 !important;
  transform: translateY(20px) scale(0.985) !important;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal:not(.is-in) {
  opacity: 0 !important;
  transform: translateY(20px) scale(0.985) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal.is-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Quitar “escalera” excesiva del protocolo en beta (descuadra el carril) */
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step:nth-child(2),
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step:nth-child(3),
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step:nth-child(4),
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step:nth-child(5),
body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step:nth-child(6) {
  margin-top: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step:not(:last-of-type)::after {
  display: none !important;
}

/* Servicios: anular padding residual del CSS de lista (desfase 12px) — más específico */
body.kabuku-prototype.kabuku-v3 section.kabuku-services-area.kabuku-services-area--list .kabuku-services-shell--list {
  padding-top: clamp(56px, 8vw, 96px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.kabuku-prototype.kabuku-v3 section.kabuku-services-area.kabuku-services-area--list .container {
  max-width: calc(var(--k-rail) + var(--k-pad) * 2) !important;
  padding-left: var(--k-pad) !important;
  padding-right: var(--k-pad) !important;
}

body.kabuku-prototype.kabuku-v3 section.kabuku-services-area.kabuku-services-area--list .kabuku-services-list-top,
body.kabuku-prototype.kabuku-v3 section.kabuku-services-area.kabuku-services-area--list .kabuku-services-list,
body.kabuku-prototype.kabuku-v3 section.kabuku-services-area.kabuku-services-area--list .kabuku-services-list-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Auditoría: el grid debe ir en section-mid-area (hay 2 .pricing-inner hermanos) */
body.kabuku-prototype.kabuku-v3 #auditoria .section-mid-area {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 3vw, 28px) !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.kabuku-prototype.kabuku-v3 #auditoria .section-mid-area .pricing-inner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}

body.kabuku-prototype.kabuku-v3 #auditoria .pricing-wrapper {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
}

/* CTA: lead legible en fondo oscuro */
body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .kabuku-cta-lead {
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 36em !important;
}

/* =========================================================
   12) RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
  body.kabuku-prototype.kabuku-v3 {
    --k-title-gap: 28px;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-top {
    grid-template-columns: 1fr !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-grid--interactive {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* ya no hace falta reservar hueco absoluto abajo */
    padding-bottom: clamp(24px, 4vw, 40px) !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* En tablet/mobile el texto va en flujo (no absolute) para que no se apilen/solapen */
  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-title {
    min-height: 0 !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-feel {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    z-index: 1 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert.is-open .kabuku-problema-feel {
    height: auto !important;
    max-height: 200px !important;
    margin-top: 10px !important;
    padding: 10px 4px 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-top: 1px solid rgba(13, 13, 13, 0.08) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-area > .container {
    padding-bottom: clamp(28px, 4vw, 40px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .section-inner,
  body.kabuku-prototype.kabuku-v3 .kabuku-contact-area .kabuku-contact-shell {
    grid-template-columns: 1fr !important;
  }

  /* padding-left: le hace espacio al numerito rojo, que va position:absolute
     a la izquierda del carril (ver kabuku-override.css). El reset global de
     "shells" de más arriba en este archivo lo pone en 0 y lo saca de pantalla. */
  body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-timeline {
    grid-template-columns: 1fr !important;
    padding-left: 64px !important;
  }

  body.kabuku-prototype.kabuku-v3 #auditoria .section-mid-area {
    grid-template-columns: 1fr !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-item {
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    grid-template-areas:
      "num name arrow"
      ". desc desc" !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-num { grid-area: num; }
  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-name { grid-area: name; }
  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-desc { grid-area: desc; }
  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-arrow { grid-area: arrow; }
}

@media (max-width: 575px) {
  /* 2 columnas también en móvil pequeño (no apilar 4 filas) */
  body.kabuku-prototype.kabuku-v3 .kabuku-problema-grid--interactive {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert {
    padding: 16px 14px 14px !important;
    gap: 10px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-card--alert .kabuku-problema-feel {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-grid {
    grid-template-columns: 1fr !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-filters {
    gap: 10px 18px !important;
    justify-content: flex-start !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-area .section-title,
  body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-header .section-title,
  body.kabuku-prototype.kabuku-v3 .kabuku-cta-area .section-title,
  body.kabuku-prototype.kabuku-v3 #auditoria .section-title,
  body.kabuku-prototype.kabuku-v3 .kabuku-contact-title,
  body.kabuku-prototype.kabuku-v3 .kabuku-faq-header .section-title,
  body.kabuku-prototype.kabuku-v3 .kabuku-services-list-title,
  body.kabuku-prototype.kabuku-v3 .kabuku-portfolio-title {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal,
  body.kabuku-prototype.kabuku-v3 .kabuku-protocolo-step--reveal:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   PÁGINA DE CASO (caso-beta.html) — estructura Wattsbike
   ========================================================= */
body.kabuku-prototype.kabuku-v3.kabuku-case-page {
  background: #ffffff !important;
  overflow-x: hidden !important;
}

/* Sticky volver a casos — abajo, un poco hacia el centro (no pegado al borde) */
body.kabuku-prototype.kabuku-v3 .kabuku-case-sticky {
  position: fixed !important;
  top: auto !important;
  bottom: 28px !important;
  left: auto !important;
  /* ~18–22% desde el borde derecho → metido hacia el centro */
  right: clamp(72px, 18vw, 220px) !important;
  transform: none !important;
  z-index: 9000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  background: var(--k-red) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow:
    0 12px 32px rgba(232, 49, 42, 0.4),
    0 0 0 4px rgba(232, 49, 42, 0.18) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease !important;
  animation: kabuku-case-sticky-pulse 2.4s ease-in-out infinite !important;
}

@keyframes kabuku-case-sticky-pulse {
  0%,
  100% {
    box-shadow:
      0 12px 32px rgba(232, 49, 42, 0.4),
      0 0 0 4px rgba(232, 49, 42, 0.18);
  }
  50% {
    box-shadow:
      0 14px 36px rgba(232, 49, 42, 0.5),
      0 0 0 8px rgba(232, 49, 42, 0.12);
  }
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-sticky:hover {
  background: #ff3d35 !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.03) !important;
  animation: none !important;
  box-shadow:
    0 16px 40px rgba(232, 49, 42, 0.5),
    0 0 0 5px rgba(232, 49, 42, 0.22) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-sticky i {
  font-size: 14px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-hero {
  padding: clamp(100px, 12vw, 140px) 0 clamp(48px, 6vw, 72px) !important;
  background: #f8f8fa !important;
}

/* Artículo: texto izq (reto + enfoque) · resultados der */
body.kabuku-prototype.kabuku-v3 .kabuku-case-article {
  margin-top: clamp(32px, 4vw, 48px) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.75fr) !important;
  gap: clamp(28px, 4vw, 48px) !important;
  align-items: start !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-article-main {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(28px, 3.5vw, 40px) !important;
  min-width: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-article .kabuku-case-block {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-article .kabuku-case-h2 {
  margin: 0 0 10px !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-article .kabuku-case-copy p {
  margin: 0 !important;
}

/* Bloque resultados a la derecha */
body.kabuku-prototype.kabuku-v3 .kabuku-case-article .kabuku-case-results {
  position: sticky !important;
  top: 100px !important;
  margin: 0 !important;
  padding: clamp(22px, 2.5vw, 28px) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(13, 13, 13, 0.08) !important;
  box-shadow: 0 12px 36px rgba(13, 13, 13, 0.06) !important;
}

/* Banner full-bleed arriba, justo después del menú + overlay azul */
body.kabuku-prototype.kabuku-v3 .kabuku-case-banner {
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #0a1a2e !important;
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  max-height: clamp(200px, 26vw, 340px) !important;
  aspect-ratio: 21 / 6.5 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-banner img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: clamp(200px, 26vw, 340px) !important;
  object-fit: cover !important;
  object-position: center !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-banner-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  /* Azul encima de la foto */
  background: linear-gradient(
    180deg,
    rgba(10, 40, 90, 0.55) 0%,
    rgba(18, 72, 140, 0.5) 45%,
    rgba(12, 48, 100, 0.58) 100%
  ) !important;
  mix-blend-mode: multiply;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-hero {
  padding-top: clamp(40px, 5vw, 64px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  align-items: center !important;
  margin: 0 0 28px !important;
  font-size: 13px !important;
  color: rgba(13, 13, 13, 0.45) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-breadcrumb a {
  color: rgba(13, 13, 13, 0.55) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-breadcrumb a:hover {
  color: var(--k-red) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-eyebrow {
  margin: 0 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--k-red) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-title {
  margin: 0 0 16px !important;
  font-family: var(--font-primary, "Poppins", sans-serif) !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #0D0D0D !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-lead {
  margin: 0 0 0 !important;
  max-width: 42em !important;
  font-size: clamp(16px, 1.6vw, 18px) !important;
  line-height: 1.65 !important;
  color: rgba(13, 13, 13, 0.62) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-body,
body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery {
  padding: clamp(40px, 6vw, 64px) 0 !important;
  background: #ffffff !important;
  border: none !important;
}



/* Títulos de sección en negro */
body.kabuku-prototype.kabuku-v3 .kabuku-case-h2 {
  margin: 0 0 16px !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0D0D0D !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-title {
  color: #0D0D0D !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-copy {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: rgba(13, 13, 13, 0.68) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-copy p {
  margin: 0 0 12px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(28px, 4vw, 48px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery {
  background: #f8f8fa !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item {
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  background: #e4e4e8 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item--wide {
  grid-column: span 2 !important;
  aspect-ratio: 16 / 9 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Métricas en columna dentro del bloque derecho */
body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics {
  list-style: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  grid-template-columns: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics li,
body.kabuku-prototype.kabuku-v3 .kabuku-case-metric {
  padding: 0 0 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(13, 13, 13, 0.08) !important;
  min-width: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics li:last-child,
body.kabuku-prototype.kabuku-v3 .kabuku-case-metric:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Números en negro; etiquetas en rojo */
body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics strong,
body.kabuku-prototype.kabuku-v3 .kabuku-case-metric-value {
  display: block !important;
  font-size: clamp(28px, 2.6vw, 36px) !important;
  font-weight: 800 !important;
  color: #0D0D0D !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics span {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--k-red) !important;
}

/* Galería: clic para previsualizar */
body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item {
  cursor: zoom-in !important;
  position: relative !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(13, 13, 13, 0) !important;
  transition: background 0.25s ease !important;
  pointer-events: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item:hover::after {
  background: rgba(13, 13, 13, 0.12) !important;
}

/* Lightbox de piezas */
body.kabuku-prototype.kabuku-v3 .kabuku-case-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10060 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-lightbox[hidden] {
  display: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(13, 13, 13, 0.82) !important;
  backdrop-filter: blur(6px);
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-lightbox-dialog {
  position: relative !important;
  z-index: 1 !important;
  max-width: min(1100px, 94vw) !important;
  max-height: 88vh !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #0D0D0D !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-lightbox-dialog img {
  display: block !important;
  max-width: 94vw !important;
  max-height: 88vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-lightbox-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  width: 42px !important;
  height: 42px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--k-red) !important;
  color: #fff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 20px rgba(232, 49, 42, 0.35) !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-lightbox-close:hover {
  background: #ff3d35 !important;
}

body.kabuku-prototype.kabuku-v3.kabuku-case-lightbox-open {
  overflow: hidden !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-cta {
  padding: clamp(64px, 9vw, 100px) 0 !important;
  background-color: #0D0D0D !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-cta-inner--single {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 28px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-cta-title {
  margin: 0 !important;
  font-size: clamp(22px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  justify-content: center !important;
}

/* Footer compacto caso — negro + acentos rojos */
body.kabuku-prototype.kabuku-v3 .kabuku-case-footer {
  background: #0D0D0D !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 26px 0 !important;
  position: relative !important;
}

/* Detalle rojo en la línea divisoria del footer */
body.kabuku-prototype.kabuku-v3 .kabuku-case-footer::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -1px !important;
  transform: translateX(-50%) !important;
  width: min(120px, 30vw) !important;
  height: 2px !important;
  background: var(--k-red) !important;
  border-radius: 2px !important;
  opacity: 1 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-footer-logo::before {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--k-red) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px rgba(232, 49, 42, 0.25) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-footer-logo img {
  display: block !important;
  height: 28px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 0.95 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-footer-copy {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-case-footer-copy::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 2px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
  background: var(--k-red) !important;
  border-radius: 2px !important;
}

@media (max-width: 991px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-case-article {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-article .kabuku-case-results {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics li,
  body.kabuku-prototype.kabuku-v3 .kabuku-case-metric {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    min-width: calc(33% - 16px) !important;
    flex: 1 1 auto !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item--wide {
    grid-column: span 2 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-cta {
    padding: 48px 0 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-cta-title {
    white-space: normal !important;
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-sticky {
    bottom: 18px !important;
    right: 16px !important;
    left: auto !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
    max-width: calc(100vw - 32px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-banner {
    max-height: 180px !important;
    aspect-ratio: 16 / 7 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-banner img {
    max-height: 180px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-hero {
    padding-top: 28px !important;
    padding-bottom: 36px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-title {
    font-size: clamp(28px, 9vw, 40px) !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-page .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 575px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-grid {
    grid-template-columns: 1fr !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-gallery-item--wide {
    grid-column: span 1 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-cta-inner--single {
    flex-direction: column !important;
    align-items: center !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-case-metrics li,
  body.kabuku-prototype.kabuku-v3 .kabuku-case-metric {
    min-width: 40% !important;
  }

  /* Badge beta no tapa el sticky de casos */
  body.kabuku-prototype.kabuku-v3.kabuku-case-page .kabuku-v3-badge {
    bottom: 72px !important;
    left: 12px !important;
  }
}

/* =========================================================
   HERO v3 — full-bleed oscuro, foto de fondo + frase de impacto
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3 {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #0D0D0D !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(56px, 10vw, 108px) 0 clamp(24px, 3vw, 36px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-color: #0D0D0D !important;
  background-image: var(--kabuku-dark-grid) !important;
  background-size: var(--kabuku-grid-size) !important;
  background-attachment: fixed !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(60% 55% at 78% 100%, rgba(232, 49, 42, 0.14) 0%, rgba(232, 49, 42, 0) 70%) !important;
  background-attachment: fixed !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3 .container {
  position: relative !important;
  z-index: 1 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__inner {
  max-width: 760px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__eyebrow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 24px !important;
  font-size: clamp(12px, 1.1vw, 14px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__eyebrow span {
  display: inline-flex !important;
  align-items: center !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__eyebrow span + span {
  margin-left: 14px !important;
  padding-left: 14px !important;
  position: relative !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__eyebrow span + span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--k-red, #E8312A) !important;
  transform: translate(-2px, -50%) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__title {
  margin: 0 0 28px !important;
  font-family: var(--font-primary), sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: clamp(52px, 8.2vw, 108px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__title-line {
  display: block !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__title .kabuku-text-red {
  color: var(--k-red, #E8312A) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__desc {
  margin: 0 0 36px !important;
  max-width: 480px !important;
  font-size: clamp(16px, 1.4vw, 18px) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(20px, 3vw, 32px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__play {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__play-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__play-circle i {
  color: #ffffff !important;
  font-size: 13px !important;
  margin-left: 2px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__play:hover .kabuku-hero-v3__play-circle {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.06) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__play-label {
  font-size: 15px !important;
  font-weight: 500 !important;
}

@media (max-width: 991px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3 {
    min-height: 0 !important;
    padding: 120px 0 32px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__title {
    font-size: clamp(40px, 12vw, 64px) !important;
  }
}

@media (max-width: 575px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__eyebrow {
    font-size: 11px !important;
    row-gap: 8px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__desc {
    font-size: 15px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__actions {
    gap: 18px 24px !important;
  }
}

/* —— Hero v3: fila (texto + diagrama) —— */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(32px, 5vw, 64px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__inner {
  flex: 1 1 480px !important;
  max-width: 560px !important;
  margin: 0 !important;
}

/* —— Diagrama de flujo —— */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__diagram {
  position: relative !important;
  flex: 1 1 480px !important;
  max-width: 560px !important;
  aspect-ratio: 100 / 92 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__diagram-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Líneas "vivas": flujo animado en dashes + pulso en los nodos activos */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__diagram-svg > line,
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__diagram-svg > path {
  stroke-dasharray: 3.5 2.5 !important;
  animation: kabukuHv3Flow 1.8s linear infinite !important;
}

@keyframes kabukuHv3Flow {
  to {
    stroke-dashoffset: -12;
  }
}

@keyframes kabukuHv3Pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(232, 49, 42, 0.35), 0 0 26px rgba(232, 49, 42, 0.35);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(232, 49, 42, 0.55), 0 0 40px rgba(232, 49, 42, 0.55);
  }
}

@keyframes kabukuHv3DotPulse {
  0%, 100% {
    box-shadow: 0 0 18px rgba(232, 49, 42, 0.55);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 28px rgba(232, 49, 42, 0.8);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__diagram-svg > line,
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__diagram-svg > path,
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--ia,
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__dot {
    animation: none !important;
  }
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(2px) !important;
  box-sizing: border-box !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node i {
  flex: 0 0 auto !important;
  font-size: 20px !important;
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node i.kabuku-hero-v3__node-icon--red {
  color: var(--k-red, #E8312A) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node i.kabuku-hero-v3__node-icon--green {
  color: #25D366 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node-title {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node-desc {
  margin: 2px 0 0 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--contenido {
  left: 50% !important;
  top: 1% !important;
  width: 46% !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--meta {
  left: 0 !important;
  top: 35% !important;
  width: 32% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--ia {
  left: 50% !important;
  top: 35% !important;
  width: 25% !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
  text-align: center !important;
  flex-direction: column !important;
  border-color: var(--k-red, #E8312A) !important;
  background: rgba(232, 49, 42, 0.08) !important;
  animation: kabukuHv3Pulse 2.4s ease-in-out infinite !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--ia i {
  font-size: 22px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--whats {
  right: 0 !important;
  top: 35% !important;
  width: 32% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--crm {
  left: 0 !important;
  top: 69% !important;
  width: 32% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node--venta {
  right: 0 !important;
  top: 69% !important;
  width: 32% !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__dot {
  position: absolute !important;
  left: 50% !important;
  top: 80% !important;
  width: 30px !important;
  height: 30px !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--k-red, #E8312A) !important;
  animation: kabukuHv3DotPulse 2.4s ease-in-out infinite !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__dot i {
  color: #ffffff !important;
  font-size: 11px !important;
}

@media (max-width: 1199px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node-title {
    font-size: 11px !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__node-desc {
    font-size: 9px !important;
  }
}

@media (max-width: 991px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__inner {
    max-width: none !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3__diagram {
    display: none !important;
  }
}

/* =========================================================
   HERO v3 — franja de corte (foto + recorte + badges), autocontenida.
   No depende de sobresalir hacia una sección vecina: el alto del
   "frame" YA incluye el espacio del corte, todo vive en una sola pieza.
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam {
  position: relative !important;
  isolation: isolate !important;
  background-color: #0D0D0D !important;
  background-image: var(--kabuku-dark-grid) !important;
  background-size: var(--kabuku-grid-size) !important;
  background-attachment: fixed !important;
  overflow: hidden !important;
}

/* Mismo resplandor, mismos parámetros y también "fixed": es la MISMA luz
   del hero continuando a través del límite entre las dos piezas, no una
   nueva — así no se nota dónde termina una sección y empieza la otra. */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: radial-gradient(60% 55% at 78% 100%, rgba(232, 49, 42, 0.14) 0%, rgba(232, 49, 42, 0) 70%) !important;
  background-attachment: fixed !important;
}

/* aspect-ratio en vez de vw: el alto se calcula a partir del ANCHO real
   del elemento (que si respeta max-width), no del viewport — así nunca
   hay una meseta que se desincronice con zoom, y el tope de ancho evita
   la banda gigante en monitores anchos, sin los problemas de antes. */

/* "Ventana" visible: mismo ancho de referencia que el frame (para que la
   proporción sea consistente), pero MÁS BAJA — recorta lo que sobra por
   abajo. El frame de adentro se queda con su alto natural completo y
   simplemente se desborda por abajo del recorte. */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam__viewport {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3.4 !important;
  overflow: hidden !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam__frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1.905 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam__img {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 2.326 !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}

/* Capa recortada (sin fondo): MISMO ancla (bottom), llena todo el frame.
   La foto de fondo corta el cabello de los 4 a propósito; esta capa,
   más alta, muestra esa parte cortada contra el negro de la franja. */
body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam__cutout {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  pointer-events: none !important;
}

@media (max-width: 575px) {
  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam__viewport {
    max-width: none !important;
    aspect-ratio: 2.35 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam__frame {
    aspect-ratio: 1.47 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-hero-v3-seam__img {
    aspect-ratio: 1.613 !important;
  }
}

/* =========================================================
   PROBLEMA v3 — foto real + stats flotantes
   ========================================================= */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3 {
  background: #ffffff !important;
  padding: clamp(56px, 8vw, 100px) 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__row {
  display: flex !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 72px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__text {
  flex: 1 1 440px !important;
  max-width: 520px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__title {
  margin: 0 0 12px !important;
  font-family: var(--font-primary), sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--k-black, #0D0D0D) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__title .kabuku-text-red {
  display: inline-block !important;
  margin-bottom: 12px !important;
  color: var(--k-red, #E8312A) !important;
  font-size: clamp(17px, 2.3vw, 26px) !important;
  white-space: nowrap !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__desc {
  margin: 0 0 32px !important;
  max-width: 480px !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(13, 13, 13, 0.62) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__cta {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 214px !important;
  overflow: hidden !important;
}

/* Las dos etiquetas se cruzan: la que sale se desvanece hacia un lado,
   la que entra aparece desde el lado contrario. */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__cta-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  transition: opacity 0.32s ease, transform 0.32s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__cta-label--open {
  position: absolute !important;
  opacity: 0 !important;
  transform: translateX(18px) !important;
  pointer-events: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__cta.is-open .kabuku-problema-v3__cta-label--closed {
  opacity: 0 !important;
  transform: translateX(-18px) !important;
  pointer-events: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__cta.is-open .kabuku-problema-v3__cta-label--open {
  position: static !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* "Ocultar preguntas": mismo botón, en negro en vez de rojo */
body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__cta.is-open {
  background: var(--k-black, #0D0D0D) !important;
  background-image: none !important;
  border-color: var(--k-black, #0D0D0D) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__media {
  position: relative !important;
  flex: 1 1 460px !important;
  max-width: 580px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag {
  width: 100% !important;
}

/* Panel de preguntas — desplegable, arriba de la tarjeta */
body.kabuku-prototype.kabuku-v3 .kabuku-diag__quiz {
  margin: 0 0 20px !important;
  padding: 20px !important;
  background: #f8f8fa !important;
  border-radius: 16px !important;
  border: 1px solid rgba(13, 13, 13, 0.08) !important;
  opacity: 0 !important;
  transform: translateX(18px) !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__quiz.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__quiz-intro {
  margin: 0 0 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: rgba(13, 13, 13, 0.55) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__q {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px 0 !important;
  border-top: 1px solid rgba(13, 13, 13, 0.08) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__q:first-of-type {
  border-top: none !important;
  padding-top: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__q > span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--k-black, #0D0D0D) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts {
  display: flex !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts button {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(13, 13, 13, 0.16) !important;
  background: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(13, 13, 13, 0.65) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts button:hover {
  border-color: rgba(13, 13, 13, 0.3) !important;
  transform: translateY(-1px) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts button.is-active[data-diag-val="1"],
body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts button.is-active[data-diag-val="2"] {
  background: var(--k-red, #E8312A) !important;
  border-color: var(--k-red, #E8312A) !important;
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts button.is-active[data-diag-val="3"] {
  background: #E8A02A !important;
  border-color: #E8A02A !important;
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts button.is-active[data-diag-val="4"],
body.kabuku-prototype.kabuku-v3 .kabuku-diag__opts button.is-active[data-diag-val="5"] {
  background: #1FA85C !important;
  border-color: #1FA85C !important;
  color: #ffffff !important;
}

/* Tarjeta de resultado */
body.kabuku-prototype.kabuku-v3 .kabuku-diag__card {
  background: #0D0D0D !important;
  border-radius: 20px !important;
  padding: clamp(22px, 3vw, 30px) !important;
  box-shadow: 0 24px 56px rgba(13, 13, 13, 0.18) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__title {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__title--bar {
  margin-top: 18px !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__list li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__list li:first-child {
  border-top: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--k-red, #E8312A) !important;
  box-shadow: 0 0 8px rgba(232, 49, 42, 0.6) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__status.is-active {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__status.is-mid .kabuku-diag__dot {
  background: #E8A02A !important;
  box-shadow: 0 0 8px rgba(232, 160, 42, 0.6) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__status.is-active .kabuku-diag__dot {
  background: #2ECC71 !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__bar {
  position: relative !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  overflow: hidden !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__bar-fill {
  height: 100% !important;
  width: 0% !important;
  border-radius: 999px !important;
  background: var(--k-red, #E8312A) !important;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-diag__bar-pct {
  position: absolute !important;
  right: 0 !important;
  top: 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

@media (max-width: 991px) {
  /* align-items:center (heredado de escritorio) más flex-basis en px
     pensados para fila (440/460px) se vuelven ALTO forzado y ancho
     encogido al pasar a columna — se resetean explícitamente aquí. */
  body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__text {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    order: 1 !important;
  }

  body.kabuku-prototype.kabuku-v3 .kabuku-problema-v3__media {
    flex: none !important;
    width: 100% !important;
    order: 2 !important;
    max-width: 540px !important;
    margin: clamp(40px, 7vw, 56px) auto 0 !important;
  }
}

/* Botón negro — plan "Acompañamiento Integral" */
body.kabuku-prototype.kabuku-v3 .kabuku-btn-black.wpr-btn.btn-primary {
  background: var(--k-black, #0D0D0D) !important;
  background-image: none !important;
  border-color: var(--k-black, #0D0D0D) !important;
  box-shadow: none !important;
}

body.kabuku-prototype.kabuku-v3 .kabuku-btn-black.wpr-btn.btn-primary:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}