/* ============================================================
   capacidades.css — Sección "Capacidades" (resumen en landing +
   página completa con vistas Mosaico y Recorrido). Usa tokens.css.
   ============================================================ */

/* ---- Resumen en la landing ---- */
.cap-summary { text-align: center; }
.cap-summary-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4);
  margin: var(--space-8) 0; }
.cap-summary-item { display: flex; align-items: center; gap: var(--space-2);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); padding: 8px 16px; font-weight: var(--fw-semibold);
  color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-sm); }
.cap-summary-item .cap-ico { width: 20px; height: 20px; color: var(--secondary); flex-shrink: 0; }
.cap-summary-item .cap-ico svg { width: 20px; height: 20px; }

/* Resumen de la landing como banda con foto de flota (mismo tratamiento que Mosaico) */
.cap-band { position: relative; overflow: hidden; color: #fff;
  background: #12151b url('/img/fondos/capacidades-fleet.webp?v=2') center / cover no-repeat; }
.cap-band .container { position: relative; z-index: 1; }
.cap-band .eyebrow { color: #7fe0ff; }
.cap-band .section-title { color: #fff; }
.cap-band .section-sub { color: rgba(255,255,255,.85); }
.cap-band .cap-summary-item { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20);
  color: #fff; backdrop-filter: blur(3px); }
.cap-band .cap-summary-item .cap-ico { color: #7fe0ff; }

/* ---- Íconos genéricos ---- */
.cap-ico { display: inline-flex; align-items: center; justify-content: center; }

/* ---- Sello de marca (isotipo a color) FLOTANTE centrado sobre el título ---- */
.cap-brandmark {
  display: block; width: 84px; height: auto; margin: 0 auto var(--space-5);
  filter: drop-shadow(0 8px 20px rgba(0,43,134,.35));
  animation: capMarkFloat 5s ease-in-out infinite;
}
/* Sobre banda con foto: más grande, centrado y con halo cian que lo hace “flotar” */
.cap-mosaico .cap-brandmark, .cap-band .cap-brandmark {
  width: 96px; margin-left: auto; margin-right: auto;
  filter: drop-shadow(0 12px 28px rgba(0,156,222,.55)); }
.cap-band .section-head { max-width: 62ch; margin-left: auto; margin-right: auto; }
@keyframes capMarkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .cap-brandmark { animation: none; } }

/* ---- Banda con imagen de fondo + overlay (hero-like) — reutilizable ----
   Se usa en la página Capacidades (Mosaico) y en el resumen de la landing.
   Overlay NEUTRO (sin tinte azul) y más transparente para que se vea la foto;
   apenas oscurece arriba/abajo para mantener el texto blanco legible. */
.cap-fleet-overlay { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,16,.70) 0%, rgba(6,10,16,.42) 50%, rgba(6,10,16,.72) 100%); }

/* ---- Vista Mosaico (banda con foto de flota + overlay + grilla) ---- */
.cap-mosaico { position: relative; color: #fff; padding: var(--space-24) 0; overflow: hidden;
  background: #12151b url('/img/fondos/capacidades-fleet.webp?v=2') center / cover no-repeat; }
.cap-mosaico-overlay { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,16,.70) 0%, rgba(6,10,16,.42) 50%, rgba(6,10,16,.72) 100%); }
/* Marca de agua gigante del isotipo detrás de la grilla */
.cap-mosaico-mark { position: absolute; right: -6%; bottom: -14%; width: min(560px, 58vw);
  height: auto; opacity: .08; pointer-events: none; filter: brightness(0) invert(1); }
.cap-mosaico .container { position: relative; }
.cap-mosaico .section-head { text-align: center; max-width: 62ch; margin: 0 auto var(--space-12); }
.cap-mosaico .eyebrow { color: #7fe0ff; }
.cap-mosaico .section-title { color: #fff; }
.cap-mosaico .section-sub { color: rgba(255,255,255,.82); }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.cap-block { position: relative; overflow: hidden; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-2xl);
  padding: var(--space-8); text-align: center; backdrop-filter: blur(3px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base); }
/* Barra de acento superior (cian → naranja) que aparece al pasar el cursor */
.cap-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--secondary), var(--accent)); transform: scaleX(0);
  transform-origin: left; transition: transform var(--t-base); }
.cap-block:hover { transform: translateY(-6px); background: rgba(255,255,255,.11);
  border-color: rgba(0,156,222,.45); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.cap-block:hover::before { transform: scaleX(1); }
.cap-block .cap-ico { width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: rgba(0,156,222,.20); border: 1px solid rgba(0,156,222,.55); color: #cdeeff;
  margin-bottom: var(--space-4); transition: transform var(--t-base), background var(--t-base); }
.cap-block:hover .cap-ico { transform: scale(1.08); background: rgba(0,156,222,.32); }
.cap-block .cap-ico svg { width: 28px; height: 28px; }
.cap-block h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0 0 var(--space-2); color: #fff; }
.cap-block p { color: rgba(255,255,255,.80); line-height: var(--lh-relaxed); margin: 0; }

/* ---- Vista Recorrido (filas alternadas con imagen) ---- */
.cap-recorrido { padding: var(--space-24) 0; background: var(--bg-page); }
.cap-recorrido .section-head { text-align: center; max-width: 62ch; margin: 0 auto var(--space-16); }
.cap-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center;
  margin-bottom: var(--space-16); }
