/* ============================================================
   ATLA — marketing.css
   Universo propio de Marketing: crema, tinta negra y color por todos lados.

   Es la página RUIDOSA del sitio, a propósito y por pedido explícito del
   cliente ("una locura de colores y cosas por todos lados"). Contabilidad
   grita seriedad; ésta grita lo contrario. Que sean opuestas es el punto:
   un estudio de marketing que se presenta en gris no se vende solo.

   La referencia es beutlerink.com más las cuatro imágenes de
   `Estilos secciones/Marketing/`. Las cuatro coinciden en dos cosas:
   tipografía display enorme, y el color usado como MARCADOR encima del
   texto, no como lavado de fondo. Eso es lo que se copia.

   ============================================================
   LA REGLA DE COLOR DE ESTA PÁGINA — memorizarla antes de tocar nada:

     · El turquesa es el ÚNICO que lleva texto blanco encima (5,48:1).
     · Todos los demás llevan tinta NEGRA. El coral con blanco da 3,40:1
       y no pasa; con negro da 5,10:1 y pasa.

   Si se agrega un color nuevo, medirlo antes de usarlo de fondo.
   ============================================================ */

.pag-marketing {
  /* Tipografía propia (24/08/2026). Bricolage Grotesque: una grotesca de
     display contemporánea, con formas que se salen del molde —la Q de cola
     recta, la a de una sola panza— sin volverse un capricho ilegible. Es el
     equivalente tipográfico de lo que esta página ya hace con el color.
     El cuerpo va en Manrope, geométrica y limpia: con un titular así de
     ruidoso el cuerpo tiene que callarse. Y es la única página donde el
     display NO es la familia del wordmark: acá el titular grita, la marca no.

     ⚠️ Reemplazó a Syne, que el cliente rechazó porque "las g quedan
     cortadas por debajo". La cola cortada NO era culpa de la fuente: era el
     interlineado 1.04 del sistema, más chico que la caja de línea real de
     Syne (101px de caja contra 116px de texto), así que cada renglón se
     comía la cola del de arriba. Se arregló con el token `--lh-display`; si
     mañana se cambia de familia, hay que **remedir** (§12.1).

     Se probó también Unbounded, que el cliente eligió primero y descartó al
     verla puesta: es mucho más ancha, así que el mismo titular ocupaba dos
     renglones más y el hero perdía aire. */
  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-display:  800;
  --track-display: -0.02em;
  --font-cifras:  var(--font-display);   /* las cifras 01–05 siguen al titular */
  /* 1.14 y no el 1.08 del sistema: el titular de esta página es de tres
     renglones y su cola de "Q" es larga. Con menos, la cola queda a un pelo
     de la "ll" del renglón siguiente — que es justo lo que el cliente vio. */
  --lh-display:    1.14;

  --crema:     #FBF7F0;   /* fondo base, más cálido que el --paper del sitio */
  --crema-2:   #F2E9DA;
  --tinta:     #14161A;

  --turquesa:  #17707A;   /* el color de Marketing en todo el sitio */
  --menta:     #A8DCD0;
  /* Aclarado desde #E8573F. El original daba 5,06:1 con tinta negra a
     full, y eso no deja margen: cualquier transparencia encima caía por
     debajo del piso. Con este, la línea tenue todavía entra. */
  --coral:     #F0704F;
  --mostaza:   #F5B93C;
  --lila:      #CDBEEE;

  background: var(--crema);
  color: var(--tinta);

  --ink: var(--tinta);
  --ink-muted: #55585F;
  --line: rgba(20, 22, 26, 0.14);
  --line-soft: rgba(20, 22, 26, 0.07);
  --accent: var(--turquesa);
  --paper: var(--crema);
}

/* El isotipo toma los colores de la página: es el hilo conductor del sitio
   (§5.4), así que se recolorea en vez de quedarse con la paleta de marca. */
.pag-marketing {
  --logo-1: var(--menta);
  --logo-2: var(--turquesa);
  --logo-3: var(--coral);
  --logo-4: var(--tinta);
  --logo-diamond: var(--mostaza);
  --logo-rule: var(--tinta);
}

