/* ==========================================================================
   base.css — sistema visual + componentes comunes
   Paleta "Higo y crema".

   REGLA: todos los valores de color, espaciado, radio, sombra, tipografia,
   duracion y medida viven en :root. Fuera de este bloque no se escribe
   ningun valor suelto: siempre var(--algo).
   ========================================================================== */

/* ==========================================================================
   Las dos fuentes

   Viven en fuentes/, no en un CDN: asi se ven igual sin internet, que es de
   lo que se trata poder abrir la web con doble clic. Las dos son variables,
   un solo archivo cubre todos los pesos.

   Playfair Display cursiva -> los titulos y los nombres de los juegos.
   Caveat (manuscrita)      -> las notas y los textos de apoyo.
   Lo funcional (botones, campos, tableros) sigue con la fuente del sistema:
   ahi manda que se lea sin dudar.
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  src: url("../fuentes/playfair-display-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../fuentes/caveat.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* --- Paleta base ------------------------------------------------------ */
  --color-fondo: #F7F1EF;        /* Crema      — fondo de pagina */
  --color-superficie: #FFFBFA;   /* Leche      — tarjetas y burbujas */
  --color-pastel: #EBD3D6;       /* Rosa polvo — apoyo, pills, burbujas */
  --color-acento: #8E3B5B;       /* Ciruela    — unico color de accion */
  --color-texto: #3E2E33;        /* Higo       — texto */

  /* --- Derivados de la paleta ------------------------------------------- */
  --color-texto-tenue: #7D6A6E;
  --color-borde: #EBDEDB;
  --color-acento-oscuro: #6E2A44;
  --color-acento-tenue: #F5E8EC;
  --color-sobre-acento: #FFFBFA;
  --color-error: #A6402A;
  --color-error-fondo: #FBEAE3;
  --color-velo: rgba(62, 46, 51, 0.55);

  /* Verde de "juego listo". No es un segundo acento: nunca se toca, solo
     informa. La ciruela sigue siendo lo unico accionable. */
  --color-listo: #46704F;
  --color-listo-tenue: #E6EFE7;

  /* --- Tipografia ------------------------------------------------------- */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Playfair Display", "Iowan Old Style", Georgia,
                   "Times New Roman", serif;
  --fuente-nota: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --peso-titulo: 800;    /* la cursiva de Playfair pide peso, si no se aguada */
  --txt-nota: 1.1875rem; /* 19px — la Caveat pinta chica, va un punto arriba */
  --txt-xs: 0.8125rem;   /* 13px — etiquetas */
  --txt-s: 0.9375rem;    /* 15px — texto de apoyo */
  --txt-m: 1.0625rem;    /* 17px — cuerpo */
  --txt-l: 1.375rem;     /* 22px — titulos */
  --txt-xl: 1.875rem;    /* 30px — titulo de portada */
  --txt-gigante: 6.5rem; /* 104px — el caracter de la victoria, sin recuadro */
  --peso-normal: 400;
  --peso-medio: 600;
  --peso-fuerte: 700;
  --alto-linea: 1.5;
  --alto-linea-titulo: 1.2;
  --espaciado-letras: 0.01em;
  --espaciado-letras-ancho: 0.08em;

  /* --- Espaciado -------------------------------------------------------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;

  /* --- Radios ----------------------------------------------------------- */
  --radio-chico: 12px;
  --radio-tarjeta: 16px;
  --radio-burbuja: 999px;

  /* --- Sombras (siempre suaves y difusas) ------------------------------- */
  --sombra-1: 0 1px 2px rgba(62, 46, 51, 0.04),
              0 4px 14px rgba(62, 46, 51, 0.06);
  --sombra-2: 0 2px 4px rgba(62, 46, 51, 0.05),
              0 14px 32px rgba(62, 46, 51, 0.10);
  --sombra-hundida: 0 1px 3px rgba(62, 46, 51, 0.08);
  --sombra-acento: 0 2px 4px rgba(110, 42, 68, 0.14),
                   0 10px 24px rgba(110, 42, 68, 0.24);
  --sombra-acento-hundida: 0 1px 4px rgba(110, 42, 68, 0.22);

  /* --- Movimiento ------------------------------------------------------- */
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --dur-sacudida: 400ms;
  --dur-exito: 520ms;               /* el pop del boton al acertar la clave */
  --hundir: scale(0.96);
  --hundir-suave: scale(0.98);

  /* --- Medidas ---------------------------------------------------------- */
  --ancho-max: 32rem;
  --alto-toque: 3rem;
  --borde-fino: 1px;
  --proporcion-foto: 4 / 3;
  --giro-flecha: 180deg;
  --abierto: 1fr;
  --cerrado: 0fr;

  /* --- Tarjetas de la rejilla de juegos --------------------------------- */
  /* Cada tarjeta es una foto con el numero en la esquina. Las fotos van en
     a/juegos/ y, mientras no existan, se ve el hueco pastel con el nombre
     del archivo que falta. */
  --alto-nombre: 2.75rem;           /* dos lineas: todas las tarjetas iguales */
  --sombra-burbuja: 0 2px 8px rgba(110, 42, 68, 0.22);

  /* --- Pantalla de carga (solo la portada) ------------------------------ */
  --dur-carga: 1900ms;              /* lo que tarda en llenarse la barra */
  --espera-carga: 1950ms;           /* cuando empieza a irse la pantalla */
  --espera-carga-corta: 450ms;      /* lo mismo, con movimiento reducido */
  --dur-carga-salida: 400ms;
  --curva-carga: cubic-bezier(0.2, 0.75, 0.3, 1);
  --ancho-carga: 17rem;
  --alto-barra: 10px;
  --difuminado-globo: 10px;
  --flotar: 20px;
  --dur-flotar-1: 7s;
  --dur-flotar-2: 9s;
  --dur-flotar-3: 11s;
  --globo-1-x: 10%;
  --globo-1-y: 16%;
  --globo-1-d: 9rem;
  --globo-2-x: 72%;
  --globo-2-y: 24%;
  --globo-2-d: 5rem;
  --globo-3-x: 20%;
  --globo-3-y: 70%;
  --globo-3-d: 7rem;
  --fondo-carga:
    radial-gradient(circle at 15% 12%, var(--color-acento-tenue), transparent 55%),
    radial-gradient(circle at 85% 22%, var(--color-pastel), transparent 50%),
    radial-gradient(circle at 50% 92%, var(--color-superficie), transparent 60%),
    var(--color-fondo);
}

