/* ==========================================================================
   MIRALOS V8 — Our Vision, integración definitiva.
   Trasplante de la OPCIÓN 04 "Split 50/50 sin aire muerto" de
   opciones-vision.html a la sección real #vision de v8.html.

   Reemplaza el layout anterior (texto arriba-izquierda con un vacío enorme
   encima, fotos apiladas a la derecha dentro de un .container de 1240px)
   por una composición a ancho completo: foto editorial a sangre completa
   contra el borde izquierdo del viewport (mitad izquierda, alto 100% de la
   sección) y el texto en la mitad derecha con jerarquía suiza, centrado
   verticalmente. Sin retícula decorativa de fondo — decisión de Nestor.

   Se enlaza después de css/v8.css. Prefijo de clases: visf-*.
   ========================================================================== */

.visf-vision{
  background: var(--crema);
}

/* ---------- Split 50/50 ---------- */
.visf-split{
  display: grid;
  grid-template-columns: 1fr;
  min-height: clamp(560px, 92vh, 1040px);
}

.visf-media{
  position: relative;
  overflow: hidden;
  background: var(--crema-2);
  aspect-ratio: 4 / 3;
  margin: 0;
}
.visf-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.visf-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  padding: clamp(2.6rem, 6vw, 4.8rem) clamp(20px, 5vw, 4.8rem);
}

.visf-text .kicker{ margin: 0; }

.visf-title{
  font-family: var(--f-head);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.04;
  margin: 0;
}

.visf-body{
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0;
}

/* ---------- Fila de datos técnicos ---------- */
.visf-data{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin: .4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.visf-data-row{ display: flex; flex-direction: column; gap: .35rem; }
.visf-data-row dt{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-faint);
}
.visf-data-row dd{
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}

/* ---------- Escritorio: foto a sangre completa contra el borde izquierdo,
   texto ocupando la mitad derecha, ambos a la altura completa de la
   sección ---------- */
@media (min-width: 900px){
  .visf-split{ grid-template-columns: 1fr 1fr; }
  .visf-media{ aspect-ratio: auto; height: 100%; }
}

/* ---------- Móvil/tablet: foto arriba (alto acotado), texto debajo ---------- */
@media (max-width: 899px){
  .visf-split{ min-height: 0; }
  .visf-media{ aspect-ratio: auto; height: 50vh; min-height: 320px; max-height: 560px; }
  .visf-text{ padding: clamp(2.2rem, 7vw, 3rem) clamp(20px, 6vw, 32px); }
  .visf-data{ gap: 1.4rem; }
}

@media (prefers-reduced-motion: reduce){
  .visf-vision .reveal{ opacity: 1 !important; transform: none !important; }
}