/* ==========================================================================
   Baqueanos — Hoja común de las marcas
   Depende de tokens.css + main.css. La usan todas las páginas de marca
   (producto y servicio) salvo Dedicanciones y EPA TV, que tienen la suya.
   Cada marca solo elige su --marca-tinte de la paleta que ya existe.
   ========================================================================== */

/* --- Tintes por marca --------------------------------------------------- */
.ronin   { --marca-tinte: var(--c-naranja-500); }
.hincha  { --marca-tinte: var(--c-cian-400); }
.retro   { --marca-tinte: var(--c-naranja-400); }
.cuadros { --marca-tinte: var(--c-plata-400); }
.ideas   { --marca-tinte: var(--c-cian-300); }
.rcc     { --marca-tinte: var(--c-cian-400); }
.dev     { --marca-tinte: var(--c-cian-400); }
.live    { --marca-tinte: var(--c-naranja-500); }

body[class] { --marca-tinte-suave: color-mix(in srgb, var(--marca-tinte, var(--acento)) 14%, transparent); }

/* --- Marca en el nav ---------------------------------------------------- */
.marca__sas { color: var(--marca-tinte, var(--acento)); }

.marca--unidad .marca__sas {
  color: var(--texto-tenue);
  font-size: 0.55rem;
  max-width: 8ch;
  line-height: 1.25;
  margin-top: 0.3rem;
}

/* --- Hero de marca ------------------------------------------------------ */
.hero--marca::before {
  background:
    radial-gradient(55% 55% at 20% 22%, color-mix(in srgb, var(--c-azul-700) 70%, transparent), transparent 70%),
    radial-gradient(50% 50% at 84% 26%, color-mix(in srgb, var(--marca-tinte) 18%, transparent), transparent 72%);
}

.hero--marca .hero__titulo { max-width: 18ch; }
.hero--marca .subrayado { color: var(--marca-tinte); }
.hero--marca .subrayado::after { background: var(--marca-tinte); }
.hero--marca .etiqueta { color: var(--marca-tinte); }
.hero--marca .etiqueta::before { background: var(--marca-tinte); }

/* --- Catálogo ----------------------------------------------------------- */
.catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  overflow: hidden;
  list-style: none;
  padding: 0;
}

.catalogo li {
  background: var(--bg);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  transition: background-color var(--dur-media) var(--ease-suave);
}

.catalogo li:hover { background: var(--bg-elev-2); }

.catalogo b {
  font-family: var(--fuente-display);
  font-size: 1.2rem;
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.catalogo span { font-size: var(--t-sm); color: var(--texto-suave); }

/* --- Proceso ------------------------------------------------------------ */
.proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e-5);
  counter-reset: paso;
  list-style: none;
  padding: 0;
}

.proceso li {
  counter-increment: paso;
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  background: var(--bg-elev-1);
}

.proceso li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--fuente-display);
  font-size: 2rem;
  font-weight: var(--peso-black);
  line-height: 1;
  color: var(--marca-tinte);
  margin-bottom: var(--e-4);
}

.proceso h3 { font-size: var(--t-h4); margin-bottom: var(--e-3); }
.proceso p { font-size: var(--t-sm); color: var(--texto-suave); }

/* --- Bloque a dos columnas ---------------------------------------------- */
.dual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  background:
    radial-gradient(100% 120% at 100% 0%, var(--marca-tinte-suave), transparent 60%),
    var(--bg-elev-1);
}

@media (max-width: 820px) { .dual { grid-template-columns: 1fr; } }

.dual h2 { font-size: var(--t-h2); }
.dual > div > p { color: var(--texto-suave); margin-top: var(--e-4); }

.lista {
  list-style: none;
  padding: 0;
  margin: var(--e-5) 0 0;
  display: grid;
  gap: var(--e-3);
}

.lista li {
  display: flex;
  gap: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.lista li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.62rem;
  border-radius: 50%;
  background: var(--marca-tinte);
}

/* --- Nota ---------------------------------------------------------------- */
.nota-marca {
  margin-top: var(--e-6);
  padding: var(--e-5);
  border-left: 2px solid var(--marca-tinte);
  background: color-mix(in srgb, var(--marca-tinte) 6%, transparent);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 64ch;
}

/* --- Franja de la familia de marcas ------------------------------------- */
.familia {
  border-top: 1px solid var(--linea);
  padding-block: var(--e-8);
  background: var(--bg-elev-1);
}

.familia h2 {
  font-size: var(--t-h4);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-bold);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-5);
}

.familia__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--e-3);
  list-style: none;
  padding: 0;
}

.familia__lista a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background-color var(--dur-rapida) var(--ease-suave);
}

.familia__lista a:hover {
  border-color: var(--linea-fuerte);
  background: var(--bg-elev-2);
}

.familia__lista b {
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  font-weight: var(--peso-bold);
  text-transform: uppercase;
}

.familia__lista span { font-size: var(--t-xs); color: var(--texto-tenue); }

.familia__lista .actual {
  border-color: color-mix(in srgb, var(--marca-tinte) 45%, transparent);
  background: var(--marca-tinte-suave);
}

.familia__lista .actual b { color: var(--marca-tinte); }

/* --- Cierre de marca ---------------------------------------------------- */
.cierre--marca {
  background:
    radial-gradient(70% 120% at 50% 0%, var(--marca-tinte-suave), transparent 70%),
    var(--bg);
}

/* --- Estados de producto ------------------------------------------------ */
.insignia--marca {
  color: var(--marca-tinte);
  border-color: color-mix(in srgb, var(--marca-tinte) 45%, transparent);
  background: color-mix(in srgb, var(--marca-tinte) 10%, transparent);
}