/* IBC responsive fixes
   Built section by section. Loaded after the Webflow stylesheet so
   these rules win specificity ties. Each block notes which section
   of index.html it targets. */

/* === Sección 1: Hero principal (HTML línea ~230) ===
   "Estructura al nivel de tus metas" + carpetitas video bg.
   Issue: el headline a 3.5em (~56px) wrappa cada palabra a su propia
   línea en viewports angostos. Bajamos el font-size para que quepa
   en 2 líneas lógicas como en desktop. */
@media screen and (max-width: 767px) {
  .div-block-12 .display-2.color-neutral-100.mg-bottom-56px {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 1.25rem;
  }
}

@media screen and (max-width: 479px) {
  .div-block-12 .display-2.color-neutral-100.mg-bottom-56px {
    font-size: 2rem;
  }
}

/* === Sección Distingue (HTML línea ~1294) ===
   "Lo que distingue a IBC" + 3 tabs. El grid 2-cols hace overflow
   horizontal en mobile (la imagen del tab y el cuerpo de texto se
   salen del viewport por la derecha).

   Causa raíz: Webflow a <479px setea .container-default { display:flex }
   lo cual colapsa los grids hijos al ancho de su contenido (~138px)
   en vez del 100% del container. */
@media screen and (max-width: 767px) {
  .section.bg-neutral-200 .grid-2-columns {
    grid-template-columns: 1fr;
  }
  .section.bg-neutral-200 .inner-container._550px,
  .section.bg-neutral-200 .inner-container._614px,
  .section.bg-neutral-200 .inner-container._500px {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 479px) {
  /* Revertimos el display:flex que Webflow aplica al container, para
     que los grids hijos vuelvan a llenar el 100% del ancho disponible
     y la regla anterior (grid-template-columns: 1fr) tenga efecto. */
  .container-default {
    display: block;
  }
}

/* === Unificación visual: text section → video section ===
   Pseudo-elemento ::before en el video con gradient del color de la
   sección (#e3e4e2) a transparente, para mezclar la entrada al video.
   Nota jun-2026: se quitó y el usuario pidió regresarlo; el ancho del
   video se probó reducido (86% y 78%) y quedó a ancho completo. */
.home_hero_video {
  position: relative;
  /* jun-2026: se reemplazó el video Animation_IBC_Circle.mp4 (fondo NEGRO)
     por IBC_24fps.webp, un WebP animado con fondo TRANSPARENTE. Ya no hace
     falta el fondo oscuro ni el mix-blend-mode: screen; dejamos el fondo
     transparente para que el anillo se integre directo con el gris
     #e3e4e2 de la sección hero. */
  background-color: transparent;
}
/* El velo claro de entrada era para el video claro anterior; ya no aplica. */
.home_hero_video::before {
  display: none;
}

/* La imagen del anillo (.home_hero-video_img) traía width:100% (=1440px) +
   margen lateral de 32px (2rem), lo que la empujaba 32px fuera por la
   derecha y generaba scroll/espacio horizontal. La dejamos a ancho completo
   sin márgenes laterales para que no se desborde. */
.home_hero-video_img {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* === Sección 1.b: Container vacío + navbar fixed en tablet/mobile ===
   - El <div class="w-layout-blockcontainer container w-container"></div>
     (línea 268) está vacío y solo agrega altura entre Hero #1 y Hero #2.
   - El navbar (.navbar-fixed) en Webflow se vuelve position:relative
     a <991px, lo que lo manda al final de Hero #1 / inicio de Hero #2.
     Lo regresamos a position:fixed con un fondo translúcido para que
     el logo + hamburger queden visibles arriba del Hero #1. */
@media screen and (max-width: 991px) {
  .w-layout-blockcontainer:empty {
    display: none;
  }
  .navbar-fixed {
    position: fixed;
    top: 0.75rem;
    left: 1rem;
    right: 1rem;
    z-index: 99;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  /* El .full_nav-menu-wrapper se expande a 100vh al tap del hamburger.
     Vive dentro de .navbar-fixed, así que necesita escapar del pill
     redondeado y cubrir todo el viewport. */
  .navbar-fixed .full_nav-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
}

/* === Sección 1 (jun-2026): colores vivos "Luz vívida" ===
   Spec: docs/superpowers/specs/2026-06-11-hero-colores-vivos-design.md
   Video más saturado + velo blanco izquierdo + texto oscuro con
   acento teal. Todo scoped a .homepage porque ._2, .btn-primary.white
   y .color-neutral-300 se reusan en otras secciones. */

/* Video del hero: más saturación y contraste (antes: 128%/—/91%) */
.homepage .background-video-6 {
  filter: saturate(185%) contrast(113%) brightness(102%);
}

/* Velo blanco full-bleed entre el video (z auto) y el texto (z 1000) */
.homepage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(92deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.62) 38%,
    rgba(255, 255, 255, 0) 68%);
}

/* El velo crema viejo de .div-block-12 (existía en >=1440px y >=1920px;
   un solo override >=1440px cubre ambos) queda redundante con el ::before */
@media screen and (min-width: 1440px) {
  .homepage .div-block-12 {
    background-image: none;
  }
}

/* Headline: de #f8f8f8 a oscuro; "al nivel" (span ._2) en teal */
.homepage .display-2.color-neutral-100.mg-bottom-56px {
  color: #0d141b;
}

.homepage .display-2 ._2 {
  color: #15a2a2;
}

/* Cuerpo: de .7rem blanco a 17px oscuro */
.homepage .color-neutral-300.mg-bottom-32px {
  color: #24343f;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* La línea vertical junto al cuerpo, de blanco a oscuro */
.homepage .pd-left-38px.pd-left-24px-mbl.border-left---white-2px {
  border-left-color: #0d141b;
}

/* Botón "conoce mas": invertido (antes blanco con texto negro) */
.homepage .btn-primary.white {
  color: #fff;
  background-color: #0d141b;
}

.homepage .btn-primary.white:hover {
  color: #fff;
  background-color: #15365e;
}

/* Link "AGENDAR DIAGNÓSTICO →": de gris a teal profundo */
.homepage .link-text.text-100.text-uppercase._2 {
  color: #15665e;
}

.homepage .link-wrapper.white:hover .link-text.text-100.text-uppercase._2 {
  color: #15a2a2;
}

/* En 1 columna (<=991px) el texto ocupa más ancho: velo vertical
   uniforme en lugar del degradado lateral */
@media screen and (max-width: 991px) {
  .homepage::before {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.7) 55%,
      rgba(255, 255, 255, 0.35) 100%);
  }
}

