/* ═══════════════════════════════════════════════════════════════════
   VOLUNTARIADO · la página, tal como la diseñó la fundación
   ═══════════════════════════════════════════════════════════════════

   Sale de `pagina voluntariados.pdf`: seis pantallas de 1366×768
   apiladas, hechas en Canva.

   **Las medidas salen del diseño RENDERIZADO, no del PDF leído a
   mano.** La primera versión de esta página se hizo parseando las
   coordenadas del archivo y salió mal en casi todo: el parser
   ignoraba los recortes (`re W n`), y en un PDF de Canva cada imagen
   se dibuja mucho más grande que el hueco por el que se la ve. Con
   eso el titular de la portada quedó ENCIMA de la foto cuando en el
   diseño va arriba, sobre el naranja, y las fotos mal encuadradas.

   Lo que sirve es renderizar el PDF con pdf.js a 1366 de ancho,
   cortarlo en seis y medir los bloques por color sobre el mapa de
   bits. De ahí salen todos los números de este archivo. Si llega una
   lámina nueva, es el mismo paso.

   Las seis pantallas, con sus medidas en el espacio de 1366×768:

   1 · portada   naranja · titular y 37–225 · foto y 259–721,
                 x 51–1320 · botón centrado y 438–496 · panel de la
                 bajada en la esquina inferior izquierda de la foto
   2 · cómo      lima    · titular y 56–241 · tres fichas de 134 de
                 alto en y 270, 421 y 577, con 20 de hueco
   3 · por qué   blanco  · texto x 50–645 · foto x 716–1306, y
                 59–706, borde NARANJA y sin sangrar
   4 · áreas     lima    · titular y 56–148 · bajada y 204–233 ·
                 cuatro fichas de 309×472 con 15 de hueco
   5 · impacto   blanco  · titular y 78–229 · aro x 960–1288, y
                 47–334 · dos columnas, viñetas en x 99 y 753
   6 · cierre    naranja · foto y 60–551 · botón arriba a la derecha
                 DENTRO de la foto · pedido y 589–746

   Vive en su propio archivo y NO en `prode.css`: es la única página
   del sitio con esta paleta, y metida en la hoja compartida la lima
   viajaría a las otras veinticuatro.

   Lo que se apartó del diseño, y por qué. Son dos cosas:

   1. **El titular de la portada va en TINTA, no en blanco.** Blanco
      sobre #FD6500 da 2.98:1 y el umbral para texto grande es 3:1:
      no pasa ni a 119px, y no hay nada más claro que el blanco con
      que arreglarlo. La tinta da 7.04:1. El propio diseño usa tinta
      sobre naranja en el pedido de la pantalla 6, así que la
      decisión ya está tomada ahí.
   2. **El cuerpo de «¿Por qué sumarte?» va en `--naranja-texto`.**
      Mismo motivo: el titular es texto grande y se queda en el
      naranja pleno; un párrafo de 28px no.                          */

/* ── LA UNIDAD DEL DISEÑO ──
   Todo lo de esta página —cuerpos, huecos, rellenos— se escribe como
   múltiplo de `--u`, que vale UN PÍXEL DE LA LÁMINA. Y `--u` es el
   menor de dos: 1/1366 del ancho del cuadro, o 1/768 del alto ÚTIL,
   que es el alto del cuadro menos la barra del sitio.

   Es lo que hace que cada pantalla entre entera sin scrollear. La
   lámina es un 1366×768 sin barra; un portátil de 13 pulgadas deja
   entre 540 y 720px útiles, o sea hasta un 30% menos de alto con el
   mismo ancho. Escalando sólo por el ancho —que es lo que hace un
   `clamp(…vw…)`— el contenido no entraba y había que scrollear en
   las seis. Escalando por el menor de los dos, la página se achica
   junto con la pantalla y conserva EXACTAMENTE las proporciones del
   diseño: los huecos se achican tanto como las letras, así que nunca
   queda un texto grande pegado al de al lado.

   Abajo de 820px de ancho no aplica: ver el bloque del final. */
.vo{
  --vo-h:calc(100svh - var(--header-h));
  /* El tope de 1px es el tamaño de la lámina: la página se achica
     con la pantalla pero NO se agranda. Sin el tope, en un monitor
     de 1920×1080 `--u` daba 1.32 y las seis pantallas volvían a
     pasarse, porque el contenido crece un 32% y el alto disponible
     sólo crece lo que crece la pantalla menos la barra. */
  --u0:min(.0732vw, calc(var(--vo-h) / 880), 1px);
  --u:var(--u0);

  /* La lima del diseño. Es el único lugar del sitio donde vive. */
  --vo-lima:#F1FF4D;
  /* El contorno de las fichas y de las tarjetas. En el PDF es un
     trazo fino, no un relleno: las fichas son transparentes. */
  --vo-borde:#4E0029;
  --vo-radio:calc(34 * var(--u));

  /* El contenedor de ESTA página es más ancho que el del resto del
     sitio, y no es un capricho: el diseño deja 50px de margen sobre
     1366, o sea 1266 de contenido, mientras que `.env` topa en 1240
     y encima se centra, así que a 1366 deja 1117. Con 150px menos,
     «ÁREAS DE VOLUNTARIADO» se parte en dos renglones donde la
     lámina lo tiene en uno, y todo lo demás se corre. Sigue topado
     —a 1920 no se leería una línea de 1800px— pero en 1400. */
  --ancho:1400px;
  --pad:clamp(18px,3.7vw,60px);
}

