/* Correcciones sobre el CSS exportado de Webflow.
 *
 * webflow-export/css/ y su copia en public/css/{normalize,webflow,
 * web-brocsoft-2025.webflow}.css son verbatim del export y los regenera
 * scripts/import-webflow.mjs, así que no se tocan: todo arreglo de CSS vive acá
 * y se carga DESPUÉS del stylesheet de Webflow (ver app/layout.tsx).
 *
 * Cada bloque cita el ítem del informe de QA que resuelve.
 */

/* --------------------------------------------------------------------------
 * Títulos de hero en blanco (Industries, Talent on Demand, Custom AI Team
 * Builds, Jobs, Technologies).
 *
 * El export define `.display-desktop-h1 { color: #fff9 }` — blanco al 60% sobre
 * fondos celestes, o sea ilegible. El diseño los quiere en el negro de marca.
 * La variante `.text-white` sí necesita blanco (hero oscuro del detalle de
 * industria) y se mantiene: gana por especificidad.
 * -------------------------------------------------------------------------- */
.display-desktop-h1 {
  color: var(--color--neutral--darkest);
}

/* --------------------------------------------------------------------------
 * Detalle de industria — "Why This Matters to You".
 *
 * `p.text-content-item-why` es `display: flex` en el export, así que cada
 * <strong> del rich text se vuelve flex item y fuerza un salto de línea antes y
 * después. El párrafo tiene que fluir como texto.
 * -------------------------------------------------------------------------- */
p.text-content-item-why {
  display: block;
}

/* --------------------------------------------------------------------------
 * Footer — proporciones invertidas.
 *
 * `.flex-block-50` (columna izquierda) trae `padding-right: 165px` y `flex:
 * none`, así que se come 785px de los 1110 y deja 196px para las tres columnas
 * de navegación, que envuelven a tres líneas. El diseño es al revés: izquierda
 * angosta, derecha ancha. `.container-footer` es la clase de contenedor genérica
 * de todo el sitio, por eso los overrides van scopeados a `.footer-new`.
 * -------------------------------------------------------------------------- */
.footer-new .container-footer {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
}

/* Proporción, no ancho fijo: el contenedor va de ~880px (viewport 1080) a su
 * máximo de 1110px, y con un ancho fijo la izquierda volvía a quedar más ancha
 * que la derecha en el extremo angosto. */
.footer-new .flex-block-50 {
  flex: 0 1 auto;
  width: 38%;
  max-width: 420px;
  padding-right: 48px;
}

.footer-new .column-right-footer {
  flex: 1 1 auto;
  align-items: flex-start;
  max-width: none;
}

.footer-new .div-block-64 {
  max-width: none;
}

/* Los links de Explore Brocsoft / Resources van en una línea cada uno. */
.footer-new .div-block-66 a {
  white-space: nowrap;
}

/* El logo del footer sólo tenía tamaño vía `.link-logo.w--current`, y Webflow
 * pone `w--current` únicamente cuando el href coincide con la página actual: en
 * el home. En las otras 23 páginas el <a> quedaba en 0x0 y el logo directamente
 * no se veía (pasa igual en producción). El tamaño va en la clase base. */
.footer-new .link-logo {
  width: 154px;
  min-width: 115px;
  max-width: 152px;
  height: 41px;
}

/* Y se centraba en su columna en vez de alinear con el bloque de texto de
 * abajo (`.w--current` trae `align-self: center`). */
.footer-new .flex-block-50 .link-logo,
.footer-new .flex-block-50 .link-logo.w--current {
  align-self: flex-start;
}

/* Links legales de la columna izquierda (los agrega
 * scripts/apply-footer-links.mjs; el export no los traía). */
