/* Identidad de Banteq sobre la plantilla de Framer.
   La base monocroma de la plantilla se mantiene; sólo cambia la iridiscencia
   (titular del hero, tarjetas destacadas y acentos) a una gama fría y tecnológica. */
html body {
  --token-bc447ec3-2d17-4c1c-b3c0-042837df2ca6: #b4c3ff !important; /* antes lavanda */
  --token-fb2e9e17-ebe2-47b2-8650-47f5fbb8a8fe: #c9fbf1 !important; /* antes amarillo pálido */
  --token-85295dc4-e3a3-40a5-9b33-2dce7c593d30: #d6ccff !important; /* antes rosa */
  --token-dd533101-08c3-426a-bcef-6e0a27491b8e: #a8e6ff !important; /* antes azul claro */
  --token-6297347c-fbcd-4309-ba9a-142e7aead2c7: #5f7dff !important; /* azul Banteq */
}

/* Sello "Made in Framer" del plan gratuito. */
#__framer-badge-container {
  display: none !important;
}

/* Tabla de precios de la plantilla (sección 004, oculta por ahora): el selector mensual/anual no aplica. */
[data-framer-name="Tab Menu"] {
  display: none !important;
}

/* Pie: sin redes sociales hasta tener los perfiles de Banteq, y sin crédito de la plantilla. */
[data-framer-name="Social Wrap"],
[data-framer-name="Bottom Link Wrap"] {
  display: none !important;
}

/* "Quiénes somos": la imagen no es un vídeo, así que no lleva botón de reproducción. */
[data-framer-name="Play Button"],
[data-framer-name="Play button"],
#banteq [data-framer-name="Video Inner"] [data-framer-name="Icon"],
#banteq [data-framer-name="Video Inner"] [data-framer-name="Variant 1"]:has([data-framer-name="Icon"]) {
  display: none !important;
}

/* Desarrollo web: el botón de "play" de la plantilla pasa a ser una flecha hacia el proyecto. */
#desarrollo-web a[href*="proyectos"] [data-framer-name="Icon"] svg {
  display: none;
}
#desarrollo-web a[href*="proyectos"] [data-framer-name="Icon"] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Hero: póster de la B como fondo del vídeo (mismo encuadre que object-fit: cover). Con media
   query, cada tamaño descarga solo el suyo; en móvil el vídeo es otro, con la B entera. */