/* ==========================================================================
   Reset corto
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: var(--txt-m);
  line-height: var(--alto-linea);
  letter-spacing: var(--espaciado-letras);
  -webkit-font-smoothing: antialiased;
}

body.sin-scroll { overflow: hidden; }

[hidden] { display: none !important; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

a { color: var(--color-acento); text-decoration: none; }

:focus-visible {
  outline: var(--borde-fino) solid var(--color-acento);
  outline-offset: var(--esp-1);
}

/* ==========================================================================
   Estructura de pagina
   ========================================================================== */

.pagina {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--esp-5) var(--esp-4) var(--esp-8);
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.titulo-portada {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-xl);
  line-height: var(--alto-linea-titulo);
  font-weight: var(--peso-titulo);
  text-align: center;
}

.texto-apoyo {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  color: var(--color-texto-tenue);
  text-align: center;
}

/* Ya no son versalitas: es la nota escrita a mano que va encima del bloque. */
.seccion-titulo {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  font-weight: var(--peso-normal);
  color: var(--color-texto-tenue);
  text-align: center;
}

/* ==========================================================================
   Componente: tarjeta
   ========================================================================== */

.tarjeta {
  background-color: var(--color-superficie);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* ==========================================================================
   Componente: botones
   Los dos se hunden al tocarlos: escala menor + sombra que baja.
   ========================================================================== */

.boton-principal,
.boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alto-toque);
  padding: var(--esp-3) var(--esp-5);
  border: none;
  border-radius: var(--radio-burbuja);
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-l);
  font-weight: var(--peso-fuerte);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-rapida) var(--curva),
              box-shadow var(--dur-rapida) var(--curva),
              background-color var(--dur-rapida) var(--curva),
              opacity var(--dur-rapida) var(--curva);
}