/* En mobile chico el cuerpo baja de 1.0625rem a 1rem */
@media screen and (max-width: 479px) {
  .homepage .color-neutral-300.mg-bottom-32px {
    font-size: 1rem;
  }

  /* El export de Webflow, en <=479px, ocultaba el video real de IBC
     (background-video-6 -> opacity:0; height:200vh) y mostraba en su
     lugar un sobrante de plantilla (background-video-6-copy = "TRU CAP
     ANIMATION", solo posters). Forzamos el MISMO video de IBC en móvil. */
  .homepage .background-video-6 {
    opacity: 1;
    height: 100vh;
  }
  .homepage .background-video-6-copy {
    opacity: 0;
  }
}

/* === Unión Hero #1 ↔ Hero #2 con degradado (jun-2026) ===
   El Hero #1 (.homepage) tiene fondo claro y el Hero #2 (.section_home-hero)
   es gris #e3e4e2. Para fundirlos sin corte, la BASE del Hero #1 se desvanece
   hacia ese mismo gris (el video va detrás; este velo va encima del video pero
   debajo del texto z-1000). Resultado: blanco arriba → gris tenue abajo. */
.homepage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(227, 228, 226, 0) 0%, #e3e4e2 92%);
}

/* === Transición sutil hero (gris) → "Nuestro valor diferencial" (oscuro) ===
   Fundido LARGO y gradual: la base del hero se desvanece de gris a oscuro con
   un overlay (transparente arriba → #0c151c abajo) de ~520px, así el anillo se
   difumina poco a poco hacia el tono oscuro de la siguiente sección. La
   sección solutions ya es oscura, por lo que el empalme queda continuo. */