.footer-legal-links {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

/* --------------------------------------------------------------------------
 * Páginas legales (/privacy-policy, /terms-of-service).
 *
 * No existen en el export de Webflow: components/LegalPage.tsx arma el cuerpo
 * con las clases tipográficas del sitio y este bloque le da el layout.
 * -------------------------------------------------------------------------- */
.container-legal {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  align-items: flex-start;
  max-width: 720px;
  margin: 96px auto;
  display: flex;
}

/* --------------------------------------------------------------------------
 * Detalle de success story.
 * -------------------------------------------------------------------------- */

/* "The Challenge": `.square-dashed` tiene `height: 297px` fijo, así que los
 * textos largos quedan pegados al borde inferior o se desbordan. */
.square-dashed {
  height: auto;
  min-height: 297px;
  padding-bottom: 32px;
}

/* Logos de tecnologías: las cards no tienen alto propio, así que cada fila
 * adopta el alto del logo más grande y las filas quedan desparejas. */
.success-story---tech-item {
  height: 88px;
}

.success-story---tech-image {
  max-height: 100%;
  object-fit: contain;
}

/* Tooltips de la fila de roles (`.collection-item-6`, ya venía en el template)
 * y de los logos de tecnologías (el markup lo agrega
 * lib/detail-success-story.ts reusando el mismo patrón).
 *
 * Los dos se revelan por :hover en CSS y no por la interacción IX2 original:
 * los items los genera el renderer y no llevan data-w-id, así que el hover de
 * Webflow nunca dispara y los tooltips quedaban siempre en opacity 0 — por eso
 * no se veía qué rol era cada ícono. */
.success-story---tech-item {
  position: relative;
}

/* `.tooltip` trae `transform: translate(-35%, -100%)` sobre `inset: 0 0 auto`,
 * pensado para otro ancho de contenedor: acá se iba 52px a la izquierda de la
 * card y quedaba cortado. Se centra sobre el item. */
.success-story---tech-item .tooltip,
.collection-item-6 .tooltip {
  background-color: var(--denim-lighter);
  border-radius: 0.25rem;
  pointer-events: none;
  transition: opacity 0.15s ease;
  left: 50%;
  right: auto;
  width: max-content;
  max-width: 200px;
  transform: translate(-50%, calc(-100% - 6px));
}

.success-story---tech-item:hover .tooltip,
.collection-item-6:hover .tooltip {
  opacity: 1;
}

/* --------------------------------------------------------------------------
 * Detalle de tecnología — título de Success Stories.
 *
 * "React Projects That Make Us Proud" entra en una sola línea; el diseño lo
 * quiebra en dos. Se limita el ancho en vez de meter un <br> en el contenido,
 * que viene de un solo campo del CMS ("Title Success Stories").
 * -------------------------------------------------------------------------- */
.text-success-stories-technologies {
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
 * Blog — slider destacado.
 *
 * `.w-slider-nav` de Webflow se posiciona en `bottom: 0` DENTRO del slider, así
 * que los puntos quedaban encima de la tarjeta, y las flechas centradas
 * verticalmente (ocupan el alto completo). El diseño los pone a todos en una
 * fila debajo del slide.
 * -------------------------------------------------------------------------- */
.slider-wrapper-blog {
  margin-bottom: 56px;
}

.slider-wrapper-blog .w-slider-nav {
  bottom: -56px;
  height: 56px;
}

/* Las flechas se anclan a la MISMA banda de 56px que los puntos (en vez de
 * estirarse a todo el alto del slider), así quedan centradas con ellos. */
.slider-wrapper-blog .w-slider-arrow-left,
.slider-wrapper-blog .w-slider-arrow-right {
  top: auto;
  bottom: -56px;
  height: 56px;
  align-items: center;
}

/* --------------------------------------------------------------------------
 * 404 — título y botón invisibles.
 *
 * Son los dos únicos elementos de la sección con `style="opacity:0"`, esperando
 * un reveal SCROLL_INTO_VIEW (evento e-261) que nunca dispara: los datos de IX2
 * publicados lo traen registrado pero no llega a instanciarse ni forzando un
 * re-init. Verificado en producción (www.brocsoft.com/404): con data-wf-page
 * correcto también quedan en opacity 0. Se muestran sin depender de él.
 * -------------------------------------------------------------------------- */
.section-404 .h2.is-404,
.section-404 .button.is-cta {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
 * Events — checkbox de Privacy Policy en "Don't Miss Out".
 *
 * `.checkbox-field` trae `margin-left/right: auto`, así que queda centrado bajo
 * un input de 386px alineado a la izquierda. Se alinea con el input.
 * -------------------------------------------------------------------------- */
.form-event .checkbox-field {
  margin-left: 0;
  margin-right: auto;
}

/* El link de Privacy Policy que WebflowForms inyecta en el checkbox de consentimiento. */
.w-checkbox .w-form-label a {
  text-decoration: underline;
}