.boton-principal {
  background-color: var(--color-acento);
  color: var(--color-sobre-acento);
  box-shadow: var(--sombra-acento);
}

.boton-principal:active:not(:disabled) {
  transform: var(--hundir);
  box-shadow: var(--sombra-acento-hundida);
  background-color: var(--color-acento-oscuro);
}

.boton-secundario {
  background-color: var(--color-superficie);
  color: var(--color-acento);
  box-shadow: var(--sombra-1);
}

.boton-secundario:active:not(:disabled) {
  transform: var(--hundir);
  box-shadow: var(--sombra-hundida);
  background-color: var(--color-acento-tenue);
}

.boton-principal:disabled,
.boton-secundario:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: var(--sombra-hundida);
}

.boton-ancho { width: 100%; }

/* ==========================================================================
   Componente: pill
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-1) var(--esp-4);
  border-radius: var(--radio-burbuja);
  background-color: var(--color-pastel);
  color: var(--color-texto);
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
}

/* ==========================================================================
   Componente: burbuja (circulo)
   ========================================================================== */

.burbuja {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--esp-7);
  height: var(--esp-7);
  flex: 0 0 auto;
  border-radius: var(--radio-burbuja);
  background-color: var(--color-pastel);
  color: var(--color-acento);
  font-size: var(--txt-l);
  font-weight: var(--peso-fuerte);
}

/* ==========================================================================
   Componente: campo de texto
   ========================================================================== */

.campo {
  width: 100%;
  min-height: var(--alto-toque);
  padding: var(--esp-3) var(--esp-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-burbuja);
  background-color: var(--color-fondo);
  font-size: var(--txt-l);
  font-weight: var(--peso-medio);
  text-align: center;
  letter-spacing: var(--espaciado-letras-ancho);
  transition: border-color var(--dur-rapida) var(--curva),
              box-shadow var(--dur-rapida) var(--curva);
}

.campo::placeholder {
  color: var(--color-texto-tenue);
  font-weight: var(--peso-normal);
  letter-spacing: var(--espaciado-letras);
}

.campo:focus {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: var(--sombra-hundida);
}

/* ==========================================================================
   Componente: mensaje de error
   ========================================================================== */

/* Va en la cursiva de los botones, no en la fuente del sistema: aparece
   pegado encima de Verificar y en medio de una pagina que es toda Playfair
   y Caveat, asi que en sans se leia como un aviso de otra web. */
.mensaje-error {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-error-fondo);
  color: var(--color-error);
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-m);
  font-weight: var(--peso-fuerte);
  text-align: center;
}

.mensaje-error[hidden] { display: none; }

.mensaje-error.sacudir {
  animation: sacudida var(--dur-sacudida) var(--curva);
}

@keyframes sacudida {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(var(--esp-2) * -1)); }
  40% { transform: translateX(var(--esp-2)); }
  60% { transform: translateX(calc(var(--esp-1) * -1)); }
  80% { transform: translateX(var(--esp-1)); }
}

/* ==========================================================================
   Cabecera de juego: "Volver" a la izquierda + titulo centrado
   ========================================================================== */

.cabecera {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-3);
}

.cabecera-titulo {
  grid-column: 2;
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-l);
  line-height: var(--alto-linea-titulo);
  font-weight: var(--peso-titulo);
  text-align: center;
}

.boton-volver {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-toque);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-burbuja);
  background-color: var(--color-superficie);
  color: var(--color-acento);
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-m);
  font-weight: var(--peso-fuerte);
  box-shadow: var(--sombra-1);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-rapida) var(--curva),
              box-shadow var(--dur-rapida) var(--curva);
}

.boton-volver:active {
  transform: var(--hundir);
  box-shadow: var(--sombra-hundida);
}

.cabecera-hueco { grid-column: 3; }

/* ==========================================================================
   Pantalla de victoria: capa por encima del juego
   ========================================================================== */

