/* ===========================
   brand.css — Identidad Tecolsoft (manual de marca DOC-MER-001)
   Motivo: anillo con tres nodos (mejora continua + unidad con el cliente)
   =========================== */

/* Anillo decorativo de fondo (landings y páginas internas) */
.brand-orbit {
  position: absolute;
  right: -6vw;
  top: 50%;
  width: min(52vw, 700px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
.brand-orbit svg { width: 100%; height: 100%; overflow: visible; }
/* Colores de los SVG heredados, llevados a la paleta de marca */
.brand-orbit [stroke="#2ea3f2"] { stroke: var(--navy); }
.brand-orbit [fill="#2ea3f2"]   { fill: var(--navy); }
.brand-orbit [stroke="#fc5500"] { stroke: var(--accent); }
.brand-orbit [fill="#fc5500"]   { fill: var(--accent); }
.brand-orbit__spin { transform-origin: 50% 50%; animation: orbit-spin 80s linear infinite; }
.brand-orbit__spin--rev { animation-duration: 120s; animation-direction: reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Titulares con firma de marca: barra naranja */
.section__header h2::before {
  content: ''; display: block; width: 44px; height: 4px; border-radius: 2px;
  background: var(--accent); margin: 0 auto 1.1rem;
}

/* Tarjetas: elevación sutil al pasar el cursor, sin brillos */
.card:hover, .num-card:hover, .process-step:hover, .result-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
}
.card, .num-card, .process-step, .result-card { transition: border-color .22s ease, transform .22s ease; }

/* Franja de cifras */
.stats .stats__value { color: var(--navy); }

/* Saltar al contenido: visible solo al enfocar con teclado */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10000; padding: .7rem 1.1rem; background: var(--navy-fill, #002060); color: #fff; border-radius: 6px; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: .75rem; outline: 2px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }

/* Foco accesible */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

@media (max-width: 900px) { .brand-orbit { right: -35vw; opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .brand-orbit__spin { animation: none; } }

/* Logo según tema: el HTML referencia logo-dark.png (azul); en oscuro se muestra el blanco */
:root[data-theme="dark"] img[src$="logo-dark.png"] { content: url("../../assets/logo-white.png"); }

/* SVG de las páginas: azul de marca = tinta del tema, naranja = acento */
svg [stroke="#002060"] { stroke: var(--navy); }
svg [fill="#002060"]   { fill: var(--navy); }
svg [stroke="#e26714"] { stroke: var(--accent); }
svg [fill="#e26714"]   { fill: var(--accent); }

/* Enlace al estimado orientativo (cotizador) dentro de la banda de CTA */
.cotz-link { margin: 2rem auto 0; padding-top: 1.5rem; max-width: 560px; border-top: 1px solid var(--border); text-align: center; }
.cotz-link p { margin: 0 0 .5rem; font-size: .95rem; color: var(--text-2); }
.cotz-link a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; font-size: 1rem; }
.cotz-link a:hover { color: var(--navy); }
.cotz-link a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }