/* ══════════════════════════════════════════════════════════════════
   FORMAS DE STRIPE · pedido de Sebas del 18/10/2026 (09-FORMAS-STRIPE.md)
   y su devolución del 19/10 (formas/devolucion-19-10).

   Todo se dibuja en WebGL (js/formas.js): las máscaras y las "tapas" del
   texto van en el shader, así que acá solo se ubica cada lugar.

   1 · Cinta          la banda azul de /nosotros (derecha, sin tapar el texto)
   2 · Onda           la frase de la home (papel) y la escena de "Cómo trabajamos" (azul)
   3 · Globo          la banda "Mayoristas y distribuidores de todo el país." (home):
                      Argentina por provincias, gira y se arrastra; la lista al lado
   familia            radiales, puntos, órbitas, grilla y onda, en las tarjetas
                      del cierre y en las portadas de las páginas del menú
   a · Pulsos         la lista de pasos de la home (CSS) y el plano de /servicios
   b · Gráficos       se dibujan al entrar en pantalla ([data-grafico])
   c · Tarjetas 3D    se inclinan con el mouse, con brillo
   d · Texto con luz  una ventana con una copia de la palabra que cruza (.luz)

   Colores: azul #0E2A5C, profundo #081936, luz #1C4384, celeste #53BDEB
   (solo luz o acento, nunca texto chico sobre papel), papel #F7F5F0,
   hueso #EFEDE7. Con movimiento reducido todo queda quieto y entero.
══════════════════════════════════════════════════════════════════ */

/* ── El lienzo, en cualquier lugar: detrás del contenido de su caja ── */
.forma-host--rel{position:relative}
.forma{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s ease}
.forma--lista{opacity:1}
.forma-host>.forma{grid-area:auto}
.forma canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* En las bandas azules (/nosotros y el cierre "Hablemos." de las páginas internas) el texto va encima del lienzo. */
.ins-banda>:not(.forma):not(.fondo-flujo),.ins-cierre>:not(.forma):not(.fondo-flujo){position:relative;z-index:1}

/* Los lugares de la familia que no son una caja existente (portadas): van detrás del texto. */
.forma-lugar{display:block;pointer-events:none}

/* ── 2 · La onda en la frase de la home ── (el lugar es la parte fija de la escena) */
.frase-escena__fijo>.forma{z-index:0;left:calc(-1 * var(--page-margin,24px));right:calc(-1 * var(--page-margin,24px))}
.frase-escena__fijo>.frase-escena__h2{position:relative;z-index:1}

/* ── 2 · La onda en "Cómo trabajamos": solo en la columna de la escena ── */
.sc-escena>.forma{z-index:0}

/* Los números de "El equipo" (el globo ya no está ahí: tiene su banda, abajo) */
.ins-equipo-home__numeros{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 40px}
.ins-equipo-home__numeros strong{display:block;font-size:clamp(36px,4.4vw,64px);line-height:.95;letter-spacing:-.05em;font-weight:600;font-variant-numeric:tabular-nums}
.ins-equipo-home__numeros span{display:block;margin-top:6px;font-size:clamp(14px,1.1vw,17px);line-height:1.25;max-width:16ch;opacity:.8}

/* ── 3 · Todo el país: el globo y la lista de ciudades ──
   Compu: el título y la lista a la izquierda, el globo a la derecha en las dos filas.
   Celular: título, globo y lista, uno debajo del otro. El globo gira solo con el gesto horizontal
   (touch-action: pan-y): el vertical sigue siendo el scroll de la página. */
.pais{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "globo" "nav";
  padding-block:var(--section-gap-lg,120px);color:var(--theme-text-primary)}
.pais__texto{grid-area:texto}
.pais__h2{margin:0;font-size:clamp(2.4rem,9.6vw,3.4rem);line-height:.98;letter-spacing:-.045em;font-weight:600;max-width:14ch;text-wrap:balance}
.pais__bajada{margin:20px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.35;font-weight:600;letter-spacing:-.01em;max-width:32ch;opacity:.8}
.pais__nav{grid-area:nav}
.pais__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px)}
.pais__lista a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 0;
  border-bottom:1px solid rgb(247 245 240 / .16);color:inherit;text-decoration:none;font-weight:600;
  font-size:clamp(17px,1.3vw,20px);line-height:1.15;letter-spacing:-.015em;transition:border-color .35s ease}
