main{ padding: 1rem; max-width: 42rem; margin:0 auto; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height: 1.5; color: #111827; }

h1{text-align: center; margin: 0 auto;font-size: 3rem; margin-bottom: 0.5rem;background-color: cadetblue; border-radius: 1rem;}
p{ text-align:justify; margin-bottom: 1rem; color: #374151; }
/* menu.css -- Estilos escalables para el menú flotante */

/* ---- Variables para escalar y personalizar ---- */
:root{
  --fm-size: 3.25rem;           /* tamaño del botón */
  --fm-gap: 0.6rem;             /* espacio interior */
  --fm-radius: 0.6rem;
  --fm-bg: #0f1724;             /* color del panel */
  --fm-accent: #ff6b6b;         /* color accent */
  --fm-foreground: #ffffff;
  --fm-shadow: 0 8px 24px rgba(2,6,23,0.5);
  --fm-position: left;        /* 'left' o 'right' */
  --fm-offset-x: 1rem;         /* separación desde borde */
  --fm-offset-y: 1rem;
  --fm-max-width: 18rem;       /* anchura del panel en desktop */
  --fm-transition: 240ms cubic-bezier(.2,.9,.2,1);
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* pequeña clase de accesibilidad para lectores de pantalla */
.sr-only{
  position: absolute;
  width: 1px;height: 1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Contenedor base */
.floating-menu{
  position: fixed;
  bottom: var(--fm-offset-y);
  /* elegir izquierda o derecha según variable --fm-position */
  /* left: calc(var(--fm-position) == 'left' ? var(--fm-offset-x) : auto);
  right: calc(var(--fm-position) == 'right' ? var(--fm-offset-x) : auto);*/
  z-index: 9999;
  font-family: var(--font-family);
}

/* Botón cuadrado */
.fm-toggle{
  display: inline-grid;
  place-items: center;
  width: var(--fm-size);
  height: var(--fm-size);
  background: linear-gradient(180deg, #0b1220, #111827);
  color: var(--fm-foreground);
  border-radius: 0.5rem;
  box-shadow: var(--fm-shadow);
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  position: relative;
  transition: transform var(--fm-transition), box-shadow var(--fm-transition);
}

/* small hover/active effects */
.fm-toggle:hover{ transform: translateY(-3px); }
.fm-toggle:active{ transform: translateY(0); }

/* Svg hamburger styling */
.hamburger { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hamburger rect { fill: currentColor; }

/* Tooltip */
.fm-tooltip{
  position: absolute;
  bottom: calc(var(--fm-size) + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--fm-transition), transform 160ms var(--fm-transition);
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
}

/* Mostrar tooltip on hover or focus (for keyboard users) */
.fm-toggle:hover .fm-tooltip,
.fm-toggle:focus .fm-tooltip,
.fm-toggle[aria-expanded="true"] .fm-tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Cuando el menú está abierto, ocultar el botón hamburguesa */
.floating-menu.open .fm-toggle {
  display: none;
}



/* Panel desplegable */
.fm-panel{
  margin-top: 0.6rem;
  background: var(--fm-bg);
  color: var(--fm-foreground);
  min-width: calc(var(--fm-size) * 3.2);
  max-width: var(--fm-max-width);
  border-radius: 0.85rem;
  padding: 0.6rem;
  box-shadow: var(--fm-shadow);
  transform-origin: bottom right;
  transition: transform var(--fm-transition), opacity var(--fm-transition);
  opacity: 0;
  transform: translateY(8px) scale(.98);
}

/* Cuando abierto (clase añadida por JS) */
.floating-menu.open .fm-panel{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Lista de items */
.fm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  
}
.fm-list a{
  display: block;
  padding: 0.2rem 0.8rem;
  border-radius: 0.55rem;
  text-decoration: none;
  color: var(--fm-foreground);
  background: linear-gradient(180deg, rgba(12, 6, 6, 0.02), transparent);
  transition: background 160ms;
  font-size: 0.95rem;
  background-color: rgb(228, 64, 228);
}
.fm-list a:hover
/*.fm-list a:focus*/
{
  background: linear-gradient(90deg, rgba(248, 248, 241, 0.03), rgba(148, 87, 87, 0.01));
  outline: none;
  background-color:  #0b1220;
}

/* Footer con botón cerrar */
.fm-footer{
  margin-top: 0.6rem;
  display:flex;
  justify-content:flex-end;
}
.fm-close{
  background: transparent;
  color: var(--fm-foreground);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0.4rem 0.7rem;
  border-radius: 0.45rem;
  cursor: pointer;
}

/* Responsive: en pantallas pequeñas mostrar panel full width sobre el botón */
@media (max-width: 520px){
  .fm-panel{
    min-width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    transform-origin: bottom center;
  }
}

/* Posición izquierda (si quieres forzar left) */
.floating-menu.left{
  left: var(--fm-offset-x);
  right: auto;
}

/* Posición derecha (forzar right) */
.floating-menu.right{
  right: var(--fm-offset-x);
  left: auto;
}