/* ══════════════════════════════════════════════════════════════════
   service-page.css — estilos compartidos de las páginas de /servicios/
   Symbiot Technologies
   ══════════════════════════════════════════════════════════════════ */

:root {
  --symbiot-yellow: #dec329;
  --symbiot-gray: #999999;
  --symbiot-white: #ffffff;
  --symbiot-black: #000000;
  --accent-color: #dec329;
  --heading-color: #000000;
  --nav-color: rgba(255, 255, 255, 0.9);
  --nav-hover-color: #dec329;
}

.btn-login {
  background: var(--symbiot-yellow);
  color: var(--symbiot-black);
  padding: 8px 25px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s;
  border: 2px solid var(--symbiot-yellow);
}
.btn-login:hover { background: transparent; color: var(--symbiot-yellow); border-color: var(--symbiot-yellow); }

.text-accent { color: var(--symbiot-yellow); }

.tech-badge {
  background: rgba(222, 195, 41, 0.1);
  color: var(--symbiot-black);
  padding: 5px 15px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  margin: 5px; display: inline-block;
}

.service-card {
  border-top: 4px solid var(--symbiot-yellow);
  transition: all 0.3s ease;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(222, 195, 41, 0.3); }
.service-card i { color: var(--symbiot-yellow); }

/* ── Hero de página de servicio ── */
.page-hero {
  position: relative;
  padding: 150px 0 70px;
  background: linear-gradient(135deg, rgba(6, 6, 6, 0.94) 0%, rgba(20, 20, 20, 0.86) 100%),
              url('../img/hero-bg.jpg') center center / cover no-repeat;
  color: #fff;
}
.page-hero .breadcrumbs { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 14px; }
.page-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.page-hero .breadcrumbs a:hover { color: var(--symbiot-yellow); }
.page-hero h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 14px; }
.page-hero p.lead { color: rgba(255, 255, 255, 0.82); max-width: 640px; }
.page-hero .eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--symbiot-yellow); background: rgba(222, 195, 41, 0.12);
  border: 1px solid rgba(222, 195, 41, 0.4); border-radius: 100px;
  padding: 6px 14px; margin-bottom: 18px;
}

/* ── Placeholder de imagen (reemplazar por <img> con foto real) ── */
.media-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 260px; height: 100%;
  border: 2px dashed #cdc8b5; border-radius: 14px;
  background: #f6f4ec; color: #a29e8c; text-align: center; padding: 24px;
}
.media-ph i { font-size: 2.2rem; color: var(--symbiot-yellow); }
.media-ph .cap { font-size: 0.8rem; font-family: monospace; }

/* ── Imagen real de proyecto — tamaño consistente en todos los slots/breakpoints ── */
.service-media {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;          /* misma proporción overview + galería */
  object-fit: cover;              /* recorta al encuadre, sin deformar */
  object-position: center;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  background: #f6f4ec;            /* fondo mientras carga (lazy) */
}
/* Tablet: overview pasa a ancho completo → un poco más alto se ve mejor */
@media (max-width: 991.98px) {
  .service-media { aspect-ratio: 16 / 9; }
}
/* Móvil: imágenes apiladas, proporción algo más compacta */
@media (max-width: 575.98px) {
  .service-media { aspect-ratio: 3 / 2; }
}
/* Modificador: anclar el encuadre arriba (screenshots verticales, p.ej. mapa GPS) */
.service-media--top { object-position: top; }

.feature-list li { margin-bottom: 10px; }
.feature-list i { color: var(--symbiot-yellow); margin-right: 8px; }

/* ── Banda CTA ── */
.cta-band { background: var(--symbiot-black); color: #fff; }
.cta-band h3 { color: #fff; font-weight: 700; }
.cta-band p { color: rgba(255, 255, 255, 0.75); }

/* ── Botón primario Symbiot ── */
.btn-sy {
  background: var(--symbiot-yellow); color: #000; font-weight: 700;
  padding: 11px 28px; border-radius: 50px; border: 2px solid var(--symbiot-yellow);
  transition: all 0.3s; display: inline-block; text-decoration: none;
}
.btn-sy:hover { background: transparent; color: var(--symbiot-yellow); }

/* ── Utilidades ── */
.section-alt { background: #f8f9fa; }
.link-plain { text-decoration: none; }

html, body { overflow-x: hidden; max-width: 100vw; }
.logo img { max-height: 42px; width: auto; max-width: 160px; }

@media (max-width: 1199px) {
  .btn-login { padding: 6px 10px; font-size: 0; }
  .btn-login i { font-size: 1rem; }
}