/* Cruce BuscadorTributario <-> BuscadorLaboral (24-sep-2026). Misma hoja en los dos sitios:
 * solo tokens --oc-* (navy en BT, granate en BL); lo único literal es la franja, que copia la
 * cabecera de BL. Plan y maqueta en el workspace (5-design/cruce-bt-bl-2026-09/). */

.cx--hermano-bl { --cx-hermano: #6e1423; }
.cx--hermano-bt { --cx-hermano: #1b3a6b; }

.cx-marca {
  font-family: var(--oc-font-serif);
  font-weight: 600;
  color: var(--cx-hermano);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cx-sello {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.cx-flecha {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 180ms var(--oc-ease);
}

/* ── S1 · franja de lanzamiento (portada BT) ─────────────────────────────
 * Pedido del founder (24-sep): «sobre la base de la cabecera de BuscadorLaboral,
 * tanto en su color como en su fondo». Es una cabecera BL en miniatura puesta sobre
 * la de BT: mismo degradé de marca, mismo wordmark, mismo separador y el mismo
 * tratamiento de tagline. Por eso aquí los valores van LITERALES (los de
 * `tokens.css` de BL): en la página de BT los tokens `--oc-*` son navy.
 */

.cx-franja {
  --cx-bl-ink: #2b0a11;
  --cx-bl-800: #56101c;
  --cx-bl-500: #8f2231;
  --cx-bl-soft: #f6e9eb;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 85% at 85% 40%, rgba(169, 63, 84, .42), transparent 75%),
    linear-gradient(115deg, var(--cx-bl-ink) 0%, var(--cx-bl-800) 42%, var(--cx-bl-500) 75%, var(--cx-bl-800) 100%);
  color: #fff;
  font-family: var(--oc-font-sans);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.cx-franja-in {
  /* calza con los bordes del logo y de «Planes» en la cabecera de BT */
  padding: 10px 46px;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  column-gap: 18px;
}

.cx-franja-logo { display: inline-flex; flex: none; }
.cx-franja-logo img { display: block; height: 28px; width: auto; }

/* el mismo filete vertical que separa logo y tagline en la cabecera BL */
.cx-franja-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .28); }

.cx-franja-txt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
  text-wrap: pretty;
}

.cx-franja-txt strong { color: #fff; font-weight: 600; }

.cx-franja-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--cx-bl-800);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--oc-ease), transform 180ms var(--oc-ease);
}

.cx-franja-cta:hover { background: var(--cx-bl-soft); color: var(--cx-bl-ink); }
.cx-franja-cta:active { transform: translateY(1px); }
.cx-franja-cta:hover .cx-flecha,
.cx-aviso a:hover .cx-flecha { transform: translateX(3px); }

.cx-cerrar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: background-color 180ms var(--oc-ease), color 180ms var(--oc-ease);
}

.cx-cerrar:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cx-cerrar svg { width: 16px; height: 16px; }

/* sobre fondo de marca oscuro el anillo va ámbar claro (DESIGN.md, foco) */
.cx-franja a:focus-visible,
.cx-cerrar:focus-visible,
.cx-pie a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ffd479;
  border-radius: 6px;
}

.cx-aviso a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-focus) 28%, transparent);
  border-radius: 6px;
}

.cx-franja.cx-saliendo {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms var(--oc-ease), transform 200ms var(--oc-ease);
}

@media (max-width: 1100px) {
  .cx-franja-in { padding: 10px 24px; }
}

@media (max-width: 860px) {
  .cx-franja-sub { display: none; }
}

@media (max-width: 720px) {
  /* En el teléfono no puede comerse la cabecera: logo, una frase y el enlace. */
  .cx-franja-in {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    padding: 10px 10px 12px 16px;
  }
  .cx-franja-logo img { height: 22px; }
  .cx-franja-sep { display: none; }
  .cx-franja-txt { grid-column: 1 / 2; font-size: 13px; }
  .cx-franja-cta {
    grid-column: 1 / 2;
    justify-self: start;
    padding: 0;
    background: none;
    color: #fff;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, .45);
  }
  .cx-franja-cta:hover { background: none; color: #fff; }
  .cx-cerrar { grid-row: 1; grid-column: 2; }
}

/* ── S2 / S3 / S4 · aviso (fichas y buscadores, un solo componente) ───────────────────────────────────────── */

.cx-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--oc-bg-alt);
  border: 1px solid var(--oc-line);
  border-radius: 12px;
  font-family: var(--oc-font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--oc-body);
}

.cx-aviso .cx-sello { width: 24px; height: 24px; border-radius: 6px; }
.cx-aviso p { margin: 0; flex: 1; text-align: left; hyphens: manual; text-wrap: pretty; }

/* En la ficha BL la tarjeta calza con el inset del bloque «Resumen» (18px 26px). */
.lab-ficha > .cx-aviso--ficha { margin: 18px 26px 0; }
.cx-aviso strong { font-weight: 600; color: var(--oc-ink); font-variant-numeric: tabular-nums; }

.cx-aviso a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--oc-navy);
  text-decoration: none;
  white-space: nowrap;
}

.cx-aviso a:hover { color: var(--oc-navy-500); }

@media (max-width: 620px) {
  .cx-aviso { flex-wrap: wrap; align-items: flex-start; }
  .cx-aviso p { flex-basis: calc(100% - 36px); }
  .cx-aviso a { margin-left: 36px; }
}

/* ── S5 · pie comun (va sobre la banda de marca oscura) ──────────────── */

.cx-pie {
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--oc-font-sans);
  color: var(--oc-on-navy-soft);
}

.cx-pie-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
}

.cx-pie-productos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* los dos productos como botones: contorno claro sobre la banda de marca */
.cx-pie-productos a,
.cx-pie-productos span[aria-current] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms var(--oc-ease), border-color 180ms var(--oc-ease);
}

.cx-pie-productos a:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .45); }
.cx-pie-productos span[aria-current] { background: rgba(255, 255, 255, .08); }
.cx-pie .cx-sello { width: 22px; height: 22px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); } /* el sello navy de BT se pierde sobre la banda navy */

.cx-pie-redes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--oc-on-navy-soft);
}

.cx-pie-redes a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  transition: background-color 180ms var(--oc-ease);
}

.cx-pie-redes a:first-child { margin-left: 6px; }
.cx-pie-redes a:hover { background: rgba(255, 255, 255, .12); }
.cx-pie-redes svg { width: 20px; height: 20px; }

.cx-pie-nav {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: var(--oc-on-navy-soft);
}

.cx-pie-nav a { color: #fff; text-decoration: none; }
.cx-pie-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cx-flecha, .cx-franja.cx-saliendo { transition: none; }
}