/* ══════════════════════════════════════════════════════════════════════════
   proceso.css — «Cómo trabajamos». La primera página interior del estudio.

   POR QUÉ UNA HOJA APARTE Y NO DENTRO DE caliber.css: la portada pesa ya
   bastante y esto sólo lo usa una página. Se carga después de `caliber.css`,
   de la que hereda TODOS los tokens (--tinta, --osc-1..3, --acento…) y las
   clases de voz (.d1 .d2 .rotulo .parrafo .mono). Aquí no se declara ni un
   color suelto: si aparece un hex en este archivo, es un error.

   🔴 LO QUE ESTA HOJA NO HACE, A PROPÓSITO
   · No usa `position:fixed` para clavar nada — `sticky` lo hace gratis y sin
     un solo cuadro de trabajo en reposo. El `ScrollStack` de ReactBits emula
     el pin en un rAF con Lenis y `will-change` permanente: eso es el patrón
     «fluido pero calienta el teléfono» que ya nos costó una sesión.
   · No dibuja un cromo de Safari reconocible. Ese marco es la firma de Magic
     UI y se ve en mil landings. Se roba la TÉCNICA (una máscara que perfora),
     no el dibujo.
   · No usa bento grid para la lista densa. Las tres librerías grandes dan esa
     misma respuesta y es la equivocada: son las tres tarjetas iguales con más
     pasos. La densidad se gana con tipografía y `subgrid`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── EL ARRANQUE DE LA PÁGINA ─────────────────────────────────────────────
   Cuberto abre con titular grande sobre aire, sin adorno. Aquí igual: el
   rótulo, una frase larga y ligera, y una tesis. La tesis es lo que separa a
   un estudio de un proveedor — es la única opinión de la página. */
.pr-abre{
  /* 🔴 SIN `min-height`. Los 78svh se dimensionaron cuando el rótulo, el titular
     Y el párrafo largo vivían en esta caja. Al sacar el párrafo a su propia
     sección (el orden pasó a título → película → texto), el contenido quedó en
     362 px dentro de una caja de 780: **418 px de vacío por encima del rótulo,
     más que el propio contenido**. paco: «dejas mucho espacio y se ve raro».
     El alto lo deciden ahora el contenido y su relleno, que es lo que hace que
     una apertura respire sin quedarse hueca. */
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.9rem);
  padding-block: clamp(5rem, 11vh, 8.5rem) clamp(2rem, 5vh, 3.5rem);
}
.pr-abre__dice{ max-width: 20ch; }
.pr-abre__tesis{
  max-width: 52ch;
  color: var(--osc-2);
}

/* 🔴 EL TITULAR ARRIBA Y LA TESIS DEBAJO, EN UNA SOLA COLUMNA. Estuvo en dos
   columnas y no funcionaba: medido a 1990 px el titular acababa en 794 y el
   párrafo empezaba en 1392 — **598 px de nada en medio**, y los dos bloques se
   leían como dos cosas sueltas en vez de como una pareja. Meterlos en la misma
   rejilla cerró el hueco a 72 px, pero seguía siendo una composición que había
   que explicar. Apilados no hay nada que explicar, y es lo que dice la cabecera
   de esta misma hoja: «Cuberto abre con titular grande sobre aire, sin adorno».
   paco lo propuso así y tiene razón — la solución más simple era la buena. */
/* ── EL BLOQUE CENTRADO, A LA MANERA DE CUBERTO ───────────────────────────
   Medido en vivo el 2-sep sobre `cuberto.com/projects/zelt/` a 1440: su vídeo
   ocupa **1274 px, el 88 % del visor, centrado**, y **todos sus textos van
   alineados a la izquierda** — ninguno centrado. Así que «centrado» es el
   BLOQUE, no el texto: una columna centrada en la página con el contenido
   apoyado a su izquierda.

   🔴 SE CENTRA CON `padding-inline`, NO CON `max-width` EN LA SECCIÓN. Estuvo
   con `max-width: 82rem` sobre las secciones y el efecto secundario se veía a la
   primera: estas secciones tienen FONDO propio (`data-cuerpo`, `data-niebla`),
   así que al estrecharlas su fondo dejó de ser página y pasó a ser un rectángulo
   con el canto a la vista detrás del titular y del párrafo. paco: «los textos
   tienen borde que se ve mal». Con relleno, la sección sigue midiendo el ancho
   completo —su fondo también— y lo único que se centra es el contenido.

   🔴 Y `max()` CON UN SUELO. Sin él, en un visor estrecho `(100% - 80rem)/2` es
   NEGATIVO y el contenido se sale por los dos lados. */
.pr-abre,
.pr-columna,
.pr-peli-sec{
  padding-inline: max(1.5rem, (100% - 80rem) / 2);
}
.pr-abre__tesis{
  margin-left: 0;            /* ya no se va al borde derecho */
  max-width: 52ch;
  margin-top: clamp(.5rem, 1.5vh, 1.2rem);
}
/* 🔴 NI A SANGRE NI CENTRADA: DEL ANCHO DEL TEXTO Y ARRANCANDO DONDE ARRANCA EL
   TEXTO. A sangre se probó y no funciona — a 1990 px un 16:10 mide 1244 de alto,
   no cabe en pantalla, y el canto del vídeo contra el borde del visor deja la
   página sin margen justo donde el resto sí lo tiene. paco: «el vídeo full bleed
   se ve mal, el del tamaño que estaba era mejor».
   Con `margin-inline: 0` su borde izquierdo cae en el relleno de la sección, o
   sea en la misma línea que el titular y el párrafo, sin topar nada más. */

/* ── EL RIEL: LO QUE CONVIERTE EL SCROLL EN AVANCE ───────────────────────
   El carril se clava y detrás corren siete tramos de altura. Mientras la
   página baja, el carril se queda quieto en pantalla y las tarjetas se van
   abriendo una tras otra — que es el gesto de Cuberto, sólo que su eje de
   apertura es el mismo del scroll y aquí es el perpendicular.

   🔴 `sticky`, NO `fixed`. Un `fixed` habría que montarlo y desmontarlo con JS
   al entrar y salir de la sección, y cualquier ancestro con `transform` lo
   atrapa. `sticky` se despega y se pega solo, y no cuesta un cuadro.
   ⚠️ Y NINGÚN ancestro puede llevar `overflow:hidden` o el pegado no ocurre —
   falla en silencio, la sección simplemente pasa de largo. */