[data-framer-name="Hero Section"] [data-framer-name="Background"] video {
  background: url("/banteq/hero-b-poster.jpg") center / cover no-repeat;
}
@media (max-width: 809.98px) {
  [data-framer-name="Hero Section"] [data-framer-name="Background"] video {
    background-image: url("/banteq/hero-b-movil-poster.jpg");
  }
  /* Carga en móvil: el vídeo de la B no llena el hero y, hasta que llega su póster, por su hueco
     se veía el gris más oscuro del fondo (un rectángulo de otro tono). El contenedor lleva ese
     mismo póster y, debajo, un degradado con los grises del fondo del vídeo (medidos en el póster):
     el hueco tiene su color definitivo desde el primer fotograma. Queda tapado por el vídeo. */
  [data-framer-name="Hero Section"] .framer-11lkxjs-container {
    background:
      url("/banteq/hero-b-movil-poster.jpg") center / cover no-repeat,
      linear-gradient(#dedede 0%, #dedede 10%, #dadada 16%, #d5d5d5 25%, #d0d0d0 35%, #cccccc 45%, #c6c6c6 60%, #c3c3c3 80%, #c3c3c3 100%);
  }
}
/* Lo mismo en tableta, donde el vídeo (el de escritorio) tampoco llena el hero. Su fondo aclara
   hacia la izquierda: de ahí el segundo degradado. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  [data-framer-name="Hero Section"] .framer-11lkxjs-container {
    background:
      url("/banteq/hero-b-poster.jpg") center / cover no-repeat,
      linear-gradient(to right, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.035)),
      linear-gradient(#dddddd 0%, #dadada 8%, #d6d6d6 16%, #d3d3d3 25%, #cfcfcf 35%, #cccccc 45%, #c8c8c8 60%, #c5c5c5 75%, #c3c3c3 85%, #c3c3c3 100%);
  }
}

/* Carga en móvil y tableta: el «Video Overlay» del hero (iguala el tono por encima y por debajo
   del vídeo) va ya en el HTML inicial (tools/build.py → apply_hero_b); antes solo aparecía al
   arrancar React y, mientras, se veía una franja más oscura arriba. En escritorio esa capa no
   existe: Framer la quita al hidratar y, hasta entonces, no se pinta. */
@media (min-width: 1200px) {
  [data-framer-name="Hero Section"] .framer-4gsoix.hidden-72rtr7 {
    display: none !important;
  }
}

/* Unión del hero con «Quiénes somos» (todas las medidas). El borde inferior del hero es el del
   vídeo de la B, con el oscurecido del «Overlay» encima: más claro a la izquierda y más oscuro a la
   derecha (187 → 172 de 255); en móvil y tableta, 170 por el «Video Overlay» de Framer. «Quiénes
   somos» empieza en #b7b7b7 (183) liso, así que se veía una línea horizontal. Este degradado, por
   encima del vídeo y de esas capas y por debajo de textos y botones, termina exactamente en ese
   gris: los dos fondos quedan continuos. Nunca llega a la B: en pantallas muy panorámicas el vídeo
   se recorta arriba y abajo y la B baja (acaba a 388 px del centro del fotograma de 1920 de ancho,
   20,21 % del ancho), así que su alto se limita al 75 % del hueco que queda bajo ella. */
[data-framer-name="Hero Section"] > [data-framer-name="Background"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(0px, min(9%, (50% - 20.21vw) * 0.75));
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(rgba(183, 183, 183, 0), var(--token-b8e0a22d-b3cf-42bc-b665-955c33d5412d, #b7b7b7));
}

/* Rendimiento: las animaciones de entrada de Framer terminan en `filter: blur(0px)` y lo dejan
   puesto; un filtro, aunque sea nulo, obliga a componer cada elemento en su propia superficie
   (23 solo en el titular del hero, encima del vídeo). Durante la animación el valor es otro y
   este selector no aplica, así que el efecto de entrada no cambia. */
[style*="filter: blur(0px)"] {
  filter: none !important;
}

/* «Quiénes somos»: cuadrado central por encima del carrusel de palabras, con el logotipo.
   Mismo alto que la tarjeta de la plantilla (400 / 333 / 182 px), ahora cuadrado; el carrusel
   (z-index 1) pasa por detrás del cuadrado (z-index 2). Superficie opaca: las palabras no se
   cruzan con el logo. Sin filtros: solo degradado y sombras, que se pintan una vez.
   El contenido se define en tools/contenido.py → CUADRO_CENTRAL (logo o vídeo). */
#banteq .framer-7g3w68-container {
  width: 400px !important; /* Framer da el ancho y deduce el alto por proporción */
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 2 !important;
}
#banteq .framer-7g3w68-container > a {
  border-radius: 72px !important;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.55), 0 12px 24px -12px rgba(0, 0, 0, 0.25);
}
#banteq [data-framer-name="Video Inner"] {
  border-radius: inherit !important;
  background:
    url("/banteq/cuadro-logo.png") center / 58% auto no-repeat,
    radial-gradient(120% 120% at 28% 16%, #2c2c31 0%, #121215 52%, #070708 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
/* La imagen que tenía la tarjeta deja de mostrarse (y de descargarse). */
#banteq .framer-7g3w68-container > a > :not([data-framer-name="Video Inner"]) {
  display: none !important;
}
/* Si hay vídeo (banteq.js), va encima del logo. */
#banteq .bq-cuadro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  #banteq .framer-7g3w68-container { width: 333px !important; }
  #banteq .framer-7g3w68-container > a { border-radius: 60px !important; }
}
@media (max-width: 809.98px) {
  #banteq .framer-7g3w68-container { width: 182px !important; }
  #banteq .framer-7g3w68-container > a { border-radius: 36px !important; }
}

/* «Conectamos tus herramientas»: las 60 fichas llevaban dos sombras interiores con desenfoque
   (aro blanco y borde inferior oscuro). Safari las pinta en el hilo principal al aparecer las
   tiras y daba un tirón al entrar en la sección. Mismo aspecto con recursos sin desenfoque:
   un contorno blanco hacia dentro y un degradado de 4 px abajo (diferencia media 0,1/255). */
#herramientas .framer-mBzfN {
  box-shadow: none !important;
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: -2px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0) 4px) !important;
}

