/* ==========================================================================
   OVERLORD BRAND — identidad propia de la vertical, aplicada a
   overlord-brands.html. Se carga DESPUÉS de producto.css y lo sobrescribe,
   igual que clinic.css para Clinic (mismo patrón: variables semánticas
   redefinidas, nunca tocar producto.css directo).

   Sistema de la vertical (marca-lab, sistema de verticales):
   - Losa PARTIDA en dos (novedad de Brand: ninguna otra vertical la parte):
     violeta #5B2A8C arriba, magenta-rosa #C23B6B abajo — el ojo que ya
     construyó dos marcas (Corp + Clinic) contiene ambas mitades.
   - Iris partido cian/cempasúchil: literalmente los acentos de Corp y
     Clinic, dentro del ojo de Brand.
   - Contorno de lente afilada (miter), heredado de Corp a propósito: Brand
     es una extensión directa de Corp, no una vertical de consumo aparte
     (ese rol es de Clinic, con su almendra redondeada).
   - Un acento cálido nuevo: magenta-rosa, reservado para lo que el
     visitante debe notar (CTA, tier recomendado).
   ========================================================================== */

:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  color-scheme: light;

  --violeta: #5B2A8C;
  --violeta-hondo: #3D2E66;
  --violeta-luz: #7C4BB0;
  --magenta: #C23B6B;
  --magenta-hondo: #8F2850;
  --papel: #F6F0E4;

  /* Alias hacia las semánticas de producto.css: Brand repinta el sitio
     compartido a su propia paleta, igual que hace clinic.css. */
  --c-campo: var(--violeta);
  --c-sobre-campo: var(--papel);
  --copper: var(--violeta);
  --copper-ink: var(--violeta);
  --line: color-mix(in srgb, var(--violeta) 22%, var(--c-fondo));
}

/* ---------- Encabezado: neutro (como Corp), el violeta queda de acento
   -- el header coloreado de Clinic no funciona aqui: la losa del icono ya
   ES violeta, ponerla sobre un fondo del mismo tono la apaga. ---------- */
/* El header usa el lockup completo (brand_lockup_color.svg, ícono + logotipo
   en contornos), igual que Corp: .marca/.marca img ya vienen de producto.css. */
header nav a:hover, header nav a:focus-visible { border-bottom-color: var(--violeta); }
.crumbs, .crumbs a { color: var(--ink-faint); }
.crumbs a:hover { color: var(--violeta); }

/* ---------- Hero: ojo gigante decorativo detrás del título ---------- */
.ob-hero { position: relative; overflow: hidden; padding-bottom: 8px; }
.ob-hero::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -12%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  z-index: -1;
  opacity: .07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 50Q50 6 82 50Q50 94 18 50Z' fill='none' stroke='%235B2A8C' stroke-width='4' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
/* Eyebrow de texto sobre el H1 (mismo rol que .etiqueta de clinic.html): el
   ícono ya no se repite aquí porque el lockup del header lo trae. */
.ob-eyebrow { font-family: var(--f-etiqueta); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--violeta); margin: 0 0 4px; }

/* ---------- Proof: "ya lo hicimos dos veces" ---------- */
.ob-proof { margin: 30px 0 0; }
.ob-proof h2 { margin-bottom: 6px; }
.ob-proof-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 16px; }
.ob-proof-card {
  background: var(--surface);
  border: 1.5px solid var(--c-tinta);
  border-radius: 14px;
  padding: 22px 22px 20px;
  box-shadow: 7px 7px 0 var(--violeta-hondo);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ob-proof-card img { height: 60px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; align-self: flex-start; }
.ob-proof-card p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.ob-proof-card .ob-tag {
  align-self: flex-start;
  font-family: var(--f-etiqueta);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--violeta);
  color: var(--papel);
  padding: 3px 8px;
  border-radius: 4px;
}
.ob-proof-card.magenta { box-shadow: 7px 7px 0 var(--magenta-hondo); }
.ob-proof-card.magenta .ob-tag { background: var(--magenta); }