.pr-riel{ position: relative; }
.pr-riel__pega{
  position: sticky;
  top: 22vh;
  z-index: 2;
}
/* los tramos no se ven ni se leen: sólo aportan la ALTURA por la que hay que
   bajar para que el carril avance una tarjeta */
.pr-riel__marcas{ position: relative; }
.pr-riel__marcas i{ display: block; block-size: 62svh; }
/* el primero arranca a media pantalla: si no, la fase 01 ya se dio por leída
   antes de que el carril llegue siquiera a su sitio */
.pr-riel__marcas i:first-child{ block-size: 34svh; }
@media (max-width: 700px){
  /* en teléfono es un carrusel de dedo: clavar el carril y robar siete
     pantallas de scroll para pasar tarjetas que se pasan solas con el pulgar
     es cambiar un gesto bueno por uno peor */
  .pr-riel__pega{ position: static; }
  .pr-riel__marcas{ display: none; }
}

/* ── EL CARRIL DE FASES ───────────────────────────────────────────────────
   El sistema de tarjetas de Cuberto, tumbado. Medido en su portada el 2-sep:
   cerrada 150px de alto, abierta 337, `gap: 9px`, `padding: 54px`, numero a la
   derecha en tono bajo y el arte sangrando por el canto. Aqui la proporcion se
   traslada al eje X: cerrada ~13.5rem de ANCHO, abierta ~30rem.

   🔴 SCROLL DE VERDAD, NO SECCION CLAVADA. Traducir scroll vertical a
   desplazamiento lateral obliga a clavar la seccion y a mover con JS cada
   cuadro: rompe teclado y trackpad, y es trabajo continuo en reposo — el
   patron que calienta el telefono y que esta hoja evita a proposito. Un
   `overflow-x` nativo con `scroll-snap` se ve igual, se arrastra con el dedo,
   y la rueda del raton ni se entera. */
.pr-carril{
  counter-reset: etapa;      /* 🔴 vivía en `.pr-fases`; sin esto las siete dicen 01 */
  display: flex;
  gap: 9px;                              /* el de Cuberto, medido */
  overflow-x: auto;
  overscroll-behavior-x: contain;        /* que no arrastre la pagina detras */
  scroll-snap-type: x proximity;
  /* el carril sangra hasta los bordes del cuadro aunque la seccion tenga
     margen: si respeta el margen, la ultima tarjeta parece cortada por error
     en vez de continuar fuera */
  margin-inline: calc(-1 * var(--marco, 0px));
  padding-inline: var(--marco, 0px);
  padding-block: .5rem 1.6rem;
  scrollbar-width: none;
}
.pr-carril::-webkit-scrollbar{ display: none; }
.pr-carril__pista{
  margin: 0; font-size: .74rem; color: var(--osc-3);
}

.pr-carta{
  position: relative;
  flex: 0 0 auto;
  inline-size: clamp(9.5rem, 13vw, 13.5rem);
  block-size: clamp(24rem, 34vw, 30rem);
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;   /* 🔴 `center` deja el carril descansando en la 02 */
  background: var(--sup-1);
  border: 1px solid var(--linea-osc);
  cursor: pointer;
  /* 🔴 LA TRANSICION VA EN `inline-size`, NO EN `flex`. `flex-grow` NO SE ANIMA
     —ya mordio una vez— y `width` sobre un hijo de flex con `flex:0 0 auto` si
     interpola. La curva es la del sitio, no un `ease` de fabrica. */
  transition: inline-size .52s var(--curva, cubic-bezier(.23,1,.32,1)),
              background-color .4s ease-out, border-color .4s ease-out;
}
.pr-carta[data-abierta]{
  inline-size: clamp(19rem, 32vw, 30rem);
  background: var(--sup-2);
  border-color: rgba(237,239,243,.14);
}
.pr-carta:focus-visible{ outline: 2px solid var(--acento); outline-offset: 3px; }

.pr-carta__cuerpo{
  position: relative; z-index: 2;
  block-size: 100%;
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.6vw, 2.1rem);
  gap: .75rem;
}
/* 🔴 NI `justify-content:flex-end` NI `margin-bottom:auto`. Juntos se pelean:
   un margen `auto` MANDA sobre `justify-content`, y sobre el PRIMER hijo de una
   columna alineada al final lo empuja por ENCIMA del contenedor. El número y el
   título acabaron en y=119 con la tarjeta empezando en y=201, o sea recortados
   por el `overflow:hidden`: desaparecían sin un solo error.
   El contenido va arriba, como en Cuberto, y punto. */
/* EL NUMERO. Arriba y en tono bajo, como el de Cuberto —el suyo va a la
   derecha porque su tarjeta es ancha; aqui la cerrada es estrecha y a la
   derecha no cabria. */
.pr-carta__n{
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  line-height: .9;
  color: rgba(237,239,243,.14);
  transition: color .4s ease-out;
}
.pr-carta__n::before{ counter-increment: etapa; content: counter(etapa, decimal-leading-zero); }
.pr-carta[data-abierta] .pr-carta__n{ color: rgba(237,239,243,.92); }

/* el icono se va cuando la tarjeta abre: dentro ya manda el texto, y dejarlo
   dejaria dos cosas peleando por el mismo renglon */
/* 🔴 EL ICONO VA `absolute`. Con opacidad a 0 seguia OCUPANDO SU CAJA, y en la
   tarjeta abierta eso empujaba el titulo y el parrafo media tarjeta hacia
   abajo: se leia como si el texto estuviera mal centrado. Fuera del flujo, la
   tarjeta abre y cierra sin que nada se mueva de sitio. */
.pr-carta .pr-icono{
  position: absolute;
  left: clamp(1.3rem, 2.6vw, 2.1rem);
  bottom: calc(clamp(1.3rem, 2.6vw, 2.1rem) + 3.6rem);
  width: clamp(56px, 6vw, 78px);
  margin: 0;
  transition: opacity .3s ease-out;
}
.pr-carta[data-abierta] .pr-icono{ opacity: 0; }

