/* ════════════════════════════════════════════════════════════════════════════
   ESCALA DE CAPAS · un solo sitio donde se decide qué va encima de qué
   
   Había cuatro elementos flotantes puestos por cuatro scripts distintos, cada
   uno eligiendo su z-index a ojo: dos compartían el 9998 y se pisaban entre sí
   y con el aviso de cookies.
   
   Cuando dos elementos comparten z-index, el que gana depende del orden en que
   se carguen los scripts. Eso no es una decisión, es un accidente.
   
   El orden de abajo SÍ es una decisión, y este es el motivo:
   
     · Las cookies mandan sobre todo lo demás. Es una obligación legal y hasta
       que no se responde no debería taparlo nada.
     · La presentación de entrada va por encima del contenido pero por debajo
       de las cookies: es decorativa.
     · Los botones flotantes van al fondo. Son atajos, no interrupciones.
   
   Se apilan en vertical desde abajo a la derecha, con hueco entre ellos: por
   eso cada uno tiene su distancia al borde reservada.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --capa-contenido:      1;
  --capa-navegacion:    50;
  --capa-flotante-2:  9000;   /* Orbita: el de más abajo */
  --capa-flotante-1:  9100;   /* WhatsApp: justo encima */
  --capa-ventana:     9500;   /* lo que abre un flotante al pulsarlo */
  --capa-presentacion: 9800;  /* animación de entrada */
  --capa-cookies:    10000;   /* siempre lo último: es obligación legal */

  /* Sitio reservado a cada flotante, contando desde abajo. */
  --flotante-borde:    20px;
  --flotante-alto:     64px;
  --flotante-hueco:    12px;
  --flotante-1-abajo:  var(--flotante-borde);                                       /* 20px  */
  --flotante-2-abajo:  calc(var(--flotante-borde) + var(--flotante-alto) + var(--flotante-hueco));  /* 96px */
}

/* Con el aviso de cookies abierto, los flotantes se apartan: taparlo con un
   botón de WhatsApp es justo lo que no puede pasar. */
body.cookies-abiertas .flotante-apilado {
  transform: translateY(-120px);
  transition: transform 0.25s ease;
}

.flotante-apilado { transition: transform 0.25s ease; }

/* Con la ventana de WhatsApp abierta, el botón de Orbita se aparta: la ventana
   mide 372 px de alto y lo tapaba por completo. Medido, no estimado. */
body.wa-abierto #orbita-flotante,
body.wa-abierto .orbita-flotante {
  /* A un lado, no hacia arriba: subiéndolo acababa sobre el borde superior de
     la ventana, que mide 372 px. Apartarlo en horizontal lo saca del todo y
     además lo deja donde se espera encontrarlo, en la misma altura. */
  transform: translateX(-336px);
  transition: transform 0.25s ease;
}

/* En pantallas estrechas no hay sitio al lado: ahí sí se oculta, porque con la
   ventana abierta el botón no se va a usar. */
@media (max-width: 700px) {
  body.wa-abierto #orbita-flotante,
  body.wa-abierto .orbita-flotante {
    transform: translateY(24px);
    opacity: 0;
    pointer-events: none;
  }
}

/* En pantallas estrechas no caben dos apilados y una ventana abierta: se
   reducen y se pegan más al borde. */
@media (max-width: 480px) {
  :root {
    --flotante-borde: 14px;
    --flotante-alto:  52px;
    --flotante-hueco:  8px;
  }
}