/* ------------------------------------------------------------------------------------------
   Rendimiento durante el hover (medido con el cursor en movimiento continuo; README).
   ------------------------------------------------------------------------------------------ */

/* «Conectamos tus herramientas»: hover del botón central «B · Hablemos». Antes Framer Motion
   animaba por JavaScript el degradado y la sombra interior (repintado del círculo en cada
   fotograma, y un re-render de React al entrar y al salir). Ahora una capa con el aspecto final del
   hover (mismo degradado y sombras que la variante de Framer; diferencia máxima 1/255) se muestra
   al pasar el cursor, sin repintar nada. Sin transición ni escala: medido en WebKit con pasadas
   repetidas por el botón, cualquier animación del hover (incluso opacity o transform) triplicaba los
   fotogramas lentos; el cambio instantáneo apenas se nota. El logo y el texto quedan por encima. */
#herramientas .framer-FlcSj::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, var(--token-1ebf9de7-133d-4417-ad6e-35a4c663a1d9, rgb(26, 26, 26)) 0%, var(--token-8d6ef72b-962d-48df-af78-a514b20c6a38, rgb(82, 82, 82)) 100%);
  box-shadow: inset 0 0 40px 1px rgb(255, 255, 255), inset 0 0 8px 1px rgb(255, 255, 255);
  opacity: 0;
  will-change: opacity;
}
@media (hover: hover) and (pointer: fine) {
  #herramientas .framer-FlcSj:hover::before {
    opacity: 1;
  }
}

/* «Conectamos tus herramientas»: halo azul detrás del botón central. Era un degradado radial con
   filter: blur(20px); sobre las tiras en movimiento, el desenfoque se recalculaba al componer cada
   fotograma. Ahora es el mismo halo ya desenfocado (calculado a partir del original: diferencia
   máxima 3/255 por canal), pintado como un degradado normal, sin filtro. 120 px más ancho para que
   quepa la difuminación, que antes salía fuera del elemento. */
#herramientas [data-framer-name="Gradient"] {
  filter: none !important;
  width: calc(130% + 120px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  background: radial-gradient(closest-side, rgba(150,200,255,1) 0%, rgba(150,200,255,1) 1.7%, rgba(151,200,255,1) 3.4%, rgba(152,201,255,1) 5.1%, rgba(154,202,255,1) 6.8%, rgba(156,204,255,1) 8.5%, rgba(158,206,255,1) 10.2%, rgba(160,208,255,1) 11.9%, rgba(163,209,255,1) 13.6%, rgba(166,211,255,1) 15.3%, rgba(169,212,255,1) 16.9%, rgba(172,214,255,1) 18.6%, rgba(174,214,255,1) 20.3%, rgba(178,215,255,1) 22%, rgba(180,216,255,1) 23.7%, rgba(184,216,255,1) 25.4%, rgba(186,216,255,1) 27.1%, rgba(188,216,255,1) 28.8%, rgba(191,216,255,1) 30.5%, rgba(194,216,255,1) 32.2%, rgba(196,215,254,1) 33.9%, rgba(198,215,254,1) 35.6%, rgba(199,215,254,1) 37.3%, rgba(201,215,254,0.996) 39%, rgba(203,216,254,0.992) 40.7%, rgba(203,216,253,0.987) 42.4%, rgba(204,216,252,0.978) 44.1%, rgba(204,217,252,0.967) 45.8%, rgba(206,218,252,0.951) 47.5%, rgba(207,219,251,0.931) 49.2%, rgba(206,220,251,0.908) 50.8%, rgba(207,222,250,0.876) 52.5%, rgba(208,223,250,0.841) 54.2%, rgba(206,224,249,0.8) 55.9%, rgba(207,226,248,0.753) 57.6%, rgba(206,226,248,0.702) 59.3%, rgba(207,227,247,0.647) 61%, rgba(208,230,247,0.588) 62.7%, rgba(206,230,247,0.529) 64.4%, rgba(207,232,248,0.469) 66.1%, rgba(204,234,246,0.41) 67.8%, rgba(205,235,246,0.353) 69.5%, rgba(204,235,245,0.298) 71.2%, rgba(204,234,243,0.247) 72.9%, rgba(204,236,245,0.2) 74.6%, rgba(206,239,246,0.157) 76.3%, rgba(204,241,243,0.123) 78%, rgba(204,238,243,0.092) 79.7%, rgba(204,238,243,0.069) 81.4%, rgba(204,238,243,0.049) 83.1%, rgba(204,238,243,0.033) 84.7%, rgba(204,238,243,0.022) 86.4%, rgba(204,238,243,0.012) 88.1%, rgba(204,238,243,0.008) 89.8%, rgba(204,238,243,0.004) 91.5%, rgba(204,238,243,0) 93.2%, rgba(204,238,243,0) 100%) !important;
}