.pr-carta__nom{
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.15;
  color: var(--osc-2);
  transition: color .4s ease-out;
}
.pr-carta[data-abierta] .pr-carta__nom{ color: var(--osc-1); }

/* 🔴 EL CUERPO NO SE OCULTA CON `display:none`: NO SE PUEDE ANIMAR y ademas
   reflowea la tarjeta entera al aparecer. Va con opacidad y un desplazamiento
   corto, y `visibility` para que el lector de pantalla no lo lea cerrado. */
.pr-carta__mas{
  display: flex; flex-direction: column; gap: .9rem;
  opacity: 0; visibility: hidden;
  translate: 0 .6rem;
  transition: opacity .34s ease-out, translate .44s var(--curva, cubic-bezier(.23,1,.32,1)),
              visibility 0s linear .34s;
}
.pr-carta[data-abierta] .pr-carta__mas{
  opacity: 1; visibility: visible; translate: 0 0;
  transition-delay: .14s, .14s, 0s;
}
.pr-carta__dice{ margin: 0; max-width: 34ch; color: var(--osc-2); }
.pr-carta__recibe{
  margin: 0; max-width: 32ch;
  padding-left: 1rem;
  border-left: 1px solid var(--linea-osc);
  font-size: .85rem;
  color: var(--osc-3);
}

/* ── EL ARTE DE LA TARJETA ────────────────────────────────────────────────
   Figuras anidadas con gradientes, sangrando por el canto derecho y recortadas
   por el radio de la tarjeta. Ni una peticion de red: los triangulos y los
   arcos de Cuberto tampoco son archivos.
   🔴 `background` en capas, no varios divs: un solo nodo que no toca el layout
   y que el compositor puede pintar sin recalcular nada. */
/* 🔴 EL ARTE SE ACOTA AL CANTO. Sin máscara, los rectángulos de la 04 salían
   POR ENCIMA del párrafo y se leían como cajas grises encima del texto — el
   arte de Cuberto sangra por el canto derecho justamente para no invadir la
   columna de lectura. La máscara es una sola y sirve para las siete. */
