@charset "utf-8";
/* ==========================================================================
   Prisma Asesores · vida
   Firma de movimiento: «se asienta».
   Cada cosa baja a su renglón y queda anotada, como un asiento contable:
   de arriba abajo, renglón a renglón; el remate (la doble raya del total) se traza de izquierda a derecha.
   Preciso y seco, sin rebote. Textura: papel de impreso, puntos guía, doble raya y folio de expediente.
   ========================================================================== */
:root {
  --vida-dur: .5s;
  --vida-ease: cubic-bezier(.25, .8, .25, 1);
  --vida-dir: -1;            /* -1: entra desde arriba */
  --vida-paso: 70ms;         /* entre renglones */
  --vida-salto: 14px;        /* lo que baja cada renglón */
}

/* ---------- renglones que se asientan ---------- */
[data-asienta] > * { transition: opacity var(--vida-dur) var(--vida-ease), transform var(--vida-dur) var(--vida-ease); transition-delay: calc(var(--i, 0) * var(--vida-paso)); }
.con-vida [data-asienta]:not(.asentado) > * { opacity: 0; transform: translateY(calc(var(--vida-dir) * var(--vida-salto))); }

/* ---------- doble raya del total, que se traza ---------- */
.vida-raya {
  display: inline-block; padding-bottom: 12px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--tuyo), var(--tuyo));
  background-repeat: no-repeat; background-size: 0% 2px, 0% 2px;
  background-position: 0 calc(100% - 6px), 0 100%;
  transition: background-size .7s var(--vida-ease) .25s;
}
.vida-raya.trazada, html:not(.con-vida) .vida-raya { background-size: 100% 2px, 100% 2px; }

/* ---------- fotos: la hoja baja y la cámara respira ---------- */
.foto.baja > img, .foto.baja > video, .foto.baja > canvas { transition: transform 1s var(--vida-ease), opacity .9s var(--vida-ease); }
.con-vida .foto.baja:not(.asentada) > img, .con-vida .foto.baja:not(.asentada) > video, .con-vida .foto.baja:not(.asentada) > canvas { opacity: 0; transform: translateY(-28px); }
.foto.baja.asentada > canvas { opacity: 1; }
.foto.respira > img, .foto.respira > video { transform-origin: 50% 0; animation: respira 18s ease-in-out infinite alternate; animation-play-state: paused; }
.foto.respira.en-vista > img, .foto.respira.en-vista > video { animation-play-state: running; }
@keyframes respira { from { scale: 1; } to { scale: 1.07; } }
/* retratos y casos: el enfoque se ajusta al entrar */
.con-vida .foto.enfoca > img { filter: blur(12px) saturate(.8); transition: filter 1.1s var(--vida-ease), opacity .9s var(--vida-ease); }
.con-vida .foto.enfoca.enfocada > img { filter: none; }

/* ---------- cabeceras interiores con imagen ---------- */
.cab-pag .vc { min-width: 0; border-radius: var(--r-doc); }
.cab-pag.vc-ancha .vc { grid-column: 1 / -1; margin-top: clamp(12px, 2vw, 28px); }
.cab-pag.vc-lado .reticula { align-items: start; }
.cab-pag.vc-lado h1 { grid-column: 1 / span 6; font-size: clamp(42px, 5vw, 80px); }
.cab-pag.vc-lado .lead { grid-column: 1 / span 6; }
.cab-pag.vc-lado .dato { grid-column: 1 / span 5; grid-row: auto; margin-top: 8px; }
.cab-pag.vc-lado .vc { grid-column: 8 / -1; grid-row: 1 / span 5; align-self: stretch; aspect-ratio: auto; min-height: 380px; }
.cab-pag.vc-lado .et { grid-column: 1 / span 6; }
.cab-pag.vc-ancha { padding-bottom: clamp(28px, 3vw, 48px); }