body:not([data-theme=dark]) .pais__lista a{border-bottom-color:rgb(14 42 92 / .16)}
.pais__flecha{flex:none;width:20px;height:20px;opacity:.55;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease,color .3s ease}
.pais__lista a:hover,.pais__lista a.is-activo{border-bottom-color:#53BDEB}
.pais__lista a:hover .pais__flecha,.pais__lista a.is-activo .pais__flecha,.pais__lista a:focus-visible .pais__flecha{opacity:1;color:#53BDEB;transform:translateX(4px)}
.pais__lista a:focus-visible{outline:2px solid #53BDEB;outline-offset:4px;border-radius:2px}
.pais__todas a{opacity:.86}

.forma-globo{display:block;pointer-events:auto}
.pais__globo{grid-area:globo;position:relative;height:clamp(380px,118vw,520px);margin:28px calc(-1 * var(--page-margin,16px)) 20px;
  touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pais__globo.is-arrastrando{cursor:grabbing}
.pais__globo.is-sobre{cursor:pointer}
/* el borde se apaga en redondo: la caja no se nota */
.forma--globo{-webkit-mask:radial-gradient(closest-side,#000 70%,#0000 100%);mask:radial-gradient(closest-side,#000 70%,#0000 100%)}
/* El nombre de la provincia o la ciudad: el punto queda sobre el lugar y el texto a la derecha.
   Lo ubica js/formas.js con transform (left/top en 0). */
.forma-globo__rotulo{position:absolute;left:0;top:0;z-index:2;margin:0;display:flex;align-items:center;gap:8px;
  font-size:14px;line-height:1.2;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:#F7F5F0;
  padding:6px 10px 6px 8px;border-radius:999px;background:rgb(8 25 54 / .72);
  opacity:0;transition:opacity .35s ease;pointer-events:none;will-change:transform}
.forma-globo__rotulo::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#53BDEB;box-shadow:0 0 0 3px rgb(83 189 235 / .25)}
.forma-globo__rotulo svg{width:14px;height:14px;color:#53BDEB}
.forma-globo__rotulo.is-visible{opacity:1}
body:not([data-theme=dark]) .forma-globo__rotulo{color:#0E2A5C;background:rgb(247 245 240 / .86)}
@media (min-width:1024px){
  .pais{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"texto globo" "nav globo";grid-template-rows:auto 1fr;
    column-gap:var(--grid-gutter,24px);align-items:start}
  .pais__texto{align-self:end;padding-top:clamp(24px,4vw,64px)}
  .pais__h2{font-size:clamp(2.8rem,4.6vw,4.75rem)}
  .pais__nav{margin-top:clamp(32px,3.4vw,52px)}
  .pais__globo{height:clamp(540px,46vw,720px);margin:0 calc(-1 * var(--page-margin,24px)) 0 0}
}

/* ── familia · las portadas de las páginas del menú ──
   En la compu, a la derecha y abajo de la portada, detrás del texto (el shader lo apaga donde hay letras).
   En el celular, una franja debajo de la bajada. */
.h8-index-hero{position:relative}
.h8-index-hero>h1,.h8-index-hero>p{position:relative;z-index:1}
.forma-lugar--portada{position:absolute;right:var(--h8-gutter,24px);bottom:clamp(16px,3vw,48px);width:min(44vw,620px);height:min(31vw,440px);z-index:0}
@media (max-width:767px){
  .forma-lugar--portada{position:relative;right:auto;bottom:auto;width:100%;height:clamp(180px,52vw,240px);margin-top:20px}
}

/* /rubro: una franja con la onda debajo de la bajada */
.forma-lugar--franja{position:relative;height:clamp(170px,19vw,280px);margin-top:clamp(0px,1vw,16px)}

/* ── a · Pulsos en la lista de pasos de la home ──
   Una línea de 1 px que une los números, con un tramo de luz que baja de paso en paso
   (el latido de Stripe: entra en la primera mitad del ciclo y se apaga rápido). */
.sc-lista-caja{position:relative}
.sc-pulsos{position:absolute;left:-18px;top:calc(clamp(10px,1.6vh,16px) + .5em);bottom:calc(clamp(10px,1.6vh,16px) + 1.2em);width:1px;pointer-events:none;container-type:size;
  background:linear-gradient(to bottom,rgb(83 189 235 / .05),rgb(83 189 235 / .32) 12%,rgb(83 189 235 / .32) 88%,rgb(83 189 235 / .05))}
.sc-pulsos i{position:absolute;left:-1px;top:0;width:3px;height:52px;border-radius:2px;opacity:0;
  background:linear-gradient(to bottom,rgb(83 189 235 / 0),#53BDEB 70%,#F7F5F0);box-shadow:0 0 10px 1px rgb(83 189 235 / .55);
  animation:sc-pulso 4.6s cubic-bezier(.45,0,.55,1) infinite}
.sc-pulsos i:nth-child(2){animation-delay:2.3s}
@keyframes sc-pulso{
  0%{transform:translateY(-52px);opacity:0}
  6%{opacity:1}
  50%{transform:translateY(calc(100cqh - 52px));opacity:1}
  54%,100%{transform:translateY(calc(100cqh - 52px));opacity:0}
}
@media (max-width:767px){.sc-pulsos{left:-11px}}
.sc:not(.is-vivo) .sc-pulsos i{animation-play-state:paused}

/* ── a · Puntos de luz en el plano de /servicios (los mueve js/formas.js) ── */
.ins-plano .pl-luz{pointer-events:none;opacity:0}
.ins-plano .pl-luz circle{stroke:none}
.ins-plano .pl-luz__halo{fill:#53BDEB;fill-opacity:.22}
.ins-plano .pl-luz__punto{fill:#F7F5F0}

/* ── b · Gráficos que se dibujan ──
   Receta de Wafer (08-FONDOS-Y-DATOS.md, sección 2): la curva no usa dashoffset, la destapa una
   máscara que barre; los hitos entran a .9 s + i·.62 s; una señal de .1429 del largo recorre la
   curva cada 8 s (aparece al 17,5 % y se va al 87,5 %). Las barras suben una detrás de otra.
   Los trazos van en unidades del dibujo (sin vector-effect: con non-scaling-stroke Chrome rehace
   el SVG en cada scroll). */
.forma-grafico{margin:0;padding:clamp(14px,1.4vw,20px);border-radius:14px;border:1px solid rgb(14 42 92 / .12);background:rgb(239 237 231 / .72);color:#0E2A5C;
  display:flex;flex-direction:column;gap:12px;max-width:520px}
.forma-grafico__cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;font-size:15px;letter-spacing:-.01em}
.forma-grafico__nota{font-weight:500;font-size:13px;opacity:.72}
.forma-grafico svg{display:block;width:100%;height:auto;overflow:visible}
.forma-grafico__leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;line-height:1.3}
.forma-grafico__leyenda li{display:flex;align-items:center;gap:8px}
.forma-grafico__leyenda i{display:block;width:14px;height:2px;background:#0E2A5C}
.forma-grafico__leyenda i.fg-l-barra{height:10px;width:8px;background:#1C4384;opacity:.35;border-radius:1px}
.fg-grilla path{stroke:#0E2A5C;stroke-opacity:.1;stroke-width:.8;fill:none}
.fg-barras rect{fill:#1C4384;fill-opacity:.2;transform-box:fill-box;transform-origin:50% 100%}
.fg-curva{fill:none;stroke:#0E2A5C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fg-senal{fill:none;stroke:#53BDEB;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.1429 1;stroke-dashoffset:.1429;opacity:0}
.fg-hito circle:first-child{fill:#53BDEB;fill-opacity:.28}
.fg-hito circle:last-child{fill:#F7F5F0;stroke:#0E2A5C;stroke-width:1.6}
.fg-hito{transform-box:fill-box;transform-origin:center}
/* Sobre azul: la curva y la grilla pasan a papel, la señal sigue celeste. */
.forma-grafico[data-tono=azul]{background:rgb(8 25 54 / .6);border-color:rgb(247 245 240 / .14);color:#F7F5F0}
.forma-grafico[data-tono=azul] .fg-grilla path{stroke:#F7F5F0}
.forma-grafico[data-tono=azul] .fg-curva{stroke:#F7F5F0}
.forma-grafico[data-tono=azul] .fg-barras rect{fill:#53BDEB}
.forma-grafico[data-tono=azul] .forma-grafico__leyenda i{background:#F7F5F0}
.forma-grafico[data-tono=azul] .forma-grafico__leyenda i.fg-l-barra{background:#53BDEB}
.forma-grafico[data-tono=azul] .fg-hito circle:last-child{fill:#081936;stroke:#F7F5F0}

/* El gráfico en la portada de /servicios: en el hueco de la derecha, junto a la bajada que habla del panel.
   En el celular, debajo del texto y más chico. */
.h8-index-hero--grafico{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(38vw,500px));column-gap:clamp(32px,5vw,96px);align-items:start}
.h8-index-hero--grafico>h1{grid-column:1/-1}
.h8-index-hero--grafico>p{grid-column:1}
.h8-index-hero--grafico>.forma-grafico{grid-column:2;grid-row:2;width:100%;max-width:none;margin-top:clamp(20px,2.4vw,42px);position:relative;z-index:1}
@media (max-width:1023px){
  .h8-index-hero--grafico{display:block}
  .h8-index-hero--grafico>.forma-grafico{margin-top:28px;max-width:420px}
}

@media (prefers-reduced-motion:no-preference){
  .forma-grafico.is-esperando:not(.is-dibujado) .fg-barrido{transform:scaleX(0)}
  .forma-grafico.is-esperando:not(.is-dibujado) .fg-barras rect{transform:scaleY(0)}
  .forma-grafico.is-esperando:not(.is-dibujado) .fg-hito{opacity:0;transform:scale(.4)}
  .forma-grafico.is-esperando:not(.is-dibujado) .fg-grilla{opacity:0}
  .fg-barrido{transform-box:fill-box;transform-origin:0 50%;transition:transform 1.8s cubic-bezier(.65,0,.35,1) .25s}
  .fg-barras rect{transition:transform .8s cubic-bezier(.22,1,.36,1) calc(.15s + var(--i,0) * .07s)}
  .fg-hito{transition:opacity .48s ease-out calc(.9s + var(--i,0) * .62s),transform .48s cubic-bezier(.34,1.56,.64,1) calc(.9s + var(--i,0) * .62s)}
  .fg-grilla{transition:opacity .6s ease}
  .forma-grafico.is-dibujado.is-vivo .fg-senal{animation:fg-senal 8s linear 2.4s infinite}
}
@keyframes fg-senal{
  0%,17.5%{stroke-dashoffset:.1429;opacity:0}
  18%{opacity:1}
  86%{opacity:1}
  87.5%,100%{stroke-dashoffset:-1;opacity:0}
}

/* ── c · Tarjetas que se inclinan ──
   Solo con mouse (js/formas.js no las arma en táctil ni con movimiento reducido). */
.inclinar{transform-style:preserve-3d;will-change:transform;transition:box-shadow .4s ease}
.inclinar-rel{position:relative}
.inclinar-brillo{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%),rgb(255 255 255 / .22),rgb(255 255 255 / .06) 32%,rgb(255 255 255 / 0) 60%);mix-blend-mode:soft-light}
.is-inclinada .inclinar-brillo{opacity:1}

/* ── d · Texto con luz ──
   La palabra no cambia (antes el degradé iba en el texto con background-clip y cortaba el borde de
   las letras: la "e" de "equipo", la "o" final). Encima va una copia en el color de la luz, dentro de
   una ventana con los bordes suaves (.luz__v). La ventana cruza en 9 s y descansa; la copia hace el
   mismo recorrido al revés, así sus letras quedan quietas sobre las originales. Dos transform: los
   mueve el compositor, sin repintar el texto. La capa sobra .2em arriba y abajo y .14em a los lados:
   ninguna letra queda fuera.
   La luz se mezcla con el color del texto (currentColor): sobre azul queda un celeste claro (8,4:1). */
.texto-luz{position:relative}
.luz{position:absolute;inset:-.2em -.14em;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}
.luz__v{position:absolute;inset:0;transform:translateX(-80%);
  -webkit-mask:linear-gradient(100deg,#0000 32%,#000 46%,#000 54%,#0000 68%);mask:linear-gradient(100deg,#0000 32%,#000 46%,#000 54%,#0000 68%)}
.luz__t{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:.2em .14em;white-space:nowrap;
  transform:translateX(80%);translate:var(--dx,0) var(--dy,0);
  color:#9ADAF5;color:color-mix(in srgb,#53BDEB 62%,currentColor)}
/* "Otaviani." del hero ya es celeste: su luz va hacia el blanco. */
.ins-hero-rotulo .luz__t{color:#E6F6FD}
@media (prefers-reduced-motion:no-preference){
  .texto-luz.is-vivo .luz__v{animation:luz-v 9s cubic-bezier(.45,0,.55,1) infinite}
  .texto-luz.is-vivo .luz__t{animation:luz-t 9s cubic-bezier(.45,0,.55,1) infinite}
}
@keyframes luz-v{0%{transform:translateX(-80%)}60%,100%{transform:translateX(80%)}}
@keyframes luz-t{0%{transform:translateX(80%)}60%,100%{transform:translateX(-80%)}}
@media (prefers-reduced-motion:reduce),(forced-colors:active){.luz{display:none}}

/* ── Movimiento reducido: quieto y entero ── */
@media (prefers-reduced-motion:reduce){
  .sc-pulsos i{animation:none;opacity:0}
  .ins-plano .pl-luz{display:none}
  .forma{transition:none}
}