/* ---------- Tiers: tarjetas con sombra dura, tier recomendado resaltado --- */
.ob-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 18px 0 8px; }
.ob-tier {
  background: var(--surface);
  border: 1.5px solid var(--c-tinta);
  border-radius: 16px;
  padding: 24px 22px 22px;
  box-shadow: 7px 7px 0 var(--violeta-hondo);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-tier .ob-num { font-family: var(--f-etiqueta); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.ob-tier h3 { font-family: var(--f-titular); font-weight: 800; font-size: 1.15rem; margin: 0; }
.ob-tier .ob-precio { font-family: var(--f-titular); font-weight: 800; font-size: 1.9rem; color: var(--violeta); margin: 2px 0 0; }
.ob-tier p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.ob-tier.destacado {
  border-color: var(--magenta);
  box-shadow: 8px 8px 0 var(--magenta-hondo);
  transform: translateY(-4px);
  position: relative;
}
.ob-tier.destacado .ob-precio { color: var(--magenta-hondo); }
.ob-tier.destacado::before {
  content: "MÁS COMPLETO";
  position: absolute;
  top: -13px;
  left: 22px;
  background: var(--magenta);
  color: var(--papel);
  font-family: var(--f-etiqueta);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 0 var(--magenta-hondo);
}

/* ---------- CTA final: botón píldora magenta ---------- */
.ob-cta {
  position: relative;
  margin: 40px 0 10px;
  padding: 28px 26px;
  border-radius: 18px;
  background: var(--violeta);
  color: var(--papel);
}
.ob-cta p { color: var(--papel); margin: 0 0 14px; max-width: 60ch; }
.ob-cta a.ob-boton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--magenta);
  color: var(--papel);
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  padding: 15px 24px;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--magenta-hondo);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ob-cta a.ob-boton:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--magenta-hondo); color: var(--papel); }

/* ---------- Banco de pruebas (.obp): el proceso de Brand en vivo --------
   Estados en #obp[data-stage] 0-4 (diverger, filtro, crítico, medir,
   veredicto) + clases .mide (etapa >= 3) y .fin (etapa 4) que pone el JS
   inline de overlord-brands.html. Todo el estado final funciona sin
   animaciones (prefers-reduced-motion / sin JS): las animaciones solo
   decoran la transición, nunca sostienen un estado. ---------- */
.ob-proceso { margin: 40px 0 0; }
.ob-proceso h2 { margin-bottom: 6px; }
.ob-proceso .lede { margin-top: 0; }

