/* ═══════════════════════════════════════════════════════════════════════════
   EL RESPIRO · «LOS TRES CUERPOS» — ago-2026
   ───────────────────────────────────────────────────────────────────────────
   Tres losas de vidrio ahumado suspendidas en perspectiva, una por oficio, y
   detrás UNA sola hendidura de luz. Descuadradas, cada losa devuelve su propio
   canto encendido: tres luces distintas. Al bajar giran hasta ponerse DE CANTO
   y las tres caen exactamente sobre la hendidura — los tres cantos se pisan y
   queda UNA sola línea. Ahí aterriza «Un responsable.», y de esa línea arrancan
   las tres películas de `#servicios`, que van justo debajo.

   POR QUÉ ESTA FORMA Y NO OTRO ANILLO. El sitio ya tiene tres círculos: el
   eclipse del hero, el de `#apertura` y el arco de esta misma sección. Un
   cuarto no es subir de nivel, es repetirse — es la misma nota que hizo que
   `#respiro` perdiera su eclipse (`data-cuerpo="0"`). Converger en una LÍNEA es
   forma nueva y además rima con las tres películas en fila de abajo.

   🔴 TODO VA PREFIJADO `rs-`. En este archivo ya mordió tres veces: `.marco`,
      `.caso`, `.pie`, `.frase`, `.anillo` y `.cierre` existen en caliber.css
      con otro significado. `.losa` y `.aire` hoy están libres, pero un prefijo
      cuesta cuatro letras y una colisión cuesta una tarde.

   🔴 NINGÚN ANCESTRO DE `.rs-taller` PUEDE LLEVAR `filter`. Un `filter` —aunque
      sea `blur(0px)`— APLANA el contexto 3D y las tres losas caen al mismo
      plano: la escena se ve, no falla nada en consola, y simplemente deja de
      haber profundidad. El grano y la niebla de `.oscuro` viven en sus pseudos,
      que son HERMANOS de la escena, no padres. No mover eso.

   El movimiento va con `animation-timeline: view()` y no con JS: es el mismo
   mecanismo que ya usa `.respiro__arco` al salir, no pide anclaje —o sea no
   deja cola al final, que es lo que nos costó caro en `#apertura`— y el ritmo
   lo pone quien navega.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🔴 `animation-timeline: view()` MIDE EL ELEMENTO SOBRE EL QUE SE DECLARA, NO
   LA SECCIÓN. Con `view()` suelto, cada losa corría contra SU propio recorrido
   —560 px de alto dentro de una sección de 900— y los rótulos, que son cajitas
   de 80 px metidas en una losa girada, contra otro completamente distinto: las
   tres llegaban a la línea en momentos diferentes y los nombres seguían
   encendidos cuando ya deberían haberse apagado. Todo se ve, nada falla en
   consola, y el defecto se lee como «el movimiento está mal calculado».
   La salida es declarar UNA línea de tiempo con nombre en la sección y que
   todos los hijos corran contra ella. */
.respiro{
  perspective:1400px;
  perspective-origin:70% 46%;
  view-timeline:--rs-recorrido block;
}

.rs-taller{
  position:absolute; inset:0; z-index:1;
  transform-style:preserve-3d;
  pointer-events:none;
}

/* ── LA HENDIDURA ─────────────────────────────────────────────────────────
   La fuente. Todo lo que brilla en el cuadro sale de aquí, y es el sitio al
   que van a caer los tres cantos. Va en el 70% del ancho, que es donde hoy
   no vive nada: la mitad derecha de esta sección está muerta. */
