/* ═══════════════════════════════════════════════════════════════════
   Esquivel & Company · visual.css
   Ritmo visual para páginas largas, sin cambiar estructura ni tipografía:
   · .vis-photo  — banda fotográfica a sangre, oscurecida hacia los bordes
   · .tone-light — tramo beige a mitad de página (negro → beige → negro).
     Redefine los tokens de base.css dentro de la sección; todo lo que
     usa var(--…) cambia solo.
   Lo inyecta _migracion/visual/visual.sh
   ═══════════════════════════════════════════════════════════════════ */

/* ── Banda fotográfica ── */
.vis-photo {
  --edge-top: var(--black);
  --edge-bottom: var(--black);
  position: relative; overflow: hidden; margin: 0;
  height: clamp(240px, 46vw, 520px);
  background: #0a0a0a;
}
.vis-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) contrast(1.04) brightness(0.8);
  transition: transform 2.4s cubic-bezier(.2,.7,.2,1);
}
.vis-anim .vis-photo img { transform: scale(1.06); }
.vis-anim .vis-photo.is-in img { transform: scale(1); }
.vis-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--edge-top) 0%, transparent 22%, transparent 70%, var(--edge-bottom) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.35), transparent 30%, transparent 70%, rgba(10,10,10,0.35)),
    linear-gradient(to top right, rgba(184,151,90,0.10), transparent 55%);
}
.vis-photo.to-light { --edge-bottom: #efe9de; }
.vis-photo.from-light { --edge-top: #efe9de; }
@media (prefers-reduced-motion: reduce) {
  .vis-anim .vis-photo img { transition: none; transform: none; }
}

/* ── Tramo beige ── */
.tone-light {
  --black:      #efe9de;
  --dark:       #e8e1d3;
  --surface:    #e1d8c7;
  --border:     rgba(40,32,20,0.13);
  --gold:       #8a6a30;
  --gold-lt:    #7a5b24;
  --gold-dim:   rgba(138,106,48,0.38);
  --white:      #1c1813;
  --muted:      rgba(28,24,19,0.56);
  --muted-soft: rgba(28,24,19,0.74);
  background: var(--black);
  color: var(--white);
  border-top-color: transparent;
}
.tone-light.p-dark { background: var(--dark); }
.tone-light a.vert-card:hover { background: #d9cfbc; }
.tone-light .btn-solid { color: #f5f3ef; }
.tone-light .btn-solid:hover { color: #f5f3ef; }
.tone-light ::selection { background: rgba(138,106,48,0.25); }

/* transiciones graduales entre negro y beige */
.tone-fade { height: clamp(4rem, 9vw, 8rem); }
.tone-fade.in  { background: linear-gradient(to bottom, #0a0a0a, #efe9de); }
.tone-fade.out { background: linear-gradient(to bottom, #efe9de, #0a0a0a); }
.tone-fade.in.after-dark  { background: linear-gradient(to bottom, #111111, #efe9de); }
.tone-fade.out.before-dark { background: linear-gradient(to bottom, #e8e1d3, #111111); }

/* navegación fija sobre el tramo beige: velo claro y tokens claros (lo activa visual.js) */
nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(239,233,222,0.97), rgba(239,233,222,0));
  opacity: 0; transition: opacity 0.35s ease;
}
nav.tone-light { background: linear-gradient(to bottom, rgba(10,10,10,0), transparent); color: inherit; }
nav.tone-light::before { opacity: 1; }
nav.tone-light .nav-logo-mark, nav.tone-light a, nav.tone-light span { transition: color 0.35s ease, border-color 0.35s ease; }
.wa-float { transition: border-color 0.2s, background 0.35s, transform 0.2s; }
.wa-float.tone-light { background: #e1d8c7; border-color: rgba(138,106,48,0.45); color: #8a6a30; }