.cap-row:last-of-type { margin-bottom: var(--space-12); }
.cap-row:nth-child(even) .cap-row-media { order: 2; }
.cap-row-media { position: relative; overflow: hidden; min-height: 320px; border-radius: var(--radius-2xl);
  background-color: var(--bg-elevated); background-image: var(--bg); background-size: cover;
  background-position: center; box-shadow: var(--shadow-lg);
  transition: transform var(--t-base), box-shadow var(--t-base); }
/* Velo de color en la base para dar profundidad a la foto */
.cap-row-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,43,134,.28)); }
.cap-row:hover .cap-row-media { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
/* Placeholder de marca cuando la fila aún no tiene imagen */
.cap-row-media--brand { display: grid; place-items: center; background:
    radial-gradient(circle at 30% 25%, rgba(0,156,222,.30), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(231,97,20,.22), transparent 60%),
    var(--gradient-primary); }
.cap-row-media--brand::after { display: none; }
.cap-row-media--brand .cap-row-ico { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: var(--radius-2xl); color: #eaf7ff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 30px rgba(0,0,0,.30); }
.cap-row-media--brand .cap-row-ico svg { width: 46px; height: 46px; }
.cap-row-body .cap-ico { width: 48px; height: 48px; border-radius: var(--radius-lg);
  background: var(--secondary-bg); color: var(--secondary); margin-bottom: var(--space-4); }
.cap-row-body .cap-ico svg { width: 26px; height: 26px; }
.cap-row-body h3 { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--text-primary);
  margin: 0 0 var(--space-3); line-height: var(--lh-snug); }
.cap-row-body p { color: var(--text-secondary); font-size: var(--fs-lg); line-height: var(--lh-relaxed); margin: 0; }

/* ---- CTA común ---- */
.cap-cta { text-align: center; margin-top: var(--space-12); }

/* ============================================================
   Página Capacidades INMERSIVA (solo vista Mosaico): la foto de
   flota cubre TODA la página — encabezado + contenido + footer —
   con header/footer transparentes e integrados, sin hueco superior.
   ============================================================ */
body.cap-immersive { padding-top: 0; background: transparent; }
/* Capa de imagen FIJA a pantalla completa, detrás de todo */
body.cap-immersive::before { content: ""; position: fixed; inset: 0; z-index: -2;
  background: #12151b url('/img/fondos/capacidades-fleet.webp?v=2') center / cover no-repeat; }
/* Overlay neutro fijo (para legibilidad del texto) */
body.cap-immersive::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,16,.66) 0%, rgba(6,10,16,.44) 45%, rgba(6,10,16,.74) 100%); }

/* Header transparente e integrado, sticky. Al bajar aparece un degradado sutil
   (clase .is-scrolled la agrega js/site.js) para que "Volver"/idioma sigan legibles. */
.cap-immersive .device-header { position: sticky; top: 0; background: transparent; border-bottom: none;
  backdrop-filter: none; transition: background .3s ease, backdrop-filter .3s ease; }
.cap-immersive .device-header.is-scrolled {
  background: linear-gradient(180deg, rgba(8,11,18,.92) 0%, rgba(8,11,18,.72) 55%, rgba(8,11,18,0) 100%);
  backdrop-filter: blur(4px); }
/* Logo siempre a color sobre placa blanca (legible sobre la foto) */
.cap-immersive .device-header .nav-logo { background: #fff; border-radius: var(--radius-full); padding: 5px 14px; box-shadow: var(--shadow-sm); }
.cap-immersive .device-header .nav-logo .logo-light { display: block; }
.cap-immersive .device-header .nav-logo .logo-dark { display: none; }
/* Controles del header en claro sobre la foto */
.cap-immersive .device-back { color: rgba(255,255,255,.92); }
.cap-immersive .device-back:hover { color: #fff; }
.cap-immersive .icon-btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); color: #fff; }
.cap-immersive .icon-btn:hover { background: rgba(255,255,255,.22); border-color: #fff; color: #fff; }

/* Sección Mosaico y footer transparentes: se ve la imagen de fondo */
.cap-immersive .cap-mosaico { background: transparent; }
.cap-immersive .cap-mosaico-overlay { display: none; }
.cap-immersive .device-footer { background: transparent; border-top: none; }
.cap-immersive .device-footer p { color: rgba(255,255,255,.78); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .cap-mosaico, .cap-recorrido { padding: var(--space-16) 0; }
  .cap-row { grid-template-columns: 1fr; gap: var(--space-6); text-align: center; margin-bottom: var(--space-12); }
  .cap-row:nth-child(even) .cap-row-media { order: 0; }
  .cap-row-media { min-height: 200px; }
  .cap-row-body .cap-ico { margin-left: auto; margin-right: auto; }
}