/* Fondo sólido y sin `backdrop-filter`. Dos motivos, los dos verificados:
   desenfocar la franja de atrás en cada cuadro de scroll es de lo más caro
   que se le puede pedir a un elemento fijo (§7ter), y acá además se veía
   feo: sobre un hero lleno de formas y botones negros el desenfoque deja
   manchones que parecen un error de render. */
.pag-marketing .topbar.is-scrolled {
  background: var(--crema);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}

/* ============================================================
   1. El marcador de resaltador
   ============================================================
   El gesto firma de la página. Sale de "Tiny Coast" (imagen 4): una
   mancha de color detrás de las palabras que importan, apenas torcida
   para que parezca hecha a mano.

   Va en `z-index: -1`, que funciona incluso dentro de `[data-reveal]`
   —que crea contexto de apilado por el `transform`— porque un hijo con
   z-index negativo se pinta ARRIBA del fondo de su contexto y DEBAJO del
   texto. Justo lo que se busca. */
.marca {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.marca::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.1em;
  right: -0.1em;
  top: 0.16em;
  bottom: 0.1em;
  background: var(--m, var(--menta));
  border-radius: 0.06em;
  transform: skewX(-2.5deg) scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--m-delay, 0ms);
}

[data-reveal].is-in .marca::before,
.is-in .marca::before {
  transform: skewX(-2.5deg) scaleX(1);
}

/* ============================================================
   2. Hero
   ============================================================ */
.hero-mk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sangra por debajo de la cabecera (§6). No es por una foto —acá no hay—
     sino para que el papel cuadriculado y el collage lleguen al borde de
     arriba: si el hero arranca debajo de la barra, detrás del header queda
     una franja de marfil muerto de 226px. Ahora la barra flota sobre la
     textura y las formas pueden pasarle por atrás. */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sp-3));
  padding-bottom: clamp(4rem, 9vw, 7rem);
  /* PAPEL DE BLOC, no cuadriculado (24/08/2026).

     Antes eran cuadraditos de 34px, y el cliente lo marcó: "tiene cuadrados en
     líneas como la sección de Diseño Web". Tenía razón, y el problema no era
     estético sino de identidad — la cuadrícula es la textura de Diseño Web
     (`rejilla.js` en su hero, la retícula de sus secciones, el minimapa de
     código en Planes). Repetirla acá le sacaba a Marketing lo único que el
     fondo puede aportarle: ser de otro material.

     Renglones horizontales y un filete de margen, o sea una hoja de cuaderno.
     Y esa no es una idea decorativa: **el gesto firma de esta página es un
     resaltador** (`.marca`), y un resaltador vive sobre renglones, no sobre
     papel milimetrado. El fondo pasa a ser el soporte del gesto en vez de
     competir con él.

     El filete del margen se alinea con el gutter del contenedor —12px, o sea
     justo a la izquierda de donde arranca el texto— así se lee como el margen
     de una hoja y no como una raya suelta. Va en coral al 26%: es color de la
     página, pero tan tenue que no compite con las bandas.

     Sigue siendo puro CSS: dos degradados, cero peticiones. */
  /* El `max(14px, …)` es por el móvil: el gutter cae a 20px y sin él la raya
     quedaría a 7px del borde, leyéndose como un error de render en vez de
     como el margen de una hoja. */
  --margen-x: max(14px, calc(var(--gutter) - 13px));
  background-image:
    linear-gradient(90deg,
      transparent var(--margen-x),
      color-mix(in srgb, var(--coral) 26%, transparent) var(--margen-x),
      color-mix(in srgb, var(--coral) 26%, transparent) calc(var(--margen-x) + 1px),
      transparent calc(var(--margen-x) + 1px)),
    repeating-linear-gradient(180deg,
      transparent 0, transparent 33px,
      var(--line-soft) 33px, var(--line-soft) 34px);
  background-repeat: no-repeat, repeat;
}

.hero-mk .label { color: var(--turquesa); }

.hero-mk__titulo {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.6vw, 6.2rem);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  margin-top: var(--sp-3);
  max-width: 15ch;
}

.hero-mk__lead {
  margin-top: var(--sp-4);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--ink-muted);
}