.obp {
  --dur: 3000ms;
  margin-top: 18px;
  background: var(--surface);
  border: 1.5px solid var(--c-tinta);
  border-radius: 14px;
  box-shadow: 7px 7px 0 var(--violeta-hondo);
  overflow: hidden;
}
.obp-barra {
  display: flex; align-items: center; gap: 14px;
  background: var(--c-tinta); color: var(--papel);
  padding: 9px 14px 9px 16px;
  font-family: var(--f-etiqueta); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.obp-rotulo { flex: 1; min-width: 0; }
.obp-cuenta b { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.obp-play {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--papel); background: transparent;
  border: 1.5px solid var(--papel); border-radius: 4px;
  padding: 3px 9px; cursor: pointer;
}
.obp-play:hover { background: var(--papel); color: var(--c-tinta); }
.obp-play:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

/* Pasos: la barra de abajo de cada paso es el reloj de la etapa */
.obp-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1.5px solid var(--c-tinta); }
.obp-pasos li + li { border-left: 1px solid var(--line); }
.obp-paso {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: 10px 12px 12px;
  font-family: var(--f-texto); font-weight: 600; font-size: 13.5px; line-height: 1.2; color: var(--ink-faint);
}
.obp-paso span { font-family: var(--f-etiqueta); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; }
.obp-paso::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: var(--violeta); transform-origin: left; transform: scaleX(0);
}
.obp-paso.hecho { color: var(--c-tinta); }
.obp-paso.hecho::after { transform: scaleX(1); }
.obp-paso.hecho span::after { content: " ✓"; color: var(--violeta); }
.obp-paso[aria-current="step"] { color: var(--c-tinta); background: color-mix(in srgb, var(--violeta) 9%, transparent); }
.obp-paso[aria-current="step"]::after { background: var(--magenta); animation: obp-reloj var(--dur) linear forwards; }
.obp.pausado .obp-paso[aria-current="step"]::after { animation: none; transform: scaleX(1); }
.obp-paso:hover { color: var(--c-tinta); }
.obp-paso:focus-visible { outline: 3px solid var(--violeta); outline-offset: -3px; }
@keyframes obp-reloj { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.obp-nota {
  margin: 0; padding: 12px 16px; min-height: 4.2em;
  font-size: 14.5px; line-height: 1.45; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.obp-nota b { color: var(--c-tinta); }

/* Mesa de candidatos */
.obp-mesa { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 18px 16px 20px; overflow: hidden; }
.obp-c {
  --d: 0s;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--papel);
  border: 1.5px solid var(--c-tinta); border-radius: 8px;
  padding: 10px 8px 8px;
  transition: opacity .35s ease calc(var(--i) * .14s), transform .35s ease calc(var(--i) * .14s),
              border-color .2s ease var(--d), box-shadow .25s ease var(--d);
}
.obp.vacio .obp-c { opacity: 0; transform: translateY(12px); }
.obp.sin-trans .obp-c, .obp.sin-trans .obp-c * { transition: none !important; }
.obp-fig { width: 100%; max-width: 76px; aspect-ratio: 1; transition: filter .2s ease var(--d), opacity .2s ease var(--d); }
.obp-fig svg, .obp-fig img { display: block; width: 100%; height: 100%; }
.obp-id { font-family: var(--f-etiqueta); font-size: 10px; letter-spacing: .04em; color: var(--ink-soft); text-align: center; line-height: 1.25; }
.obp-sello {
  position: absolute; left: 5px; right: 5px; top: 34%;
  background: var(--c-tinta); color: var(--papel);
  font-family: var(--f-etiqueta); font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
  text-align: center; padding: 5px 4px; border-radius: 3px;
  box-shadow: 3px 3px 0 var(--magenta);
  opacity: 0; transform: rotate(-7deg) scale(1.6);
  transition: opacity .12s ease var(--d), transform .26s cubic-bezier(.3, 1.5, .5, 1) var(--d);
  pointer-events: none;
}
.obp-c.is-out { border-style: dashed; border-color: var(--ink-faint); }
.obp-c.is-out .obp-fig { filter: grayscale(1); opacity: .28; }
.obp-c.is-out .obp-sello,
.obp-c.is-win .obp-sello { opacity: 1; transform: rotate(-7deg) scale(1); }
.obp-c.is-win { border-color: var(--magenta); border-width: 2px; box-shadow: 5px 5px 0 var(--magenta-hondo); }
.obp-c.is-win .obp-sello { background: var(--magenta); box-shadow: 3px 3px 0 var(--magenta-hondo); top: auto; bottom: -11px; left: 12%; right: 12%; transform: rotate(0) scale(1); }
.obp-c.is-win .obp-id { visibility: hidden; }

/* Barra del detector/crítico que barre la mesa (etapas 1 y 2) */
.obp-barrido { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-100%); }
.obp-barrido::before { content: ""; position: absolute; top: 8px; bottom: 8px; right: 0; width: 3px; background: var(--magenta); }
.obp-barrido span {
  position: absolute; top: 4px; right: -2px; transform: translateX(100%);
  background: var(--magenta); color: var(--papel);
  font-family: var(--f-etiqueta); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 0 3px 3px 0;
}
.obp.barre .obp-barrido { animation: obp-barre 2.2s linear .15s both; }
.obp.pausado .obp-barrido { animation-play-state: paused; }
@keyframes obp-barre {
  0% { opacity: 1; transform: translateX(-100%); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translateX(0); }
}

