/* ============================================================
   ACejemplo.css — con ANIMACIÓN SUAVE
   ============================================================ */

/* Botón Abrir/Cerrar */
.ac-btn {
  background-color: #20948B;
  color: white;
  border: none;
  padding: 6pt 10pt;
  border-radius: 6pt;
  cursor: pointer;
  font-size: 0.95em;
  margin-bottom: 8pt;
  display: inline-block;
}

.ac-btn:hover {
  background-color: #1b7f78;
}

/* Contenedor animado */
.ac-contenido {
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  background-color: #f9fafb;   /* igual que .ejemplo */
  border-radius: 6pt;

  /* Espaciado se anima mejor si está dentro del estado visible */
  padding: 0 12pt;

  /* Animación suave */
  transition:
    max-height 0.5s ease,
    opacity 0.4s ease,
    padding 0.4s ease,
    transform 0.4s ease;

  transform: translateY(-4pt);   /* efecto sutil */
}

/* Estado visible */
.ac-contenido.visible {
  max-height: 1500px;            /* suficiente para cualquier contenido */
  opacity: 1;
  padding: 10pt 12pt;            /* se expande suavemente */
  transform: translateY(0);
}