/* ── El armazón de las seis ──
   Cada pantalla ocupa el cuadro entero y reparte su contenido de
   arriba abajo. La primera versión centraba verticalmente y dejaba
   bandas de color vacías: en el diseño el contenido va de un borde
   al otro, con 50px de margen. */
/* El relleno de arriba lleva el alto de la barra MÁS 40px. El
   diseño arranca su titular a 56px del borde y no tiene barra: con
   menos de 40 el titular queda lamido por el borde del header, que
   es translúcido y deja pasar el texto por debajo. */
.vo-sec{
  padding-block:calc(var(--header-h) + 42 * var(--u)) calc(47 * var(--u));
  min-height:100svh;
  display:flex;flex-direction:column;
}
.vo-sec > .env{flex:1;display:flex;flex-direction:column;min-height:0}

/* El titular de sección. Poppins Bold en versalitas, que es lo que
   usa la lámina: el sitio tiene Mukta de display, pero acá el diseño
   es de la fundación y su titular es Poppins.

   La interlínea es .74 y no el 1.0 de la lámina por cómo funciona el
   revelado por líneas: `.lin` agranda la caja de recorte con
   `padding-block:.26em` y la compensa con un margen negativo igual,
   pero los márgenes negativos de dos hermanos COLAPSAN —queda el más
   negativo, no la suma—, así que entre línea y línea sobrevive
   .26em. El paso real es interlínea + .26em, y .74 + .26 da el 1.0
   exacto. El relleno no se toca: es lo que evita que el recorte se
   coma el acento de «¿POR QUÉ» y la cola de la «q». */
/* El `padding-top` compensa el saliente de `.lin`. El revelado por
   líneas envuelve cada renglón en una caja con `padding-block:.26em`
   y `margin-block:-.26em`, y ese margen negativo SACA la primera
   línea por encima del borde del contenedor: la tinta del titular
   arrancaba a 15px de la barra del sitio, lamiéndola, aunque el
   relleno de la sección dijera 35. Con 30u de relleno propio queda a
   unos 40, que es el aire que tiene la lámina contra el borde. */
.vo h2.vo-t{
  margin:0;
  font-family:var(--cuerpo);font-weight:700;
  text-transform:uppercase;
  font-size:calc(93 * var(--u));line-height:.74;letter-spacing:-.02em;
  text-wrap:balance;
}

/* El hueco entre un titular y el párrafo que lo sigue lleva
   descontado el saliente de `.lin`: 56 de la lámina menos 24. La
   clase `.mt-24` del sistema no sirve acá porque da justo esos 24 y
   el hueco visible queda en cero — era el «están demasiado pegados»
   de la revisión. */
/* Interlínea 1.28 y no la 1.45 del resto del sitio: la lámina usa
   1.07 en todo el cuerpo —es un diseño de Canva y ahí el texto va
   apretado—, y con 1.42 el párrafo de «¿Por qué sumarte?» medía 318px
   contra los 240 del diseño y la sección se pasaba de pantalla. 1.28
   es el punto medio: acerca el bloque a la lámina sin dejar un
   párrafo de ocho renglones pegado a sí mismo. */
/* Sólo el titular que cuelga directo de `.env` lleva la
   compensación: es el que queda debajo de la barra. El de «¿Por qué
   sumarte?» vive dentro de una columna centrada, y ahí ese relleno
   no despega nada de la barra —empuja la tinta 25px hacia abajo y
   descentra la columna contra la foto—. */
.vo-sec > .env > h2.vo-t{padding-top:calc(30 * var(--u))}

.vo .vo-cuerpo{
  margin:0;font-family:var(--cuerpo);
  font-size:calc(28 * var(--u));line-height:1.28;
}
/* El hueco entre el titular y el párrafo que lo sigue: en la lámina
   son 56px de tinta a tinta. El margen que hay que escribir NO es
   ése, porque entre las dos cajas hay márgenes negativos de `.lin`
   colapsando; 49u es lo que da 56u medidos en píxeles pintados. */
.vo .vo-t + .vo-cuerpo{margin-top:calc(49 * var(--u))}

/* El botón. Lima con tinta encima: negro sobre #F1FF4D da 16.4:1.
   En el diseño mide 416×58 de 1366×768. */