/* El empalme Hero #2 → solutions ahora usa la curva PNG (ver regla de
   .section_home-hero más abajo, agrupada con feature2/distingue). */

/* === Transición "Nuestro valor diferencial" (oscuro) → Servicios (gris) ===
   Imagen gradiente-azul-ibc.png (azul oscuro → gris claro) estirada en la base
   de la sección oscura, con una capa que funde el borde superior al oscuro
   (#0c151c) y el inferior al gris (#e3e4e2) para que no se note línea. */
.section_home-solutions { position: relative; }
.section_home-solutions::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 270px;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, #0c151c 0%, rgba(12, 21, 28, 0) 16%, rgba(227, 228, 226, 0) 82%, #e3e4e2 100%),
    url("../images/gradiente-azul-ibc.png");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: center, bottom center;
}

/* === Blog "Servicios especializados": se quitó la columna izquierda
   (kicker + título + 2 cards); centrar la tarjeta de CTA "¿Requieres apoyo?". */
.section-blog .blog_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-blog .blog_right-card {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 620px;
  flex: 0 1 620px;
}

/* === Espaciado entre secciones (jun-2026, ronda 2) ===
   Spec: docs/superpowers/specs/2026-06-11-transiciones-suaves-design.md
   Nota: los fades de salida (video carpetitas y solutions) se probaron
   y el usuario los descartó al verlos en vivo — los cortes entre esas
   secciones quedan directos, compensados con espaciado. */

/* "Posturas claras" (2a etapa de solutions): su imagen (asset-8)
   quedaba alineada a la izquierda; se centra en su columna */
.home_solution_list-item:nth-child(2) .image-4 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* "Lo que distingue a IBC" con menos aire arriba (antes: 10em) */
.section.bg-neutral-200 {
  padding-top: 5rem;
}

/* feature2 con aire arriba después del corte de solutions */
.section_feature2 {
  padding-top: 8rem;
}

/* === "Etapas de alcance": 4 etapas en una fila (jun-2026, ronda 3) ===
   Las 4 cards en una fila uniforme con numeración 01-04. La card
   "Acompañamiento" se movió dentro de .service_card-wrap en index.html
   (antes era full-width abajo). La línea conectora de la propuesta
   original se probó y el usuario la descartó. */

.service_card-wrap {
  grid-template-columns: repeat(4, 1fr);
  counter-reset: etapa;
  position: relative;
  /* Un solo cuadro: el marco (borde + radio) vive en el contenedor y las
     4 etapas van a ras adentro. El gap de 1px deja ver el fondo del wrap
     como divisor fino entre cards (funciona en 4col / 2x2 / 1col sin
     tener que recalcular bordes por breakpoint). */
  gap: 1px;
  background-color: #a8ff89;
  border: 1px solid #a8ff89;
  border-radius: 20px;
  overflow: hidden;
}

.service_card-wrap .service-card {
  counter-increment: etapa;
  position: relative;
}

/* Cards sin caja propia: fondo = fondo de la sección (negro de marca) para
   que se fundan con la página; el verde del wrap hace de borde/divisor.
   Los !important pisan los background-color inline del export de Webflow. */