.rs-luz{
  position:absolute; left:70%; top:46%; translate:-50% -50%;
  width:3px; height:62svh; border-radius:2px;
  background:linear-gradient(180deg, transparent,
      rgba(255,253,246,.95) 18%, #fff 50%, rgba(255,253,246,.95) 82%, transparent);
  box-shadow:0 0 22px 5px rgba(255,248,232,.42),
             0 0 90px 26px rgba(214,206,186,.16);
}
/* el aire que la hendidura ilumina — sustituye a la niebla suelta, que no
   tenía fuente y por eso leía como ruido gris y no como atmósfera */
.rs-aire{
  position:absolute; left:70%; top:46%; translate:-50% -50%;
  width:96vw; height:96svh;
  background:radial-gradient(ellipse 26% 46% at 50% 50%,
      rgba(226,230,240,.15) 0%, rgba(150,158,178,.06) 38%, transparent 72%);
  filter:blur(24px);
}

/* ── LAS LOSAS ────────────────────────────────────────────────────────────
   Vidrio ahumado: la luz entra por el canto derecho y muere hacia la
   izquierda. El `::before` es el FILO de arriba, sesgado — es lo único que
   las saca de «rectángulo gris» y les da grosor. */
.rs-losa{
  position:absolute; top:46%; left:70%;
  width:290px; height:560px; margin:-280px 0 0 -145px;
  transform-style:preserve-3d;
  background:linear-gradient(258deg,
      rgba(228,234,246,.20) 0%, rgba(176,186,206,.10) 14%,
      rgba(60,66,78,.20) 42%, rgba(10,12,16,.62) 78%);
  box-shadow:0 0 0 1px rgba(237,239,243,.10) inset,
             -70px 20px 120px -60px #000;
}
.rs-losa::after{        /* EL CANTO ENCENDIDO — el que acaba siendo la línea */
  content:''; position:absolute; top:3%; right:-2px; width:3px; height:94%;
  background:linear-gradient(180deg, transparent,
      rgba(255,252,244,.92) 16%, #fff 50%, rgba(255,252,244,.92) 84%, transparent);
  box-shadow:0 0 16px 3px rgba(255,246,226,.5);
}
.rs-losa::before{       /* el filo superior */
  content:''; position:absolute; left:0; right:-2px; top:-3px; height:3px;
  background:linear-gradient(90deg, transparent,
      rgba(226,232,244,.5) 60%, rgba(255,252,244,.95));
  transform:skewX(-38deg); transform-origin:right;
}
.rs-losa span{
  position:absolute; left:20px; bottom:24px;
  writing-mode:vertical-rl; rotate:180deg;
  font-size:var(--t6); letter-spacing:.22em;
  color:rgba(237,239,243,.6);
}

/* Reposo = DESCUADRADAS. Va en la clase base y no en un estado, porque si el
   navegador no tiene `view()` esto es lo que se queda viendo: una composición
   terminada, no un montón a medio camino. */
.rs-l1{ transform:translateZ(300px)  translateX(-560px) rotateY(38deg) }
.rs-l2{ transform:translateZ(60px)   translateX(-268px) rotateY(23deg) }
.rs-l3{ transform:translateZ(-200px) translateX(-40px)  rotateY(10deg) }

/* LA COSTURA · el filo que deja la línea al hundirse, y del que cuelga
   `#servicios`. Es la única sección del sitio sin `arco-junta`; ahora tiene
   una, y esta se la ganó: la hicieron los tres oficios.
   🔴 NO VA A RAS DEL CANTO, y esto se midió: ahí abajo el negro de `#respiro`
      ya cambia de tono contra `#servicios`, así que un filo de 1px puesto
      encima de ese escalón se confunde con él y desaparece —el elemento medía
      1061×1 px en su sitio exacto y en la captura no se veía nada—. Sube 34px,
      donde el fondo es negro plano, y lleva halo: un filo sin halo, sobre
      tinta, es invisible a cualquier brillo de pantalla que no sea el mío.
   En reposo mide 0 de ancho: sin movimiento no hubo línea que se hundiera, así
   que tampoco hay costura que explicar. */
.rs-costura{
  position:absolute; left:0; right:0; bottom:34px; height:1px;
  transform-origin:70% 50%;
  scale:0 1;
  background:linear-gradient(90deg,
      transparent, rgba(237,239,243,.30) 16%,
      rgba(255,252,244,1) 70%, rgba(216,197,140,.66) 84%, transparent);
  /* ⚠️ EL HALO IBA A `0 0 60px 10px` Y SE COMÍA SU PROPIA LÍNEA: en pantalla no
     había un filo, había un BORRÓN GRIS rectangular — el mismo fallo que ya
     mató el «reflejo de suelo» en las maquetas. Un filo encendido es 1px nítido
     con un halo CORTO pegado; en cuanto el halo es más ancho que su fuente deja
     de leerse como luz y pasa a leerse como mancha. */
  box-shadow:0 0 12px 0 rgba(255,248,232,.42);
}

/* el suelo: les da peso y evita que la escena flote en el vacío */
.rs-suelo{
  position:absolute; left:0; right:0; bottom:0; height:30svh;
  background:linear-gradient(180deg, transparent, rgba(5,6,9,.9) 62%, #05060A);
}

/* ── LA CONVERGENCIA ──────────────────────────────────────────────────────
   Las tres terminan en el MISMO sitio, de canto (rotateY 88°). Al coincidir,
   sus tres cantos encendidos se pisan y forman una sola línea, más brillante
   que cualquiera de las tres por separado — la suma es literal.
   Las Z de llegada se separan medio píxel para que no peleen por el mismo
   plano; a 88° eso no se ve y evita el parpadeo.

   ⚠️ 88° Y NO 82°: a 82 la cara todavía atrapa un 14% de su ancho (290 px ×
      cos 82° = 40 px) y junto a la luz eso no lee como canto, lee como una
      COLUMNA GRIS SUCIA tapando la hendidura. Seis grados más dejan 10 px y
      la losa desaparece detrás de su propio filo, que es lo que se busca. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* ⚠️ EL TRAMO EMPEZABA EN `cover 12%` Y ERA UN ERROR CARO DE VER: `cover 0%`
       es la sección asomando por el borde de abajo, así que a 12% casi todo el
       descuadre pasaba FUERA DE PANTALLA y, al centrarse la sección —que es
       cuando de verdad se lee— las tres losas ya estaban fundidas. El momento
       existía y nadie lo veía.
       Y tampoco puede cerrar tarde: la sección mide EXACTAMENTE una pantalla,
       así que el único instante en que llena el cuadro es `cover 50%`. Cerrando
       en 78 la línea se formaba con media sección ya fuera y `#servicios`
       ocupando el resto. De 30 a 60: entra descuadrada, converge mientras el
       ojo baja por la frase y cierra en la línea con el cuadro todavía suyo. */
    .rs-losa{
      animation:linear both;
      animation-timeline:--rs-recorrido;
      animation-range:cover 30% cover 60%;
    }
    .rs-l1{ animation-name:rs_junta_1 }
    .rs-l2{ animation-name:rs_junta_2 }
    .rs-l3{ animation-name:rs_junta_3 }

    @keyframes rs_junta_1{
      from{ transform:translateZ(300px) translateX(-560px) rotateY(38deg) }
      to  { transform:translateZ(0)     translateX(-40px)  rotateY(88deg) }
    }
    @keyframes rs_junta_2{
      from{ transform:translateZ(60px)  translateX(-268px) rotateY(23deg) }
      to  { transform:translateZ(.6px)  translateX(-40px)  rotateY(88deg) }
    }
    @keyframes rs_junta_3{
      from{ transform:translateZ(-200px) translateX(-40px) rotateY(10deg) }
      to  { transform:translateZ(1.2px)  translateX(-40px) rotateY(88deg) }
    }

    /* los nombres se apagan ANTES de que las losas se junten: de canto no se
       leerían, y verlos aplastarse contra el filo parece un fallo de render */
    .rs-losa span{
      animation:rs_nombres linear both;
      animation-timeline:--rs-recorrido;
      animation-range:cover 30% cover 50%;
    }
    @keyframes rs_nombres{ from{ opacity:.6 } to{ opacity:0 } }

    /* ── V · LA COSTURA · EN QUÉ SE GASTA LA LÍNEA ──────────────────────────
       🔴 EL DEFECTO QUE ARREGLA: la línea se formaba y NO PASABA NADA. Se
          quedaba sola en un campo negro y la sección se acababa — el pago era
          más pequeño que la preparación, y un remate sin consecuencia se lee
          peor que no haber convergido. Además el tercio de abajo era negro
          puro, así que el último tramo del recorrido se pasaba mirando nada.

       Lo que hace ahora: la línea SE ACUESTA. Cae sobre su propio pie, se
       estira a lo ancho del cuadro y se apaga hasta ser un filo — y ese filo es
       la junta de la que cuelga `#servicios`. `#servicios` es la ÚNICA sección
       del sitio sin `arco-junta`; ahora tiene una, y no es un adorno repetido:
       es la que hicieron los tres oficios.

       Las losas se disuelven ANTES de que caiga. Si se quedan, sus tres cantos
       siguen verticales mientras la línea se tumba y el gesto se parte en dos
       cosas que no se conocen. Se van porque ya SON la línea.

       Todo con `translate`/`rotate`/`scale` —las propiedades individuales, que
       se componen en ese orden antes del `transform`—: son de compositor y no
       recalculan diseño en cada cuadro. Animar `width`/`height` aquí habría
       hecho reflow en cada píxel de scroll. */
    .rs-l1{ animation-name:rs_junta_1, rs_disuelve }
    .rs-l2{ animation-name:rs_junta_2, rs_disuelve }
    .rs-l3{ animation-name:rs_junta_3, rs_disuelve }
    .rs-losa{
      animation-range:cover 30% cover 60%, cover 56% cover 68%;
    }
    @keyframes rs_disuelve{ from{ opacity:1 } to{ opacity:0 } }

    /* ⚠️ AQUÍ LA LÍNEA SE TUMBABA GIRANDO Y SALIÓ MAL. Con el pivote en su
       centro y la rotación a velocidad constante, se pasaba media caída en
       DIAGONAL cruzando el cuadro: no leía como algo que cae, leía como un
       arañazo. Y la aritmética del destino era frágil —el largo va en `svh` y
       el ancho al que tiene que llegar en `vw`, así que el encaje se rompía al
       cambiar de proporción de pantalla.
       El gesto que sí funciona no es girar: la línea SE HUNDE por su propio pie
       —baja y se acorta contra el borde— y su luz SE DERRAMA a lo ancho. Como
       una varilla entrando en agua. Sin diagonal y sin trigonometría. */
    .rs-luz{
      animation:rs_se_hunde linear both;
      animation-timeline:--rs-recorrido;
      animation-range:cover 60% cover 80%;
      transform-origin:50% 100%;
    }
    @keyframes rs_se_hunde{
      from{ translate:-50% -50%;                       scale:1 1;    opacity:1 }
      to  { translate:-50% calc(-50% + 34svh);         scale:1 .04;  opacity:.5 }
    }

    /* LA COSTURA crece desde el punto exacto por donde se hunde la línea —el
       70% del ancho— y no desde el centro: la luz sale de donde estaba la luz. */
    .rs-costura{
      animation:rs_costura linear both;
      animation-timeline:--rs-recorrido;
      animation-range:cover 64% cover 88%;
    }
    @keyframes rs_costura{
      from{ scale:0 1; opacity:0 }
      50% { opacity:1 }
      to  { scale:1 1; opacity:.85 }
    }
    /* el aire se retira con ella: la luz ya no está de pie, no puede seguir
       iluminando el mismo volumen */
    .rs-aire{
      animation:rs_aire_baja linear both;
      animation-timeline:--rs-recorrido;
      animation-range:cover 60% cover 82%;
    }
    @keyframes rs_aire_baja{ from{ opacity:1 } to{ opacity:.25 } }
  }
}

/* ── EL ARCO SE QUEDA, PERO DE HORIZONTE ──────────────────────────────────
   Ya no es el objeto de la sección —eso son las losas— pero se queda porque
   es el motivo que recorre el sitio entero y aquí le da suelo a la escena.
   Baja de tono para no competir con la hendidura, que es la fuente. */
.respiro__arco{ opacity:.4 }

/* ── MÓVIL ────────────────────────────────────────────────────────────────
   Tres losas de 290px no caben en 390: se salían por los dos lados y el
   titular caía encima de la del medio. No se encogen sin más —eso deja una
   maqueta de escritorio en miniatura— sino que se RECOMPONE: la escena se va
   a la mitad de abajo, las losas se estrechan y el descuadre se cierra, así
   que la convergencia sigue leyéndose en un recorrido más corto. */
/* 🔴 A 390 EL TITULAR OCUPA CUATRO RENGLONES Y LA ESCENA LE PASABA POR ENCIMA:
   con la escena centrada en el 70% del alto, las losas ocupaban de 425 a 755 y
   el bloque de texto de 350 a 520 — los cantos ENCENDIDOS cruzaban «Una sola
   conversación» y la dejaban ilegible. Es exactamente el mismo error que ya se
   arregló una vez con el arco (`top:42%` cruzaba el titular). La escena vive en
   el TERCIO DE ABAJO y el texto no la toca. */
@media (max-width:760px){
  .respiro{ perspective:900px; perspective-origin:62% 80% }
  .rs-losa{
    /* medido a 390×844: el texto acaba en 528 y con 262 de alto la escena
       empezaba en 524 — se tocaban. Con 210 arranca en 570: 42 px de aire. */
    width:150px; height:210px; margin:-105px 0 0 -75px;
    top:80%; left:58%;
  }
  .rs-luz{ left:58%; top:80%; height:23svh }
  /* la costura crece desde donde se hunde la línea, y en móvil eso es el 58%,
     no el 70%: si no, la luz sale de un punto donde no había luz */
  .rs-costura{ transform-origin:58% 50%; bottom:22px }
  .rs-aire{ left:58%; top:80%; height:56svh }
  .rs-l1{ transform:translateZ(150px)  translateX(-215px) rotateY(34deg) }
  .rs-l2{ transform:translateZ(30px)   translateX(-108px) rotateY(21deg) }
  .rs-l3{ transform:translateZ(-100px) translateX(-14px)  rotateY(9deg) }

  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      @keyframes rs_junta_1{
        from{ transform:translateZ(150px) translateX(-215px) rotateY(34deg) }
        to  { transform:translateZ(0)     translateX(-14px)  rotateY(88deg) }
      }
      @keyframes rs_junta_2{
        from{ transform:translateZ(30px)  translateX(-108px) rotateY(21deg) }
        to  { transform:translateZ(.6px)  translateX(-14px)  rotateY(88deg) }
      }
      @keyframes rs_junta_3{
        from{ transform:translateZ(-100px) translateX(-14px) rotateY(9deg) }
        to  { transform:translateZ(1.2px)  translateX(-14px) rotateY(88deg) }
      }
    }
  }
}