.vo-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  /* 416×58 sobre 1366×768 en la lámina, con el rótulo a 20px: son
     unos 88px de relleno a cada lado, no los 44 de un botón normal
     del sitio. */
  padding:calc(15 * var(--u)) calc(88 * var(--u));
  background:var(--vo-lima);color:var(--tinta);
  border:1.5px solid var(--vo-borde);border-radius:var(--radio-s);
  font-family:var(--cuerpo);font-weight:650;
  font-size:max(13.5px, 20 * var(--u));letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:transform var(--t-ui) var(--sal),background var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  .vo-cta:hover{background:#E7F63C;transform:translateY(-2px)}
}

/* ── 1 · Portada ────────────────────────────────────────────────
   Titular arriba sobre el naranja, centrado. Debajo la foto, con el
   botón centrado a media altura y el panel de la bajada pegado a su
   esquina inferior izquierda. */
/* La portada recorta su aire al mínimo. El diseño no tiene barra ni
   miga: entre las dos se comen 86px que allá son foto. Con el
   relleno al mínimo la foto queda en el 52% del cuadro contra el 60%
   de la lámina, que es lo más cerca que se puede sin achicar el
   titular. */
.vo-hero{
  background:var(--naranja);color:var(--tinta);
  padding-block:calc(var(--header-h) + 22 * var(--u)) calc(34 * var(--u));
}
.vo-hero .miga,.vo-hero .miga a{color:var(--sobre-naranja-2)}

.vo-hero-tit{
  margin:calc(10 * var(--u)) 0 0;text-align:center;
  font-family:var(--cuerpo);font-weight:700;text-transform:uppercase;
  font-size:calc(119 * var(--u));line-height:.86;letter-spacing:-.025em;
  color:var(--tinta);
}

.vo-foto{
  position:relative;margin-top:calc(26 * var(--u));
  border-radius:var(--vo-radio);overflow:hidden;
  border:1.5px solid var(--vo-borde);
  /* Crece con lo que sobre de pantalla, que es como llena el cuadro
     el diseño (462 de 768 = 60%). El piso evita que en un cuadro
     bajo quede una franja. */
  flex:1 1 0;min-height:calc(170 * var(--u));
  display:grid;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
}
/* Dos cosas que hay que hacer JUNTAS o la foto se descontrola:

   · La fila va en `minmax(0,1fr)` y no en `auto`. Con `auto` la
     imagen —que lleva `height:100%`— aporta su alto NATURAL al
     cálculo, y lo que se apoya abajo termina fuera del recorte.
   · La base flexible va en 0 y no en `auto`. Con `auto` el tamaño
     base lo pone el contenido, y el contenido de una grilla de fila
     `1fr` dentro de un contenedor de alto indefinido se resuelve
     como max-content: la foto medía 744px de alto en un cuadro de
     768 y la portada pedía una pantalla y media. Con base 0 el alto
     sale sólo del espacio que sobra, que es lo que se busca. */