.service_card-wrap .service-card {
  background-color: var(--base-color-brand--black) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* En hover no se "levanta" la card (rompería el cuadro); solo un realce sutil */
.service_card-wrap .service-card:hover {
  background-color: #15202b !important;
  background-image: none !important;
  transform: none;
}

/* Numeración de etapa */
.service_card-wrap .service-card::after {
  content: "0" counter(etapa);
  position: absolute;
  top: 18px;
  right: 18px;
  color: #15a2a2;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Estructura de card en dos filas: icono + título arriba, cuerpo de
   texto abajo a todo lo ancho. display:contents saca al h4 y al p del
   wrapper para poder acomodarlos en el grid de la card. */
.service_card-wrap .service-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 14px;
  align-items: center;
}

.service_card-wrap .service-card_contant-wrap {
  display: contents;
}

.service_card-wrap .service-card_contant-wrap h4 {
  grid-column: 2;
  margin: 0;
  align-self: center;
}

.service_card-wrap .service-card_contant-wrap p {
  grid-column: 1 / -1;
  margin: 0;
}

/* Unifica el círculo de "Estructura": venía blanco/invertido con
   style inline del export, por eso el !important */
.service_card-wrap .service-card_icon-wrap.is-active {
  background-color: #a8ff89 !important;
}

/* El ícono usa fill="currentColor" y no heredaba un color con contraste
   sobre el círculo verde lima (#a8ff89). Forzamos un tono oscuro de marca. */
.service_card-wrap .service-card_icon-wrap {
  color: var(--base-color-brand--black);
}

/* Título fluido: a 4 columnas el h4 fijo cortaba "Acompañamiento" */
.service_card-wrap .service-card_contant-wrap h4 {
  font-size: clamp(1rem, 1.3vw, 1.5rem);
}

/* De 4 columnas a 2x2 desde 1199px: con menos de ~1200px las cards
   a 4 columnas quedan demasiado angostas */
@media screen and (max-width: 1199px) {
  .service_card-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .service_card-wrap .service-card_contant-wrap h4 {
    font-size: 1.25rem;
  }
}

/* Mobile: columna */
@media screen and (max-width: 575px) {
  .service_card-wrap {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   SECCIÓN EVENTOS · IBC México / División Entretenimiento
   Bloque oscuro a juego con "Etapas de alcance": fondo negro de marca,
   acentos en verde lima (#a8ff89) y teal (#15a2a2). Scopeado en .eventos
   para no chocar con las clases del export de Webflow.
   ===================================================================== */
.eventos {
  background-color: var(--base-color-brand--black);
  color: #fff;
  padding: clamp(56px, 8vw, 120px) 0;
  overflow: hidden;
}

.eventos-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ---- Encabezado / hero: layout editorial a 2 columnas ---- */
.eventos-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 2px solid rgba(168, 255, 137, 0.45);
}

.eventos-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #15a2a2;
  margin-bottom: 18px;
}

.eventos-title {
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.04;
  font-weight: 700;
  color: #fff;
  margin: 0 0 28px;
}

.eventos-lead {
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.4;
  color: #a8ff89;
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid #a8ff89;
}

.eventos-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  /* alinea la intro con la base del título en desktop */
  align-self: end;
}

.eventos-intro p {
  margin: 0;
  color: var(--light-grey);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ---- Etiqueta de bloque (¿Qué hacemos? etc.) ---- */
.eventos-block {
  margin-top: clamp(48px, 7vw, 88px);
}

.eventos-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 28px;
}

.eventos-section-label::before {
  content: "";
  width: 28px;
  height: 3px;
  background: #a8ff89;
  border-radius: 2px;
}

/* ---- Cards ¿Qué hacemos? ---- */
.eventos-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.eventos-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 26px 30px;
  border: 1px solid rgba(168, 255, 137, 0.45);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(168, 255, 137, 0.06), rgba(255, 255, 255, 0.01));
  transition: border-color .3s, transform .3s;
}

.eventos-card:hover {
  border-color: #a8ff89;
  transform: translateY(-6px);
}

.eventos-card-num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #15a2a2;
}

.eventos-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #a8ff89;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.eventos-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--light-grey);
}

.eventos-card p strong {
  color: #fff;
  font-weight: 700;
}

/* ---- Fases: Antes / Durante / Después ---- */
.eventos-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: fase;
}