.victoria {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-5);
  background-color: var(--color-velo);
  animation: aparecer var(--dur-media) var(--curva);
}

.victoria[hidden] { display: none; }

.victoria-tarjeta {
  width: 100%;
  max-width: var(--ancho-max);
  padding: var(--esp-6) var(--esp-5);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  text-align: center;
  animation: subir var(--dur-media) var(--curva);
}

.victoria-titulo {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-l);
  line-height: var(--alto-linea-titulo);
  font-weight: var(--peso-titulo);
  text-wrap: balance;
}

/* El caracter va solo, sin recuadro: es lo unico que hay que anotar de esta
   pantalla, asi que no compite con nada. */
.victoria-caracter {
  color: var(--color-acento);
  font-size: var(--txt-gigante);
  line-height: var(--alto-linea-titulo);
  font-weight: var(--peso-fuerte);
}

.victoria-posicion {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  color: var(--color-texto-tenue);
}

@keyframes aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(var(--esp-5)) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  :root {
    --hundir: none;
    --hundir-suave: none;
  }
}

/* ==========================================================================
   Portada (index.html)
   ========================================================================== */

.forma {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* El boton de la clave cuando acierta: un pop corto y el verde de "listo"
   mientras se va al album. Va despues de :disabled a proposito, para ganarle
   la opacidad: el boton sigue desactivado, pero celebrando a plena luz. */
.boton-principal.exito,
.boton-principal.exito:disabled {
  background-color: var(--color-listo);
  box-shadow: var(--sombra-hundida);
  opacity: 1;
  animation: exito-boton var(--dur-exito) var(--curva);
}

@keyframes exito-boton {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.juego-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* recorta la foto en las esquinas */
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-1);
  color: var(--color-texto);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-rapida) var(--curva),
              box-shadow var(--dur-rapida) var(--curva);
}

.juego-tarjeta:active {
  transform: var(--hundir-suave);
  box-shadow: var(--sombra-hundida);
}

/* La foto del juego, a sangre contra los bordes de la tarjeta. Si el archivo
   todavia no esta, queda el hueco pastel con el nombre que le toca. */
.juego-foto {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--proporcion-foto);
  background-color: var(--color-pastel);
  overflow: hidden;
}

.juego-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.juego-foto.vacio::after {
  content: attr(data-archivo);
  padding: var(--esp-2);
  color: var(--color-texto-tenue);
  font-size: var(--txt-xs);
  text-align: center;
}

/* El numero va en la esquina, encima de la foto: fondo solido y sombra para
   que se lea igual de bien sea cual sea la foto que vaya debajo. */
.juego-tarjeta .burbuja {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  width: var(--esp-6);
  height: var(--esp-6);
  background-color: var(--color-superficie);
  color: var(--color-acento);
  font-size: var(--txt-m);
  box-shadow: var(--sombra-burbuja);
}

.juego-nombre {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: var(--alto-nombre);
  padding: var(--esp-2) var(--esp-3);
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-m);
  line-height: var(--alto-linea-titulo);
  font-weight: var(--peso-fuerte);
  text-wrap: balance;
}

/* ==========================================================================
   Marco de foto
   Si la foto no existe todavia, se ve el hueco pastel con su nota.
   ========================================================================== */

.marco-foto {
  position: relative;
  width: 100%;
  aspect-ratio: var(--proporcion-foto);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-pastel);
  overflow: hidden;
}

.marco-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marco-foto figcaption {
  display: none;
  padding: var(--esp-4);
  color: var(--color-texto-tenue);
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  text-align: center;
}

.marco-foto.vacio figcaption { display: block; }

/* ==========================================================================
   Desplegable (el boton que abre las instrucciones)
   ========================================================================== */

/* El boton y su panel van juntos, sin el gap de la tarjeta en medio:
   asi, cerrado, no deja un hueco muerto. */
.desplegable {
  display: flex;
  flex-direction: column;
}

.disparador {
  justify-content: space-between;
  text-align: left;
}

.flecha {
  display: inline-block;
  color: var(--color-acento);
  transition: transform var(--dur-media) var(--curva);
}