/* Regla: prueba a tamaño real. Ocupa su espacio SIEMPRE (vacía en las
   etapas 0-2) para que la página no salte cuando se llena. */
.obp-regla { border-top: 1.5px solid var(--c-tinta); padding: 14px 16px 18px; background: color-mix(in srgb, var(--violeta) 5%, var(--surface)); }
.obp-regla-cab { margin: 0 0 12px; font-family: var(--f-etiqueta); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-tinta); }
.obp-regla-cab span { color: var(--ink-faint); letter-spacing: .04em; text-transform: none; margin-left: 8px; }
.obp-fila { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-left: 3px solid transparent; transition: border-color .3s ease, opacity .3s ease; }
.obp-fila + .obp-fila { border-top: 1px dashed var(--line); }
.obp-fila-id { font-family: var(--f-etiqueta); font-size: 12px; font-weight: 600; width: 28px; flex: none; padding-left: 6px; }
.obp-t { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.obp-caja {
  width: 76px; height: 76px; display: grid; place-items: center;
  background: var(--papel); border: 1px dashed var(--ink-faint); border-radius: 4px;
}
.obp-caja > * { opacity: 0; transition: opacity .25s ease; }
.obp-caja .s64 { width: 64px; height: 64px; }
.obp-caja .s32 { width: 32px; height: 32px; }
.obp-caja .s16 { width: 16px; height: 16px; }
.obp-caja canvas { width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; outline: 1px solid var(--line); }
.obp-t figcaption { font-family: var(--f-etiqueta); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.obp-t figcaption b { display: inline-block; font-weight: 700; opacity: 0; transform: scale(2); transition: opacity .15s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.obp-t figcaption b.si { color: var(--violeta); }
.obp-t figcaption b.no { color: var(--magenta); }
.obp-veredicto {
  margin-left: auto; flex: none;
  font-family: var(--f-etiqueta); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 4px; border: 1.5px solid currentColor;
  opacity: 0; transition: opacity .2s ease;
}
.obp-fila.si .obp-veredicto { color: var(--violeta); }
.obp-fila.no .obp-veredicto { color: var(--magenta-hondo); }

/* Etapa medir: cada celda se llena en orden (fila --r, columna --j) */
.obp.mide .obp-caja { border-style: solid; border-color: var(--line); }
.obp.mide .obp-caja > * { opacity: 1; transition-delay: calc(var(--r) * .25s + var(--j) * .38s + .2s); }
.obp.mide .obp-t figcaption { color: var(--c-tinta); }
.obp.mide .obp-t figcaption b { opacity: 1; transform: scale(1); transition-delay: calc(var(--r) * .25s + var(--j) * .38s + .45s); }
.obp.mide .obp-veredicto { opacity: 1; transition-delay: calc(var(--r) * .25s + 1.8s); }
.obp.fin .obp-fila.si { border-left-color: var(--magenta); }
.obp.fin .obp-fila.no { opacity: .45; }
.obp.sin-trans .obp-regla * { transition: none !important; }

.obp-pie { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); max-width: 70ch; }

@media (max-width: 640px) {
  .obp-mesa { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
  .obp-rotulo { display: none; }
  .obp-paso { padding: 9px 8px 11px; font-size: 12px; }
  .obp-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; justify-items: center; }
  .obp-fila-id { grid-column: 1 / 3; justify-self: start; }
  .obp-veredicto { grid-column: 3 / 5; grid-row: 1; justify-self: end; margin: 0; }
  .obp-caja { width: 68px; height: 68px; }
  .obp-regla-cab span { display: block; margin: 2px 0 0; }
  .obp-nota { min-height: 7.4em; }
}

@media (max-width: 560px) {
  .ob-hero::before { width: 70vw; opacity: .05; }
  .ob-tier.destacado { transform: none; }
}