.pr-carta__arte{
  position: absolute; inset: 0; z-index: 1;
  mask-image: radial-gradient(135% 115% at 116% 112%, #000 0 34%, transparent 76%);
  opacity: .5;
  transition: opacity .5s ease-out, scale .8s var(--curva, cubic-bezier(.23,1,.32,1));
  scale: 1.04;
}
.pr-carta[data-abierta] .pr-carta__arte{ opacity: 1; scale: 1; }

/* los arcos: circulos concéntricos anclados al canto inferior derecho */
.pr-carta[data-arte="arcos"] .pr-carta__arte{
  background:
    radial-gradient(circle at 108% 108%, rgba(237,239,243,.13) 0 28%, transparent 28.4%),
    radial-gradient(circle at 108% 108%, rgba(237,239,243,.09) 0 46%, transparent 46.4%),
    radial-gradient(circle at 108% 108%, rgba(237,239,243,.055) 0 66%, transparent 66.4%);
}
/* el abanico: rayas que salen de un punto — la eleccion de la 01 */
.pr-carta[data-arte="abanico"] .pr-carta__arte{
  background:
    conic-gradient(from 200deg at 112% 104%,
      transparent 0 6deg, rgba(237,239,243,.11) 6deg 10deg, transparent 10deg 18deg,
      rgba(237,239,243,.08) 18deg 22deg, transparent 22deg 30deg,
      rgba(237,239,243,.055) 30deg 34deg, transparent 34deg 100%);
}
/* la reja: la retícula de secciones de la 02 */
.pr-carta[data-arte="reja"] .pr-carta__arte{
  background:
    repeating-linear-gradient(to right, rgba(237,239,243,.075) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, rgba(237,239,243,.055) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(120% 90% at 118% 108%, #000 30%, transparent 72%);
}
/* los planos: rectangulos escalonados, el idioma de los iconos */
.pr-carta[data-arte="planos"] .pr-carta__arte{
  background:
    linear-gradient(rgba(237,239,243,.10), rgba(237,239,243,.10)) 78% 62% / 62% 34% no-repeat,
    linear-gradient(rgba(237,239,243,.065), rgba(237,239,243,.065)) 90% 78% / 62% 34% no-repeat,
    linear-gradient(rgba(237,239,243,.04), rgba(237,239,243,.04)) 102% 94% / 62% 34% no-repeat;
}
/* la lente: un iris — la produccion */
.pr-carta[data-arte="lente"] .pr-carta__arte{
  background:
    radial-gradient(circle at 96% 88%, rgba(237,239,243,.14) 0 8%, transparent 8.4%),
    radial-gradient(circle at 96% 88%, transparent 0 20%, rgba(237,239,243,.085) 20% 21%, transparent 21.4%),
    radial-gradient(circle at 96% 88%, transparent 0 36%, rgba(237,239,243,.06) 36% 37%, transparent 37.4%),
    radial-gradient(circle at 96% 88%, transparent 0 54%, rgba(237,239,243,.04) 54% 55%, transparent 55.4%);
}
/* la pila: capas construidas una sobre otra */
.pr-carta[data-arte="pila"] .pr-carta__arte{
  background:
    repeating-linear-gradient(to bottom,
      rgba(237,239,243,.075) 0 2px, transparent 2px 26px);
  mask-image: linear-gradient(to left, #000 0 42%, transparent 88%);
}
/* la flecha: sale del cuadro — la entrega */
.pr-carta[data-arte="flecha"] .pr-carta__arte{
  background:
    conic-gradient(from 315deg at 100% 100%,
      transparent 0 40deg, rgba(237,239,243,.10) 40deg 50deg, transparent 50deg 360deg),
    linear-gradient(rgba(237,239,243,.07), rgba(237,239,243,.07)) 70% 74% / 70% 2px no-repeat;
}

@media (prefers-reduced-motion: reduce){
  .pr-carta, .pr-carta__mas, .pr-carta__arte, .pr-carta .pr-icono{ transition: none; }
}

/* En teléfono la tarjeta cerrada no cabe util: se abre a casi todo el ancho y
   el carril se recorre de una en una con `mandatory`, que es como se lee un
   carrusel con el dedo. */
/* 🔴 EN TELÉFONO NO HAY TARJETA CERRADA. Con todas al mismo ancho, el juego de
   abrir y cerrar no aporta nada: sólo consigue que la tarjeta que ves diga su
   número y su título y NADA MÁS, porque la abierta se quedó fuera de pantalla.
   Aquí es un carrusel: una tarjeta por pantalla, completa, y se pasa con el
   dedo. El icono se va porque con el párrafo dentro ya no cabe. */
@media (max-width: 700px){
  .pr-carril{ scroll-snap-type: x mandatory; }
  .pr-carta, .pr-carta[data-abierta]{ inline-size: 80vw; block-size: 27rem; }
  .pr-carta .pr-icono{ display: none; }
  .pr-carta__n{ color: rgba(237,239,243,.92); }
  .pr-carta__nom{ color: var(--osc-1); }
  .pr-carta__mas{ opacity: 1; visibility: visible; translate: 0 0; }
  .pr-carta__arte{ opacity: 1; scale: 1; }
}

/* ⚠️ RESTAURADO. Este bloque y el del acordeón desaparecieron al podar
   el CSS del mostrador clavado con un reemplazo POR RANGO: el rango iba
   de un comentario a otro y arrastró todo lo que había en medio, que no
   tenía nada que ver. Segunda vez en la sesión con la misma causa.
   Antes de borrar un rango: listar los selectores que hay dentro. */
/* ── LA LISTA DENSA DE CAPACIDADES ────────────────────────────────────────
   Sin una caja por item. `subgrid` hace que los tres grupos compartan las
   líneas del padre, así los rótulos quedan a la misma altura y los items en
   el mismo riel aunque los grupos tengan distinto número de renglones.
   La jerarquía va por TRES palancas y ninguna es el peso (sólo tenemos uno):
   tamaño, tono y una regla fina. */
.pr-caps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 2.5rem;
}
.pr-caps__grupo{
  display: grid;
  grid-template-rows: subgrid;
  /* 🔴 EL `span` CUENTA HIJOS, Y AL METER EL DIBUJO PASARON DE DOS A TRES.
     Con `span 2` el tercer hijo no tiene renglón propio: se APILA encima del
     anterior. El síntoma fue el rótulo «Antes» escrito sobre el primer
     renglón de su lista, sin un solo error en consola. Cada hijo que se
     agregue a un grupo con `subgrid` hay que sumarlo aquí. */
  grid-row: span 3;
  gap: .9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea-osc);
}
/* 🔴 EL TIEMPO ES EL TÍTULO DE SU COLUMNA, NO UNA ETIQUETA. A 14px y en acento
   se leía como un pie de foto: la columna parecía empezar en su primer item.
   Sube DOS escalones (14 → 28) y sube de tono al máximo; el acento se muda a
   las palomitas, que es donde se reparte mejor —una sola cosa de color grande
   compite con el titular de la sección, catorce marcas finas no—. */
/* ⚠️ `.oscuro .rotulo` pesa 0,2,0: con un solo selector de clase el color se
   quedaba en --tx-3 y el título seguía apagado aunque midiera 28px. */
.oscuro .pr-caps__tit, .pr-caps__tit{
  color: var(--osc-1);
  font-size: var(--t3);
  line-height: 1.1;
  margin-block: .1rem .35rem;
}
.pr-caps__lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
/* La palomita se DIBUJA con dos filetes girados: mismo grosor de trazo que los
   iconos de la sección, sin una imagen más que pedir. `start` y no `center`:
   con dos renglones el ancla es la primera línea, no el bulto del texto. */
.pr-caps__lista li{
  color: var(--osc-2);
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .65rem;
  align-items: start;
}
.pr-caps__lista li::before{
  content: '';
  width: .62rem; height: .34rem;
  border-left: 1px solid var(--acento);
  border-bottom: 1px solid var(--acento);
  rotate: -45deg;
  /* el alto de línea del cuerpo es ~1.55: media línea menos media palomita */
  margin-top: .48em;
  transform-origin: center;
}
@media (max-width: 760px){ .pr-caps{ grid-template-columns: 1fr; } }

/* ── PROFUNDIDAD SIN ALARGAR: el acordeón nativo ──────────────────────────
   `::details-content` es Baseline desde sep-2025 y `<details name>` da
   acordeón exclusivo sin una línea de JS.
   🔴 `allow-discrete` es la pieza que hace visible la SALIDA: sin él el
   contenido desaparece de golpe al cerrar y sólo se ve la mitad del gesto.
   `interpolate-size` NO es Baseline — va tras `@supports` y si no está, abre
   sin transición de altura, que es una degradación aceptable. */
/* El lado clavado del acordeón. `align-self:start` + `sticky` deja el titular
   y su dibujo acompañando la lectura de los cinco renglones; sin eso la
   columna izquierda se queda arriba y vuelve el hueco que había que llenar. */
.pr-deti{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pr-deti__lado{ position: sticky; top: 22vh; }
.pr-deti__marca{ margin: clamp(1.6rem, 3vw, 2.6rem) 0 1.2rem; }
.pr-deti__nota{ max-width: 30ch; }
@media (max-width: 900px){
  .pr-deti{ grid-template-columns: 1fr; gap: 2rem; }
  .pr-deti__lado{ position: static; }
  .pr-deti__marca{ display: none; }   /* en columna única sólo mete scroll */
}

.pr-mas{ border-top: 1px solid var(--linea-osc); }
.pr-mas > summary{
  cursor: pointer;
  list-style: none;
  padding-block: 1.15rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  color: var(--osc-1);
}
.pr-mas > summary::-webkit-details-marker{ display: none; }
.pr-mas > summary::after{
  content: "+";
  color: var(--acento);
  transition: rotate .28s ease-out;
}
.pr-mas[open] > summary::after{ rotate: 45deg; }
.pr-mas::details-content{
  opacity: 0;
  block-size: 0;
  overflow: hidden;
  transition: opacity .28s ease-out, block-size .28s ease-out,
              content-visibility .28s allow-discrete;
}
.pr-mas[open]::details-content{ opacity: 1; block-size: auto; }
@supports (interpolate-size: allow-keywords){ :root{ interpolate-size: allow-keywords; } }
.pr-mas__cuerpo{ padding-bottom: 1.4rem; max-width: 62ch; color: var(--osc-2); }

/* ── REVELADO ─────────────────────────────────────────────────────────────
   Con UNA familia y UN peso, el revelado carga la expresión que no puede
   cargar la negrita. Dos gestos, no cinco:
   · el titular ASIENTA (`letter-spacing` que se contrae) en vez de deslizarse
   · el bloque ENFOCA (entra desde `blur`) en vez de aparecer por opacidad
   🔴 No revierte. Si el revelado se apaga al salir de cuadro, un pantallazo
   completo fotografía media página apagada — ya nos pasó. El observador se
   desconecta al disparar. */
.pr-rev{ opacity: 0; }
.pr-rev[data-visto]{ animation: pr-enfoca .62s var(--curva) forwards; }
@keyframes pr-enfoca{
  from{ opacity: 0; filter: blur(9px); translate: 0 14px; }
  to  { opacity: 1; filter: blur(0);   translate: 0 0; }
}
.pr-asienta{ opacity: 0; }
.pr-asienta[data-visto]{ animation: pr-asienta .74s var(--curva) forwards; }
@keyframes pr-asienta{
  from{ opacity: 0; letter-spacing: .34em; }
  to  { opacity: 1; letter-spacing: normal; }
}

@media (prefers-reduced-motion: reduce){
  .pr-rev, .pr-asienta{ opacity: 1; animation: none; }
  .pr-mas::details-content{ transition: none; }
  /* el carril deja de deslizar solo: con movimiento reducido, un `scrollBy`
     suave es justo lo que el ajuste pide no hacer */
  .pr-carril{ scroll-behavior: auto; }
}

/* ── LOS ICONOS DE FASE ───────────────────────────────────────────────────
   Mismo idioma que las marcas de `#servicios`: `viewBox 0 0 132 100`, planos
   inclinados con `skewY(-5)`, tres registros de trazo y UN SOLO canto en
   acento por dibujo. No se inventa un estilo nuevo para una página interior:
   dos lenguas de icono en un sitio se leen como dos sitios.

   🔴 Se TRAZAN al activarse la fase, no al entrar en pantalla. Así el dibujo
   participa del mismo mecanismo que el número y la vitrina —un solo evento por
   paso— en vez de ser una animación más compitiendo por atención.

   🔴 ESTE BLOQUE SE BORRÓ POR ACCIDENTE AL RETIRAR EL PORTAL DIBUJADO, y el
   síntoma no fue un icono sin estilo: fue un MANCHÓN NEGRO de 551px. Sin la
   regla de ancho un `<svg>` se estira al 100% del contenedor, y sin `fill:none`
   sus trazos se rellenan. Un bloque de CSS que desaparece no deja hueco: deja
   el valor por defecto, que aquí es enorme y opaco. */
.pr-icono{ display: block; width: clamp(72px, 7.5vw, 104px); margin-bottom: .5rem; }
.pr-icono svg{ display: block; width: 100%; height: auto; }
.pr-icono path, .pr-icono circle{
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.pr-icono .t1{ stroke: rgba(237,239,243,.30); stroke-width: 1.7; }
.pr-icono .t2{ stroke: rgba(237,239,243,.18); stroke-width: 1.3; }
.pr-icono .t3{ stroke: rgba(237,239,243,.12); stroke-width: 1.1; }
.pr-icono .canto{ stroke: rgba(143,181,201,.35); stroke-width: 2.2; }
/* el relleno tapa: sin él los planos de atrás se ven ATRAVESANDO el de
   delante y el dibujo deja de leerse como objetos a distinta distancia */
.pr-icono .fondo{ fill: var(--tinta); }

.pr-fase[data-activo] .pr-icono .t1{ stroke: rgba(237,239,243,.66); }
.pr-fase[data-activo] .pr-icono .t2{ stroke: rgba(237,239,243,.36); }
.pr-fase[data-activo] .pr-icono .t3{ stroke: rgba(237,239,243,.20); }
.pr-fase[data-activo] .pr-icono .canto{ stroke: var(--acento); }
.pr-icono path, .pr-icono circle{ transition: stroke .4s ease-out; }

/* el trazado: `pathLength="1"` normaliza cualquier longitud a 1, así el mismo
   dasharray sirve para una línea corta y para un rectángulo entero */
.pr-fase[data-activo] .pr-icono path,
.pr-fase[data-activo] .pr-icono circle{
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: pr_traza .8s var(--curva) forwards;
}
@keyframes pr_traza{ to{ stroke-dashoffset: 0 } }

@media (prefers-reduced-motion: reduce){
  .pr-fase[data-activo] .pr-icono path,
  .pr-fase[data-activo] .pr-icono circle{ animation: none; stroke-dashoffset: 0; }
  .pr-icono path, .pr-icono circle{ transition: none; }
}
/* En teléfono no hay fase «activa» que encender: se pintan todos al tono alto,
   o quedarían siete dibujos apagados que parecen un error de carga. */
@media (max-width: 900px){
  .pr-icono .t1{ stroke: rgba(237,239,243,.66); }
  .pr-icono .t2{ stroke: rgba(237,239,243,.36); }
  .pr-icono .t3{ stroke: rgba(237,239,243,.20); }
  .pr-icono .canto{ stroke: var(--acento); }
}

/* ── LAS TRES MARCAS DEL ARCO ─────────────────────────────────────────────
   🔴 UN DIBUJO GRANDE POR IDEA, NO UN ICONITO POR RENGLÓN (paco: «esa sección
   está totalmente vacía en cuestión visuales»). Quince iconos de 24px sobre
   quince bullets no es densidad, es ruido: obliga a leer quince dibujos para
   entender tres cosas. Cuberto nunca hace la rejilla de iconitos — pone UNA
   pieza grande por idea, al mismo peso visual que el texto.
   Mismo idioma que los iconos de fase (planos inclinados, tres registros de
   trazo, un solo canto en acento) pero al DOBLE de tamaño, porque aquí el
   dibujo no acompaña a un número: es lo único visual de la sección. */
.pr-icono--arco{
  width: clamp(112px, 13vw, 184px);
  margin-bottom: 1.1rem;
}
/* Aquí no hay fase «activa» que los encienda, así que nacen al tono alto. */
.pr-icono--arco .t1{ stroke: rgba(237,239,243,.62); }
.pr-icono--arco .t2{ stroke: rgba(237,239,243,.34); }
.pr-icono--arco .t3{ stroke: rgba(237,239,243,.18); }
.pr-icono--arco .canto{ stroke: var(--acento); }
/* Se trazan cuando la sección entra, escalonados: `--i` da el turno de cada
   columna, así el ojo los lee de izquierda a derecha en vez de recibir los
   tres de golpe. El disparador es el `[data-visto]` que ya pone el observador
   del revelado sobre `.pr-caps`; no hace falta un observador nuevo. */
[data-visto] .pr-icono--arco path{
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: pr_traza .9s var(--curva) forwards;
  animation-delay: calc(var(--i, 0) * .14s);
}
@media (prefers-reduced-motion: reduce){
  [data-visto] .pr-icono--arco path{ animation: none; stroke-dashoffset: 0; }
}

/* ── LA PIEZA RENDERIZADA ─────────────────────────────────────────────────
   Sin marco: se disuelve por los cuatro bordes contra el fondo de la página.
   Dos degradados cruzados con `mask-composite: intersect` — la técnica exacta
   de Mercury, medida en su hero. Un marco alrededor de una captura la delata
   como captura; un borde disuelto la vuelve parte de la página.
   ⚠️ El reset global lleva `img{max-width:100%}`; aquí no estorba porque la
   imagen va al 100% del contenedor, pero no cambiar a `calc` sin revisarlo. */
/* 🔴 LA PIEZA GRANDE VA A LA MEDIDA DE LA COLUMNA DE LECTURA, NO SUELTA.
   Antes la sección se estiraba a los 1440px del cuadro y dejaba medio lienzo
   NEGRO VACÍO a la derecha del texto: no se leía como composición, se leía como
   un error de maquetación. paco: «se ve raro». */
.pr-pieza{
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  max-width: 1000px;
}
.pr-pieza img{
  display: block; width: 100%; height: auto;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* ── LAS DOS PIEZAS EN PARALELO ───────────────────────────────────────────
   🔴 ANTES IBAN APILADAS y cada una se llevaba una pantalla entera con la mitad
   derecha del cuadro vacía. En paralelo se leen como lo que son: el mismo
   portal en los dos sitios donde vive.

   🔴 `align-items: end`, NO `center`. Dos piezas de distinto alto centradas se
   leen flotando cada una por su cuenta; apoyadas en la misma línea de abajo se
   leen puestas sobre una mesa. Es el mismo truco que usa cualquier bodegón. */
.pr-par{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.pr-par__grande .pr-pieza{ margin: 0; max-width: none; }
.pr-par__lado{ display: flex; flex-direction: column; gap: 1.4rem; }
.pr-par__dice{ margin: 0; max-width: none; }
/* el teléfono deja de tener tope propio: dentro del paralelo lo manda la
   columna, y un `max-width` heredado lo dejaría chico en un hueco grande */
.pr-par .pr-pieza--tel{ margin: 0; max-width: none; }

@media (max-width: 900px){
  /* en una columna el paralelo no existe: vuelven a apilarse, pero ahora la
     frase va PEGADA a su pieza, que es lo que no pasaba antes */
  .pr-par{ grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── EL PANEL: LA TRANSICIÓN ENTRE SECCIONES ──────────────────────────────
   Medido en la portada de Cuberto el 2-sep: su sección oscura entra sobre la
   clara con `border-radius: 72px 72px 0 0`, y el radio NO está en la sección
   sino en una capa de relleno que va detrás. Por eso el contenido puede seguir
   pegado a los bordes mientras el fondo se redondea.

   🔴 AQUÍ EL ESCALÓN NO PUEDE SER BLANCO→NEGRO. El sitio entero es monocromo:
   si la transición dependiera de invertir el tono, habría que romper el mundo
   para conseguirla. Se traslada la TÉCNICA — el panel que llega — y el escalón
   se hace de SUPERFICIE (una tinta apenas más clara) más un filete de luz en el
   canto de arriba, que es lo mismo que hace `.pr-marco` con los aparatos. */
.pr-panel{ position: relative; isolation: isolate; }
.pr-panel__relleno{
  position: absolute; z-index: -1;
  /* sale por los lados hasta el borde del cuadro aunque la sección tenga
     margen, y se hunde por abajo para que la siguiente no vuelva a escalonar */
  inset: 0 0 -6rem;
  border-radius: 72px 72px 0 0;
  /* 🔴 EL FILETE VA COMO `border-top`, NO COMO DEGRADADO. Un degradado de 1px es
     una línea RECTA que el radio recorta: en el panel que sube se veía porque el
     escalón de tono ya dibujaba la esquina, pero en el que baja —tono sobre el
     mismo tono— la esquina desaparecía y el radio no se leía. Un borde SIGUE la
     curva, así que la llegada se ve haya escalón de tono o no. */
  border-top: 1px solid rgba(237,239,243,.13);
  border-inline: 1px solid rgba(237,239,243,.05);
  background: linear-gradient(var(--relleno-ini, var(--sup-1)), var(--relleno-fin, var(--tinta)) 62%);
}
/* la segunda llegada baja en vez de subir: dos escalones idénticos seguidos se
   leen como un error de repetición, no como ritmo */
.pr-panel--baja{ --relleno-ini: var(--tinta); --relleno-fin: var(--sup-1); }
.pr-panel--baja .pr-panel__relleno{ inset: 0 0 0; }
/* el aire de arriba crece: un panel que llega necesita sitio para leerse como
   que llega. Sin esto el radio queda a dos dedos del texto anterior y parece
   una esquina redondeada por accidente. */
.pr-panel{ padding-top: clamp(6rem, 12vh, 10rem); margin-top: clamp(3rem, 7vh, 6rem); }

/* ── «EL ENCENDIDO»: LA SECUENCIA QUE ABRE LA SECCIÓN ─────────────────────
   Un plano continuo de Blender atado al scroll. El alto de `.pr-encendido` ES
   el recorrido: la vista se queda clavada y lo que avanza es la página.

   🔴 EL RECORRIDO SE MIDE EN PANTALLAS, NO EN PÍXELES. 330svh reparte los 132
   cuadros a razón de ~2.3 cuadros por cada 100 px de scroll en un portátil.
   Menos recorrido y la toma se pasa de largo con un gesto de trackpad; más y
   el visitante se cansa antes de que prenda la pantalla.

   🔴 `svh`, NUNCA `vh`. La barra de iOS que aparece y desaparece cambiaría el
   recorrido a media toma y la secuencia daría un salto de varios cuadros. */
.pr-encendido{
  position: relative;
  height: 300svh;
  /* sangra a los dos lados hasta el borde del cuadro: la pieza es el plano de
     apertura de la página, y un plano de apertura con margen no es un plano */
  margin-inline: calc(-1 * var(--marco, 0px));
  margin-top: clamp(2rem, 5vh, 4rem);
}
.pr-encendido__pega{
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pr-encendido__lienzo{
  display: block;
  width: min(92vw, 1040px);
  height: auto;
  /* 🔴 LA CAJA SE RESERVA ANTES DE QUE LLEGUE EL PRIMER CUADRO. Sin
     `aspect-ratio` el canvas nace con 300x150 (su medida por defecto) y al
     pintar el primer cuadro la página entera pega un salto — CLS de manual. */
  aspect-ratio: 16 / 10;
}
/* 🔴 LA LETRA VA ENCIMA Y LA MUEVE EL JS, NO UNA `animation`. Su opacidad
   depende del AVANCE del scroll, no del tiempo: tiene que entrar exactamente
   en el tramo en que la pantalla prende, y volver atrás si el visitante sube.
   Una animación de tiempo no puede hacer eso. */
.pr-encendido__letra{
  position: absolute;
  inset-inline: 0;
  bottom: clamp(2.5rem, 8vh, 6rem);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  /* sin transición: el valor lo escribe el scroll cuadro a cuadro y una
     transición encima lo dejaría siempre persiguiendo al dedo */
}
.pr-encendido__letra .rotulo{ margin: 0 0 .6rem; }
.pr-encendido__letra h2{ margin: 0 auto; max-width: 20ch; text-wrap: balance; }

@media (max-width: 900px){
  /* el juego de cuadros del teléfono es OTRO ENCUADRE (4:5), no éste encogido */
  .pr-encendido__lienzo{ width: 92vw; aspect-ratio: 4 / 5; }
  .pr-encendido{ height: 290svh; }
}
@media (prefers-reduced-motion: reduce){
  /* sin recorrido: un solo cuadro, el de la pantalla ya encendida */
  .pr-encendido{ height: auto; margin-top: 0; }
  .pr-encendido__pega{ position: static; height: auto; padding-block: 2rem; }
  .pr-encendido__letra{ position: static; opacity: 1; margin-top: 2rem; }
}

/* ── LA PELÍCULA DEL PORTAL ───────────────────────────────────────────────
   Sangra a los dos lados hasta el borde del cuadro: es la primera cosa que se
   MUEVE en la página y un plano con margen no es un plano.
   🔴 `aspect-ratio` RESERVA LA CAJA ANTES DE QUE LLEGUE EL VÍDEO. Con
   `preload="none"` el navegador no sabe cuánto mide hasta que alguien lo pide;
   sin la proporción declarada, la página entera brinca al aparecer — CLS de
   manual, y encima en el primer pantallazo. */
.pr-peli{
  /* 🔴 NO VA A SANGRE. A 1990 px de ancho un 16:10 mide 1244 de alto: se come la
     pantalla entera y el visitante ya no ve una pieza, ve una toma de rehenes.
     Medido en Cuberto: sus vídeos de producto ocupan 1059 px en un visor de 1280
     — un 83 %, con aire a los lados. La pieza tiene que caber en una mirada. */
  margin: clamp(1.5rem, 4vh, 3rem) 0 clamp(1rem, 2vh, 1.6rem);
  max-width: none;   /* el ancho lo da la columna centrada de la sección */
}
.pr-peli__video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background: var(--tinta);
  /* el mismo relieve que los demás medios de la página: sin el filete, un vídeo
     oscuro sobre fondo oscuro no tiene canto y se lee a agujero */
  box-shadow: 0 2px 0 rgba(237,239,243,.06) inset,
              0 40px 90px -32px rgba(0,0,0,.92);
}
/* el pie NO va a sangre: es texto, y el texto de esta página vive dentro del
   marco. Un pie pegado al canto del visor se lee a error de maqueta. */
.pr-peli .pr-pie{ margin-top: .9rem; }

@media (prefers-reduced-motion: reduce){
  /* 🔴 CON MOVIMIENTO REDUCIDO NO BASTA CON PAUSARLO: `autoplay` es un atributo
     del HTML y el CSS no lo apaga. Lo que sí puede el CSS es que el vídeo no se
     descargue ni se pinte, y que quede el póster — que cuenta la misma escena
     en una imagen. El JS de la página lo pausa además al arrancar. */
  .pr-peli__video{ display: none; }
  .pr-peli{ background: url(./media/pelicula/portal-poster.webp) center/cover no-repeat;
            aspect-ratio: 16 / 10; border-radius: 18px; }
}

/* ── EL TITULAR DE LA SECCIÓN, CENTRADO ───────────────────────────────────
   Solo, centrado y con aire. Al quitarle la entradilla de al lado deja de
   pelear por el cuadro y hace de portada del bloque.
   🔴 CENTRAR NO ES SÓLO `text-align`: sin `margin-inline: auto` la caja sigue
   pegada a la izquierda y sólo se centra el texto DENTRO de una caja
   descentrada — se ve casi bien y está mal, que es lo peor. */
.pr-rotulo--centro{ text-align: center; }
.pr-remate{
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
  max-width: 22ch;
  text-align: center;
  text-wrap: balance;      /* que los dos renglones queden parejos, no 8/2 */
}
@media (max-width: 700px){ .pr-remate{ max-width: 16ch; } }

/* ── EL MOSTRADOR DE LOS SEIS LUGARES ─────────────────────────────────────
   Antes eran seis miniaturas en rejilla. paco: fuera. La información se
   conserva —era lo único que contestaba «qué incluye»— pero a tamaño real:
   la vista se clava a la izquierda y la lista de la derecha, al pasar, la
   cambia. Es el patrón de Apple y de Linear, y aquí encima no cuesta nada
   porque el mecanismo ya existe en la página.

   🔴 LA LISTA ES LA PISTA DE SCROLL. Los seis renglones aportan la altura por
   la que hay que bajar; no hacen falta tramos invisibles. Contenido real
   haciendo de mecanismo. */
/* ── EL RESPIRO: EL TITULAR SE QUEDA CON SU PROPIA PANTALLA ───────────────
   🔴 UN TITULAR NO ES ESPECTACULAR POR SER GRANDE, SINO POR EL VACÍO QUE TIENE
   ALREDEDOR. Con 8rem de margen seguía pegado al mostrador y se leía como el
   pie de lo anterior; con media pantalla propia se lee como una portada.
   `62svh` y no `vh`: en iOS la barra que aparece y desaparece cambia `vh` a
   media lectura y el bloque brincaría justo mientras se lee. */
.pr-acto{
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  text-align: center;
  margin-top: clamp(4rem, 9vh, 8rem);
}
.pr-acto__tit{
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
@media (max-width: 700px){
  /* en teléfono media pantalla de aire son dos pulgares de scroll en blanco */
  .pr-acto{ min-height: 42svh; margin-top: clamp(2.5rem, 6vh, 4rem); }
  .pr-acto__tit{ max-width: 12ch; }
}
.pr-mostrador{
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 3.25rem);
  align-items: start;
}
/* `relative` no: el pozo de luz va en `::before` con `inset` negativo y
   necesita este nodo como referencia — `sticky` ya establece contexto. */
.pr-mostrador__pega{ position: sticky; top: 15vh; }

/* 🔴 LA VENTANA NECESITA CUERPO O SE LEE PEGADA AL FONDO. Con el HUD ya se
   entiende que es una ventana, pero seguía siendo una lámina plana sobre negro.
   Tres capas y ninguna es una imagen: un pozo de luz detrás que la despega del
   fondo, una sombra larga que le da peso, y un filo claro arriba que simula la
   luz cenital del mundo de la página. Es lo mismo que hace `.pr-marco` con los
   aparatos, y por eso el conjunto se lee de una sola pieza. */
.pr-mostrador__pega::before{
  content: ""; position: absolute; z-index: 0;
  inset: -14% -10% -22%;
  background: radial-gradient(58% 52% at 50% 42%, rgba(143,181,201,.10), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
.pr-mostrador__marco{
  z-index: 1;
  box-shadow:
    0 2px 0 rgba(237,239,243,.06) inset,      /* el filo de arriba */
    0 40px 90px -32px rgba(0,0,0,.92),        /* el peso */
    0 4px 18px -6px rgba(0,0,0,.6);
  position: relative;
  /* 🔴 LA PROPORCIÓN SIGUE AL ARCHIVO, Y EL ARCHIVO CAMBIÓ. Al añadir la cromo
     del navegador las vistas pasaron de 16:10 a 1600x1049. Dejar 16/10 con
     `object-fit:cover` recortaba por arriba exactamente la barra que acabábamos
     de poner — el HUD estaba en el archivo y no en la pantalla. */
  aspect-ratio: 1600 / 1049;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--linea-osc);
  background: var(--sup-1);
}
.pr-mostrador__marco img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  opacity: 0; scale: 1.02;
  transition: opacity .45s ease-out, scale .7s var(--curva, cubic-bezier(.23,1,.32,1));
}
.pr-mostrador__marco img[data-vivo]{ opacity: 1; scale: 1; }

.pr-mostrador__indice{
  list-style: none; margin: 0; padding: 0;
}
/* cada renglón ocupa casi una pantalla: es lo que da tiempo a leerlo antes de
   que la vista cambie, igual que las fases antes del carril */
.pr-lugar{
  min-height: 46svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: .5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--linea-osc);
  opacity: .34;
  transition: opacity .34s ease-out, border-color .34s ease-out;
}
/* el filete del renglón vivo es el ÚNICO acento encendido de la sección: es
   lo que ata el texto con la vista de al lado sin dibujar una flecha */
.pr-lugar[data-vivo]{ opacity: 1; border-left-color: var(--acento); }
.pr-lugar__nom{
  margin: 0; font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  color: var(--osc-1);
}
.pr-lugar__dice{ margin: 0; max-width: 34ch; color: var(--osc-2); }
/* la copia de móvil no existe en escritorio: ahí manda la vista clavada */
.pr-lugar__movil{ display: none; }

@media (max-width: 900px){
  /* 🔴 EN TELÉFONO NO SE CLAVA NADA Y CADA RENGLÓN LLEVA SU FOTO. Una vista
     clavada a la izquierda no tiene izquierda que ocupar en una sola columna:
     quedaría flotando encima del texto, que es exactamente el fallo que ya
     costó una ronda con el mostrador de fases. */
  .pr-mostrador{ grid-template-columns: 1fr; gap: 0; }
  .pr-mostrador__pega{ display: none; }
  .pr-lugar{ min-height: auto; padding-block: 1.6rem; opacity: 1; }
  .pr-lugar__movil{
    display: block; width: 100%; height: auto; margin-top: .9rem;
    border-radius: 8px; border: 1px solid var(--linea-osc);
  }
}

/* ── EL PIE DE FOTO ───────────────────────────────────────────────────────
   🔴 SIN PIE, UNA IMAGEN NO EXPLICA NADA. Es la diferencia entre decoración y
   prueba: el pie dice qué estás mirando y por qué está ahí. Vercel pone una
   sola frase o un solo número debajo de cada fragmento, y por eso sus capturas
   argumentan en vez de rellenar.
   Va con la regla fina a la izquierda, igual que el «Recibes» de cada fase: es
   el mismo gesto para el mismo trabajo. */
.pr-pie{
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--linea-osc);
  max-width: 46ch;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--osc-2);
}
.pr-pie .tenue{ color: var(--osc-3); }