/* ============================================================
   10-media.css · Imágenes corporativas + velo de marca unificado
   Enlazado solo en páginas con imagen (Home + 6 subpáginas).
   ============================================================ */

/* ── Velo de familia (below-the-fold) ── */
.img-grade { position: relative; overflow: hidden; }
.img-grade > picture,
.img-grade > picture img,
.img-grade > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.img-grade::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(63, 52, 119, 0.28), rgba(31, 45, 61, 0.10));
  mix-blend-mode: multiply;
}

/* ── HERO con foto + velo reforzado + texto claro ── */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}
/* Velo reforzado arriba (cielo claro) para legibilidad del headline; ajustable */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(31, 45, 61, 0.70) 0%,
    rgba(31, 45, 61, 0.50) 55%,
    rgba(63, 52, 119, 0.68) 100%);
}
.hero__inner, .hero__stats, .hero__scroll { position: relative; z-index: 2; }

/* Texto claro sobre el velo (solo color, sin tocar copy) */
.hero__eyebrow { color: rgba(255, 255, 255, 0.85); }
.hero__headline, .hero__line--ink { color: #ffffff; }
.hero__line--accent { color: var(--vp-lavanda); }
.hero__sub { color: rgba(255, 255, 255, 0.85); }
.hero__stats { border-top-color: rgba(255, 255, 255, 0.25); }
.hero__stat-num { color: #ffffff; }
.hero__stat-unit { color: var(--vp-lavanda); }
.hero__stat-label { color: rgba(255, 255, 255, 0.85); }
.hero__scroll { color: rgba(255, 255, 255, 0.85); }
.hero__scroll-line { background: linear-gradient(to bottom, #ffffff, transparent); }

/* Botones legibles sobre la foto (solo en el hero) */
.hero .btn--ghost { border-color: rgba(255, 255, 255, 0.75); color: #ffffff; }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }

/* ── Sección NICHOS (Home) ── */
.nichos { background: var(--color-dominant); }
.nichos__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md); margin-top: var(--space-lg);
}
.nicho-card { display: flex; flex-direction: column; }
.nicho-card__media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.nicho-card__label {
  margin-top: var(--space-sm); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--color-ink);
}
.nicho-card__sub { font-size: 0.95rem; color: var(--color-ink-soft); }

@media (max-width: 768px) {
  .nichos__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .nicho-card__media { aspect-ratio: 16 / 10; }
}

/* ── BANNER de servicio (franja full-width arriba del svc-hero) ── */
.svc-banner {
  margin-top: var(--nav-h);
  height: clamp(220px, 30vw, 360px);
}
.svc-banner + .svc-hero { padding-top: var(--space-lg); }

@media (max-width: 768px) {
  .svc-banner { height: clamp(180px, 46vw, 260px); }
}

/* ── Acento vectorial sobrio (retícula + diagonales) ── */
.accent-motif {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  color: var(--vp-azul-profundo); /* color de las líneas vía currentColor */
}
.accent-motif--lav { color: var(--vp-lavanda); }
.accent-motif svg { width: 100%; height: 100%; display: block; }
.accent-motif .diag {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: motifDraw 11s var(--ease) infinite;
}
@keyframes motifDraw {
  0%   { stroke-dashoffset: 1400; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1400; }
}

/* Secciones que llevan el acento: contenido por encima del motif */
.manifest, .method, .cta-final { position: relative; }
.manifest > .container,
.method > .container,
.cta-final > .container { position: relative; z-index: 1; }
.manifest .accent-motif { opacity: 0.05; }
.method .accent-motif { opacity: 0.04; }
.cta-final .accent-motif { opacity: 0.08; }

@media (prefers-reduced-motion: reduce) {
  .accent-motif .diag { animation: none; stroke-dashoffset: 0; }
}