.eventos-phase {
  position: relative;
  counter-increment: fase;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.eventos-phase::before {
  content: counter(fase);
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #a8ff89;
  color: var(--base-color-brand--black);
  font-weight: 700;
  font-size: 1.1rem;
}

.eventos-phase span {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}

/* ---- Experiencia internacional ---- */
.eventos-sub {
  margin: -14px 0 24px;
  color: var(--light-grey);
  font-size: 1rem;
}

.eventos-countries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.eventos-countries li {
  padding: 10px 20px;
  border: 1px solid rgba(168, 255, 137, 0.4);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: rgba(168, 255, 137, 0.05);
}

/* ---- Beneficios ---- */
.eventos-benefits {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 18px;
  border: 1px solid #a8ff89;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
}

.eventos-benefits li {
  position: relative;
  padding-left: 38px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #fff;
}

.eventos-benefits li::before {
  content: "\2713"; /* ✓ */
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #a8ff89;
  color: var(--base-color-brand--black);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

/* ---- Responsive ---- */
@media screen and (max-width: 991px) {
  .eventos-hero { grid-template-columns: 1fr; gap: 28px; }
  .eventos-intro { align-self: auto; }
  .eventos-cards { grid-template-columns: 1fr; }
  .eventos-phases { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
  .eventos-benefits { grid-template-columns: 1fr; }
}

/* === FAQ dinámica (#ibc-faq-list) — acordeón propio, acento lima === */
#ibc-faq-list { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.ibc-faq-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.ibc-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; cursor: pointer; padding: 22px 24px; text-align: left;
  color: #fff; font: inherit; font-size: 1.05rem; line-height: 1.3;
}
.ibc-faq-ic { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.ibc-faq-ic::before, .ibc-faq-ic::after {
  content: ""; position: absolute; background: #a8ff89; border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.ibc-faq-ic::before { top: 9px; left: 0; width: 20px; height: 2px; }
.ibc-faq-ic::after { left: 9px; top: 0; width: 2px; height: 20px; }
.ibc-faq-card.is-open .ibc-faq-ic::after { transform: scaleY(0); opacity: 0; }
.ibc-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.ibc-faq-card.is-open .ibc-faq-a { max-height: 800px; }
.ibc-faq-a-in { padding: 0 24px 22px; color: #c7c7c7; line-height: 1.65; }

/* === Bloque de contacto real en el footer === */
.ibc-footer-contact { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
.ibc-footer-contact p { margin: 0; color: #c7c7c7; font-size: 0.95rem; line-height: 1.5; }
.ibc-footer-contact strong { color: #fff; font-weight: 600; }
.ibc-footer-contact a { color: #a8ff89; text-decoration: none; }
.ibc-footer-contact a:hover { text-decoration: underline; }

/* === Curva claro→oscuro (imagen) al pie de secciones claras que bajan a
   secciones oscuras: "Etapas de alcance" → Números, y Distingue → CTA.
   La imagen es transparente arriba (deja ver la sección) y azul oscuro abajo,
   integrando suave hacia la sección oscura siguiente. */
.section_feature2,
.section.bg-neutral-200,
.section_home-hero { position: relative; padding-bottom: 210px; }
.section_feature2::after,
.section.bg-neutral-200::after,
.section_home-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 230px;
  z-index: 2;
  pointer-events: none;
  /* imagen curva (transparente arriba → #00050e abajo) + una capa que funde
     el extremo inferior a #0c151c para UNIFICAR el color con la sección
     oscura siguiente (sin línea entre #00050e y #0c151c). */
  background-image:
    linear-gradient(180deg, rgba(12, 21, 28, 0) 84%, #0c151c 100%),
    url("../images/gradiente-curva-claro-oscuro.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center bottom;
  background-size: 100% 100%, 100% 100%;
}

/* ============================================================
   FIXES REPORTE DE TESTING (jul 2, 2026)
   ============================================================ */

/* --- TC-002 / TC-003: Equipo (galería) ---
   El overlay de info (.case_over-box, con blur) quedaba SIEMPRE visible en
   unas tarjetas y ausente en otras. Ahora se comporta igual en TODAS: la foto
   se ve limpia por defecto y el overlay con blur+nombre se revela SOLO al
   pasar el cursor (o con foco por teclado). Uniforme para la tarjeta intro y
   las tarjetas dinámicas de js/team-render.js. */
/* La foto se ve nítida por defecto; en hover se revela el overlay con su FILTRO
   (backdrop-filter: brightness+blur, que vive en .case_over-box-content).
   IMPORTANTE: animamos la opacidad del CONTENIDO, NO la del contenedor
   .case_over-box. Si un ancestro tiene opacity<1, el navegador DESACTIVA el
   backdrop-filter del hijo — ése era el bug: el filtro/blur desaparecía en las
   tarjetas dinámicas. Dejando el contenedor siempre opaco, el blur funciona
   igual que en la tarjeta intro (que lo hace vía la animación de Webflow). */
#ibc-team-grid .case_over-box-content {
  opacity: 0;
  transition: opacity 0.35s ease;
}
#ibc-team-grid .case-grid_image-wrap:hover .case_over-box-content,
#ibc-team-grid .case-grid_image-wrap:focus-within .case_over-box-content {
  opacity: 1;
}

/* --- TC-001 / TC-004: CTAs deshabilitados temporalmente ---
   Botones cuyo destino real está pendiente (Agendar diagnóstico, ¡Hablemos!,
   Permítenos contactarte). Quedan visibles pero inertes: no navegan a ninguna
   página rota ni externa. */
.is-disabled {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.45;
}

/* --- Pendiente: overflow horizontal en móvil ---
   El formulario de contacto y los textos parallax grandes desbordaban a la
   derecha en pantallas angostas. */
@media screen and (max-width: 479px) {
  .cta-form-wrap,
  .cta-form-wrap .form,
  .cta-form-wrap input,
  .cta-form-wrap textarea,
  .cta-form-wrap select {
    max-width: 100%;
    box-sizing: border-box;
  }
  .home_large-text { max-width: 100%; overflow: hidden; }
}
/* Red de seguridad global contra scroll horizontal en móvil. */
@media screen and (max-width: 479px) {
  html, body { overflow-x: hidden; }
}

/* === Botón "¡Hablemos!" (hero banda B): transparente + texto adaptativo ===
   Reactivado y apunta a #blog (sección "¿Requieres apoyo?"). Es transparente:
   el color de texto/borde lo pone js/hablemos-contrast.js según el fondo real
   detrás del botón — .on-dark = blanco (fondos oscuros), .on-light = negro
   (fondos claros). Por defecto oscuro (el hero B es claro). */
.hablemos-cta.button {
  background-color: transparent !important;
  color: #0d141b;
  width: auto;
  border: 1.5px solid currentColor;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.hablemos-cta.button:hover {
  filter: none;
  background-color: rgba(127, 127, 127, 0.10) !important;
}
.hablemos-cta.on-dark  { color: #ffffff !important; }
.hablemos-cta.on-light { color: #0d141b !important; }

/* === Filtro del equipo (restaurado) — fila de categorías entre el título y el
   grid. Centrada bajo el título centrado, con aire arriba. Los chips reusan
   .case-category de la plantilla; cursor pointer y transición suave. */
#ibc-team-filter {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
#ibc-team-filter .case-category { cursor: pointer; }

/* === Navbar (home + eventos): fondo casi blanco sutil + letras SIEMPRE negras ===
   Sin borde. Aplica a las DOS páginas; en eventos se quitó el contraste
   adaptativo (js/nav-contrast.js) para que las letras queden siempre negras. */
.navbar-fixed {
  background-color: rgb(255 250 250 / 92%); /* casi blanco sutil */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: none; /* sin borde */
}
/* Sombra apenas perceptible (no es borde) para que el bar no se vea plano. */
@media screen and (min-width: 992px) {
  .navbar-fixed {
    box-shadow: 0 1px 8px rgba(13, 20, 27, 0.035);
  }
}
/* Letras y hamburguesa SIEMPRE negras (el menú overlay .is-white se queda
   blanco sobre su fondo oscuro). !important para ganarle al contraste de
   eventos si quedara alguna regla activa. */
.navbar-fixed .nav-link:not(.is-white) { color: #0d141b !important; }
.navbar-fixed .menu-button_svg { color: #0d141b !important; }

/* === Botón "Agendar diagnóstico" del navbar: color FIJO ===
   Su borde/texto usaban var(--1-interaction-varaibles--navbar-color), una
   variable de Webflow que cambia de color al scrollear. La fijamos en negro
   para que el botón NO cambie de color (acorde al navbar claro). */
.navbar-fixed .button.is-nav-secondary {
  border-color: #0d141b !important;
  color: #0d141b !important;
}

/* === Sección "Eventos · Gran Escala" (home_location): tipografía más grande ===
   El subtítulo y el cuerpo estaban en 0.8rem (~13px), muy chicos junto al
   título. Se agrandan título, subtítulo, cuerpo, el bloque "¿A quién
   atendemos?" y el texto del CTA. Escalado por breakpoint para no romper
   mobile (donde .max-width-xxsmall es full-width). */
.home_location_wrapper h2.text-color-white {
  font-size: 3.6rem !important;
  line-height: 1.08 !important;
}
.home_location_wrapper .text-color-neutral-light {
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
}
.home_location_wrapper .color-neutral-300 {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
.home_location_wrapper .link-text.text-100 {
  font-size: 1rem !important;
}
@media screen and (min-width: 992px) {
  /* un poco más de ancho para que el texto grande respire */
  .home_location_wrapper .max-width-xxsmall {
    max-width: 34vw;
  }
}
@media screen and (max-width: 767px) {
  .home_location_wrapper h2.text-color-white {
    font-size: 2.6rem !important;
  }
}
@media screen and (max-width: 479px) {
  .home_location_wrapper h2.text-color-white {
    font-size: 2.1rem !important;
  }
  .home_location_wrapper .text-color-neutral-light {
    font-size: 1rem !important;
  }
}

/* === Footer: logo en blanco ===
   logo-2.svg viene en azul oscuro (rgb(14,45,57)) con un hack de
   mix-blend-mode:exclusion que lo dejaba con color raro sobre el footer negro.
   Se fuerza blanco limpio y se anula el blend. */
.section_footer .image-5 {
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: normal !important;
}

/* === Footer: columna "Síguenos" (redes sociales) === */
.footer_social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 0.25rem;
}
.footer_social-link {
  color: var(--base-color-brand--white, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.165,.84,.44,1), color .3s ease;
}
.footer_social-link svg {
  width: 22px;
  height: 22px;
  display: block;
}
.footer_social-link:hover {
  color: #15a2a2;
  transform: translateY(-3px);
}

/* Video de la card "Legal" (Servicios): ocultar SOLO el borde izquierdo y
   derecho del video (escala horizontal leve; el .feature2_card tiene
   overflow:hidden y recorta el excedente lateral). Todo lo demás de la card
   queda igual que las otras cards (video abajo en móvil, sin animación). */
.svc-zoom {
  transform-origin: center;
  transform: scaleX(1.08);
}
/* Contenido de la card "Legal" por encima del video (z-index:99).
   position:relative es necesario para que el z-index surta efecto.
   Solo esta card (la que contiene el video .svc-zoom). */
.feature2_card:has(.svc-zoom) .feature2_card-content {
  position: relative;
  z-index: 99;
}

/* Sección de números: quitar el padding-top de 10rem (venía del CSS base). */
.section_home-numbers {
  padding-top: 0 !important;
}

/* Responsive (≤991px): quitar el padding-bottom (10em) de la sección Blog. */
@media screen and (max-width: 991px) {
  .section-blog {
    padding-bottom: 0 !important;
  }
}

/* Responsive (≤767px): logo del footer más grande. El <a> es un flex angosto
   que encogía el wordmark; se deja crecer el contenedor y se fija el tamaño
   de cada imagen sin que el flex las encoja. */
@media screen and (max-width: 767px) {
  .section_footer .footer_brand-col .nav_brand_logo {
    width: auto !important;
    align-items: center;
  }
  .section_footer .footer_brand-col .image-6 {
    height: 50px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .section_footer .footer_brand-col .image-5 {
    width: 150px !important;
    height: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
}

/* Ocultar CTA "Agendar diagnóstico" del navbar (estaba deshabilitado) y el
   CTA "Obtén un diagnóstico →" (hero.a.cta2) del hero. */
.button.is-nav-secondary,
[data-cms-href="hero.a.cta2Link"] {
  display: none !important;
}