.disparador[aria-expanded="true"] .flecha {
  transform: rotate(var(--giro-flecha));
}

.panel {
  display: grid;
  grid-template-rows: var(--cerrado);
  transition: grid-template-rows var(--dur-media) var(--curva);
}

.panel.abierto { grid-template-rows: var(--abierto); }

.panel-interior {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.panel .texto-apoyo:first-child { padding-top: var(--esp-3); }

/* ==========================================================================
   Juego ya resuelto
   ========================================================================== */

.marca {
  position: absolute;
  top: var(--esp-2);
  right: var(--esp-2);
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--esp-5);
  height: var(--esp-5);
  border-radius: var(--radio-burbuja);
  background-color: var(--color-listo);
  color: var(--color-superficie);
  font-size: var(--txt-xs);
  font-weight: var(--peso-fuerte);
}

.juego-tarjeta.listo .marca { display: flex; }

.juego-tarjeta.listo { background-color: var(--color-listo-tenue); }

/* La burbuja se queda blanca: sobre una foto, verde con verde se leeria mal. */
.juego-tarjeta.listo .burbuja { color: var(--color-listo); }

.juego-tarjeta.listo.recien .marca {
  animation: brotar var(--dur-media) var(--curva);
}

@keyframes brotar {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.fila-centro {
  display: flex;
  justify-content: center;
  margin-top: var(--esp-3);
}

.pill-listo {
  background-color: var(--color-listo-tenue);
  color: var(--color-listo);
}

.solo-lectores {
  position: absolute;
  width: var(--borde-fino);
  height: var(--borde-fino);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Pantalla de carga

   Solo la portada, y solo al entrar de cero: si la URL trae progreso
   (vuelve de un juego), el <script> de la cabecera pone .sin-carga en
   <html> y esto no llega a pintarse.

   Todo el tiempo lo lleva CSS: la barra se llena y la pantalla se va sola.
   Asi no depende de JS y no puede quedarse colgada.
   ========================================================================== */

.sin-carga .carga { display: none; }

.carga {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--fondo-carga);
  animation: salir var(--dur-carga-salida) var(--curva)
             var(--espera-carga) forwards;
}

.globo {
  position: absolute;
  border-radius: var(--radio-burbuja);
  filter: blur(var(--difuminado-globo));
  animation: flotar var(--dur-flotar-1) ease-in-out infinite alternate;
}

.globo-1 {
  left: var(--globo-1-x);
  top: var(--globo-1-y);
  width: var(--globo-1-d);
  height: var(--globo-1-d);
  background-color: var(--color-pastel);
}

.globo-2 {
  left: var(--globo-2-x);
  top: var(--globo-2-y);
  width: var(--globo-2-d);
  height: var(--globo-2-d);
  background-color: var(--color-acento-tenue);
  animation-duration: var(--dur-flotar-2);
}

.globo-3 {
  left: var(--globo-3-x);
  top: var(--globo-3-y);
  width: var(--globo-3-d);
  height: var(--globo-3-d);
  background-color: var(--color-superficie);
  animation-duration: var(--dur-flotar-3);
}

.carga-centro {
  position: relative;
  width: var(--ancho-carga);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  text-align: center;
}

.carga-titulo {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--txt-xl);
  line-height: var(--alto-linea-titulo);
  font-weight: var(--peso-titulo);
}

.carga-texto {
  font-family: var(--fuente-nota);
  font-size: var(--txt-nota);
  color: var(--color-texto-tenue);
}

.barra {
  width: 100%;
  height: var(--alto-barra);
  border-radius: var(--radio-burbuja);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-hundida);
  overflow: hidden;
}

.barra-relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radio-burbuja);
  background-color: var(--color-acento);
  animation: llenar var(--dur-carga) var(--curva-carga) forwards;
}

@keyframes llenar {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes flotar {
  to { transform: translateY(calc(var(--flotar) * -1)); }
}

/* La visibilidad cambia en el ultimo tramo para que el fundido se vea entero. */
@keyframes salir {
  0% { opacity: 1; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .carga { animation-delay: var(--espera-carga-corta); }
}