.hero-mk__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* ---------- El collage ----------
   "Cosas por todos lados", pero con reglas: ninguna forma pisa la columna
   de texto (que llega hasta 15ch), todas viven en el aire de la derecha y
   en los bordes, y ninguna lleva información. Son decoración honesta:
   `aria-hidden` y sin eventos de puntero. */
.collage {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.forma { position: absolute; }

.forma--circulo   { border-radius: 50%; background: var(--f, var(--menta)); }
.forma--anillo    { border-radius: 50%; border: 3px solid var(--f, var(--coral)); }
.forma--cuadrado  { background: var(--f, var(--mostaza)); }

/* Semitono de puntos: el recurso de imprenta que usan beutlerink y tbh. */
.forma--puntos {
  background-image: radial-gradient(var(--f, var(--turquesa)) 1.6px, transparent 1.7px);
  background-size: 11px 11px;
  opacity: 0.55;
}

.forma--rayas {
  background-image: repeating-linear-gradient(
    45deg, var(--f, var(--tinta)) 0 2px, transparent 2px 8px);
  opacity: 0.5;
}

/* Triángulo y cruz: dos formas primarias que le faltaban al collage.
   Entraron al sacar las manos (31/08/2026) y son geometría pura, igual
   que el resto — cero imágenes, cero peticiones. */
.forma--triangulo {
  background: var(--f, var(--turquesa));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Una cruz de imprenta (la marca de registro), hecha con dos barras.
   Va con `no-repeat` y tamaños distintos por eje: la horizontal ocupa
   todo el ancho y un quinto del alto, la vertical al revés. */
.forma--cruz {
  background-image:
    linear-gradient(var(--f, var(--coral)) 0 0),
    linear-gradient(var(--f, var(--coral)) 0 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 20%, 20% 100%;
}

/* Arco: un cuarto de círculo, el guiño al "ascenso" de la marca. */
.forma--arco {
  border: 10px solid var(--f, var(--lila));
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

/* Posiciones. Todas en % para que acompañen el ancho. */
.forma--1 { top: 3%;  right: 6%;   width: 118px; height: 118px; }
/* Sube a la franja del header, que antes era marfil vacío. */
.forma--2 { top: 5%;  right: 21%;  width: 62px;  height: 62px; }
.forma--3 { top: 46%; right: 4%;   width: 150px; height: 150px; transform: rotate(-18deg); }
.forma--4 { bottom: 12%; right: 30%; width: 96px; height: 96px; }
.forma--5 { top: 3%;  left: 12%;   width: 74px;  height: 74px; transform: rotate(12deg); }
/* A 6% las rayas se le montaban al primer boton del hero (32px de solape,
   medido): el mismo defecto que el media query de 1080 ya evitaba en
   angosto, pero en escritorio seguia ahi. */
.forma--6 { bottom: 2%; left: 4%;  width: 130px; height: 66px; }

/* Las cuatro que reemplazan a las manos (31/08/2026).

   `--7` es la única del margen izquierdo a media altura: ahí sólo había
   el arco arriba y las rayas abajo, y el tramo del medio quedaba muerto.
   Entra en los 157px de margen sin tocar la columna de texto.

   Las otras tres caen en los tres huecos verticales del borde derecho:
   entre la calcomanía y el semitono, entre el semitono y la segunda
   calcomanía, y debajo de esa última. El rombo es un cuadrado girado —
   guiño al rombo de la cima del isotipo, en la mostaza de esta página. */
.forma--7  { top: 42%; left: 2%;    width: 96px; height: 84px; transform: rotate(-12deg); }
.forma--8  { top: 17%; right: 11%;  width: 72px; height: 72px; transform: rotate(45deg); }
.forma--9  { top: 66%; right: 15%;  width: 54px; height: 54px; transform: rotate(18deg); }
.forma--10 { bottom: 4%; right: 7%; width: 84px; height: 84px; }
.forma--11 { top: 29%; right: 20%;  width: 88px; height: 88px; transform: rotate(-140deg); }

/* El margen izquierdo se lo come el contenedor al centrarse: mide
   `max(gutter, (vw - 1240)/2 + gutter)`, o sea que a 1366 el texto ya
   arranca en 118px y el triangulo de 96 no entra. Se achica primero y
   se apaga cuando deja de haber margen. Medido en 1440/1400/1366/1300/
   1280/1200/1100. */
@media (max-width: 1399px) {
  .forma--7 { left: 4px; width: 54px; height: 48px; }
}
@media (max-width: 1299px) {
  .forma--7 { display: none; }
}

/* El semitono se apagaba a 720, pero en 768 todavia caia DETRAS del
   titular —tres renglones medidos— y un semitono atras de texto lo
   vuelve ilegible. El corte real es 900. */
@media (max-width: 900px) {
  .forma--3 { display: none; }
}

/* Las rayas viven abajo a la izquierda, que es exactamente donde caen los
   botones del hero. A 1440 alcanzo con bajarlas, pero de 1200 para abajo
   el hero se acorta y vuelven a cruzarlos (medido a 1100). */
@media (max-width: 1200px) {
  .forma--6 { display: none; }
}

@media (max-width: 1080px) {
  /* De acá para abajo el texto ocupa el ancho y el collage estorbaría.
     Sobreviven solo las formas de los bordes, que siguen dando ruido
     sin meterse con la lectura. */
  .forma--2, .forma--4, .forma--5 { display: none; }
  /* Las cuatro nuevas siguen la misma regla: el triángulo cae sobre la
     columna de texto en cuanto ésta ocupa el ancho, y las tres de la
     derecha quedan detrás del titular. */
  .forma--7, .forma--8, .forma--9, .forma--10, .forma--11 { display: none; }

  .forma--1 { width: 78px; height: 78px; opacity: 0.85; }
  .forma--3 { width: 96px; height: 96px; opacity: 0.7; }
}

/* ============================================================
   3. Cinta curva (curva.js)
   ============================================================
   La marquesina que sigue una curva. Es puramente decorativa: el texto
   real está en el `aria-label` del contenedor apagado, así que el SVG va
   oculto a los lectores de pantalla. */
.cinta {
  background: var(--turquesa);
  color: var(--crema);
  overflow: hidden;
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
  cursor: grab;
  user-select: none;
}
.cinta:active { cursor: grabbing; }

.cinta svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cinta text {
  font-family: var(--font-display);
  font-size: 68px;
  fill: currentColor;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .cinta { cursor: default; }
}

/* ============================================================
   4. Bandas de servicio
   ============================================================
   NO son tarjetas (§5.1): son secciones a sangre completa, cada una con
   su color. Una banda tiene fondo; una tarjeta tiene borde y flota en una
   grilla. La diferencia importa: la grilla de tarjetas es justamente lo
   que se descartó del diseño viejo.

   Todas llevan tinta negra encima. Ver la regla de color arriba. */
.banda {
  background: var(--fondo, var(--menta));
  color: var(--tinta);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.banda + .banda { border-top: 2px solid var(--tinta); }

.banda__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.banda__num {
  font-family: var(--font-cifras, var(--font-mono));
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  /* Color propio en vez de tinta con opacidad. Ghosteado con `opacity`
     daba 2,06:1 sobre la menta y 2,61:1 sobre el coral —ni siquiera el
     3:1 que se le pide a un texto grande—, y encima desperdiciaba la
     ocasión de meter un color más. Cada banda declara el suyo. */
  color: var(--num, var(--turquesa));
}

/* El problema en primera persona, igual que en Consultoría y Contabilidad
   (§7ter). Cambia el envoltorio, no la gramática: el visitante se reconoce
   antes de leer el nombre del producto. */
.banda__voz {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.banda__nombre {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.banda__desc {
  margin-top: var(--sp-2);
  max-width: 56ch;
  font-size: var(--fs-lead);
}

.banda__incluye {
  margin-top: var(--sp-3);
  max-width: 56ch;
  font-size: var(--fs-small);
  /* 0.82 y no menos: es lo que aguanta la banda coral, que es la más
     oscura de las tres y la que manda acá. Sobre menta y mostaza sobra. */
  color: rgba(20, 22, 26, 0.82);
}

.banda__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  border-bottom: 2px solid var(--tinta);
  transition: gap var(--dur) var(--ease);
}
.banda__cta:hover { gap: 1em; }

/* Formas sueltas dentro de cada banda, para que el color no quede plano. */
.banda .forma { z-index: -1; }
.banda--1 .forma--a { top: -40px;  right: 8%;  width: 170px; height: 170px; }
.banda--2 .forma--a { bottom: -50px; right: 14%; width: 190px; height: 190px; }
.banda--3 .forma--a { top: 12%;    right: 6%;  width: 130px; height: 130px; }

@media (max-width: 720px) {
  .banda__inner { grid-template-columns: 1fr; gap: var(--sp-2); }
  .banda .forma { display: none; }
}

/* ============================================================
   5. Cierre
   ============================================================
   Turquesa con texto claro: el único lugar de la página donde el color
   lleva tinta blanca, y cierra con el color que Marketing tiene en el
   resto del sitio. */
.cierre-mk {
  background: var(--turquesa);
  color: var(--crema);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}

/* Menta aclarada, no la menta de la paleta: sobre el turquesa la menta
   pura da 3,8:1 y una etiqueta de 12px necesita 4,5. */
.cierre-mk .label { color: #D7F0E8; }
.cierre-mk__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin: var(--sp-2) auto var(--sp-3);
  max-width: 20ch;
}
/* 0.92: a 0.82 daba 4,2:1 y esto no califica como texto grande. */
.cierre-mk__lead { max-width: 48ch; margin-inline: auto; color: rgba(251, 247, 240, 0.92); }
.cierre-mk .tick { background: var(--menta); }

.cierre-mk .btn {
  color: var(--crema);
  border-color: rgba(251, 247, 240, 0.5);
  margin-top: var(--sp-4);
}
.cierre-mk .btn--solid {
  background: var(--crema);
  color: var(--turquesa);
  border-color: var(--crema);
}
.cierre-mk .btn--solid:hover { background: transparent; color: var(--crema); }

/* ============================================================
   6. Pie
   ============================================================ */
.pag-marketing .footer { background: var(--crema-2); border-top-color: var(--line); }

/* ============================================================
   8. Responsive general
   ============================================================ */
@media (max-width: 820px) {
  /* Las burbujas son fijas y flotan sin fondo, así que el hero tiene que
     arrancar por debajo: 52px de burbuja + 1rem de aire arriba + aire
     abajo. Con el padding chico el titular quedaba pegado. */
  .hero-mk { margin-top: 0; padding-block: 7rem clamp(3rem, 8vw, 4.5rem); }
  .hero-mk__titulo { max-width: 100%; }
}

@media (max-width: 720px) {
  /* A este ancho el texto ocupa todo y estas dos formas quedaban DEBAJO
     del párrafo y del botón: el semitono de puntos atrás de una línea de
     texto la vuelve ilegible, y las rayas atravesaban un botón de borde
     transparente. Queda solo el círculo de la esquina, que no molesta. */
  .cinta text { font-size: 96px; }
}

/* ============================================================
   9. Menú en burbujas — SOLO móvil y SOLO esta página
   ============================================================
   Se probó en las siete páginas y no funcionó: en los universos sobrios
   —Contabilidad sobre todo— las pastillas rotadas con sombra dura peleaban
   con el tono de la página en vez de acompañarlo. Queda donde nació y donde
   tiene sentido, que es la página ruidosa. Las otras seis navegan con la
   franja de píldoras de `base.css`, cada una con el punto de su color.

   Adaptado de BubbleMenu (reactbits.dev), que depende de GSAP. Acá el
   rebote es una curva de CSS que sobrepasa y vuelve —el equivalente honesto
   de `back.out(1.5)`— y el escalonado es `transition-delay` calculado desde
   `--i`. Cero librerías. La lógica está en `assets/js/burbujas.js`.
   ============================================================ */
.burbujas { display: none; }

@media (max-width: 820px) {
  /* En esta página la barra se va del todo: navega el menú. */
  .pag-marketing .topbar { display: none; }
  /* Sin barra fija no hay hueco que reservar. (`main.js` publica 0px por su
     cuenta al medir una barra oculta, pero esto vale igual sin JavaScript.) */
  body.pag-marketing { padding-top: 0; }

  .pag-marketing .burbujas {
    display: flex;
    position: fixed;
    top: 1rem;
    left: 0;
    right: 0;
    z-index: 90;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-inline: var(--sp-2);
    pointer-events: none;
  }

  .burbuja {
    pointer-events: auto;
    background: var(--crema);
    border: 2px solid var(--tinta);
    border-radius: 999px;
    box-shadow: 3px 4px 0 var(--tinta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    /* Por encima del panel. El panel es hermano posterior dentro del mismo
       contenedor, así que sin esto se pintaba arriba y se tragaba las dos
       burbujas: desaparecían el logo —la única constante del sitio— y el
       botón de cerrar, dejando el menú sin salida. */
    position: relative;
    z-index: 2;
  }

  /* La marca sigue presente: es lo único que no cambia entre las siete
     páginas, así que el menú no puede hacerla desaparecer. */
  .burbuja--marca { gap: 0.5em; padding-inline: 0.9rem; }
  .burbuja--marca .logo-icon { width: 24px; height: 24px; }
  .burbuja--marca .brand__word {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    color: var(--tinta);
  }

  .burbuja--boton {
    width: 52px;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 0;
  }

  .burbuja__raya {
    width: 22px;
    height: 2.5px;
    background: var(--tinta);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .burbuja--boton[aria-expanded="true"] .burbuja__raya:first-child {
    transform: translateY(4.25px) rotate(45deg);
  }
  .burbuja--boton[aria-expanded="true"] .burbuja__raya:last-child {
    transform: translateY(-4.25px) rotate(-45deg);
  }

  /* ---------- El panel ---------- */
  .burbujas__panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    /* SIN ESTO LOS LINKS NO RECIBEN EL CLIC. El contenedor `.burbujas` va
       con `pointer-events: none` para que las burbujas floten sin bloquear
       la página, y el panel es hijo suyo: heredaba el `none` y quedaba de
       decorado. Cerrado se apaga de nuevo —ver abajo—, así que solo escucha
       mientras está abierto. */
    pointer-events: none;
    background: var(--crema);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    padding: 6rem var(--sp-2) var(--sp-4);
    /* `visibility` y no solo opacidad: un panel invisible pero presente se
       sigue llevando el foco del teclado. */
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .burbujas__panel[data-abierto="true"] {
    visibility: visible;
    opacity: 1;
    /* Escucha el clic SOLO abierto, y esto no se apoya en la transición.
       `visibility` sola no alcanzaba: al cerrar tarda `--dur` en volver a
       `hidden` (el retardo está puesto a propósito, para que el panel no
       desaparezca de golpe a mitad del desvanecido), y durante esos 320ms
       un panel a pantalla completa ya invisible se seguía comiendo los
       clics de toda la página. `pointer-events` cambia en el acto. */
    pointer-events: auto;
    transition: opacity var(--dur) var(--ease), visibility 0s;
  }

  .burbujas__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    background: var(--svc, var(--crema));
    color: var(--svc-on, #FFFFFF);
    border: 2px solid var(--tinta);
    box-shadow: 4px 5px 0 var(--tinta);
    /* Cada una torcida un poco distinto, como las del original. */
    transform: rotate(var(--rot, 0deg)) scale(0.6);
    opacity: 0;
    /* La curva que sobrepasa y vuelve: es lo que hacía `back.out(1.5)`. */
    transition:
      transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 300ms var(--ease),
      filter var(--dur) var(--ease);
  }

  .burbujas__panel[data-abierto="true"] .burbujas__link {
    transform: rotate(var(--rot, 0deg)) scale(1);
    opacity: 1;
    /* Escalonado: 70ms por posición, calculado desde --i. */
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  /* La página en la que ya estás no se puede visitar: se marca hundida,
     sin sombra, en vez de fingir que es un destino más. */
  .burbujas__link[aria-current="page"],
  .burbujas__panel[data-abierto="true"] .burbujas__link[aria-current="page"] {
    box-shadow: none;
    transform: rotate(var(--rot, 0deg)) translate(4px, 5px);
  }

  .burbujas__link:active { filter: brightness(1.12); }

  /* Contacto no es un servicio: va sin relleno, para que las cinco de
     arriba se lean como un grupo y ésta como otra cosa. */
  .burbujas__link--contacto {
    background: transparent;
    color: var(--tinta);
  }
}

@media (prefers-reduced-motion: reduce) {
  .burbujas__link { transform: none !important; opacity: 1; transition: none; }
}