/* ---------- portada: la mesa de trabajo detrás del cálculo ---------- */
.hero { position: relative; overflow: hidden; }
.hero .h-grid { position: relative; z-index: 1; }
.hero-mesa { position: absolute; top: var(--head-h); right: 0; bottom: 0; width: 44%; aspect-ratio: auto; border-radius: 0; z-index: 0; }
.hero-mesa::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, var(--papel) 0, rgba(245, 246, 243, 0) 22%); pointer-events: none; }
.hero .h-doc { box-shadow: 0 1px 0 rgba(21, 24, 27, .06), 0 30px 60px -24px rgba(21, 24, 27, .45); }
.area-foto { margin: -26px -26px 4px; border-radius: 0; }

/* ---------- fotos de expediente entre bloques ---------- */
.exp { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); row-gap: 14px; }
.exp .foto { grid-column: 1 / span 10; }
.exp-pie { grid-column: 1 / span 7; margin: 0; font-size: 15px; color: var(--tinta-2); display: flex; gap: 14px; align-items: baseline; }
.exp-der .foto { grid-column: 3 / -1; }
.exp-der .exp-pie { grid-column: 3 / span 7; }
.folio { flex: none; font-size: 13px; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; padding-bottom: 3px; border-bottom: 3px double var(--tuyo); }

/* ---------- cierre con foto ---------- */
.llamada-foto { position: relative; overflow: hidden; }
.llamada-foto .ll-foto { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; aspect-ratio: auto; border-radius: 0; }
.llamada-foto .reticula h2, .llamada-foto .reticula .der { grid-column: 7 / -1; }
.llamada-foto .reticula { row-gap: 18px; }
.bj-foto { margin: 26px 0 22px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cab-pag.vc-lado h1, .cab-pag.vc-lado .lead, .cab-pag.vc-lado .dato, .cab-pag.vc-lado .et { grid-column: 1 / -1; }
  .cab-pag.vc-lado .vc { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; margin-top: 8px; }
  .hero-mesa { position: relative; top: auto; width: auto; aspect-ratio: 16 / 9; margin: 0 var(--gut) 22px; border-radius: var(--r-doc); }
  .hero-mesa::after { display: none; }
  .hero { padding-top: calc(var(--head-h) + 16px); }
  .exp .foto, .exp-der .foto, .exp-pie, .exp-der .exp-pie { grid-column: 1 / -1; }
  .llamada-foto .ll-foto { position: relative; width: auto; aspect-ratio: 16 / 9; margin: 0 var(--gut) 28px; border-radius: var(--r-doc); }
  .llamada-foto .reticula h2, .llamada-foto .reticula .der { grid-column: 1 / -1; }
  .llamada-foto { padding-top: 0; }
}
@media (max-width: 760px) {
  .area-foto { margin: -26px -26px 4px; }
  .exp-pie { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .con-vida [data-asienta]:not(.asentado) > * { opacity: 1; transform: none; }
  .con-vida .foto.baja:not(.asentada) > img, .con-vida .foto.baja:not(.asentada) > video, .con-vida .foto.baja:not(.asentada) > canvas { opacity: 1; transform: none; }
  .foto.respira > img, .foto.respira > video { animation: none; }
  .con-vida .foto.enfoca > img { filter: none; }
  .vida-raya { background-size: 100% 2px, 100% 2px; }
}

/* portada: el documento se apoya sobre la mesa y deja verla */
@media (min-width: 1081px) {
  .hero-mesa { width: 50%; }
  .hero .h-doc { max-width: 500px; justify-self: end; margin: 56px clamp(0px, 2vw, 32px) 40px 0; }
}

/* pie de folio dentro de una sección */
.exp-sec { margin: 14px 0 clamp(48px, 6vw, 88px) !important; max-width: 70ch; }
.foto-sec:has(+ .exp-sec) { margin-bottom: 0; }
/* el bloque de texto de la cabecera no mueve la foto: solo los renglones */
[data-asienta] > .foto { transition: none; }
.con-vida [data-asienta]:not(.asentado) > .foto { opacity: 1; transform: none; }
@media (max-width: 1080px) {
  .hero { display: flex; flex-direction: column; }
  .hero > .wrap { order: 1; }
  .hero-mesa { order: 2; margin-top: 28px; margin-bottom: 0; }
}