.vo-foto img{
  grid-area:1/1;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
/* Encuadre CENTRADO, como el diseño: en el PDF la foto se recorta
   22.6% arriba y 22.6% abajo, o sea simétrico. */

.vo-foto-capa{
  grid-area:1/1;position:relative;z-index:1;
  display:grid;place-items:center;
}

/* La bajada va DEBAJO de la foto y a todo el ancho, no dentro de la
   foto en un panel. En la lámina está adentro, pegada a la esquina
   inferior izquierda, pero ahí ocupaba media columna y caía en cinco
   renglones cortos; la fundación pidió sacarla y estirarla. A todo
   el ancho entra en dos.

   Va en TINTA porque ahora está sobre el naranja: blanco sobre
   #FD6500 da 2.98:1 y reprueba. Adentro de la foto podía ir blanca
   porque debajo tenía un velo. */
.vo-bajada{
  margin:calc(30 * var(--u)) 0 0;
  font-family:var(--cuerpo);font-weight:700;color:var(--tinta);
  font-size:calc(29 * var(--u));line-height:1.3;
  max-width:none;text-wrap:pretty;
}

/* ── 2 · Cómo funciona ──────────────────────────────────────────
   Tres fichas con contorno: el nombre del paso a la izquierda y qué
   pasa a la derecha. Es un <ol>: el orden es la mitad de lo que
   dicen. La lista crece para llenar el cuadro, como en la lámina,
   donde las tres ocupan 441 de 768. */
/* Los pasos van al 88% de la escala de la página. Estuvieron al 78%,
   que era demasiado: la fundación había pedido bajar la pantalla
   porque el titular gritaba, y bajar TODO un 22% —fichas incluidas—
   dejó las tres en 79px de alto contra los 125 de la lámina, y con
   eso 330px de lima vacía al pie. El titular sigue por debajo de la
   escala plena, que era el pedido; lo que vuelve a su medida es la
   FICHA. */
.vo-pasos-sec{--u:calc(var(--u0) * .88)}

/* La órbita necesita alto: la rueda mide 480 unidades y con la
   escala plena la pantalla se pasaba. */
.vo-orbita-sec{--u:calc(var(--u0) * .92)}

/* Las áreas bajan al 84%: con la foto adentro de cada ficha el
   contenido creció y con la escala plena la pantalla se pasaba en 42
   de los 110 tamaños probados. Baja todo junto, así que las fichas
   no se vuelven a juntar. */
.vo-areas-sec{--u:calc(var(--u0) * .84)}

.vo-lima{background:var(--vo-lima);color:var(--tinta)}

/* Los márgenes de acá llevan descontado el saliente de `.lin`. El
   revelado por líneas agranda la caja del titular .26em por debajo
   de la última línea —24px a 93px de cuerpo—, así que un `margin-top`
   de 24 da un hueco VISIBLE de cero. En la lámina el hueco entre el
   titular y la primera ficha es de 29px: van 53. */
.vo-pasos{
  list-style:none;margin:calc(53 * var(--u)) 0 0;padding:0;
  /* Las filas van en `auto` y el bloque se apoya ARRIBA, debajo del
     titular. Estiradas a `1fr` quedaban tres fichas altísimas y casi
     vacías; centradas, se despegaban del titular y dejaban un hueco
     de 200px en el medio. El aire sobrante queda abajo, que es lo
     mismo que hace la pantalla del impacto. */
  /* Las filas arrancan en el alto MEDIDO de la lámina —125px, que es
     lo que hace que las tres llenen la pantalla— y crecen si el texto
     lo pide. El bloque se centra: apoyado arriba, todo el sobrante se
     juntaba abajo en una sola mancha de lima; estirado a `1fr`,
     quedaban tres fichas altísimas y casi vacías en una pantalla
     grande. Centrado, el aire se reparte y la composición se lee. */
  /* Las fichas CRECEN para llenar el cuadro, con tope. Es lo que
     hace la lámina: la ficha mide 125px y su texto 62, o sea que la
     mitad de la ficha es aire POR DENTRO. Con las fichas al alto
     justo del texto, ese aire se juntaba todo al pie en una sola
     mancha de lima de 330px. El tope de 175 evita lo contrario —tres
     fichas altísimas y casi vacías en una pantalla grande— y lo que
     sobre después del tope se reparte arriba y abajo. */
  flex:1;display:flex;flex-direction:column;justify-content:center;
  /* 28 y no los 20 de la lámina: con el aire justo las tres fichas
     se leían como un bloque. */
  gap:calc(28 * var(--u));
}
.vo-paso{
  /* La columna del nombre mide 38%: en la lámina el nombre arranca
     en x=90 y la descripción en x=562, sobre una ficha que va de 50
     a 1316. */
  display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
  align-items:center;gap:calc(40 * var(--u));
  border:1.5px solid var(--vo-borde);border-radius:var(--radio-m);
  padding:calc(22 * var(--u)) calc(42 * var(--u));
  flex:1 1 auto;
  min-height:calc(125 * var(--u));max-height:calc(175 * var(--u));
}
.vo-paso h3{
  margin:0;font-family:var(--cuerpo);font-weight:400;
  font-size:max(17px, 44 * var(--u));line-height:1.04;
  letter-spacing:-.005em;text-transform:uppercase;
}
.vo-paso p{
  margin:0;font-family:var(--cuerpo);
  font-size:max(14.5px, 28 * var(--u));line-height:1.36;color:var(--tinta);
}

/* ── 3 · Por qué sumarte ────────────────────────────────────────
   Texto a la izquierda, foto a la derecha en una tarjeta con borde
   NARANJA. No sangra: en el diseño le quedan 60px hasta el borde de
   la pantalla. */
.vo-porque{background:var(--blanco)}
.vo-porque-duo{
  flex:1;display:grid;
  /* Las columnas son `1fr auto` y no dos porcentajes: la foto está
     limitada por el ALTO —su caja es 590×647 de la lámina escalada
     por `--u`— así que en un cuadro bajo queda más angosta que su
     columna. Con porcentajes eso dejaba un pozo de 145px entre el
     texto y la foto. Con `auto` la columna de la foto mide lo que
     mide la foto y el sobrante se lo lleva el texto, que además cae
     en menos renglones y ayuda a que la sección entre. */
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:calc(72 * var(--u));
}
/* `flow-root` contiene el margen de la fecha: sin eso el margen se
   escapaba de la columna, la caja medía menos de lo que ocupa y el
   centrado se calculaba sobre un alto equivocado. */
.vo-porque-duo > div{align-self:center;display:flow-root}
.vo-porque .dato-fecha{margin-top:calc(26 * var(--u))}
.vo-porque h2{color:var(--naranja-display)}
/* 80 de hueco en la lámina, menos los 24 que sobresale `.lin`. */
.vo-porque .vo-cuerpo{color:var(--naranja-texto);margin-top:calc(56 * var(--u))}
/* La foto se estira al alto de la fila y su ancho sale de la
   proporción. Con `max-height` en vh la caja no sabe cuánto mide la
   sección —hay que descontarle el relleno y el alto de la barra— y
   se pasaba: la sección pedía 1.06 pantallas por la foto sola. */
.vo-porque-foto{
  margin:0;border-radius:var(--vo-radio);overflow:hidden;
  border:2px solid var(--naranja);
  /* `align-self:center` y no `stretch`: con stretch la foto se
     colgaba del borde superior de la fila y quedaba con el centro
     60px más arriba que el de la columna de texto. Era el
     descalce que se veía. */
  /* El alto va en `--u` y no en `100%`: el alto de la fila NO es
     definido —la cadena de flex de arriba se apoya en un
     `min-height`, no en un alto— así que un `height:100%` se
     resuelve contra el alto natural de la propia foto. Con eso la
     sección se pasaba hasta 265px de la pantalla en 55 de los 110
     tamaños probados. */
  aspect-ratio:590/647;height:calc(647 * var(--u));
  justify-self:end;align-self:center;
}
.vo-porque-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 4 · Áreas de voluntariado ──────────────────────────────────
   Cuatro fichas con contorno, en columnas FIJAS y no en `auto-fit`:
   con cuatro el reparto es 4, 2 y 1 y nada más. Con `auto-fit` la
   cuenta la decide el ancho y aparecen huecos. */
/* 22 de hueco en la lámina entre la bajada y las fichas. La bajada
   es un <p> normal, no lleva `.lin`, así que acá el margen es el
   hueco tal cual más el interlineado. */
.vo-areas-malla{
  margin-top:calc(18 * var(--u));
  /* `align-content:start`: las fichas miden lo que mide su
     contenido y el aire sobrante queda ABAJO, en la sección. Con las
     filas estiradas a la altura de la sección, cada ficha quedaba
     200px más alta que su texto y ese hueco aparecía ADENTRO, entre
     el texto y la foto. Estiradas no, apoyadas arriba: la fila sigue
     igualando el alto de las cuatro, que es lo que hace que ninguna
     quede desalineada. */
  flex:1;align-content:start;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  /* 26 y no los 15 de la lámina: con 15 las cuatro fichas se tocaban
     y se leían como una sola caja partida. */
  gap:calc(26 * var(--u));
}
.vo-area{
  border:1.5px solid var(--vo-borde);border-radius:var(--vo-radio);
  padding:calc(32 * var(--u)) calc(24 * var(--u));
  display:flex;flex-direction:column;gap:calc(30 * var(--u));
}
.vo-area h3{
  margin:0;text-align:center;
  font-family:var(--cuerpo);font-weight:400;text-transform:uppercase;
  font-size:calc(28 * var(--u));line-height:1.14;letter-spacing:-.005em;
}
.vo-area ul{list-style:none;margin:0;padding:0;
  display:grid;gap:calc(22 * var(--u))}
.vo-area li{
  position:relative;padding-left:calc(24 * var(--u));
  font-family:var(--cuerpo);font-size:calc(21.3 * var(--u));line-height:1.3;
}
.vo-area li::before{
  content:"";position:absolute;left:0;top:.44em;
  width:.3em;height:.3em;border-radius:50%;background:var(--tinta);
}

/* La foto de cada ficha va PEGADA ABAJO y con alto FIJO.

   `margin-top:auto` la empuja al fondo de la ficha, que es donde
   quedaba el hueco, y el alto en `--u` hace que las cuatro midan
   exactamente lo mismo aunque sus textos no. Si en vez de eso la
   foto creciera con el espacio sobrante —`flex:1`— cada ficha
   tendría la suya de un alto distinto, porque los textos no miden
   igual: sería justo lo que no se quiere.

   Y `flex-shrink:0` para que no se aplaste cuando el texto de una
   ficha se estira: antes que achicar la foto, se achica el aire. */
.vo-area-foto{
  margin-top:auto;flex:0 0 auto;
  width:100%;height:calc(190 * var(--u));
  object-fit:cover;display:block;
  border-radius:calc(var(--vo-radio) * .55);
}

/* ── 5 · Un impacto que multiplica ──────────────────────────────
   Dos columnas de viñetas y el dibujo del aro arriba a la derecha.
   El dibujo es decorativo y en el diseño se mete por detrás del
   encabezado de la segunda columna. */
.vo-impacto{background:var(--blanco);position:relative;overflow:clip}
/* El aro es decorativo y va DETRÁS, pero «detrás» no alcanza: con
   los 328px de la lámina su red caía encima de «Lo que ganás» y de
   la primera viñeta, y el texto se leía a través de la malla. En la
   lámina el aro termina en y=334 y las viñetas empiezan en 389; acá
   la barra corre todo 68px hacia abajo, así que el aro tiene que
   achicarse para que su borde inferior siga quedando por encima de
   las viñetas. 259 de ancho son 271 de alto: termina en 345. */
.vo-aro{
  position:absolute;top:calc(var(--header-h) + 6 * var(--u));
  right:calc(78 * var(--u));
  width:calc(259 * var(--u));height:auto;
  pointer-events:none;z-index:0;
}
.vo-impacto .env{position:relative;z-index:1}
.vo-impacto h2.vo-t{max-width:min(100%,13ch)}

/* 74 de hueco en la lámina, menos los 24 de `.lin`. */
/* ── La órbita ───────────────────────────────────────────────────
   Las seis fichas van montadas sobre una rueda enorme que asoma por
   arriba del contenedor: sólo se ve el arco de la cima. La rueda
   gira sola y se FRENA EXACTAMENTE DONDE ESTÁ al pasar el puntero.

   Cómo se sostiene, que es lo que no se ve mirando:

   · La rueda tiene ancho y alto CERO y vive en el centro horizontal,
     a `radio + asomo` de la cima del contenedor. Cada ficha se
     coloca con `rotate(θ) translateY(-radio)`: es su lugar en la
     circunferencia.
   · Al girar la rueda, cada ficha gira con ella y quedaría acostada.
     Para que siga derecha se le aplica el giro contrario. Y no se
     usa `transform` para eso —ya lo ocupa la colocación— sino la
     propiedad `rotate`, que es independiente y se puede animar
     aparte. Las dos animaciones tienen la MISMA duración y el mismo
     `linear`, así que van siempre en fase.
   · El freno es `animation-play-state:paused` sobre las dos. Una
     animación pausada se queda en el fotograma exacto en el que
     estaba: no vuelve al principio ni interpola a ningún lado, que
     es lo que se pidió.

   No hay una línea de JavaScript. */
/* La geometría, que es todo lo que hay que tocar si se quiere otra
   cosa. El radio manda: cuanto más grande, más PLANO el arco y más
   fichas se ven de una vez, pero más se hunden las de los costados.
   Con 760 el arco caía tan rápido que las fichas de los extremos
   salían recortadas por abajo. Con 1400 el arco cruza los 1294px de
   contenido bajando 158, que es lo que entra. */
.orb{
  position:relative;overflow:hidden;
  height:calc(545 * var(--u));
  margin-top:calc(30 * var(--u));
  --radio:calc(2000 * var(--u));
  --ancho-orb:calc(230 * var(--u));
  --asomo:calc(172 * var(--u));
}
/* Las fichas se desvanecen contra los bordes. Es un velo fijo, no
   una opacidad por ficha: la ficha que se va y la que entra pasan
   por el mismo lugar, así que alcanza con teñir el lugar. */
.orb::before,.orb::after{
  content:"";position:absolute;top:0;bottom:0;width:calc(250 * var(--u));
  z-index:2;pointer-events:none;
}
.orb::before{left:0;background:linear-gradient(90deg,var(--blanco),rgba(255,255,255,0))}
.orb::after{right:0;background:linear-gradient(270deg,var(--blanco),rgba(255,255,255,0))}
.orb-rueda{
  list-style:none;margin:0;padding:0;
  position:absolute;left:50%;top:calc(var(--radio) + var(--asomo));
  width:0;height:0;
  animation:orb-girar 66s linear infinite;
  will-change:transform;
}
@keyframes orb-girar{to{transform:rotate(360deg)}}

.orb-slot{
  position:absolute;top:0;left:0;
  width:var(--ancho-orb);
  margin-left:calc(var(--ancho-orb) / -2);
  margin-top:calc(var(--ancho-orb) * 4 / 3 / -2);
  transform-origin:50% 50%;
  transform:rotate(var(--ang)) translateY(calc(-1 * var(--radio)));
}
.orb-card{
  /* El contragiro. `rotate` es una propiedad aparte de `transform`,
     así que se puede animar sin pisar la colocación de la ficha. */
  rotate:calc(-1 * var(--ang));
  animation:orb-contra 66s linear infinite;
  display:flex;flex-direction:column;gap:calc(16 * var(--u));
  aspect-ratio:3/4;overflow:hidden;
  padding:calc(26 * var(--u));
  border-radius:calc(20 * var(--u));
  border:1.5px solid var(--vo-borde);
  box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(10,10,11,.14);
}
@keyframes orb-contra{
  from{rotate:calc(-1 * var(--ang))}
  to{rotate:calc(-1 * var(--ang) - 360deg)}
}
/* El freno: las dos animaciones se pausan juntas y la rueda queda
   clavada donde estaba —una animación pausada se queda en el
   fotograma exacto, no vuelve al principio ni interpola—.

   Frena con el CLIC, no con el puntero. Con el hover, la rueda se
   detenía sola al pasar el mouse camino a otra cosa y arrancaba de
   nuevo al salir: no se podía leer una ficha sin quedarse quieto
   encima. Ahora se toca para leer y se vuelve a tocar para seguir. */
.orb.quieta .orb-rueda,
.orb.quieta .orb-card{animation-play-state:paused}

.orb-card[role="button"]{cursor:pointer}
.orb-card[role="button"]:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* El confeti del primer clic. Va en su propio lienzo, encima de la
   órbita y sin puntero: es lo que avisa que la ficha se puede parar. */
.orb-confeti{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;pointer-events:none;
}

/* Las dos familias. El naranja lleva TINTA encima, que es la regla
   que ordena el sitio; el carbón lleva blanco. */
.orb-a{background:var(--naranja);color:var(--tinta)}
.orb-a .orb-rot{color:var(--sobre-naranja-2)}
.orb-b{background:var(--carbon);color:#FFFFFF}
.orb-b .orb-rot{color:var(--sobre-oscuro-3)}

.orb-rot{
  margin:0;font-family:var(--cuerpo);font-weight:600;
  font-size:calc(15 * var(--u));letter-spacing:.1em;text-transform:uppercase;
}
.orb-txt{
  margin:0;font-family:var(--cuerpo);font-weight:600;
  font-size:calc(22 * var(--u));line-height:1.26;
}

/* ── 6 · El cierre ──────────────────────────────────────────────
   La foto con el botón encima, arriba a la derecha, y debajo el
   pedido sobre el naranja. El pedido va en TINTA: es la regla del
   sitio y es lo que hace el propio diseño. */
.vo-cierre{background:var(--naranja);color:var(--tinta)}
.vo-cierre-foto{
  position:relative;border-radius:var(--vo-radio);overflow:hidden;
  border:1.5px solid var(--vo-borde);
  flex:1 1 0;min-height:calc(180 * var(--u));
  display:grid;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
}
.vo-cierre-foto img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.vo-cierre-foto .vo-cta{
  grid-area:1/1;z-index:1;place-self:start end;
  margin:calc(42 * var(--u));
}
.vo-cierre-pie{
  margin-top:calc(44 * var(--u));
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:calc(54 * var(--u));
}
.vo-pedido{
  margin:0;font-family:var(--cuerpo);font-weight:700;text-transform:uppercase;
  font-size:calc(43 * var(--u));line-height:1.26;letter-spacing:-.01em;
  color:var(--tinta);max-width:28ch;
}
.vo-contacto{
  margin:0;font-family:var(--cuerpo);font-size:calc(21.3 * var(--u));
  line-height:1.62;color:var(--sobre-naranja);white-space:nowrap;
}
.vo-contacto a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .vo-contacto a:hover{text-decoration:underline}
}

/* ═══ Angosto ═══════════════════════════════════════════════════
   Se recorta el AIRE y la geometría, nunca el cuerpo del texto. */

@media (max-width:1150px){
  /* Las cuatro fichas pasan a dos columnas a los 1150 y no a los
     1100: entre 1100 y 1150 cada ficha queda tan angosta que la
     lista se va a seis y siete renglones y la sección se pasaba de
     pantalla por unos pocos píxeles. */
  .vo-areas-malla{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(0,1fr)}
  /* Con dos filas de fichas el relleno de cada una se paga dos
     veces: se recorta el aire de adentro, no el cuerpo del texto. */
  .vo-area{padding:calc(22 * var(--u)) calc(20 * var(--u));gap:calc(20 * var(--u))}
  .vo-area ul{gap:calc(16 * var(--u))}
  /* Con dos filas de fichas la foto se paga dos veces. */
  .vo-area-foto{height:calc(112 * var(--u))}
  .vo-paso{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
  .vo-porque-duo{grid-template-columns:minmax(0,52%) minmax(0,1fr)}
}

@media (max-width:820px){
  /* ── Abajo de 820 la escala del diseño deja de servir ──
     La maqueta se reordena en una columna, así que el alto ya no es
     el límite y la proporción del 1366×768 no aplica: escalada por
     ancho, la lista de una ficha caía a 6px. Acá `--u` se queda sólo
     para los huecos, con un piso, y cada cuerpo vuelve a su clamp en
     píxeles. Es la regla de siempre del sitio: en angosto se recorta
     el AIRE, nunca la tipografía. */
  .vo{--u0:clamp(.5px, .0732vw, 1px);--u:var(--u0)}
  .vo-hero-tit{font-size:clamp(30px,8.4vw,54px)}
  .vo-bajada{font-size:clamp(14.5px,3.4vw,20px)}
  .vo h2.vo-t{font-size:clamp(27px,6.6vw,44px)}
  .vo .vo-cuerpo{font-size:clamp(15px,3.4vw,20px)}
  .vo-cta{font-size:clamp(13.5px,3.2vw,16px);padding:12px 26px}
  .vo-paso h3{font-size:clamp(19px,4.4vw,28px)}
  .vo-paso p{font-size:clamp(14px,3.2vw,18px)}
  .vo-area h3{font-size:clamp(15px,3.6vw,20px)}
  .vo-area li{font-size:clamp(13.5px,3.2vw,17px)}
  .orb-rot{font-size:clamp(10.5px,2.4vw,13px)}
  .orb-txt{font-size:clamp(14px,3.4vw,18px)}
  .vo-pedido{font-size:clamp(17px,4vw,24px)}
  .vo-contacto{font-size:clamp(12.5px,3vw,16px)}
  .vo-aro{width:clamp(96px,22vw,150px)}

  /* La foto de «por qué» pasa a ser una banda arriba del texto.
     Superponer en angosto ya falló dos veces en este sitio. */
  .vo-porque-duo{grid-template-columns:1fr;gap:clamp(18px,3.4vh,30px);
    align-content:center}
  .vo-porque-foto{aspect-ratio:16/10;justify-self:stretch;max-height:38vh}
  .vo-porque .vo-cuerpo{margin-top:clamp(12px,2.4vh,22px)}
  .vo-cierre-pie{grid-template-columns:1fr;gap:clamp(12px,2.2vh,20px)}
  .vo-contacto{white-space:normal}
  .vo-cierre-foto .vo-cta{place-self:start start}
  .vo-aro{top:auto;bottom:clamp(6px,1.6vh,20px);opacity:.92}
}

@media (max-width:760px){
  /* El alto de la ficha sale del TEXTO, no de la lámina. Apaisada, el
     nombre y la descripción van en dos columnas y entran en 125
     unidades de diseño; apilados en una sola columna el texto mide el
     doble, así que ese `max-height` dejaba la caja MÁS BAJA que su
     contenido: el párrafo cruzaba el borde redondeado y caía sobre la
     ficha siguiente. Eso era lo que se veía como tres fichas
     encimadas. */
  .vo-paso{grid-template-columns:1fr;border-radius:var(--vo-radio);
    gap:clamp(4px,1vh,10px);align-content:center;
    min-height:0;max-height:none;flex:0 0 auto;
    padding:clamp(14px,3.6vw,20px) clamp(16px,4.2vw,22px)}
  /* Y la lista deja de estirarse: con `flex:1` y centrado se despegaba
     del titular y dejaba 300px de lima vacía en el medio. Apoyada
     arriba, el titular y las tres fichas se leen como un bloque y el
     aire sobrante queda al pie, que es lo que ya hace la pantalla del
     impacto. */
  .vo-pasos{flex:0 0 auto;justify-content:flex-start;
    margin-top:clamp(18px,4.4vw,30px);gap:clamp(12px,2.8vw,18px)}
  .vo-foto-capa .vo-cta{margin-top:0}
}

@media (max-width:560px){
  .vo-areas-malla{grid-template-columns:1fr;grid-auto-rows:auto;
    gap:clamp(10px,2vh,16px)}
  .vo-area{border-radius:calc(var(--vo-radio) * .8);
    gap:clamp(8px,1.6vh,14px)}
  .vo-area h3{text-align:left}
}

/* ── La órbita, desarmada ──
   Abajo de 820px no hay ancho para una rueda de 200px de ficha, y
   con «reducir movimiento» una rueda que gira sola está fuera de
   discusión. En los dos casos las fichas vuelven a ser una lista
   normal: posición estática, sin transform, sin animación y sin
   recorte. El contenido es el mismo, así que no se pierde nada.

   Las copias de más SÍ se esconden acá: en la rueda están para que
   no quede un hueco al dar la vuelta, en una lista serían las seis
   repetidas tres veces. */
@media (max-width:820px),(prefers-reduced-motion:reduce){
  .orb{height:auto;overflow:visible;margin-top:clamp(16px,3.4vh,30px)}
  /* Los velos de los bordes son de la rueda: en una lista tiñen de
     blanco la mitad de cada ficha. */
  .orb::before,.orb::after{display:none}
  .orb-rueda{
    position:static;width:auto;height:auto;animation:none;transform:none;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,2.4vw,20px);
  }
  .orb-slot{
    position:static;width:auto;margin:0;transform:none;
  }
  .orb-slot[aria-hidden="true"]{display:none}
  .orb-card{
    rotate:none;animation:none;aspect-ratio:auto;height:100%;
    padding:clamp(14px,3vw,22px);border-radius:var(--radio-m);
    box-shadow:none;gap:clamp(8px,1.6vh,14px);
  }
}
@media (max-width:520px){
  .orb-rueda{grid-template-columns:1fr}
}

/* Con «reducir movimiento» el botón no se mueve en hover. Este
   bloque va DESPUÉS del que anima: misma especificidad, decide el
   orden del archivo. */
@media (prefers-reduced-motion:reduce){
  .vo-cta{transition:none}
  .vo-cta:hover{transform:none}
}