/* «Conectamos tus herramientas»: desvanecido de los extremos de las tres tiras. Era una máscara
   (mask-image) sobre cada tira en movimiento: el compositor la aplicaba en cada fotograma y era,
   tras el botón, lo que más pesaba al mover el cursor por la sección (en WebKit, 3 veces más
   fotogramas lentos). El fondo detrás es blanco liso, así que un degradado blanco por encima de
   los extremos da exactamente el mismo resultado sin máscara. */
#herramientas section {
  position: relative;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
#herramientas section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 12.5%, rgba(255, 255, 255, 0) 87.5%, #fff 100%);
}

/* ------------------------------------------------------------------------------------------
   Formulario de contacto: método de contacto (WhatsApp o correo). Lo monta banteq.js dentro del
   formulario de Framer. Mismo cristal que los campos (pista oscura translúcida con filo claro) y
   opción elegida como la píldora «Hablemos» del menú (blanco al 80 % con texto oscuro).
   ------------------------------------------------------------------------------------------ */
.bq-metodo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  flex: none;
  width: 100%;
  margin-top: 8px; /* sitio para el sello «Recomendado», que asoma por arriba */
  padding: 4px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-family: "Geist", "Geist Placeholder", sans-serif;
}
.bq-metodo-opcion {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* El radio real ocupa toda la opción, invisible: clic, teclado y lectores de pantalla nativos. */
.bq-metodo-opcion input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bq-metodo-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.bq-metodo-cara svg {
  flex: none;
  width: 17px;
  height: 17px;
}
.bq-metodo-opcion input:checked + .bq-metodo-cara {
  background: rgba(255, 255, 255, 0.8);
  color: rgb(26, 26, 26);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.bq-metodo-opcion input:focus-visible + .bq-metodo-cara {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
}
@media (hover: hover) {
  .bq-metodo-opcion:hover input:not(:checked) + .bq-metodo-cara {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
}
/* En el móvil cada opción mide unos 130–160 px: sin icono y con la letra algo menor para que
   «Correo electrónico» quepa en una línea. */
@media (max-width: 479.98px) {
  .bq-metodo-cara {
    padding: 0 6px;
    font-size: clamp(13px, 3.7vw, 15.5px);
  }
  .bq-metodo-cara svg {
    display: none;
  }
}
/* Sello «Recomendado»: la iridiscencia de la marca, sobre el borde superior de la opción. */
.bq-metodo-sello {
  position: absolute;
  top: -12px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(180, 195, 255), rgb(201, 251, 241) 35%, rgb(214, 204, 255) 70%, rgb(168, 230, 255));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  color: rgb(26, 26, 26);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}
.bq-metodo-nota {
  flex: none;
  width: 100%;
  margin: 0 0 2px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Geist", "Geist Placeholder", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}
/* Solo se ve el campo del método elegido. */
form[data-bq-metodo="whatsapp"] [data-bq-campo="email"],
form[data-bq-metodo="email"] [data-bq-campo="tel"] {
  display: none !important;
}
/* Prefijo: se ve solo el código (+34); encima, invisible, la lista nativa de países. */
.bq-prefijo {
  position: relative;
  order: -1;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: "Geist", "Geist Placeholder", sans-serif;
  font-size: 16px;
  line-height: 19.2px;
  cursor: pointer;
}
.bq-prefijo svg {
  flex: none;
  width: 10px;
  height: 10px;
  opacity: 0.7;
}
.bq-prefijo select {
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: 0;
  width: calc(100% + 12px);
  height: calc(100% + 24px);
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* por debajo de 16 px Safari de iPhone amplía la página al abrir la lista */
  appearance: none;
  -webkit-appearance: none;
}
.bq-prefijo:focus-within {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 6px;
  border-radius: 4px;
}