/* ==========================================================================
   Dedicanciones — estilos propios de la marca
   Depende de tokens.css + main.css. Cargar tercero.
   Regla: no se inventan colores. Se reordena la jerarquía de los que ya hay.
   ========================================================================== */

.dedicanciones {
  --marca-tinte: var(--c-cian-400);
  --marca-tinte-suave: color-mix(in srgb, var(--c-cian-400) 16%, transparent);
}

/* --- Marca en el nav ---------------------------------------------------- */
.marca--dedicanciones .marca__sas {
  color: var(--marca-tinte);
  font-size: 0.55rem;
  max-width: 8ch;
  line-height: 1.25;
  margin-top: 0.3rem;
}

.volver-casa {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color var(--dur-rapida) var(--ease-suave);
}

.volver-casa:hover { color: var(--acento); }

/* --- Hero --------------------------------------------------------------- */
.hero--dedicanciones::before {
  background:
    radial-gradient(55% 50% at 20% 20%, color-mix(in srgb, var(--marca-tinte) 20%, transparent), transparent 70%),
    radial-gradient(50% 55% at 85% 30%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 72%);
}

.hero--dedicanciones .hero__titulo { max-width: 18ch; }

.hero--dedicanciones .subrayado { color: var(--marca-tinte); }
.hero--dedicanciones .subrayado::after { background: var(--marca-tinte); }

/* --- Onda de audio ------------------------------------------------------ */
.onda {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
  margin-top: var(--e-7);
  max-width: 420px;
}

.onda span {
  flex: 1;
  min-width: 3px;
  /* Alto de reposo: si la animación no corre, la onda se sigue viendo como onda. */
  height: 45%;
  border-radius: var(--radio-pill);
  background: linear-gradient(180deg, var(--marca-tinte), var(--acento));
  opacity: 0.85;
  transform-origin: bottom;
  animation: onda-latir 1.6s var(--ease-suave) infinite alternate;
}

@keyframes onda-latir {
  from { height: 14%; }
  to   { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .onda span { animation: none; height: 55%; }
}

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

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

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

.pasos h3 { font-size: var(--t-h4); margin-bottom: var(--e-3); }

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

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

.ocasiones 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);
}

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

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

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

/* --- Bloque para negocios ----------------------------------------------- */
.negocios {
  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) {
  .negocios { grid-template-columns: 1fr; }
}

.negocios h2 { font-size: var(--t-h2); }

.negocios p { color: var(--texto-suave); margin-top: var(--e-4); }

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

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

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

/* --- Nota honesta ------------------------------------------------------- */
.nota {
  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);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  max-width: 62ch;
}

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